@progress/kendo-angular-dateinputs 16.0.0-develop.9 → 16.0.0

package/esm2020/timepicker/services/minutes.service.mjs

@@ -113,8 +113,8 @@ export class MinutesService {
         return [min.getMinutes(), max.getMinutes()];
     }
 }
-MinutesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MinutesService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
-MinutesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MinutesService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MinutesService, decorators: [{
+MinutesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MinutesService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
+MinutesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MinutesService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MinutesService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.IntlService }]; } });

package/esm2020/timepicker/services/seconds.service.mjs

@@ -113,8 +113,8 @@ export class SecondsService {
         return [min.getSeconds(), max.getSeconds()];
     }
 }
-SecondsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SecondsService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
-SecondsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SecondsService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SecondsService, decorators: [{
+SecondsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SecondsService, deps: [{ token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Injectable });
+SecondsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SecondsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SecondsService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.IntlService }]; } });

package/esm2020/timepicker/timelist.component.mjs

@@ -257,8 +257,8 @@ export class TimeListComponent {
         this.domEvents.push(this.renderer.listen(element, 'mouseover', () => !this.isActive && this.focus()), this.renderer.listen(element, 'click', () => this.focus()), this.renderer.listen(element, 'blur', () => this.isActive = false), this.renderer.listen(element, 'focus', () => this.isActive = true), this.renderer.listen(element, 'keydown', this.handleKeyDown.bind(this)));
     }
 }
-TimeListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimeListComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }, { token: i1.TimePickerDOMService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimeListComponent, selector: "kendo-timelist", inputs: { min: "min", max: "max", part: "part", step: "step", disabled: "disabled", value: "value", isLast: "isLast" }, outputs: { valueChange: "valueChange", tabOutLastPart: "tabOutLastPart" }, host: { properties: { "attr.role": "this.roleAttribute", "attr.aria-label": "this.ariaLabel", "attr.tabindex": "this.tabIndex", "class.k-time-list": "this.componentClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+TimeListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimeListComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }, { token: i1.TimePickerDOMService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimeListComponent, selector: "kendo-timelist", inputs: { min: "min", max: "max", part: "part", step: "step", disabled: "disabled", value: "value", isLast: "isLast" }, outputs: { valueChange: "valueChange", tabOutLastPart: "tabOutLastPart" }, host: { properties: { "attr.role": "this.roleAttribute", "attr.aria-label": "this.ariaLabel", "attr.tabindex": "this.tabIndex", "class.k-time-list": "this.componentClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <kendo-virtualization
         [skip]="skip"
         [take]="total"
@@ -287,7 +287,7 @@ TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
         </ul>
     </kendo-virtualization>
   `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { kind: "directive", type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimeListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimeListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-timelist',

package/esm2020/timepicker/timepicker.component.mjs

@@ -32,13 +32,14 @@ import * as i4 from "../common/picker.service";
 import * as i5 from "@progress/kendo-angular-intl";
 import * as i6 from "@angular/common";
 import * as i7 from "../dateinput/dateinput.component";
-import * as i8 from "@progress/kendo-angular-common";
-import * as i9 from "@progress/kendo-angular-icons";
-import * as i10 from "@progress/kendo-angular-navigation";
-import * as i11 from "@progress/kendo-angular-buttons";
-import * as i12 from "./localization/timepicker-localized-messages.directive";
-import * as i13 from "./localization/timeselector-custom-messages.component";
-import * as i14 from "./timeselector.component";
+import * as i8 from "../dateinput/localization/dateinput-custom-messages.component";
+import * as i9 from "@progress/kendo-angular-common";
+import * as i10 from "@progress/kendo-angular-icons";
+import * as i11 from "@progress/kendo-angular-navigation";
+import * as i12 from "@progress/kendo-angular-buttons";
+import * as i13 from "./localization/timepicker-localized-messages.directive";
+import * as i14 from "./localization/timeselector-custom-messages.component";
+import * as i15 from "./timeselector.component";
 const VALUE_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/#toc-integration-with-json';
 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`);
@@ -85,6 +86,12 @@ export class TimePickerComponent {
          * 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 %})).
