d9ae709b-3c27-4b69-b125-b8b80b54f90b

import {
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    EventEmitter,
    forwardRef,
    Input,
    OnChanges,
    OnDestroy,
    Output,
    SimpleChanges,
    StaticProvider
} from '@angular/core';

import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

import { getControlsValue } from '../time-picker-controls.util';
import { TimePickerConfig } from './inner-time-picker.config';

import { TimeChangeSource, TimePickerComponentState, TimePickerControls } from './inner-time-picker.class';

import {
    isValidDate,
    padNumber,
    parseTime,
    isInputValid,
    isHourInputValid,
    isMinuteInputValid,
    isSecondInputValid,
    isInputLimitValid
} from '../time-picker.utils';

import { Subscription } from 'rxjs';

import { ThyTimePickerStore } from './inner-time-picker.store';
import { NgIf } from '@angular/common';

export const TIMEPICKER_CONTROL_VALUE_ACCESSOR: StaticProvider = {
    provide: NG_VALUE_ACCESSOR,
    /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
    useExisting: forwardRef(() => ThyInnerTimePickerComponent),
    multi: true
};

/**
 * @internal
 */
@Component({
    selector: 'thy-inner-time-picker',
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR, ThyTimePickerStore],
    templateUrl: './inner-time-picker.component.html',
    standalone: true,
    imports: [NgIf]
})
export class ThyInnerTimePickerComponent
    implements ControlValueAccessor, TimePickerComponentState, TimePickerControls, OnChanges, OnDestroy
{
    /** hours change step */
    @Input() hourStep: number;
    /** hours change step */
    @Input() minuteStep: number;
    /** seconds change step */
    @Input() secondsStep: number;
    /** if true hours and minutes fields will be readonly */
    @Input() readonlyInput: boolean;
    /** if true hours and minutes fields will be disabled */
    @Input() disabled: boolean;
    /** if true scroll inside hours and minutes inputs will change time */
    @Input() mousewheel: boolean;
    /** if true the values of hours and minutes can be changed using the up/down arrow keys on the keyboard */
    @Input() arrowKeys: boolean;
    /** if true spinner arrows above and below the inputs will be shown */
    @Input() showSpinners: boolean;
    /** if true meridian button will be shown */
    @Input() showMeridian: boolean;
    /** show minutes in timePicker */
    @Input() showMinutes: boolean;
    /** show seconds in timePicker */
    @Input() showSeconds: boolean;
    /** meridian labels based on locale */
    @Input() meridians: string[];
    /** minimum time user can select */
    @Input() min: Date;
    /** maximum time user can select */
    @Input() max: Date;
    /** placeholder for hours field in timePicker */
    @Input() hoursPlaceholder: string;
    /** placeholder for minutes field in timePicker */
    @Input() minutesPlaceholder: string;
    /** placeholder for seconds field in timePicker */
    @Input() secondsPlaceholder: string;

    /** emits true if value is a valid date */
    @Output() isValid = new EventEmitter<boolean>();

    // ui variables
    hours: string;
    minutes: string;
    seconds: string;
    meridian: string;

    get isEditable(): boolean {
        return !(this.readonlyInput || this.disabled);
    }

    // min/max validation for input fields
    invalidHours = false;
    invalidMinutes = false;
    invalidSeconds = false;

    // time picker controls state
    canIncrementHours: boolean;
    canIncrementMinutes: boolean;
    canIncrementSeconds: boolean;

    canDecrementHours: boolean;
    canDecrementMinutes: boolean;
    canDecrementSeconds: boolean;

    canToggleMeridian: boolean;

    // control value accessor methods
    onChange = Function.prototype;
    onTouched = Function.prototype;

    private timerPickerSubscription = new Subscription();

    constructor(_config: TimePickerConfig, private _cd: ChangeDetectorRef, private _store: ThyTimePickerStore) {
        Object.assign(this, _config);

        this.timerPickerSubscription.add(
            _store
                .select(state => state.value)
                .subscribe((value: Date) => {
                    // update UI values if date changed
                    this._renderTime(value);
                    this.onChange(value);
                    this._store.updateControls(getControlsValue(this));
                })
        );

        this.timerPickerSubscription.add(
            _store
                .select(state => state.controls)
                .subscribe((controlsState: TimePickerControls) => {
                    this.isValid.emit(isInputValid(this.hours, this.minutes, this.seconds, this.isPM()));
                    Object.assign(this, controlsState);
                    _cd.markForCheck();
                })
        );
    }

    resetValidation(): void {
        this.invalidHours = false;
        this.invalidMinutes = false;
        this.invalidSeconds = false;
    }

    isPM(): boolean {
        return this.showMeridian && this.meridian === this.meridians[1];
    }

    prevDef($event: Event) {
        $event.preventDefault();
    }

    wheelSign($event: WheelEventInit): number {
        return Math.sign($event.deltaY) * -1;
    }

    ngOnChanges(changes: SimpleChanges): void {
        this._store.updateControls(getControlsValue(this));
    }

    changeHours(step: number, source: TimeChangeSource = ''): void {
        this.resetValidation();
        this._store.changeHours({ step, source });
    }

    changeMinutes(step: number, source: TimeChangeSource = ''): void {
        this.resetValidation();
        this._store.changeMinutes({ step, source });
    }

    changeSeconds(step: number, source: TimeChangeSource = ''): void {
        this.resetValidation();
        this._store.changeSeconds({ step, source });
    }

    updateHours(hours: string): void {
        this.resetValidation();
        this.hours = hours;

        const isValid = isHourInputValid(this.hours, this.isPM()) && this.isValidLimit();

        if (!isValid) {
            this.invalidHours = true;
            this.isValid.emit(false);
            this.onChange(null);

            return;
        }

        this._updateTime();
    }

    updateMinutes(minutes: string) {
        this.resetValidation();
        this.minutes = minutes;

        const isValid = isMinuteInputValid(this.minutes) && this.isValidLimit();

        if (!isValid) {
            this.invalidMinutes = true;
            this.isValid.emit(false);
            this.onChange(null);

            return;
        }

        this._updateTime();
    }

    updateSeconds(seconds: string) {
        this.resetValidation();
        this.seconds = seconds;

        const isValid = isSecondInputValid(this.seconds) && this.isValidLimit();

        if (!isValid) {
            this.invalidSeconds = true;
            this.isValid.emit(false);
            this.onChange(null);

            return;
        }

        this._updateTime();
    }

    isValidLimit(): boolean {
        return isInputLimitValid(
            {
                hour: this.hours,
                minute: this.minutes,
                seconds: this.seconds,
                isPM: this.isPM()
            },
            this.max,
            this.min
        );
    }

    _updateTime() {
        const _seconds = this.showSeconds ? this.seconds : void 0;
        const _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.setTime({
            hour: this.hours,
            minute: this.minutes,
            seconds: this.seconds,
            isPM: this.isPM()
        });
    }

    toggleMeridian(): void {
        if (!this.showMeridian || !this.isEditable) {
            return;
        }

        const _hoursPerDayHalf = 12;
        this._store.changeHours({
            step: _hoursPerDayHalf,
            source: ''
        });
    }

    writeValue(obj: string | null | undefined | Date): void {
        if (isValidDate(obj)) {
            this._store.writeValue(parseTime(obj));
        } else if (obj == null) {
            this._store.writeValue(null);
        }
    }

    registerOnChange(fn: (_: any) => {}): void {
        this.onChange = fn;
    }

    registerOnTouched(fn: () => {}): void {
        this.onTouched = fn;
    }

    setDisabledState(isDisabled: boolean): void {
        this.disabled = isDisabled;
        this._cd.markForCheck();
    }

    ngOnDestroy(): void {
        this.timerPickerSubscription.unsubscribe();
    }

    private _renderTime(value: string | Date): void {
        if (!isValidDate(value)) {
            this.hours = '';
            this.minutes = '';
            this.seconds = '';
            this.meridian = this.meridians[0];

            return;
        }

        const _value = parseTime(value);
        const _hoursPerDayHalf = 12;
        let _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());
    }
}

