@progress/kendo-angular-dateinputs 17.0.0-develop.9 → 17.0.1-develop.1

package/{esm2020 → esm2022}/timepicker/timepicker.component.mjs

@@ -42,190 +42,127 @@ const VALUE_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/date
 const INTL_DATE_FORMAT = 'https://github.com/telerik/kendo-intl/blob/master/docs/date-formatting/index.md';
 const formatRegExp = new RegExp(`${TIME_PART.hour}|${TIME_PART.minute}|${TIME_PART.second}|${TIME_PART.millisecond}|${TIME_PART.dayperiod}|literal`);
 const ACCEPT_BUTTON_SELECTOR = '.k-button.k-time-accept';
+const CANCEL_BUTTON_SELECTOR = '.k-button.k-time-cancel';
 /**
  * Represents the [Kendo UI TimePicker component for Angular](slug:overview_timepicker).
  */
 export class TimePickerComponent extends MultiTabStop {
-    constructor(bus, zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, intl) {
-        super();
-        this.bus = bus;
-        this.zone = zone;
-        this.localization = localization;
-        this.cdr = cdr;
-        this.popupService = popupService;
-        this.wrapper = wrapper;
-        this.renderer = renderer;
-        this.injector = injector;
-        this.pickerService = pickerService;
-        this.intl = intl;
-        /**
-         * @hidden
-         */
-        this.clockIcon = clockIcon;
-        /**
-         * Sets or gets the `disabled` property of the TimePicker and
-         * determines whether the component is active
-         * ([see example]({% slug disabled_timepicker %})).
-         * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_timepicker#toc-managing-the-timepicker-disabled-state-in-reactive-forms).
-         */
-        this.disabled = false;
-        /**
-         * Sets the read-only state of the TimePicker
-         * ([see example]({% slug readonly_timepicker %}#toc-read-only-timepicker)).
-         *
-         * @default false
-         */
-        this.readonly = false;
-        /**
-         * Sets the read-only state of the TimePicker input field
-         * ([see example]({% slug readonly_timepicker %}#toc-read-only-input)).
-         *
-         * > Note that if you set the [`readonly`]({% slug api_dateinputs_timepickercomponent %}#toc-readonly) property value to `true`,
-         * the input will be rendered in a read-only state regardless of the `readOnlyInput` value.
-         */
-        this.readOnlyInput = false;
-        /**
-         * 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
-         */
-        this.clearButton = false;
-        /**
-         * Specifies the time format that is used to display the input value
-         * ([see example]({% slug formats_timepicker %})).
-         */
-        this.format = 't';
-        /**
-         * Specifies the hint the TimePicker displays when its value is `null`.
-         * For more information, refer to the article on
-         * [placeholders]({% slug placeholders_timepicker %}).
-         *
-         * @example
-         * ```ts
-         * _@Component({
-         * selector: 'my-app',
-         * template: `
-         *  <kendo-timepicker placeholder="Enter start..."></kendo-timepicker>
-         * `
-         * })
-         * export class AppComponent { }
-         * ```
-         */
-        this.placeholder = null;
-        /**
-         * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
-         */
-        this.incompleteDateValidation = false;
-        /**
-         * Determines whether to automatically move to the next segment after the user completes the current one.
-         *
-         * @default true
-         */
-        this.autoSwitchParts = true;
-        /**
-         * A string array representing custom keys, which will move the focus to the next date format segment.
-         */
-        this.autoSwitchKeys = [];
-        /**
-         * Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
-         *
-         * @default true
-         */
-        this.enableMouseWheel = true;
-        /**
-         * Determines if the users should see a blinking caret inside the Date Input when possible.
-         *
-         * @default false
-         */
-        this.allowCaretMode = false;
-        /**
-         * Determines whether to display the **Cancel** button in the popup.
-         */
-        this.cancelButton = true;
-        /**
-         * 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.
-         */
-        this.nowButton = true;
-        /**
-         * Sets or gets the `tabindex` property of the TimePicker.
-         */
-        this.tabindex = 0;
-        /**
-         * 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`](slug:api_dateinputs_adaptivemode).
-         */
-        this.title = "";
-        /**
-         * Determines whether the built-in min or max validators are enforced when a form is being validated.
-         */
-        this.rangeValidation = true;
-        /**
-         * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
-         */
-        this.adaptiveMode = 'none';
-        /**
-         * Fires each time the user selects a new value
-         * ([see example](slug:events_timepicker)).
-         */
-        this.valueChange = new EventEmitter();
-        /**
-         * Fires each time the user focuses the input element
-         * ([see example](slug:events_timepicker)).
-         */
-        this.onFocus = new EventEmitter();
-        /**
-         * Fires each time the input element gets blurred
-         * ([see example](slug:events_timepicker)).
-         */
-        this.onBlur = new EventEmitter();
-        /**
-         * Fires each time the popup is about to open
-         * ([see example](slug:events_timepicker)).
-         * This event is preventable. If you cancel the event, the popup will remain closed.
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires each time the popup is about to close
-         * ([see example](slug:events_timepicker)).
-         * This event is preventable. If you cancel the event, the popup will remain open.
-         */
-        this.close = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.escape = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.wrapperClasses = true;
-        /**
-         * @hidden
-         */
-        this.xIcon = xIcon;
-        this.onControlChange = noop;
-        this.onControlTouched = noop;
-        this.onValidatorChange = noop;
-        this.resolvedPromise = Promise.resolve(null);
-        this.timeRangeValidateFn = noop;
-        this.incompleteValidator = noop;
-        this._min = cloneDate(MIN_TIME);
-        this._max = cloneDate(MAX_TIME);
-        this._popupSettings = { animate: true };
-        this._show = false;
-        this._steps = {};
-        this._value = null;
-        this._active = false;
-        this.domEvents = [];
-        this._size = DEFAULT_SIZE;
-        this._rounded = DEFAULT_ROUNDED;
-        this._fillMode = DEFAULT_FILL_MODE;
-        validatePackage(packageMetadata);
-        this.pickerSubscriptions = this.pickerService.onFocus.subscribe(this.handleFocus.bind(this));
-        this.pickerSubscriptions.add(this.pickerService.onBlur.subscribe(this.handleBlur.bind(this)));
-        this.pickerSubscriptions.add(this.pickerService.dateCompletenessChange.subscribe(this.handleDateCompletenessChange.bind(this)));
-    }
+    bus;
+    zone;
+    localization;
+    cdr;
+    popupService;
+    wrapper;
+    renderer;
+    injector;
+    pickerService;
+    intl;
+    /**
+     * @hidden
+     */
+    clockIcon = clockIcon;
+    container;
+    popupTemplate;
+    toggleButton;
+    actionSheet;
+    /**
+     * @hidden
+     */
+    focusableId;
+    /**
+     * Sets or gets the `disabled` property of the TimePicker and
+     * determines whether the component is active
+     * ([see example]({% slug disabled_timepicker %})).
+     * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_timepicker#toc-managing-the-timepicker-disabled-state-in-reactive-forms).
+     */
+    disabled = false;
+    /**
+     * Sets the read-only state of the TimePicker
+     * ([see example]({% slug readonly_timepicker %}#toc-read-only-timepicker)).
+     *
+     * @default false
+     */
+    readonly = false;
+    /**
+     * Sets the read-only state of the TimePicker input field
+     * ([see example]({% slug readonly_timepicker %}#toc-read-only-input)).
+     *
+     * > Note that if you set the [`readonly`]({% slug api_dateinputs_timepickercomponent %}#toc-readonly) property value to `true`,
+     * the input will be rendered in a read-only state regardless of the `readOnlyInput` value.
+     */
+    readOnlyInput = false;
+    /**
+     * 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 = false;
+    /**
+     * Specifies the time format that is used to display the input value
+     * ([see example]({% slug formats_timepicker %})).
+     */
+    format = 't';
+    /**
+     * Defines the descriptions of the format sections in the input field.
+     * For more information, refer to the article on
+     * [placeholders]({% slug placeholders_timepicker %}).
+     *
+     * @example
+     * ```ts
+     * _@Component({
+     * selector: 'my-app',
+     * template: `
+     * <div class="row example-wrapper" [style.min-height.px]="450">
+     *  <div class="col-xs-12 col-md-6 example-col">
+     *    <p>Full-length format description:</p>
+     *    <kendo-timepicker formatPlaceholder="wide"></kendo-timepicker>
+     *  </div>
+     *
+     *  <div class="col-xs-12 col-md-6 example-col">
+     *    <p>Narrow-length format description:</p>
+     *    <kendo-timepicker formatPlaceholder="narrow"></kendo-timepicker>
+     *  </div>
+     *
+     *  <div class="col-xs-12 col-md-6 example-col">
+     *    <p>Short-length format description:</p>
+     *    <kendo-timepicker formatPlaceholder="short"></kendo-timepicker>
+     *  </div>
+     *
+     *  <div class="col-xs-12 col-md-6 example-col">
+     *    <p>Display defined format:</p>
+     *    <kendo-timepicker format="HH:mm:ss" formatPlaceholder="formatPattern"></kendo-timepicker>
+     *  </div>
+     *
+     *  <div class="col-xs-12 col-md-6 example-col">
+     *    <p>Custom defined format descriptions</p>
+     *    <kendo-timepicker format="HH:mm:ss"
+     *      [formatPlaceholder]="{ hour: 'H', minute: 'm', second: 's' }"
+     *    ></kendo-timepicker>
+     *  </div>
+     * </div>
+     * `
+     * })
+     * export class AppComponent { }
+     * ```
+     */
+    formatPlaceholder;
+    /**
+     * Specifies the hint the TimePicker displays when its value is `null`.
+     * For more information, refer to the article on
+     * [placeholders]({% slug placeholders_timepicker %}).
+     *
+     * @example
+     * ```ts
+     * _@Component({
+     * selector: 'my-app',
+     * template: `
+     *  <kendo-timepicker placeholder="Enter start..."></kendo-timepicker>
+     * `
+     * })
+     * export class AppComponent { }
+     * ```
+     */
+    placeholder = null;
     /**
      * Specifies the smallest valid time value
      * ([see example]({% slug timeranges_timepicker %})).
@@ -246,6 +183,42 @@ export class TimePickerComponent extends MultiTabStop {
     get max() {
         return this._max;
     }
+    /**
+     * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
+     */
+    incompleteDateValidation = false;
+    /**
+     * Determines whether to automatically move to the next segment after the user completes the current one.
+     *
+     * @default true
+     */
+    autoSwitchParts = true;
+    /**
+     * A string array representing custom keys, which will move the focus to the next date format segment.
+     */
+    autoSwitchKeys = [];
+    /**
+     * Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
+     *
+     * @default true
+     */
+    enableMouseWheel = true;
+    /**
+     * Determines if the users should see a blinking caret inside the Date Input when possible.
+     *
+     * @default false
+     */
+    allowCaretMode = false;
+    /**
+     * Determines whether to display the **Cancel** button in the popup.
+     */
+    cancelButton = true;
+    /**
+     * 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.
+     */
+    nowButton = true;
     /**
      * Configures the incremental steps of the TimePicker.
      * For more information, refer to the article on
@@ -287,6 +260,10 @@ export class TimePickerComponent extends MultiTabStop {
     get popupSettings() {
         return this._popupSettings;
     }
+    /**
+     * Sets or gets the `tabindex` property of the TimePicker.
+     */
+    tabindex = 0;
     /**
      * @hidden
      */
@@ -296,6 +273,11 @@ export class TimePickerComponent extends MultiTabStop {
     get tabIndex() {
         return this.tabindex;
     }
+    /**
+     * 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`](slug:api_dateinputs_adaptivemode).
+     */
+    title = "";
     /**
      * Sets the subtitle text rendered in the header of the popup(action sheet).
      * Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
@@ -306,6 +288,15 @@ export class TimePickerComponent extends MultiTabStop {
     get subtitle() {
         return this._subtitle || this.placeholder;
     }
+    _subtitle;
+    /**
+     * Determines whether the built-in min or max validators are enforced when a form is being validated.
+     */
+    rangeValidation = true;
+    /**
+     * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
+     */
+    adaptiveMode = 'none';
     /**
      * Specifies the value of the TimePicker component.
      *
@@ -388,6 +379,45 @@ export class TimePickerComponent extends MultiTabStop {
     get fillMode() {
         return this._fillMode;
     }
+    /**
+     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     */
+    inputAttributes;
+    /**
+     * Fires each time the user selects a new value
+     * ([see example](slug:events_timepicker)).
+     */
+    valueChange = new EventEmitter();
+    /**
+     * Fires each time the user focuses the input element
+     * ([see example](slug:events_timepicker)).
+     */
+    onFocus = new EventEmitter();
+    /**
+     * Fires each time the input element gets blurred
+     * ([see example](slug:events_timepicker)).
+     */
+    onBlur = new EventEmitter();
+    /**
+     * Fires each time the popup is about to open
+     * ([see example](slug:events_timepicker)).
+     * This event is preventable. If you cancel the event, the popup will remain closed.
+     */
+    open = new EventEmitter();
+    /**
+     * Fires each time the popup is about to close
+     * ([see example](slug:events_timepicker)).
+     * This event is preventable. If you cancel the event, the popup will remain open.
+     */
+    close = new EventEmitter();
+    /**
+     * @hidden
+     */
+    escape = new EventEmitter();
+    /**
+     * @hidden
+     */
+    wrapperClasses = true;
     /**
      * @hidden
      */
@@ -397,6 +427,11 @@ export class TimePickerComponent extends MultiTabStop {
     get popupUID() {
         return `k-timepicker-popup-${this.bus.calendarId}-`;
     }
+    popupRef;
+    /**
+     * @hidden
+     */
+    xIcon = xIcon;
     get isActive() {
         return this._active;
     }
@@ -455,9 +490,51 @@ export class TimePickerComponent extends MultiTabStop {
     get adaptiveAcceptButton() {
         return this.actionSheet.element.nativeElement.querySelector(ACCEPT_BUTTON_SELECTOR);
     }
+    get adaptiveCancelButton() {
+        return this.actionSheet.element.nativeElement.querySelector(CANCEL_BUTTON_SELECTOR);
+    }
     get inputElement() {
         return this.wrapper.nativeElement.querySelector('input');
     }
+    onControlChange = noop;
+    onControlTouched = noop;
+    onValidatorChange = noop;
+    resolvedPromise = Promise.resolve(null);
+    timeRangeValidateFn = noop;
+    incompleteValidator = noop;
+    _min = cloneDate(MIN_TIME);
+    _max = cloneDate(MAX_TIME);
+    _popupSettings = { animate: true };
+    _show = false;
+    _steps = {};
+    _value = null;
+    _active = false;
+    localizationChangeSubscription;
+    pickerSubscriptions;
+    windowBlurSubscription;
+    control;
+    domEvents = [];
+    _size = DEFAULT_SIZE;
+    _rounded = DEFAULT_ROUNDED;
+    _fillMode = DEFAULT_FILL_MODE;
+    windowSize;
+    constructor(bus, zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, intl) {
+        super();
+        this.bus = bus;
+        this.zone = zone;
+        this.localization = localization;
+        this.cdr = cdr;
+        this.popupService = popupService;
+        this.wrapper = wrapper;
+        this.renderer = renderer;
+        this.injector = injector;
+        this.pickerService = pickerService;
+        this.intl = intl;
+        validatePackage(packageMetadata);
+        this.pickerSubscriptions = this.pickerService.onFocus.subscribe(this.handleFocus.bind(this));
+        this.pickerSubscriptions.add(this.pickerService.onBlur.subscribe(this.handleBlur.bind(this)));
+        this.pickerSubscriptions.add(this.pickerService.dateCompletenessChange.subscribe(this.handleDateCompletenessChange.bind(this)));
+    }
     /**
      * @hidden
      * Used by the TextBoxContainer to determine if the component is empty
@@ -775,7 +852,12 @@ export class TimePickerComponent extends MultiTabStop {
      * @hidden
      */
     onTabOutLastPart() {
-        this.isAdaptive ? this.adaptiveAcceptButton.focus() : this.timeSelector.accept.nativeElement.focus();
+        if (this.isAdaptive) {
+            this.cancelButton ? this.adaptiveCancelButton.focus() : this.adaptiveAcceptButton.focus();
+        }
+        else {
+            this.timeSelector.accept.nativeElement.focus();
+        }
     }
     toggleTimeSelector(show) {
         this.windowSize = windowSize();
@@ -965,21 +1047,20 @@ export class TimePickerComponent extends MultiTabStop {
             this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
         }
     }
-}
-TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerComponent, deps: [{ token: i1.BusViewService }, { token: i0.NgZone }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i4.PickerService }, { token: i5.IntlService }], target: i0.ɵɵFactoryTarget.Component });
-TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimePickerComponent, isStandalone: true, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", clearButton: "clearButton", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", adaptiveMode: "adaptiveMode", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
-        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimePickerComponent), multi: true },
-        { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
-        { provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
-        { provide: MultiTabStop, useExisting: forwardRef(() => TimePickerComponent) },
-        LocalizationService,
-        BusViewService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.timepicker'
-        },
-        PickerService
-    ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-timepicker"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerComponent, deps: [{ token: i1.BusViewService }, { token: i0.NgZone }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i4.PickerService }, { token: i5.IntlService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimePickerComponent, isStandalone: true, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", clearButton: "clearButton", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", adaptiveMode: "adaptiveMode", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimePickerComponent), multi: true },
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
+            { provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
+            { provide: MultiTabStop, useExisting: forwardRef(() => TimePickerComponent) },
+            LocalizationService,
+            BusViewService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.timepicker'
+            },
+            PickerService
+        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-timepicker"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoTimePickerLocalizedMessages
             i18n-accept="kendo.timepicker.accept|The Accept button text in the timepicker component"
             accept="Set"
@@ -1119,6 +1200,17 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                     <ng-container *ngTemplateOutlet="timeSelectorTemplate"></ng-container>
                 </div>
                 <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
+                    <button kendoButton 
+                        type="button"
+                        (click)="handleReject()"
+                        size="large"
+                        class="k-time-cancel"
+                        [attr.title]="localization.get('cancelLabel')"
+                        [attr.aria-label]="localization.get('cancelLabel')"
+                    >
+                        {{localization.get('cancel')}}
+                    </button>
+
                     <button kendoButton
                         type="button"
                         (click)="handleActionSheetAccept()"
@@ -1130,17 +1222,6 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                     >
                         {{localization.get('accept')}}
                     </button>
-
-                    <button kendoButton 
-                        type="button"
-                        (click)="handleReject()"
-                        size="large"
-                        class="k-time-cancel"
-                        [attr.title]="localization.get('cancelLabel')"
-                        [attr.aria-label]="localization.get('cancelLabel')"
-                    >
-                        {{localization.get('cancel')}}
-                    </button>
                 </div>
             </ng-template>
         </kendo-actionsheet>
@@ -1184,7 +1265,8 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             </kendo-timeselector>
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "directive", type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1343,6 +1425,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     <ng-container *ngTemplateOutlet="timeSelectorTemplate"></ng-container>
                 </div>
                 <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
+                    <button kendoButton 
+                        type="button"
+                        (click)="handleReject()"
+                        size="large"
+                        class="k-time-cancel"
+                        [attr.title]="localization.get('cancelLabel')"
+                        [attr.aria-label]="localization.get('cancelLabel')"
+                    >
+                        {{localization.get('cancel')}}
+                    </button>
+
                     <button kendoButton
                         type="button"
                         (click)="handleActionSheetAccept()"
@@ -1354,17 +1447,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     >
                         {{localization.get('accept')}}
                     </button>
-
-                    <button kendoButton 
-                        type="button"
-                        (click)="handleReject()"
-                        size="large"
-                        class="k-time-cancel"
-                        [attr.title]="localization.get('cancelLabel')"
-                        [attr.aria-label]="localization.get('cancelLabel')"
-                    >
-                        {{localization.get('cancel')}}
-                    </button>
                 </div>
             </ng-template>
         </kendo-actionsheet>