ngx-bootstrap 7.0.1 → 8.0.0-RC.1

package/timepicker/fesm2015/ngx-bootstrap-timepicker.mjs

@@ -0,0 +1,856 @@
+import * as i0 from '@angular/core';
+import { Injectable, forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { BehaviorSubject } from 'rxjs';
+import { MiniStore, MiniState } from 'ngx-bootstrap/mini-ngrx';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+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';
+    }
+}
+TimepickerConfig.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TimepickerConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TimepickerConfig.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TimepickerConfig, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TimepickerConfig, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class TimepickerActions {
+    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
+        };
+    }
+}
+TimepickerActions.WRITE_VALUE = '[timepicker] write value from ng model';
+TimepickerActions.CHANGE_HOURS = '[timepicker] change hours';
+TimepickerActions.CHANGE_MINUTES = '[timepicker] change minutes';
+TimepickerActions.CHANGE_SECONDS = '[timepicker] change seconds';
+TimepickerActions.SET_TIME_UNIT = '[timepicker] set time unit';
+TimepickerActions.UPDATE_CONTROLS = '[timepicker] update controls';
+TimepickerActions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TimepickerActions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TimepickerActions.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TimepickerActions, providedIn: 'platform' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TimepickerActions, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'platform' }]
+        }] });
+
+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);
+    }
+}
+TimepickerStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TimepickerStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TimepickerStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TimepickerStore, providedIn: 'platform' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TimepickerStore, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'platform' }]
+        }], ctorParameters: function () { return []; } });
+
+const TIMEPICKER_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => TimepickerComponent),
+    multi: true
+};
+class TimepickerComponent {
+    constructor(_config, _cd, _store, _timepickerActions) {
+        this._cd = _cd;
+        this._store = _store;
+        this._timepickerActions = _timepickerActions;
+        /** hours change step */
+        this.hourStep = 1;
+        /** minutes change step */
+        this.minuteStep = 5;
+        /** seconds change step */
+        this.secondsStep = 10;
+        /** 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 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;
+        /** if true meridian button will be shown */
+        this.showMeridian = true;
+        /** show minutes in timepicker */
+        this.showMinutes = true;
+        /** show seconds in timepicker */
+        this.showSeconds = false;
+        /** meridian labels based on locale */
+        this.meridians = ['AM', 'PM'];
+        /** 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';
+        /** emits true if value is a valid date */
+        this.isValid = new EventEmitter();
+        /** emits value of meridian*/
+        this.meridianChange = new EventEmitter();
+        // ui variables
+        this.hours = '';
+        this.minutes = '';
+        this.seconds = '';
+        this.meridian = '';
+        // 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;
+        Object.assign(this, this.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)));
+        });
+        _store.select(state => state.controls)
+            .subscribe((controlsState) => {
+            const isTimepickerInputValid = isInputValid(this.hours, this.minutes, this.seconds, this.isPM());
+            const isValid = this.config.allowEmptyTime ?
+                this.isOneOfDatesIsEmpty() || isTimepickerInputValid
+                : isTimepickerInputValid;
+            this.isValid.emit(isValid);
+            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)));
+    }
+    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 isValid = this.config.allowEmptyTime ?
+            this.isOneOfDatesIsEmpty() || isTimepickerInputValid
+            : isTimepickerInputValid;
+        if (!isValid) {
+            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 isValid = this.config.allowEmptyTime ?
+            this.isOneOfDatesIsEmpty() || isTimepickerInputValid
+            : isTimepickerInputValid;
+        if (!isValid) {
+            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 isValid = this.config.allowEmptyTime ?
+            this.isOneOfDatesIsEmpty() || isTimepickerInputValid
+            : isTimepickerInputValid;
+        if (!isValid) {
+            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 isValid = this.config.allowEmptyTime ?
+            this.isOneOfDatesIsEmpty() || isTimepickerInputValid
+            : isTimepickerInputValid;
+        if (!isValid) {
+            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() {
+        var _a;
+        (_a = this.timepickerSub) === null || _a === void 0 ? void 0 : _a.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());
+    }
+}
+TimepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TimepickerComponent, deps: [{ token: TimepickerConfig }, { token: i0.ChangeDetectorRef }, { token: TimepickerStore }, { token: TimepickerActions }], target: i0.ɵɵFactoryTarget.Component });
+TimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: TimepickerComponent, selector: "timepicker", inputs: { hourStep: "hourStep", minuteStep: "minuteStep", secondsStep: "secondsStep", readonlyInput: "readonlyInput", disabled: "disabled", mousewheel: "mousewheel", arrowkeys: "arrowkeys", showSpinners: "showSpinners", showMeridian: "showMeridian", showMinutes: "showMinutes", showSeconds: "showSeconds", meridians: "meridians", min: "min", max: "max", hoursPlaceholder: "hoursPlaceholder", minutesPlaceholder: "minutesPlaceholder", secondsPlaceholder: "secondsPlaceholder" }, outputs: { isValid: "isValid", meridianChange: "meridianChange" }, providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR, TimepickerStore], 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      ><span class=\"bs-chevron bs-chevron-up\"></span></a>\n    </td>\n    <!-- divider -->\n    <td *ngIf=\"showMinutes\">&nbsp;&nbsp;&nbsp;</td>\n    <!-- increment minutes button -->\n    <td *ngIf=\"showMinutes\">\n      <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementMinutes || !isEditable\"\n         (click)=\"changeMinutes(minuteStep)\"\n      ><span class=\"bs-chevron bs-chevron-up\"></span></a>\n    </td>\n    <!-- divider -->\n    <td *ngIf=\"showSeconds\">&nbsp;</td>\n    <!-- increment seconds button -->\n    <td *ngIf=\"showSeconds\">\n      <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementSeconds || !isEditable\"\n         (click)=\"changeSeconds(secondsStep)\">\n        <span class=\"bs-chevron bs-chevron-up\"></span>\n      </a>\n    </td>\n    <!-- space between -->\n    <td *ngIf=\"showMeridian\">&nbsp;&nbsp;&nbsp;</td>\n    <!-- meridian placeholder-->\n    <td *ngIf=\"showMeridian\"></td>\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    <td *ngIf=\"showMinutes\">&nbsp;:&nbsp;</td>\n    <!-- minutes -->\n    <td class=\"form-group mb-3\" *ngIf=\"showMinutes\" [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    <!-- divider -->\n    <td *ngIf=\"showSeconds\">&nbsp;:&nbsp;</td>\n    <!-- seconds -->\n    <td class=\"form-group mb-3\" *ngIf=\"showSeconds\" [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    <!-- space between -->\n    <td *ngIf=\"showMeridian\">&nbsp;&nbsp;&nbsp;</td>\n    <!-- meridian -->\n    <td *ngIf=\"showMeridian\">\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  </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        <span class=\"bs-chevron bs-chevron-down\"></span>\n      </a>\n    </td>\n    <!-- divider -->\n    <td *ngIf=\"showMinutes\">&nbsp;&nbsp;&nbsp;</td>\n    <!-- decrement minutes button-->\n    <td *ngIf=\"showMinutes\">\n      <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementMinutes || !isEditable\"\n         (click)=\"changeMinutes(-minuteStep)\">\n        <span class=\"bs-chevron bs-chevron-down\"></span>\n      </a>\n    </td>\n    <!-- divider -->\n    <td *ngIf=\"showSeconds\">&nbsp;</td>\n    <!-- decrement seconds button-->\n    <td *ngIf=\"showSeconds\">\n      <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementSeconds || !isEditable\"\n         (click)=\"changeSeconds(-secondsStep)\">\n        <span class=\"bs-chevron bs-chevron-down\"></span>\n      </a>\n    </td>\n    <!-- space between -->\n    <td *ngIf=\"showMeridian\">&nbsp;&nbsp;&nbsp;</td>\n    <!-- meridian placeholder-->\n    <td *ngIf=\"showMeridian\"></td>\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{transform:rotate(45deg);top:2px}.bs-chevron-down{transform:rotate(-135deg);top:-2px}.bs-timepicker-field{width:65px;padding:.375rem .55rem}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TimepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'timepicker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR, TimepickerStore], 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;
+    }
+  `], encapsulation: ViewEncapsulation.None, 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      ><span class=\"bs-chevron bs-chevron-up\"></span></a>\n    </td>\n    <!-- divider -->\n    <td *ngIf=\"showMinutes\">&nbsp;&nbsp;&nbsp;</td>\n    <!-- increment minutes button -->\n    <td *ngIf=\"showMinutes\">\n      <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementMinutes || !isEditable\"\n         (click)=\"changeMinutes(minuteStep)\"\n      ><span class=\"bs-chevron bs-chevron-up\"></span></a>\n    </td>\n    <!-- divider -->\n    <td *ngIf=\"showSeconds\">&nbsp;</td>\n    <!-- increment seconds button -->\n    <td *ngIf=\"showSeconds\">\n      <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementSeconds || !isEditable\"\n         (click)=\"changeSeconds(secondsStep)\">\n        <span class=\"bs-chevron bs-chevron-up\"></span>\n      </a>\n    </td>\n    <!-- space between -->\n    <td *ngIf=\"showMeridian\">&nbsp;&nbsp;&nbsp;</td>\n    <!-- meridian placeholder-->\n    <td *ngIf=\"showMeridian\"></td>\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    <td *ngIf=\"showMinutes\">&nbsp;:&nbsp;</td>\n    <!-- minutes -->\n    <td class=\"form-group mb-3\" *ngIf=\"showMinutes\" [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    <!-- divider -->\n    <td *ngIf=\"showSeconds\">&nbsp;:&nbsp;</td>\n    <!-- seconds -->\n    <td class=\"form-group mb-3\" *ngIf=\"showSeconds\" [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    <!-- space between -->\n    <td *ngIf=\"showMeridian\">&nbsp;&nbsp;&nbsp;</td>\n    <!-- meridian -->\n    <td *ngIf=\"showMeridian\">\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  </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        <span class=\"bs-chevron bs-chevron-down\"></span>\n      </a>\n    </td>\n    <!-- divider -->\n    <td *ngIf=\"showMinutes\">&nbsp;&nbsp;&nbsp;</td>\n    <!-- decrement minutes button-->\n    <td *ngIf=\"showMinutes\">\n      <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementMinutes || !isEditable\"\n         (click)=\"changeMinutes(-minuteStep)\">\n        <span class=\"bs-chevron bs-chevron-down\"></span>\n      </a>\n    </td>\n    <!-- divider -->\n    <td *ngIf=\"showSeconds\">&nbsp;</td>\n    <!-- decrement seconds button-->\n    <td *ngIf=\"showSeconds\">\n      <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementSeconds || !isEditable\"\n         (click)=\"changeSeconds(-secondsStep)\">\n        <span class=\"bs-chevron bs-chevron-down\"></span>\n      </a>\n    </td>\n    <!-- space between -->\n    <td *ngIf=\"showMeridian\">&nbsp;&nbsp;&nbsp;</td>\n    <!-- meridian placeholder-->\n    <td *ngIf=\"showMeridian\"></td>\n  </tr>\n  </tbody>\n</table>\n" }]
+        }], ctorParameters: function () { return [{ type: TimepickerConfig }, { type: i0.ChangeDetectorRef }, { type: TimepickerStore }, { type: TimepickerActions }]; }, 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
+            }], hoursPlaceholder: [{
+                type: Input
+            }], minutesPlaceholder: [{
+                type: Input
+            }], secondsPlaceholder: [{
+                type: Input
+            }], isValid: [{
+                type: Output
+            }], meridianChange: [{
+                type: Output
+            }] } });
+
+class TimepickerModule {
+    static forRoot() {
+        return {
+            ngModule: TimepickerModule,
+            providers: [TimepickerActions, TimepickerStore]
+        };
+    }
+}
+TimepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TimepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TimepickerModule, declarations: [TimepickerComponent], imports: [CommonModule], exports: [TimepickerComponent] });
+TimepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TimepickerModule, providers: [TimepickerStore], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TimepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [TimepickerComponent],
+                    exports: [TimepickerComponent],
+                    providers: [TimepickerStore]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TimepickerActions, TimepickerComponent, TimepickerConfig, TimepickerModule, TimepickerStore };
+//# sourceMappingURL=ngx-bootstrap-timepicker.mjs.map