@@ -658,6 +665,7 @@ export class TimePickerComponent {
                 this.focusInput();
                 this.show = false;
             }
+            this.dateInput.showClearButton = true;
             this.onControlChange(cloneDate(value));
             this.valueChange.emit(cloneDate(value));
         });
@@ -960,8 +968,8 @@ export class TimePickerComponent {
         }
     }
 }
-TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", 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 }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", 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" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+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 }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimePickerComponent, 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", autoCorrectParts: "autoCorrectParts", 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" }, 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) },
@@ -1009,6 +1017,9 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
 
             i18n-dayperiod="kendo.timepicker.dayperiod|The label for the dayperiod part in the timepicker component"
             dayperiod="Dayperiod"
+
+            i18n-clearTitle="kendo.timepicker.clearTitle|The title of the clear button"
+            clearTitle="clear"
         >
         </ng-container>
         <kendo-dateinput
@@ -1017,6 +1028,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             hasPopup="dialog"
             [isPopupOpen]="show"
             [disabled]="disabled"
+            [clearButton]="clearButton"
             [readonly]="readonly || readOnlyInput"
             [role]="'combobox'"
             [ariaReadOnly]="readonly"
@@ -1043,7 +1055,12 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             [value]="value"
             (valueChange)="handleInputChange($event)"
             (click)="handleDateInputClick()"
-        ></kendo-dateinput>
+        >
+            <kendo-dateinput-messages
+                [clearTitle]="localization.get('clearTitle')"
+            >
+            </kendo-dateinput-messages>
+        </kendo-dateinput>
         <button
             #toggleButton
             type="button"
@@ -1168,8 +1185,8 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                 </kendo-timeselector-messages>
             </kendo-timeselector>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i7.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "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: "directive", type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i9.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i10.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i10.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i11.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i12.TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: i13.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: i14.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimePickerComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i7.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: i8.DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i10.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i11.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i11.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i12.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i13.TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: i14.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: i15.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1224,6 +1241,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
             i18n-dayperiod="kendo.timepicker.dayperiod|The label for the dayperiod part in the timepicker component"
             dayperiod="Dayperiod"
+
+            i18n-clearTitle="kendo.timepicker.clearTitle|The title of the clear button"
+            clearTitle="clear"
         >
         </ng-container>
         <kendo-dateinput
@@ -1232,6 +1252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             hasPopup="dialog"
             [isPopupOpen]="show"
             [disabled]="disabled"
+            [clearButton]="clearButton"
             [readonly]="readonly || readOnlyInput"
             [role]="'combobox'"
             [ariaReadOnly]="readonly"
@@ -1258,7 +1279,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             [value]="value"
             (valueChange)="handleInputChange($event)"
             (click)="handleDateInputClick()"
-        ></kendo-dateinput>
+        >
+            <kendo-dateinput-messages
+                [clearTitle]="localization.get('clearTitle')"
+            >
+            </kendo-dateinput-messages>
+        </kendo-dateinput>
         <button
             #toggleButton
             type="button"
