@progress/kendo-angular-dateinputs 7.1.3-dev.202210121001 → 7.1.3-dev.202210260703

package/esm2015/timepicker/timelist.component.js

@@ -15,11 +15,13 @@ import { SecondsService } from './services/seconds.service';
 import { MillisecondsService } from './services/milliseconds.service';
 import { DayPeriodService } from './services/dayperiod.service';
 import { closestInScope } from '../common/dom-queries';
+import { attributeNames } from '../common/utils';
 import * as i0 from "@angular/core";
 import * as i1 from "./services/dom.service";
-import * as i2 from "../virtualization/virtualization.component";
-import * as i3 from "@angular/common";
-import * as i4 from "@progress/kendo-angular-common";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "../virtualization/virtualization.component";
+import * as i4 from "@angular/common";
+import * as i5 from "@progress/kendo-angular-common";
 const SNAP_THRESHOLD = 0.05; //% of the item height
 const SCROLL_THRESHOLD = 2; //< 2px threshold
 const nil = () => (null);
@@ -40,12 +42,13 @@ const services = {
  * @hidden
  */
 export class TimeListComponent {
-    constructor(element, injector, dom, renderer, zone) {
+    constructor(element, injector, dom, renderer, zone, localization) {
         this.element = element;
         this.injector = injector;
         this.dom = dom;
         this.renderer = renderer;
         this.zone = zone;
+        this.localization = localization;
         this.min = cloneDate(MIDNIGHT_DATE);
         this.max = cloneDate(MAX_TIME);
         this.step = 1;
@@ -59,11 +62,32 @@ export class TimeListComponent {
         this.data = [];
         this.indexToScroll = -1;
         this.domEvents = [];
+        this.hostElement = this.element.nativeElement;
+    }
+    get roleAttribute() {
+        return this.isDayPeriod ? 'listbox' : 'spinbutton';
+    }
+    get ariaLabel() {
+        var _a;
+        return this.localization.get((_a = this.part) === null || _a === void 0 ? void 0 : _a.type);
+    }
+    get valueMin() {
+        var _a;
+        return (_a = this.data[0]) === null || _a === void 0 ? void 0 : _a.text;
+    }
+    get valueMax() {
+        var _a;
+        return (_a = this.data[this.data.length - 1]) === null || _a === void 0 ? void 0 : _a.text;
     }
     get tabIndex() {
         return this.disabled ? undefined : 0;
     }
+    get isDayPeriod() {
+        var _a;
+        return ((_a = this.part) === null || _a === void 0 ? void 0 : _a.type) === 'dayperiod';
+    }
     ngOnChanges(changes) {
+        var _a, _b;
         if (changes.part) {
             this.service = this.injector.get(services[this.part.type]);
             this.service.configure(this.serviceSettings());
@@ -83,6 +107,8 @@ export class TimeListComponent {
         this.animateToIndex = this.animateToIndex && this.textHasChanged(valueChanges);
         this.total = this.service.total(value);
         this.indexToScroll = this.selectedIndex(value);
+        this.renderer.setAttribute(this.hostElement, attributeNames.valueNow, (_a = this.getCurrentItem()) === null || _a === void 0 ? void 0 : _a.value.toString());
+        this.renderer.setAttribute(this.hostElement, attributeNames.valuetext, (_b = this.getCurrentItem()) === null || _b === void 0 ? void 0 : _b.text);
     }
     ngOnInit() {
         this.animateToIndex = true;
@@ -115,6 +141,9 @@ export class TimeListComponent {
             this.animateToIndex = true;
         });
     }
+    getCurrentItem() {
+        return this.indexToScroll >= 0 ? this.data[this.indexToScroll] : null;
+    }
     handleChange(dataItem) {
         const candidate = this.service.apply(this.value, dataItem.value);
         if (this.value.getTime() === candidate.getTime()) {
@@ -231,8 +260,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: "12.2.16", ngImport: i0, type: TimeListComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }, { token: i1.TimePickerDOMService }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimeListComponent, selector: "kendo-timelist", inputs: { min: "min", max: "max", part: "part", step: "step", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "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: "12.2.16", 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: "12.0.0", version: "12.2.16", type: TimeListComponent, selector: "kendo-timelist", inputs: { min: "min", max: "max", part: "part", step: "step", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.role": "this.roleAttribute", "attr.aria-label": "this.ariaLabel", "attr.valuemin": "this.valueMin", "attr.valuemax": "this.valueMax", "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"
@@ -250,14 +279,17 @@ TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 click: handleItemClick
             }"
             [scope]="this"
+            [attr.role]="isDayPeriod ? 'presentation' : null"
         >
             <li *ngFor="let item of data; let index = index;" class="k-item"
-                [attr.data-timelist-item-index]="index">
+                [attr.data-timelist-item-index]="index"
+                [attr.role]="isDayPeriod ? 'option' : null"
+                >
                 <span>{{item.text}}</span>
             </li>
         </ul>
     </kendo-virtualization>
-  `, isInline: true, components: [{ type: i2.VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  `, isInline: true, components: [{ type: i3.VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], directives: [{ type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimeListComponent, decorators: [{
             type: Component,
             args: [{
@@ -280,16 +312,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 click: handleItemClick
             }"
             [scope]="this"
+            [attr.role]="isDayPeriod ? 'presentation' : null"
         >
             <li *ngFor="let item of data; let index = index;" class="k-item"
-                [attr.data-timelist-item-index]="index">
+                [attr.data-timelist-item-index]="index"
+                [attr.role]="isDayPeriod ? 'option' : null"
+                >
                 <span>{{item.text}}</span>
             </li>
         </ul>
     </kendo-virtualization>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Injector }, { type: i1.TimePickerDOMService }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { min: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Injector }, { type: i1.TimePickerDOMService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i2.LocalizationService }]; }, propDecorators: { min: [{
                 type: Input
             }], max: [{
                 type: Input
@@ -306,6 +341,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], virtualization: [{
                 type: ViewChild,
                 args: [VirtualizationComponent, { static: true }]
+            }], roleAttribute: [{
+                type: HostBinding,
+                args: ["attr.role"]
+            }], ariaLabel: [{
+                type: HostBinding,
+                args: ["attr.aria-label"]
+            }], valueMin: [{
+                type: HostBinding,
+                args: ['attr.valuemin']
+            }], valueMax: [{
+                type: HostBinding,
+                args: ["attr.valuemax"]
             }], tabIndex: [{
                 type: HostBinding,
                 args: ["attr.tabindex"]

package/esm2015/timepicker/timepicker.component.js

@@ -6,12 +6,12 @@ import { Component, ChangeDetectionStrategy, EventEmitter, HostBinding, Input, O
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { cloneDate, isEqual } from '@progress/kendo-date-math';
-import { hasObservers, KendoInput, guid, Keys } from '@progress/kendo-angular-common';
+import { hasObservers, KendoInput, Keys } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { MIDNIGHT_DATE, MIN_TIME, MAX_TIME } from '../defaults';
 import { PickerService } from '../common/picker.service';
-import { requiresZoneOnBlur, currentFocusTarget } from '../common/utils';
+import { requiresZoneOnBlur, currentFocusTarget, attributeNames } from '../common/utils';
 import { TIME_PART } from './models/time-part.default';
 import { PreventableEvent } from '../preventable-event';
 import { noop, setTime, isWindowAvailable, getFillModeClass, getSizeClass, getRoundedClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE } from '../util';
@@ -19,16 +19,18 @@ import { timeRangeValidator } from '../validators/time-range.validator';
 import { TOUCH_ENABLED } from '../touch-enabled';
 import { fromEvent } from 'rxjs';
 import { incompleteDateValidator } from '../validators/incomplete-date.validator';
+import { BusViewService } from '../calendar/services/bus-view.service';
 import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "@progress/kendo-angular-popup";
-import * as i3 from "../common/picker.service";
-import * as i4 from "@progress/kendo-angular-intl";
-import * as i5 from "../dateinput/dateinput.component";
-import * as i6 from "./timeselector.component";
-import * as i7 from "./localization/timeselector-custom-messages.component";
-import * as i8 from "./localization/timepicker-localized-messages.directive";
-import * as i9 from "@progress/kendo-angular-common";
+import * as i1 from "../calendar/services/bus-view.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "@progress/kendo-angular-popup";
+import * as i4 from "../common/picker.service";
+import * as i5 from "@progress/kendo-angular-intl";
+import * as i6 from "../dateinput/dateinput.component";
+import * as i7 from "./timeselector.component";
+import * as i8 from "./localization/timeselector-custom-messages.component";
+import * as i9 from "./localization/timepicker-localized-messages.directive";
+import * as i10 from "@progress/kendo-angular-common";
 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`);
@@ -36,7 +38,8 @@ const formatRegExp = new RegExp(`${TIME_PART.hour}|${TIME_PART.minute}|${TIME_PA
  * Represents the [Kendo UI TimePicker component for Angular]({% slug overview_timepicker %}#toc-basic-usage).
  */
 export class TimePickerComponent {
-    constructor(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, intl, touchEnabled) {
+    constructor(bus, zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, intl, touchEnabled) {
+        this.bus = bus;
         this.zone = zone;
         this.localization = localization;
         this.cdr = cdr;
@@ -47,10 +50,6 @@ export class TimePickerComponent {
         this.pickerService = pickerService;
         this.intl = intl;
         this.touchEnabled = touchEnabled;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-${guid()}`;
         /**
          * Sets or gets the `disabled` property of the TimePicker and
          * determines whether the component is active
@@ -188,7 +187,6 @@ export class TimePickerComponent {
          * @hidden
          */
         this.wrapperClasses = true;
-        this.popupUID = guid();
         this.onControlChange = noop;
         this.onControlTouched = noop;
         this.onValidatorChange = noop;
@@ -367,12 +365,10 @@ export class TimePickerComponent {
     get disabledClass() {
         return this.disabled;
     }
-    /**
-     * @hidden
-     */
-    get inputRole() {
-        return this.readOnlyInput ? 'listbox' : 'spinbutton';
+    get popupUID() {
+        return `k-timepicker-popup-${this.bus.calendarId}-`;
     }
+    ;
     get isActive() {
         return this._active;
     }
@@ -478,9 +474,11 @@ export class TimePickerComponent {
         }
         if (altKey) {
             if (keyCode === Keys.ArrowUp) {
+                event.preventDefault();
                 this.show = false;
             }
             if (keyCode === Keys.ArrowDown && !this.show) {
+                event.preventDefault();
                 this.show = true;
             }
         }
@@ -673,6 +671,7 @@ export class TimePickerComponent {
         }
         this._show = show;
         this.cdr.markForCheck();
+        const inputElement = this.wrapper.nativeElement.querySelector('input');
         if (show) {
             const direction = this.localization.rtl ? 'right' : 'left';
             this.popupRef = this.popupService.open({
@@ -686,11 +685,13 @@ export class TimePickerComponent {
                 positionMode: 'absolute'
             });
             this.popupRef.popupElement.setAttribute('id', this.popupUID);
+            this.renderer.setAttribute(inputElement, attributeNames.ariaControls, this.popupUID);
             this.popupRef.popupAnchorViewportLeave.subscribe(() => this.show = false);
         }
         else {
             this.popupRef.close();
             this.popupRef = null;
+            this.renderer.removeAttribute(inputElement, attributeNames.ariaControls);
         }
     }
     focusInput() {
@@ -800,12 +801,13 @@ export class TimePickerComponent {
         }
     }
 }
-TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerComponent, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i3.PickerService }, { token: i4.IntlService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", rangeValidation: "rangeValidation", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "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: "12.2.16", 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: "12.0.0", version: "12.2.16", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", rangeValidation: "rangeValidation", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "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) },
         LocalizationService,
+        BusViewService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.timepicker'
@@ -833,16 +835,31 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
 
             i18n-toggle="kendo.timepicker.toggle|The label for the toggle button in the timepicker component"
             toggle="Toggle time list"
+
+            i18n-hour="kendo.timepicker.hour|The label for the hour part in the timepicker component"
+            hour="Hour"
+
+            i18n-minute="kendo.timepicker.minute|The label for the minute part in the timepicker component"
+            minute="Minute"
+
+            i18n-second="kendo.timepicker.second|The label for the second part in the timepicker component"
+            second="Second"
+
+            i18n-millisecond="kendo.timepicker.millisecond|The label for the millisecond part in the timepicker component"
+            millisecond="Millisecond"
+
+            i18n-dayperiod="kendo.timepicker.dayperiod|The label for the dayperiod part in the timepicker component"
+            dayperiod="Dayperiod"
         >
         </ng-container>
         <kendo-dateinput
             #input
-            [focusableId]="focusableId"
+            pickerType="timepicker"
             [hasPopup]="true"
             [isPopupOpen]="show"
             [disabled]="disabled"
             [readonly]="readonly || readOnlyInput"
-            [role]="inputRole"
+            [role]="'combobox'"
             [ariaReadOnly]="readonly"
             [format]="format"
             [formatPlaceholder]="formatPlaceholder"
@@ -862,6 +879,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         <button
             #toggleButton
             type="button"
+            tabindex="-1"
             class="k-input-button k-button k-icon-button"
             [attr.title]="localization.get('toggle')"
             [attr.aria-label]="localization.get('toggle')"
@@ -898,12 +916,17 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                     [cancel]="localization.get('cancel')"
                     [nowLabel]="localization.get('nowLabel')"
                     [now]="localization.get('now')"
+                    [hour]="localization.get('hour')"
+                    [minute]="localization.get('minute')"
+                    [second]="localization.get('second')"
+                    [millisecond]="localization.get('millisecond')"
+                    [dayperiod]="localization.get('dayperiod')"
                 >
                 </kendo-timeselector-messages>
             </kendo-timeselector>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i5.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i6.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: i7.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: i8.TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i6.DateInputComponent, selector: "kendo-dateinput", inputs: ["pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: i8.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: i9.TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -914,6 +937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
                         { provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
                         LocalizationService,
+                        BusViewService,
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.timepicker'
@@ -943,16 +967,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
             i18n-toggle="kendo.timepicker.toggle|The label for the toggle button in the timepicker component"
             toggle="Toggle time list"
+
+            i18n-hour="kendo.timepicker.hour|The label for the hour part in the timepicker component"
+            hour="Hour"
+
+            i18n-minute="kendo.timepicker.minute|The label for the minute part in the timepicker component"
+            minute="Minute"
+
+            i18n-second="kendo.timepicker.second|The label for the second part in the timepicker component"
+            second="Second"
+
+            i18n-millisecond="kendo.timepicker.millisecond|The label for the millisecond part in the timepicker component"
+            millisecond="Millisecond"
+
+            i18n-dayperiod="kendo.timepicker.dayperiod|The label for the dayperiod part in the timepicker component"
+            dayperiod="Dayperiod"
         >
         </ng-container>
         <kendo-dateinput
             #input
-            [focusableId]="focusableId"
+            pickerType="timepicker"
             [hasPopup]="true"
             [isPopupOpen]="show"
             [disabled]="disabled"
             [readonly]="readonly || readOnlyInput"
-            [role]="inputRole"
+            [role]="'combobox'"
             [ariaReadOnly]="readonly"
             [format]="format"
             [formatPlaceholder]="formatPlaceholder"
@@ -972,6 +1011,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <button
             #toggleButton
             type="button"
+            tabindex="-1"
             class="k-input-button k-button k-icon-button"
             [attr.title]="localization.get('toggle')"
             [attr.aria-label]="localization.get('toggle')"
@@ -1008,6 +1048,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     [cancel]="localization.get('cancel')"
                     [nowLabel]="localization.get('nowLabel')"
                     [now]="localization.get('now')"
+                    [hour]="localization.get('hour')"
+                    [minute]="localization.get('minute')"
+                    [second]="localization.get('second')"
+                    [millisecond]="localization.get('millisecond')"
+                    [dayperiod]="localization.get('dayperiod')"
                 >
                 </kendo-timeselector-messages>
             </kendo-timeselector>
@@ -1015,7 +1060,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <ng-container #container></ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i3.PickerService }, { type: i4.IntlService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1.BusViewService }, { type: i0.NgZone }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i4.PickerService }, { type: i5.IntlService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -1029,8 +1074,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], toggleButton: [{
                 type: ViewChild,
                 args: ['toggleButton', { static: true }]
-            }], focusableId: [{
-                type: Input
             }], disabled: [{
                 type: Input
             }], readonly: [{

package/esm2015/util.js

@@ -341,8 +341,8 @@ export const isTabExitingCalendar = (calendarType, focusedElement, shiftKey) =>
     }
     return calendarType === 'infinite' || ( // infinte calendar is always exited on first tab keydown
     calendarType === 'classic' &&
-        (shiftKey && focusedElement.classList.contains('k-calendar')) || // exited on main calendar element focused and back-tab
-        (!shiftKey && focusedElement.classList.contains('k-calendar-nav-next')) // exited on next button focused and regular tab
+        (shiftKey && focusedElement.classList.contains('k-calendar-table')) || // exited on main calendar element focused and back-tab
+        (!shiftKey && focusedElement.classList.contains('k-calendar-table')) // exited on next button focused and regular tab
     );
 };
 /**

package/esm2015/virtualization/virtualization.component.js

@@ -10,7 +10,8 @@ import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { Subject, fromEvent, interval, EMPTY, of, combineLatest, animationFrameScheduler as animationFrame } from 'rxjs';
 import { map, scan, takeWhile } from 'rxjs/operators';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
+import * as i1 from "@progress/kendo-angular-common";
+import * as i2 from "@angular/common";
 /**
  * @hidden
  */
@@ -49,10 +50,11 @@ const differenceToScroll = (scrollTop, staticOffset, maxScrollDifference) => {
  * @hidden
  */
 export class VirtualizationComponent {
-    constructor(scrollerFactory, container, renderer, zone) {
+    constructor(scrollerFactory, container, renderer, zone, scrollBarWidthService) {
         this.container = container;
         this.renderer = renderer;
         this.zone = zone;
+        this.scrollBarWidthService = scrollBarWidthService;
         this.direction = 'vertical';
         this.itemHeight = 1;
         this.itemWidth = 1;
@@ -231,7 +233,7 @@ export class VirtualizationComponent {
         return indexOffset < this.containerScrollPosition ? ScrollDirection.Backward : ScrollDirection.Forward;
     }
 }
-VirtualizationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: VirtualizationComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+VirtualizationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.0.0", version: "12.2.16", 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
@@ -242,7 +244,7 @@ VirtualizationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         [class.k-scrollable-horizontal-placeholder]="direction === 'horizontal'"
         [ngStyle]="totalVertexLength"
     ></div>
-  `, isInline: true, directives: [{ type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+  `, isInline: true, directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: VirtualizationComponent, decorators: [{
             type: Component,
             args: [{
@@ -263,7 +265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SCROLLER_FACTORY_TOKEN]
-                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { direction: [{
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.ScrollbarWidthService }]; }, propDecorators: { direction: [{
                 type: Input
             }], itemHeight: [{
                 type: Input