@progress/kendo-angular-dateinputs 7.1.3-dev.202210211241 → 7.1.3

package/fesm2015/kendo-angular-dateinputs.js

@@ -28,7 +28,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1666356015,
+    publishDate: 1666769918,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -150,8 +150,8 @@ const attributeNames = {
     ariaControls: 'aria-controls',
     ariaExpanded: 'aria-expanded',
     ariaHasPopup: 'aria-haspopup',
-    valueNow: 'valuenow',
-    valuetext: 'valuetext',
+    valueNow: 'aria-valuenow',
+    valuetext: 'aria-valuetext',
     ariaInvalid: 'aria-invalid'
 };
 
@@ -3565,8 +3565,10 @@ class MultiViewCalendarComponent {
      * @hidden
      */
     keydown(event) {
-        const onArrowRightAndControl = event.keyCode === Keys$1.ArrowRight && (event.ctrlKey || event.metaKey);
-        const onArrowLeftAndControl = event.keyCode === Keys$1.ArrowLeft && (event.ctrlKey || event.metaKey);
+        const arrowUpOrDownKeyPressed = [Keys$1.ArrowUp, Keys$1.ArrowDown].indexOf(event.keyCode) !== -1;
+        const ctrlKey = event.ctrlKey || event.metaKey;
+        const onArrowRightAndControl = event.keyCode === Keys$1.ArrowRight && ctrlKey;
+        const onArrowLeftAndControl = event.keyCode === Keys$1.ArrowLeft && ctrlKey;
         const onTKeyPress = event.keyCode === Keys$1.KeyT;
         const onEnterKeyPress = event.keyCode === Keys$1.Enter;
         if (onArrowRightAndControl) {
@@ -3579,6 +3581,9 @@ class MultiViewCalendarComponent {
             this.navigateView(this.prevView);
             return;
         }
+        else if (ctrlKey && arrowUpOrDownKeyPressed) {
+            event.preventDefault();
+        }
         else if (onTKeyPress) {
             this.focusedDate = getToday();
             this.bus.moveToBottom(this.activeViewEnum);
@@ -3817,7 +3822,6 @@ class MultiViewCalendarComponent {
     setClasses(element) {
         this.renderer.addClass(element, 'k-widget');
         this.renderer.addClass(element, 'k-calendar');
-        this.renderer.addClass(element, 'k-calendar-md');
         this.renderer.addClass(element, 'k-calendar-range');
     }
     verifyChanges() {
@@ -4374,10 +4378,11 @@ const differenceToScroll = (scrollTop, staticOffset, maxScrollDifference) => {
  * @hidden
  */
 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;
@@ -4556,7 +4561,7 @@ 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: i5.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
@@ -4588,7 +4593,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: i5.ScrollbarWidthService }]; }, propDecorators: { direction: [{
                 type: Input
             }], itemHeight: [{
                 type: Input
@@ -5718,7 +5723,7 @@ class CalendarComponent {
         this.resolvedPromise = Promise.resolve(null);
         this.destroyed = false;
         validatePackage(packageMetadata);
-        this.id = `kendo-calendarid-${this.bus.calendarId}-`;
+        this.id = `kendo-calendarid-${this.bus.calendarId}`;
         this.setClasses(element.nativeElement);
         if (this.pickerService) {
             this.pickerService.calendar = this;
@@ -5747,7 +5752,7 @@ class CalendarComponent {
      * @hidden
      */
     get headerId() {
-        return this.id + 'header-';
+        return this.id + '-header';
     }
     get focusedDate() {
         return this._focusedDate;
@@ -6280,7 +6285,6 @@ class CalendarComponent {
     setClasses(element) {
         this.renderer.addClass(element, 'k-widget');
         this.renderer.addClass(element, 'k-calendar');
-        this.renderer.addClass(element, 'k-calendar-md');
         this.renderer.addClass(element, `k-calendar-${this.type}`);
     }
     verifyChanges() {
@@ -6334,11 +6338,15 @@ class CalendarComponent {
     handleKeydown(args) {
         if (this.type === 'infinite') {
             // reserve the alt + arrow key commands for the picker
+            const ctrlKey = args.ctrlKey || args.metaKey;
             const arrowKeyPressed = [Keys$1.ArrowUp, Keys$1.ArrowRight, Keys$1.ArrowDown, Keys$1.ArrowLeft].indexOf(args.keyCode) !== -1;
             const reserveKeyCommandsForPicker = isPresent(this.pickerService) && arrowKeyPressed && args.altKey;
             if (reserveKeyCommandsForPicker) {
                 return;
             }
+            if (ctrlKey && arrowKeyPressed) {
+                args.preventDefault();
+            }
             // Prevent form from submitting on enter if used in datepicker (infinite view)
             const preventSubmitInDatePicker = isPresent(this.pickerService) && args.keyCode === Keys$1.Enter;
             if (preventSubmitInDatePicker) {
@@ -6835,6 +6843,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
+let nextId = 0;
 const MIN_DOC_LINK$1 = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DateInputComponent/#toc-min';
 const MAX_DOC_LINK$1 = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DateInputComponent/#toc-max';
 const VALUE_DOC_LINK$3 = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/#toc-using-with-json';
@@ -6885,6 +6894,7 @@ class KendoDate {
         validatePackage(packageMetadata);
         this.monthNames = this.allFormatedMonths();
         this.dayPeriods = this.allDayPeriods();
+        nextId++;
         if (!value) {
             this.value = getDate(new Date());
             const sampleFormat = this.dateFormatString(this.value, this.format).symbols;
@@ -7271,10 +7281,6 @@ class DateInputComponent {
         this.injector = injector;
         this.localization = localization;
         this.pickerService = pickerService;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-${guid()}`;
         /**
          * Sets or gets the `disabled` property of the DateInput and
          * determines whether the component is active
@@ -7375,10 +7381,6 @@ class DateInputComponent {
          * [spinner buttons]({% slug spinbuttons_dateinput %}).
          */
         this.spinners = false;
-        /**
-         * @hidden
-         */
-        this.isPopupOpen = false;
         /**
          * @hidden
          */
@@ -7481,6 +7483,17 @@ class DateInputComponent {
             this.ariaReadOnly = null;
         }
     }
+    /**
+     * @hidden
+     */
+    get focusableId() {
+        if (this.pickerType) {
+            return `${this.pickerType}-${nextId}`;
+        }
+        else {
+            return `dateinput-${nextId}`;
+        }
+    }
     /**
      * @hidden
      */
@@ -8226,7 +8239,7 @@ class DateInputComponent {
     }
 }
 DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.IntlService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i1$1.LocalizationService }, { token: PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateInputComponent, selector: "kendo-dateinput", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrect: "autoCorrect", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-input": "this.wrapperClass", "class.k-dateinput": "this.wrapperClass", "class.k-disabled": "this.disabledClass" } }, providers: [
+DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateInputComponent, selector: "kendo-dateinput", inputs: { pickerType: "pickerType", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrect: "autoCorrect", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-input": "this.wrapperClass", "class.k-dateinput": "this.wrapperClass", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true },
         { provide: L10N_PREFIX, useValue: 'kendo.dateinput' },
@@ -8376,7 +8389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.IntlService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i1$1.LocalizationService }, { type: PickerService, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { focusableId: [{
+                }] }]; }, propDecorators: { pickerType: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -8596,7 +8609,6 @@ const TWO_DIGIT_YEAR_MAX$1 = 68;
  */
 class DatePickerComponent {
     constructor(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, disabledDatesService, touchEnabled) {
-        var _a;
         this.zone = zone;
         this.localization = localization;
         this.cdr = cdr;
@@ -8607,10 +8619,6 @@ class DatePickerComponent {
         this.pickerService = pickerService;
         this.disabledDatesService = disabledDatesService;
         this.touchEnabled = touchEnabled;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-datepicker-${(_a = this.calendar) === null || _a === void 0 ? void 0 : _a.id}-`;
         /**
          * Defines the active view that the Calendar initially renders
          * ([see example]({% slug calendar_type_datepicker %}#toc-active-view)).
@@ -9444,7 +9452,7 @@ class DatePickerComponent {
     }
 }
 DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: DisabledDatesService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], focusableId: "focusableId", activeView: "activeView", bottomView: "bottomView", topView: "topView", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", popupSettings: "popupSettings", navigation: "navigation", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], activeView: "activeView", bottomView: "bottomView", topView: "topView", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", popupSettings: "popupSettings", navigation: "navigation", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => DatePickerComponent) },
@@ -9473,7 +9481,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         <kendo-dateinput
             #input
             [role]="'combobox'"
-            [focusableId]="focusableId"
+            pickerType="datepicker"
             [hasPopup]="true"
             [isPopupOpen]="show"
             [disabled]="disabled"
@@ -9547,7 +9555,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-calendar-messages>
             </kendo-calendar>
         <ng-template>
-    `, isInline: true, components: [{ type: 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: CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: 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: CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -9584,7 +9592,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <kendo-dateinput
             #input
             [role]="'combobox'"
-            [focusableId]="focusableId"
+            pickerType="datepicker"
             [hasPopup]="true"
             [isPopupOpen]="show"
             [disabled]="disabled"
@@ -9722,8 +9730,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], navigationItemTemplateRef: [{
                 type: Input,
                 args: ['navigationItemTemplate']
-            }], focusableId: [{
-                type: Input
             }], activeView: [{
                 type: Input
             }], bottomView: [{
@@ -11622,10 +11628,6 @@ class TimePickerComponent {
         this.pickerService = pickerService;
         this.intl = intl;
         this.touchEnabled = touchEnabled;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-timepicker-${this.bus.calendarId}-`;
         /**
          * Sets or gets the `disabled` property of the TimePicker and
          * determines whether the component is active
@@ -12050,9 +12052,11 @@ class TimePickerComponent {
         }
         if (altKey) {
             if (keyCode === Keys$1.ArrowUp) {
+                event.preventDefault();
                 this.show = false;
             }
             if (keyCode === Keys$1.ArrowDown && !this.show) {
+                event.preventDefault();
                 this.show = true;
             }
         }
@@ -12376,7 +12380,7 @@ class TimePickerComponent {
     }
 }
 TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerComponent, deps: [{ token: BusViewService }, { token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: i1.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.ɵ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) },
@@ -12428,7 +12432,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </ng-container>
         <kendo-dateinput
             #input
-            [focusableId]="focusableId"
+            pickerType="timepicker"
             [hasPopup]="true"
             [isPopupOpen]="show"
             [disabled]="disabled"
@@ -12500,7 +12504,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             </kendo-timeselector>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: 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: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: 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: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i5.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: [{
@@ -12560,7 +12564,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-container>
         <kendo-dateinput
             #input
-            [focusableId]="focusableId"
+            pickerType="timepicker"
             [hasPopup]="true"
             [isPopupOpen]="show"
             [disabled]="disabled"
@@ -12648,8 +12652,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: [{
@@ -12799,7 +12801,6 @@ const TWO_DIGIT_YEAR_MAX = 68;
  */
 class DateTimePickerComponent {
     constructor(popupService, intl, cdr, pickerService, ngZone, wrapper, touchEnabled, localization, disabledDatesService, renderer) {
-        var _a;
         this.popupService = popupService;
         this.intl = intl;
         this.cdr = cdr;
@@ -12822,10 +12823,6 @@ class DateTimePickerComponent {
          * will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
          */
         this.twoDigitYearMax = TWO_DIGIT_YEAR_MAX;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-datetimepicker-${(_a = this.calendar) === null || _a === void 0 ? void 0 : _a.id}-`;
         /**
          * Sets the title of the input element of the DateTimePicker.
          */
@@ -13771,7 +13768,7 @@ class DateTimePickerComponent {
     }
 }
 DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i1$2.PopupService }, { token: i1.IntlService }, { token: i0.ChangeDetectorRef }, { token: PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }, { token: i1$1.LocalizationService }, { token: DisabledDatesService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", focusableId: "focusableId", title: "title", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         PickerService,
         LocalizationService,
         DisabledDatesService,
@@ -13843,7 +13840,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [steps]="steps"
             [tabindex]="tabindex"
             [title]="title"
-            [focusableId]="focusableId"
+            pickerType="datetimepicker"
             [hasPopup]="true"
             [isPopupOpen]="isOpen"
             (valueChange)="handleInputValueChange($event)"
@@ -14022,7 +14019,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: 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: CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: 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: CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -14102,7 +14099,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [steps]="steps"
             [tabindex]="tabindex"
             [title]="title"
-            [focusableId]="focusableId"
+            pickerType="datetimepicker"
             [hasPopup]="true"
             [isPopupOpen]="isOpen"
             (valueChange)="handleInputValueChange($event)"
@@ -14310,8 +14307,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], popupSettings: [{
                 type: Input
-            }], focusableId: [{
-                type: Input
             }], title: [{
                 type: Input
             }], disabled: [{
@@ -15379,6 +15374,7 @@ class DateRangeEndInputDirective extends DateRangeInput {
     ngAfterViewInit() {
         const inputElement = this.dateInput.inputElement;
         this.renderer.removeAttribute(inputElement, attributeNames.ariaExpanded);
+        this.dateInput.pickerType = 'daterangeend';
     }
     ngOnDestroy() {
         super.destroy();
@@ -15461,6 +15457,8 @@ class DateRangeStartInputDirective extends DateRangeInput {
         const inputElement = this.dateInput.inputElement;
         this.renderer.setAttribute(inputElement, 'role', 'combobox');
         this.renderer.setAttribute(inputElement, attributeNames.ariaHasPopup, 'true');
+        this.dateInput.pickerType = 'daterangestart';
+        this.renderer.setAttribute(inputElement, attributeNames.ariaExpanded, 'false');
     }
     ngOnDestroy() {
         super.destroy();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dateinputs",
-  "version": "7.1.3-dev.202210211241",
+  "version": "7.1.3",
   "description": "Kendo UI for Angular Date Inputs Package - Everything you need to add date selection functionality to apps (DatePicker, TimePicker, DateInput, DateRangePicker, DateTimePicker, Calendar, and MultiViewCalendar).",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",

package/timepicker/timepicker.component.d.ts

@@ -37,10 +37,6 @@ export declare class TimePickerComponent implements ControlValueAccessor, OnInit
     container: ViewContainerRef;
     popupTemplate: TemplateRef<any>;
     toggleButton: ElementRef;
-    /**
-     * @hidden
-     */
-    focusableId: string;
     /**
      * Sets or gets the `disabled` property of the TimePicker and
      * determines whether the component is active
@@ -372,7 +368,7 @@ export declare class TimePickerComponent implements ControlValueAccessor, OnInit
     /**
      * @hidden
      */
-    handleKeydown(event: any): void;
+    handleKeydown(event: KeyboardEvent): void;
     /**
      * @hidden
      */
@@ -480,5 +476,5 @@ export declare class TimePickerComponent implements ControlValueAccessor, OnInit
     private handleDateCompletenessChange;
     private setComponentClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<TimePickerComponent, [null, null, null, null, null, null, null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TimePickerComponent, "kendo-timepicker", ["kendo-timepicker"], { "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"; }, { "valueChange": "valueChange"; "onFocus": "focus"; "onBlur": "blur"; "open": "open"; "close": "close"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TimePickerComponent, "kendo-timepicker", ["kendo-timepicker"], { "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"; }, { "valueChange": "valueChange"; "onFocus": "focus"; "onBlur": "blur"; "open": "open"; "close": "close"; }, never, never>;
 }

package/virtualization/virtualization.component.d.ts

@@ -5,6 +5,7 @@
 import { EventEmitter, ElementRef, InjectionToken, OnChanges, OnDestroy, OnInit, AfterViewInit, Renderer2, NgZone } from '@angular/core';
 import { Scrollable } from './models/scrollable.interface';
 import { ScrollerService, PageAction, ScrollAction } from './services/scroller.service';
+import { ScrollbarWidthService } from '@progress/kendo-angular-common';
 import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
 /**
@@ -29,6 +30,7 @@ export declare class VirtualizationComponent implements OnChanges, OnInit, OnDes
     container: ElementRef;
     renderer: Renderer2;
     zone: NgZone;
+    protected scrollBarWidthService: ScrollbarWidthService;
     direction: 'horizontal' | 'vertical';
     itemHeight: number;
     itemWidth: number;
@@ -58,7 +60,7 @@ export declare class VirtualizationComponent implements OnChanges, OnInit, OnDes
     private scrollSubscription;
     private containerScrollSubscription;
     private animationSubscription;
-    constructor(scrollerFactory: any, container: ElementRef, renderer: Renderer2, zone: NgZone);
+    constructor(scrollerFactory: any, container: ElementRef, renderer: Renderer2, zone: NgZone, scrollBarWidthService: ScrollbarWidthService);
     ngOnChanges(changes: any): void;
     ngOnInit(): void;
     ngAfterViewInit(): void;