@@ -1413,6 +1439,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 args: ['class.k-readonly']
             }], readOnlyInput: [{
                 type: Input
+            }], clearButton: [{
+                type: Input
             }], format: [{
                 type: Input
             }], formatPlaceholder: [{

package/esm2020/timepicker/timepicker.module.mjs

@@ -64,8 +64,8 @@ const providers = [
  */
 export class TimePickerModule {
 }
-TimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: TimePickerModule, declarations: [TimePickerLocalizedMessagesDirective,
+TimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TimePickerModule, declarations: [TimePickerLocalizedMessagesDirective,
         TimeListComponent,
         TimePickerCustomMessagesComponent,
         TimePickerComponent,
@@ -85,8 +85,8 @@ TimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         TimeSelectorLocalizedMessagesDirective,
         TimeSelectorCustomMessagesComponent,
         TimeSelectorComponent] });
-TimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimePickerModule, providers: providers, imports: [CommonModule, COMPONENT_MODULES] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimePickerModule, decorators: [{
+TimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerModule, providers: providers, imports: [CommonModule, COMPONENT_MODULES] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [COMPONENT_DIRECTIVES],

package/esm2020/timepicker/timeselector.component.mjs

@@ -97,6 +97,7 @@ export class TimeSelectorComponent {
          */
         this.valueReject = new EventEmitter();
         this.tabOutLastPart = new EventEmitter();
+        this.tabOutNow = new EventEmitter();
         this.isActive = false;
         this.showNowButton = true;
         this._activeListIndex = -1;
@@ -192,7 +193,7 @@ export class TimeSelectorComponent {
             if (keyCode === Keys.Tab && shiftKey) {
                 event.preventDefault();
                 this.renderer.removeClass(this.timeListWrappers.first.nativeElement, 'k-focus');
-                this.cancel ? this.cancel.nativeElement.focus() : this.accept?.nativeElement.focus();
+                this.now ? this.now.nativeElement.focus() : this.cancel.nativeElement.focus();
             }
         }));
         this.subscriptions.add(fromEvent(this.timeListWrappers.last.nativeElement, 'keydown').subscribe((event) => {
@@ -311,13 +312,23 @@ export class TimeSelectorComponent {
      */
     handleTabOut(event) {
         const { keyCode, shiftKey } = event;
-        if (keyCode === Keys.Tab && !shiftKey) {
+        if (event.target === this.now?.nativeElement && keyCode === Keys.Tab && shiftKey) {
+            event.preventDefault();
+            if (this.isDateTimePicker) {
+                this.tabOutNow.emit();
+            }
+            else {
+                this.cancel ? this.cancel.nativeElement.focus() : this.accept.nativeElement.focus();
+            }
+            return;
+        }
+        if (keyCode === Keys.Tab && !shiftKey && event.target !== this.now?.nativeElement) {
             event.preventDefault();
             if (document.activeElement === this.accept.nativeElement) {
-                this.cancel ? this.cancel.nativeElement.focus() : this.timeLists.first.focus();
+                this.cancel ? this.cancel.nativeElement.focus() : this.now?.nativeElement.focus();
             }
             else {
-                this.timeLists.first.focus();
+                this.now ? this.now.nativeElement.focus() : this.timeLists.first.focus();
             }
         }
     }
@@ -407,8 +418,8 @@ export class TimeSelectorComponent {
         return listIdx;
     }
 }
-TimeSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimeSelectorComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i2.IntlService }, { token: i3.TimePickerDOMService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i4.PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: { format: "format", min: "min", max: "max", cancelButton: "cancelButton", setButton: "setButton", nowButton: "nowButton", disabled: "disabled", isAdaptiveEnabled: "isAdaptiveEnabled", isDateTimePicker: "isDateTimePicker", steps: "steps", value: "value" }, outputs: { valueChange: "valueChange", valueReject: "valueReject", tabOutLastPart: "tabOutLastPart" }, host: { properties: { "class.k-disabled": "this.disabledClass" } }, providers: [
+TimeSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimeSelectorComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i2.IntlService }, { token: i3.TimePickerDOMService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i4.PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: { format: "format", min: "min", max: "max", cancelButton: "cancelButton", setButton: "setButton", nowButton: "nowButton", disabled: "disabled", isAdaptiveEnabled: "isAdaptiveEnabled", isDateTimePicker: "isDateTimePicker", steps: "steps", value: "value" }, outputs: { valueChange: "valueChange", valueReject: "valueReject", tabOutLastPart: "tabOutLastPart", tabOutNow: "tabOutNow" }, host: { properties: { "class.k-disabled": "this.disabledClass" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -449,7 +460,8 @@ TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 [kendoEventsOutsideAngular]="{
                     click: handleNow,
                     focus: handleFocus,
-                    blur: handleBlur
+                    blur: handleBlur,
+                    keydown: handleTabOut
                 }"
                 [scope]="this"
                 [disabled]="disabled"
@@ -522,7 +534,7 @@ TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             >{{localization.get('cancel')}}</button>
         </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i7.TimeListComponent, selector: "kendo-timelist", inputs: ["min", "max", "part", "step", "disabled", "value", "isLast"], outputs: ["valueChange", "tabOutLastPart"] }, { kind: "directive", type: i8.TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimeSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimeSelectorComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -570,7 +582,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 [kendoEventsOutsideAngular]="{
                     click: handleNow,
                     focus: handleFocus,
-                    blur: handleBlur
+                    blur: handleBlur,
+                    keydown: handleTabOut
                 }"
                 [scope]="this"
                 [disabled]="disabled"
@@ -692,4 +705,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Output
             }], tabOutLastPart: [{
                 type: Output
+            }], tabOutNow: [{
+                type: Output
             }] } });

package/esm2020/virtualization/virtualization.component.mjs

@@ -233,8 +233,8 @@ export class VirtualizationComponent {
         return indexOffset < this.containerScrollPosition ? ScrollDirection.Backward : ScrollDirection.Forward;
     }
 }
-VirtualizationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VirtualizationComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
-VirtualizationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: VirtualizationComponent, selector: "kendo-virtualization", inputs: { direction: "direction", itemHeight: "itemHeight", itemWidth: "itemWidth", topOffset: "topOffset", bottomOffset: "bottomOffset", maxScrollDifference: "maxScrollDifference", scrollOffsetSize: "scrollOffsetSize", scrollDuration: "scrollDuration", skip: "skip", take: "take", total: "total" }, outputs: { activeIndexChange: "activeIndexChange", pageChange: "pageChange", scrollChange: "scrollChange" }, host: { properties: { "class.k-flex": "this.wrapperClasses", "class.k-content": "this.wrapperClasses", "class.k-scrollable": "this.wrapperClasses", "class.k-scrollable-horizontal": "this.horizontalClass" } }, providers: [{
+VirtualizationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: VirtualizationComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
+VirtualizationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: VirtualizationComponent, selector: "kendo-virtualization", inputs: { direction: "direction", itemHeight: "itemHeight", itemWidth: "itemWidth", topOffset: "topOffset", bottomOffset: "bottomOffset", maxScrollDifference: "maxScrollDifference", scrollOffsetSize: "scrollOffsetSize", scrollDuration: "scrollDuration", skip: "skip", take: "take", total: "total" }, outputs: { activeIndexChange: "activeIndexChange", pageChange: "pageChange", scrollChange: "scrollChange" }, host: { properties: { "class.k-flex": "this.wrapperClasses", "class.k-content": "this.wrapperClasses", "class.k-scrollable": "this.wrapperClasses", "class.k-scrollable-horizontal": "this.horizontalClass" } }, providers: [{
             provide: SCROLLER_FACTORY_TOKEN,
             useValue: DEFAULT_SCROLLER_FACTORY
         }], usesOnChanges: true, ngImport: i0, template: `
@@ -245,7 +245,7 @@ VirtualizationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         [ngStyle]="totalVertexLength"
     ></div>
   `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VirtualizationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: VirtualizationComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [{

package/esm2020/virtualization/virtualization.module.mjs

@@ -17,10 +17,10 @@ const COMPONENT_DIRECTIVES = [
  */
 export class VirtualizationModule {
 }
-VirtualizationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VirtualizationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-VirtualizationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: VirtualizationModule, declarations: [VirtualizationComponent], imports: [CommonModule], exports: [VirtualizationComponent] });
-VirtualizationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VirtualizationModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VirtualizationModule, decorators: [{
+VirtualizationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: VirtualizationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+VirtualizationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: VirtualizationModule, declarations: [VirtualizationComponent], imports: [CommonModule], exports: [VirtualizationComponent] });
+VirtualizationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: VirtualizationModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: VirtualizationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [COMPONENT_DIRECTIVES],