/**----------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the project root for more information *-------------------------------------------------------------------------------------------*/ import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, TemplateRef, ViewContainerRef, OnInit, OnChanges, OnDestroy, Renderer2, Injector, AfterViewInit } from '@angular/core'; import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms'; import { LocalizationService } from '@progress/kendo-angular-l10n'; import { PopupService, PopupRef } from '@progress/kendo-angular-popup'; import { MultiTabStop } from '@progress/kendo-angular-common'; import { AdaptiveSize, AdaptiveService } from '@progress/kendo-angular-utils'; import { DateInputFormatPlaceholder } from '../dateinput/models/format-placeholder.model'; import { IntlService } from '@progress/kendo-angular-intl'; import { PickerService } from '../common/picker.service'; import { TimePickerIncrementalSteps } from './models/incremental-steps.model'; import { TimeSelectorComponent } from './timeselector.component'; import { DateInputComponent } from '../dateinput/dateinput.component'; import { PopupSettings } from '../popup-settings.model'; import { PreventableEvent } from '../preventable-event'; import { AdaptiveMode } from '../util'; import { DateInputSize } from '../common/models/size'; import { DateInputRounded } from '../common/models/rounded'; import { DateInputFillMode } from '../common/models/fillmode'; import { BusViewService } from '../calendar/services/bus-view.service'; import { SVGIcon } from '@progress/kendo-svg-icons'; import { ActionSheetComponent } from '@progress/kendo-angular-navigation'; import * as i0 from "@angular/core"; /** * Represents the [Kendo UI TimePicker component for Angular](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker). * * @example * ```typescript * @Component({ * selector: 'my-app', * template: ` * * ` * }) * export class AppComponent { * public selectedTime: Date = new Date(); * } * ``` * * @remarks * Supported children components are: {@link TimePickerCustomMessagesComponent}. */ export declare class TimePickerComponent extends MultiTabStop implements ControlValueAccessor, OnInit, AfterViewInit, OnChanges, OnDestroy, Validator { private bus; zone: NgZone; localization: LocalizationService; private cdr; private popupService; wrapper: ElementRef; private renderer; private injector; private pickerService; private intl; private adaptiveService; /** * @hidden */ clockIcon: SVGIcon; container: ViewContainerRef; popupTemplate: TemplateRef; toggleButton: ElementRef; actionSheet: ActionSheetComponent; /** * @hidden */ focusableId: string; /** * Determines whether the TimePicker is disabled * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/disabled-state)). * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/forms#managing-the-timepicker-disabled-state-in-reactive-forms). * * @default false */ disabled: boolean; /** * Determines the read-only state of the TimePicker * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/readonly-state#read-only-timepicker)). * * @default false */ readonly: boolean; /** * Sets the read-only state of the TimePicker input field * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/readonly-state#read-only-input)). * * If you set the [`readonly`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/timepickercomponent#readonly) property value to `true`, * the input will be rendered in a read-only state regardless of the `readOnlyInput` value. * @default false */ readOnlyInput: boolean; /** * If set to `true`, renders a clear button after the input text or TimePicker value has been changed. * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event. * @default false */ clearButton: boolean; /** * Specifies the time format that is used to display the input value * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/formats)). * @default 't' */ format: string; /** * Defines the descriptions of the format sections in the input field. * For more information, refer to the article on * [placeholders](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/placeholders). */ formatPlaceholder: DateInputFormatPlaceholder; /** * Specifies the hint the TimePicker displays when its value is `null`. * For more information, refer to the article on * [placeholders](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/placeholders). * @default null */ placeholder: string; /** * Specifies the smallest valid time value * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/time-ranges)). * @default `00:00:00` */ set min(min: Date); get min(): Date; /** * Specifies the biggest valid time value * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/time-ranges)). * @default `23:59:59` */ set max(max: Date); get max(): Date; /** * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated. * * @default false */ incompleteDateValidation: boolean; /** * Determines whether to automatically move to the next segment after the user completes the current one. * * @default true */ autoSwitchParts: boolean; /** * A string array representing custom keys, which will move the focus to the next date format segment. */ autoSwitchKeys: string[]; /** * Indicates whether the mouse scroll can be used to increase/decrease the time segments values. * * @default true */ enableMouseWheel: boolean; /** * Determines if the users should see a blinking caret inside the Date Input when possible. * * @default false */ allowCaretMode: boolean; /** * Determines whether to display the **Cancel** button in the popup. * * @default true */ cancelButton: boolean; /** * Determines whether to display the **Now** button in the popup. * * If the current time is out of range or the incremental step is greater than `1`, the **Now** button will be hidden. * * @default true */ nowButton: boolean; /** * Configures the incremental steps of the TimePicker. * For more information, refer to the article on * [incremental steps](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/incremental-steps). * * If the incremental step is greater than `1`, the **Now** button will be hidden. */ set steps(steps: TimePickerIncrementalSteps); get steps(): TimePickerIncrementalSteps; /** * Configures the popup of the TimePicker. * * The available options are animate which controls the popup animation and by default, the open and close animations are enabled. * The `appendTo` option controls the popup container and by default, the popup will be appended to the root component. * The `popupClass` option specifies a list of CSS classes that are used to style the popup. */ set popupSettings(settings: PopupSettings); get popupSettings(): PopupSettings; /** * Sets the tabindex of the TimePicker component. * @default 0 */ tabindex: number; /** * @hidden */ set tabIndex(tabIndex: number); get tabIndex(): number; /** * Sets the title of the input element of the TimePicker and the title text rendered * in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/adaptivemode). */ adaptiveTitle: string; /** * Sets the subtitle text rendered in the header of the popup(action sheet). * Applicable only when [`AdaptiveMode` is set to `auto`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/adaptivemode). * By default, subtitle is not rendered. */ adaptiveSubtitle: string; /** * Determines whether the built-in min or max validators are enforced when a form is being validated. * * @default true */ rangeValidation: boolean; /** * Determines whether the TimePicker is in adaptive mode. * @default 'none' */ adaptiveMode: AdaptiveMode; /** * Determines whether the TimePicker is in adaptive mode. * * The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance or `null`. */ set value(value: Date | null); get value(): Date | null; /** * Sets the size of the component. The default value is set by the Kendo theme. */ set size(size: DateInputSize); get size(): DateInputSize; /** * Sets the rounded styling of the component. The default value is set by the Kendo theme. * */ set rounded(rounded: DateInputRounded); get rounded(): DateInputRounded; /** * Sets the fillMode of the component. The default value is set by the Kendo theme. */ set fillMode(fillMode: DateInputFillMode); get fillMode(): DateInputFillMode; /** * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed. * * @remarks * This property is related to accessibility. */ inputAttributes: { [key: string]: string; }; /** * Fires each time the user selects a new value * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/events)). */ valueChange: EventEmitter; /** * Fires each time the user focuses the input element * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/events)). */ onFocus: EventEmitter; /** * Fires each time the input element gets blurred * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/events)). */ onBlur: EventEmitter; /** * Fires each time the popup is about to open * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/events)). * This event is preventable. If you cancel the event, the popup will remain closed. */ open: EventEmitter; /** * Fires each time the popup is about to close * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/events)). * This event is preventable. If you cancel the event, the popup will remain open. */ close: EventEmitter; /** * @hidden */ escape: EventEmitter; /** * @hidden */ wrapperClasses: boolean; /** * @hidden */ get disabledClass(): boolean; get popupUID(): string; popupRef: PopupRef; /** * @hidden */ checkIcon: SVGIcon; get isActive(): boolean; set isActive(value: boolean); get show(): boolean; set show(show: boolean); get dateInput(): DateInputComponent; get timeSelector(): TimeSelectorComponent; /** * @hidden */ get isControlRequired(): boolean; /** * @hidden */ windowSize: AdaptiveSize; private get adaptiveAcceptButton(); private get adaptiveCancelButton(); private get inputElement(); private onControlChange; private onControlTouched; private onValidatorChange; private resolvedPromise; private timeRangeValidateFn; private incompleteValidator; private _min; private _max; private _popupSettings; private _show; private _steps; private _value; private _active; private localizationChangeSubscription; private pickerSubscriptions; private windowBlurSubscription; private control; private domEvents; private _size; private _rounded; private _fillMode; constructor(bus: BusViewService, zone: NgZone, localization: LocalizationService, cdr: ChangeDetectorRef, popupService: PopupService, wrapper: ElementRef, renderer: Renderer2, injector: Injector, pickerService: PickerService, intl: IntlService, adaptiveService: AdaptiveService); /** * @hidden * Used by the TextBoxContainer to determine if the component is empty */ isEmpty(): boolean; /** * @hidden */ ngOnInit(): void; /** * @hidden */ ngAfterViewInit(): void; /** * @hidden */ ngOnChanges(changes: any): void; /** * @hidden */ ngOnDestroy(): void; /** * @hidden */ handleKeydown(event: KeyboardEvent): void; /** * @hidden */ writeValue(value: Date): void; /** * @hidden */ registerOnChange(fn: any): void; /** * @hidden */ registerOnTouched(fn: any): void; /** * @hidden */ setDisabledState(isDisabled: boolean): void; /** * @hidden */ validate(control: AbstractControl): { [key: string]: any; }; /** * @hidden */ registerOnValidatorChange(fn: Function): void; /** * Focuses the TimePicker component. * */ focus(): void; /** * Blurs the TimePicker component. * */ blur(): void; /** * Toggles the visibility of the popup or ActionSheet. * If you use the `toggle` method to show or hide the popup or ActionSheet, the `open` and `close` events do not fire. * * @param {boolean} show The state of the popup. */ toggle(show?: boolean): void; /** * Returns whether the component is currently open. * That is when the popup or ActionSheet is open. */ get isOpen(): boolean; /** * @hidden */ get appendTo(): ViewContainerRef; /** * @hidden */ handleChange(value: Date): void; /** * @hidden */ handleActionSheetAccept(): void; /** * @hidden */ handleActionSheetCollapse(): void; /** * @hidden */ handleReject(): void; /** * @hidden */ handleInputChange(value: Date): void; /** * @hidden */ handleDateInputClick(): void; /** * @hidden */ onTabOutNow(): void; /** * @hidden */ handleMousedown(args: any): void; /** * @hidden */ handleIconClick(event: MouseEvent): void; /** * @hidden */ get popupClasses(): string[]; /** * @hidden */ get isAdaptiveModeEnabled(): boolean; /** * @hidden */ get isAdaptive(): boolean; /** * @hidden */ normalizeTime(date: Date): Date; /** * @hidden */ mergeTime(value: Date): Date; /** * @hidden */ onResize(): void; /** * @hidden */ onTabOutLastPart(): void; /** * @hidden */ onTabOutFirstPart(): void; private toggleTimeSelector; private toggleActionSheet; private togglePopup; private focusInput; private toggleFocus; private verifyValue; private verifyFormat; private bindEvents; private handleWindowBlur; private handleFocus; private handleBlur; private blurComponent; private handleDateCompletenessChange; private setComponentClasses; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; }