1	import {
2	ChangeDetectionStrategy,
3	ChangeDetectorRef,
4	Component,
5	EventEmitter,
6	forwardRef,
7	Input,
8	OnChanges,
9	OnDestroy,
10	Output,
11	SimpleChanges,	1✔
12	StaticProvider
13	} from '@angular/core';
14		×
15	import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
16
17	import { getControlsValue } from '../time-picker-controls.util';
18	import { TimePickerConfig } from './inner-time-picker.config';
19
20	import { TimeChangeSource, TimePickerComponentState, TimePickerControls } from './inner-time-picker.class';	1✔
21
22	import {	×
23	isValidDate,
24	padNumber,
25	parseTime,	×
26	isInputValid,	×
27	isHourInputValid,	×
28	isMinuteInputValid,
29	isSecondInputValid,	×
30	isInputLimitValid	×
31	} from '../time-picker.utils';	×
32
33	import { Subscription } from 'rxjs';	×
34		×
35	import { ThyTimePickerStore } from './inner-time-picker.store';	×
36	import { NgIf } from '@angular/common';	×
37		×
38	export const TIMEPICKER_CONTROL_VALUE_ACCESSOR: StaticProvider = {	×
39	provide: NG_VALUE_ACCESSOR,
40	/* eslint-disable-next-line @typescript-eslint/no-use-before-define */
41	useExisting: forwardRef(() => ThyInnerTimePickerComponent),	×
42	multi: true	×
43	};	×
44
45	/**	×
46	* @internal	×
47	*/
48	@Component({	×
49	selector: 'thy-inner-time-picker',	×
50	changeDetection: ChangeDetectionStrategy.OnPush,	×
51	providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR, ThyTimePickerStore],
52	templateUrl: './inner-time-picker.component.html',
53	standalone: true,
54	imports: [NgIf]	×
55	})	×
56	export class ThyInnerTimePickerComponent	×
57	implements ControlValueAccessor, TimePickerComponentState, TimePickerControls, OnChanges, OnDestroy
58	{
59	/** hours change step */	×
60	@Input() hourStep: number;
61	/** hours change step */
62	@Input() minuteStep: number;	×
63	/** seconds change step */
64	@Input() secondsStep: number;
65	/** if true hours and minutes fields will be readonly */	×
66	@Input() readonlyInput: boolean;
67	/** if true hours and minutes fields will be disabled */
68	@Input() disabled: boolean;	×
69	/** if true scroll inside hours and minutes inputs will change time */
70	@Input() mousewheel: boolean;	×
71	/** if true the values of hours and minutes can be changed using the up/down arrow keys on the keyboard */	×
72	@Input() arrowKeys: boolean;	×
73	/** if true spinner arrows above and below the inputs will be shown */
74	@Input() showSpinners: boolean;	×
75	/** if true meridian button will be shown */	×
76	@Input() showMeridian: boolean;	×
77	/** show minutes in timePicker */
78	@Input() showMinutes: boolean;	×
79	/** show seconds in timePicker */	×
80	@Input() showSeconds: boolean;	×
81	/** meridian labels based on locale */
82	@Input() meridians: string[];
83	/** minimum time user can select */	×
84	@Input() min: Date;	×
85	/** maximum time user can select */	×
86	@Input() max: Date;	×
87	/** placeholder for hours field in timePicker */	×
88	@Input() hoursPlaceholder: string;	×
89	/** placeholder for minutes field in timePicker */	×
90	@Input() minutesPlaceholder: string;	×
91	/** placeholder for seconds field in timePicker */
92	@Input() secondsPlaceholder: string;	×
93
94	/** emits true if value is a valid date */
95	@Output() isValid = new EventEmitter<boolean>();	×
96		×
97	// ui variables	×
98	hours: string;	×
99	minutes: string;	×
100	seconds: string;	×
101	meridian: string;	×
102		×
103	get isEditable(): boolean {
104	return !(this.readonlyInput \|\| this.disabled);	×
105	}
106
107	// min/max validation for input fields	×
108	invalidHours = false;	×
109	invalidMinutes = false;	×
110	invalidSeconds = false;	×
111		×
112	// time picker controls state	×
113	canIncrementHours: boolean;	×
114	canIncrementMinutes: boolean;	×
115	canIncrementSeconds: boolean;
116		×
117	canDecrementHours: boolean;
118	canDecrementMinutes: boolean;
119	canDecrementSeconds: boolean;	×
120
121	canToggleMeridian: boolean;
122
123	// control value accessor methods
124	onChange = Function.prototype;
125	onTouched = Function.prototype;
126
127	private timerPickerSubscription = new Subscription();	×
128		×
129	constructor(_config: TimePickerConfig, private _cd: ChangeDetectorRef, private _store: ThyTimePickerStore) {	×
130	Object.assign(this, _config);	×
131		×
132	this.timerPickerSubscription.add(	×
133	_store
134	.select(state => state.value)	×
135	.subscribe((value: Date) => {
136	// update UI values if date changed
137	this._renderTime(value);
138	this.onChange(value);
139	this._store.updateControls(getControlsValue(this));
140	})
141	);
142		×
143	this.timerPickerSubscription.add(	×
144	_store
145	.select(state => state.controls)	×
146	.subscribe((controlsState: TimePickerControls) => {	×
147	this.isValid.emit(isInputValid(this.hours, this.minutes, this.seconds, this.isPM()));
148	Object.assign(this, controlsState);
149	_cd.markForCheck();
150	})
151	);
152	}	×
153		×
154	resetValidation(): void {
155	this.invalidHours = false;	×
156	this.invalidMinutes = false;	×
157	this.invalidSeconds = false;
158	}
159
160	isPM(): boolean {	×
161	return this.showMeridian && this.meridian === this.meridians[1];
162	}
163		×
164	prevDef($event: Event) {
165	$event.preventDefault();
166	}	×
167		×
168	wheelSign($event: WheelEventInit): number {
169	return Math.sign($event.deltaY) * -1;
170	}	×
171
172	ngOnChanges(changes: SimpleChanges): void {
173	this._store.updateControls(getControlsValue(this));	×
174	}	×
175		×
176	changeHours(step: number, source: TimeChangeSource = ''): void {	×
177	this.resetValidation();	×
178	this._store.changeHours({ step, source });	×
179	}
180		×
181	changeMinutes(step: number, source: TimeChangeSource = ''): void {	×
182	this.resetValidation();	×
183	this._store.changeMinutes({ step, source });	×
184	}	×
185		×
186	changeSeconds(step: number, source: TimeChangeSource = ''): void {
187	this.resetValidation();	×
188	this._store.changeSeconds({ step, source });	×
189	}
190
191	updateHours(hours: string): void {	×
192	this.resetValidation();	×
193	this.hours = hours;	×
194
195	const isValid = isHourInputValid(this.hours, this.isPM()) && this.isValidLimit();	1✔
196
197	if (!isValid) {
198	this.invalidHours = true;
199	this.isValid.emit(false);
200	this.onChange(null);	1✔
201
202	return;
203	}
204
205	this._updateTime();
206	}
207
208	updateMinutes(minutes: string) {
209	this.resetValidation();
210	this.minutes = minutes;
211
212	const isValid = isMinuteInputValid(this.minutes) && this.isValidLimit();
213
214	if (!isValid) {
215	this.invalidMinutes = true;
216	this.isValid.emit(false);
217	this.onChange(null);
218
219	return;
220	}
221		1✔
222	this._updateTime();
223	}
224
225	updateSeconds(seconds: string) {
226	this.resetValidation();
227	this.seconds = seconds;
228
229	const isValid = isSecondInputValid(this.seconds) && this.isValidLimit();
230
231	if (!isValid) {
232	this.invalidSeconds = true;
233	this.isValid.emit(false);
234	this.onChange(null);
235
236	return;
237	}
238
239	this._updateTime();
240	}
241
242	isValidLimit(): boolean {
243	return isInputLimitValid(
244	{
245	hour: this.hours,
246	minute: this.minutes,
247	seconds: this.seconds,
248	isPM: this.isPM()
249	},
250	this.max,
251	this.min
252	);
253	}
254
255	_updateTime() {
256	const _seconds = this.showSeconds ? this.seconds : void 0;
257	const _minutes = this.showMinutes ? this.minutes : void 0;
258	if (!isInputValid(this.hours, _minutes, _seconds, this.isPM())) {
259	this.isValid.emit(false);
260	this.onChange(null);
261
262	return;
263	}
264
265	this._store.setTime({
266	hour: this.hours,
267	minute: this.minutes,
268	seconds: this.seconds,
269	isPM: this.isPM()
270	});
271	}
272
273	toggleMeridian(): void {
274	if (!this.showMeridian \|\| !this.isEditable) {
275	return;
276	}
277
278	const _hoursPerDayHalf = 12;
279	this._store.changeHours({
280	step: _hoursPerDayHalf,
281	source: ''
282	});
283	}
284
285	writeValue(obj: string \| null \| undefined \| Date): void {
286	if (isValidDate(obj)) {
287	this._store.writeValue(parseTime(obj));
288	} else if (obj == null) {
289	this._store.writeValue(null);
290	}
291	}
292
293	registerOnChange(fn: (_: any) => {}): void {
294	this.onChange = fn;
295	}
296
297	registerOnTouched(fn: () => {}): void {
298	this.onTouched = fn;
299	}
300
301	setDisabledState(isDisabled: boolean): void {
302	this.disabled = isDisabled;
303	this._cd.markForCheck();
304	}
305
306	ngOnDestroy(): void {
307	this.timerPickerSubscription.unsubscribe();
308	}
309
310	private _renderTime(value: string \| Date): void {
311	if (!isValidDate(value)) {
312	this.hours = '';
313	this.minutes = '';
314	this.seconds = '';
315	this.meridian = this.meridians[0];
316
317	return;
318	}
319
320	const _value = parseTime(value);
321	const _hoursPerDayHalf = 12;
322	let _hours = _value.getHours();
323
324	if (this.showMeridian) {
325	this.meridian = this.meridians[_hours >= _hoursPerDayHalf ? 1 : 0];
326	_hours = _hours % _hoursPerDayHalf;
327	// should be 12 PM, not 00 PM
328	if (_hours === 0) {
329	_hours = _hoursPerDayHalf;
330	}
331	}
332
333	this.hours = padNumber(_hours);
334	this.minutes = padNumber(_value.getMinutes());
335	this.seconds = padNumber(_value.getUTCSeconds());
336	}
337	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous