@progress/kendo-angular-dateinputs 5.2.4-dev.202110060847 → 5.3.0

package/dist/es/calendar/calendar.component.js

@@ -168,6 +168,11 @@ var CalendarComponent = /** @class */ (function () {
          * ([more information and example]({% slug overview_calendar %}#toc-events)).
          */
         this.activeViewChange = new EventEmitter();
+        /**
+         * Fires when navigating in the currently active view
+         * ([more information and example]({% slug events_calendar %})).
+         */
+        this.navigate = new EventEmitter();
         /**
          * Fires when the active view date is changed
          * ([more information and example]({% slug overview_calendar %}#toc-events)).
@@ -213,6 +218,14 @@ var CalendarComponent = /** @class */ (function () {
          * > If the Calendar is out of the min or max range, it normalizes the defined `focusedDate`.
          */
         set: function (focusedDate) {
+            if (this.activeViewDate && !isEqual(this._focusedDate, focusedDate)) {
+                var service = this.bus.service(this.activeViewEnum);
+                var lastDayInPeriod = service.lastDayOfPeriod(this.activeViewDate);
+                var isFocusedDateInRange = service.isInRange(focusedDate, this.activeViewDate, lastDayInPeriod);
+                if (!isFocusedDateInRange) {
+                    this.emitNavigate(focusedDate);
+                }
+            }
             this._focusedDate = focusedDate || getToday();
             this.setAriaActivedescendant();
         },
@@ -444,7 +457,7 @@ var CalendarComponent = /** @class */ (function () {
     });
     Object.defineProperty(CalendarComponent.prototype, "calendarTabIndex", {
         get: function () {
-            return this.disabled ? undefined : this.tabIndex;
+            return this.disabled || this.type === 'classic' ? undefined : this.tabIndex;
         },
         enumerable: true,
         configurable: true
@@ -678,6 +691,13 @@ var CalendarComponent = /** @class */ (function () {
                 return null;
         }
     };
+    /**
+     * @hidden
+     */
+    CalendarComponent.prototype.emitNavigate = function (focusedDate) {
+        var activeView = CalendarViewEnum[this.activeViewEnum];
+        this.navigate.emit({ activeView: activeView, focusedDate: focusedDate });
+    };
     /**
      * @hidden
      */
@@ -688,6 +708,13 @@ var CalendarComponent = /** @class */ (function () {
             });
         }
     };
+    /**
+     * @hidden
+     */
+    CalendarComponent.prototype.handleActiveDateChange = function (date) {
+        this.activeViewDate = date;
+        this.emitEvent(this.activeViewDateChange, date);
+    };
     /**
      * @hidden
      */
@@ -931,6 +958,10 @@ var CalendarComponent = /** @class */ (function () {
         Output(),
         tslib_1.__metadata("design:type", EventEmitter)
     ], CalendarComponent.prototype, "activeViewChange", void 0);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], CalendarComponent.prototype, "navigate", void 0);
     tslib_1.__decorate([
         Output(),
         tslib_1.__metadata("design:type", EventEmitter)
@@ -1060,7 +1091,7 @@ var CalendarComponent = /** @class */ (function () {
                 SelectionService
             ],
             selector: 'kendo-calendar',
-            template: "\n    <ng-container kendoCalendarLocalizedMessages\n        i18n-today=\"kendo.calendar.today|The label for the today button in the calendar header\"\n        today=\"Today\"\n\n        i18n-prevButtonTitle=\"kendo.calendar.prevButtonTitle|The title of the previous button in the Classic calendar\"\n        prevButtonTitle=\"Navigate to previous view\"\n\n        i18n-nextButtonTitle=\"kendo.calendar.nextButtonTitle|The title of the next button in the Classic calendar\"\n        nextButtonTitle=\"Navigate to next view\"\n    >\n    </ng-container>\n    <ng-container *ngIf=\"type === 'infinite'\">\n        <kendo-calendar-navigation\n            *ngIf=\"navigation\"\n            [activeView]=\"activeViewEnum\"\n            [focusedDate]=\"focusedDate\"\n            [min]=\"min\"\n            [max]=\"max\"\n            [templateRef]=\"navigationItemTemplate?.templateRef\"\n            (valueChange)=\"handleNavigation($event)\"\n            (pageChange)=\"onPageChange()\"\n        >\n        </kendo-calendar-navigation>\n        <kendo-calendar-viewlist\n            [activeView]=\"activeViewEnum\"\n            [isActive]=\"isActive\"\n            [cellTemplateRef]=\"activeCellTemplate()?.templateRef\"\n            [headerTitleTemplateRef]=\"headerTitleTemplate?.templateRef\"\n            [weekNumberTemplateRef]=\"weekNumberTemplate?.templateRef\"\n            [cellUID]=\"cellUID\"\n            [min]=\"min\"\n            [max]=\"max\"\n            [focusedDate]=\"focusedDate\"\n            [weekNumber]=\"weekNumber\"\n            [selectedDates]=\"selectedDates\"\n            (todayButtonClick)=\"handleDateChange({\n                selectedDates: [$event],\n                focusedDate: $event\n            })\"\n            (cellClick)=\"handleCellClick($event)\"\n            (weekNumberCellClick)=\"handleWeekNumberClick($event)\"\n            (activeDateChange)=\"emitEvent(activeViewDateChange, $event)\"\n            (pageChange)=\"onPageChange()\"\n        >\n        </kendo-calendar-viewlist>\n        <kendo-resize-sensor (resize)=\"onResize()\"></kendo-resize-sensor>\n    </ng-container>\n    <ng-container *ngIf=\"type === 'classic'\">\n        <kendo-multiviewcalendar\n            #multiviewcalendar\n            [views]=\"1\"\n            [min]=\"min\"\n            [max]=\"max\"\n            [isActive]=\"isActive\"\n            [activeView]=\"activeView\"\n            [bottomView]=\"bottomView\"\n            [topView]=\"topView\"\n            [weekNumber]=\"weekNumber\"\n            [animateNavigation]=\"animateNavigation\"\n            [cellTemplate]=\"activeCellTemplate()\"\n            [monthCellTemplate]=\"monthCellTemplate\"\n            [yearCellTemplate]=\"yearCellTemplate\"\n            [decadeCellTemplate]=\"decadeCellTemplate\"\n            [centuryCellTemplate]=\"centuryCellTemplate\"\n            [headerTitleTemplate]=\"headerTitleTemplate\"\n            [weekNumberTemplate]=\"weekNumberTemplate\"\n            [focusedDate]=\"focusedDate\"\n            [selection]=\"selection\"\n            [value]=\"value\"\n            [disabledDates]=\"disabledDates\"\n            (activeViewChange)=\"handleActiveViewChange($event)\"\n            (valueChange)=\"handleMultiViewCalendarValueChange($event, multiviewcalendar.focusedDate)\"\n        >\n            <kendo-multiviewcalendar-messages\n                [today]=\"localization.get('today')\"\n                [prevButtonTitle]=\"localization.get('prevButtonTitle')\"\n                [nextButtonTitle]=\"localization.get('nextButtonTitle')\"\n            >\n            </kendo-multiviewcalendar-messages>\n        </kendo-multiviewcalendar>\n    </ng-container>\n  "
+            template: "\n    <ng-container kendoCalendarLocalizedMessages\n        i18n-today=\"kendo.calendar.today|The label for the today button in the calendar header\"\n        today=\"Today\"\n\n        i18n-prevButtonTitle=\"kendo.calendar.prevButtonTitle|The title of the previous button in the Classic calendar\"\n        prevButtonTitle=\"Navigate to previous view\"\n\n        i18n-nextButtonTitle=\"kendo.calendar.nextButtonTitle|The title of the next button in the Classic calendar\"\n        nextButtonTitle=\"Navigate to next view\"\n    >\n    </ng-container>\n    <ng-container *ngIf=\"type === 'infinite'\">\n        <kendo-calendar-navigation\n            *ngIf=\"navigation\"\n            [activeView]=\"activeViewEnum\"\n            [focusedDate]=\"focusedDate\"\n            [min]=\"min\"\n            [max]=\"max\"\n            [templateRef]=\"navigationItemTemplate?.templateRef\"\n            (valueChange)=\"handleNavigation($event)\"\n            (pageChange)=\"onPageChange()\"\n        >\n        </kendo-calendar-navigation>\n        <kendo-calendar-viewlist\n            [activeView]=\"activeViewEnum\"\n            [isActive]=\"isActive\"\n            [cellTemplateRef]=\"activeCellTemplate()?.templateRef\"\n            [headerTitleTemplateRef]=\"headerTitleTemplate?.templateRef\"\n            [weekNumberTemplateRef]=\"weekNumberTemplate?.templateRef\"\n            [cellUID]=\"cellUID\"\n            [min]=\"min\"\n            [max]=\"max\"\n            [focusedDate]=\"focusedDate\"\n            [weekNumber]=\"weekNumber\"\n            [selectedDates]=\"selectedDates\"\n            (todayButtonClick)=\"handleDateChange({\n                selectedDates: [$event],\n                focusedDate: $event\n            })\"\n            (cellClick)=\"handleCellClick($event)\"\n            (weekNumberCellClick)=\"handleWeekNumberClick($event)\"\n            (activeDateChange)=\"handleActiveDateChange($event)\"\n            (pageChange)=\"onPageChange()\"\n        >\n        </kendo-calendar-viewlist>\n        <kendo-resize-sensor (resize)=\"onResize()\"></kendo-resize-sensor>\n    </ng-container>\n    <ng-container *ngIf=\"type === 'classic'\">\n        <kendo-multiviewcalendar\n            #multiviewcalendar\n            [views]=\"1\"\n            [min]=\"min\"\n            [max]=\"max\"\n            [isActive]=\"isActive\"\n            [activeView]=\"activeView\"\n            [bottomView]=\"bottomView\"\n            [topView]=\"topView\"\n            [weekNumber]=\"weekNumber\"\n            [animateNavigation]=\"animateNavigation\"\n            [cellTemplate]=\"activeCellTemplate()\"\n            [monthCellTemplate]=\"monthCellTemplate\"\n            [yearCellTemplate]=\"yearCellTemplate\"\n            [decadeCellTemplate]=\"decadeCellTemplate\"\n            [centuryCellTemplate]=\"centuryCellTemplate\"\n            [headerTitleTemplate]=\"headerTitleTemplate\"\n            [weekNumberTemplate]=\"weekNumberTemplate\"\n            [focusedDate]=\"focusedDate\"\n            [selection]=\"selection\"\n            [value]=\"value\"\n            [disabledDates]=\"disabledDates\"\n            (activeViewChange)=\"handleActiveViewChange($event)\"\n            (navigate)=\"navigate.emit($event)\"\n            (valueChange)=\"handleMultiViewCalendarValueChange($event, multiviewcalendar.focusedDate)\"\n        >\n            <kendo-multiviewcalendar-messages\n                [today]=\"localization.get('today')\"\n                [prevButtonTitle]=\"localization.get('prevButtonTitle')\"\n                [nextButtonTitle]=\"localization.get('nextButtonTitle')\"\n            >\n            </kendo-multiviewcalendar-messages>\n        </kendo-multiviewcalendar>\n    </ng-container>\n  "
         }),
         tslib_1.__param(12, Optional()),
         tslib_1.__metadata("design:paramtypes", [BusViewService,

package/dist/es/calendar/header.component.js

@@ -38,10 +38,9 @@ var HeaderComponent = /** @class */ (function () {
         this.subscriptions = new Subscription();
     }
     HeaderComponent.prototype.ngOnInit = function () {
-        this.subscriptions
-            .add(this.intl.changes.subscribe(this.intlChange.bind(this)))
-            .add(this.localization.changes.subscribe(this.l10nChange.bind(this)))
-            .add(this.disabledDatesService.changes.subscribe(this.setTodayAvailability.bind(this)));
+        this.subscriptions.add(this.intl.changes.subscribe(this.intlChange.bind(this)));
+        this.subscriptions.add(this.localization.changes.subscribe(this.l10nChange.bind(this)));
+        this.subscriptions.add(this.disabledDatesService.changes.subscribe(this.setTodayAvailability.bind(this)));
     };
     HeaderComponent.prototype.ngOnChanges = function (_) {
         var service = this.bus.service(this.activeView);

package/dist/es/calendar/horizontal-view-list.component.js

@@ -320,7 +320,9 @@ var HorizontalViewListComponent = /** @class */ (function () {
     ], HorizontalViewListComponent.prototype, "activeDateChange", void 0);
     tslib_1.__decorate([
         HostBinding("class.k-calendar-view"),
-        HostBinding("class.k-justify-align-start"),
+        HostBinding("class.k-hstack"),
+        HostBinding("class.k-align-items-start"),
+        HostBinding("class.k-justify-content-center"),
         tslib_1.__metadata("design:type", Boolean)
     ], HorizontalViewListComponent.prototype, "getComponentClass", void 0);
     tslib_1.__decorate([

package/dist/es/calendar/multiview-calendar.component.js

@@ -158,6 +158,11 @@ var MultiViewCalendarComponent = /** @class */ (function () {
          * ([more information and example]({% slug overview_multiviewcalendar %}#toc-events)).
          */
         this.activeViewChange = new EventEmitter();
+        /**
+         * Fires when navigating in the currently active view
+         * ([more information and example]({% slug events_multiviewcalendar %})).
+         */
+        this.navigate = new EventEmitter();
         /**
          * Fires when a view cell is entered
          * ([more information and example]({% slug overview_multiviewcalendar %}#toc-events)).
@@ -190,7 +195,7 @@ var MultiViewCalendarComponent = /** @class */ (function () {
         this.minValidateFn = noop;
         this.maxValidateFn = noop;
         this.disabledDatesRangeValidateFn = noop;
-        this.subscriptions = new Subscription(function () { });
+        this.subscriptions = new Subscription();
         this.setClasses(element.nativeElement);
     }
     Object.defineProperty(MultiViewCalendarComponent.prototype, "focusedDate", {
@@ -490,6 +495,10 @@ var MultiViewCalendarComponent = /** @class */ (function () {
         }
         this.focusedDate = candidate;
         event.preventDefault();
+        var isSameView = this.bus.service(this.activeViewEnum).isInArray(this.focusedDate, this.viewList.dates);
+        if (!isSameView) {
+            this.emitNavigate(this.focusedDate);
+        }
     };
     MultiViewCalendarComponent.prototype.ngOnInit = function () {
         var _this = this;
@@ -578,6 +587,18 @@ var MultiViewCalendarComponent = /** @class */ (function () {
         this.onControlChange(this.parseSelectionToValue(availableDates));
         this.valueChange.emit(this.parseSelectionToValue(availableDates));
     };
+    /**
+     * @hidden
+     */
+    MultiViewCalendarComponent.prototype.handleTodayButtonClick = function (args) {
+        var todayDate = args.focusedDate;
+        var isSameView = this.bus.service(this.activeViewEnum).isInArray(todayDate, this.viewList.dates);
+        var isBottomView = !this.bus.canMoveDown(this.activeViewEnum);
+        if (!isSameView && isBottomView) {
+            this.emitNavigate(todayDate);
+        }
+        this.handleDateChange(args);
+    };
     /**
      * @hidden
      */
@@ -644,9 +665,17 @@ var MultiViewCalendarComponent = /** @class */ (function () {
     /**
      * @hidden
      */
-    MultiViewCalendarComponent.prototype.navigate = function (action) {
+    MultiViewCalendarComponent.prototype.navigateView = function (action) {
         this.focusedDate = this.viewList.navigate(action);
         this.updateButtonState();
+        this.emitNavigate(this.focusedDate);
+    };
+    /**
+     * @hidden
+     */
+    MultiViewCalendarComponent.prototype.emitNavigate = function (focusedDate) {
+        var activeView = CalendarViewEnum[this.activeViewEnum];
+        this.navigate.emit({ activeView: activeView, focusedDate: focusedDate });
     };
     /**
      * @hidden
@@ -664,6 +693,10 @@ var MultiViewCalendarComponent = /** @class */ (function () {
     MultiViewCalendarComponent.prototype.handleCellClick = function (_a) {
         var date = _a.date, modifiers = _a.modifiers;
         this.performSelection(date, modifiers);
+        var isSameView = this.bus.service(this.activeViewEnum).isInArray(this.focusedDate, this.viewList.dates);
+        if (!isSameView) {
+            this.emitNavigate(this.focusedDate);
+        }
     };
     /**
      * @hidden
@@ -836,6 +869,10 @@ var MultiViewCalendarComponent = /** @class */ (function () {
         Output(),
         tslib_1.__metadata("design:type", EventEmitter)
     ], MultiViewCalendarComponent.prototype, "activeViewChange", void 0);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], MultiViewCalendarComponent.prototype, "navigate", void 0);
     tslib_1.__decorate([
         Output(),
         tslib_1.__metadata("design:type", EventEmitter)
@@ -1001,7 +1038,7 @@ var MultiViewCalendarComponent = /** @class */ (function () {
                 SelectionService
             ],
             selector: 'kendo-multiviewcalendar',
-            template: "\n    <ng-container kendoMultiViewCalendarLocalizedMessages\n        i18n-today=\"kendo.multiviewcalendar.today|The label for the today button in the calendar header\"\n        today=\"Today\"\n\n        i18n-prevButtonTitle=\"kendo.multiviewcalendar.prevButtonTitle|The label for the previous button in the Multiview calendar\"\n        prevButtonTitle=\"Navigate to previous view\"\n\n        i18n-nextButtonTitle=\"kendo.multiviewcalendar.nextButtonTitle|The label for the next button in the Multiview calendar\"\n        nextButtonTitle=\"Navigate to next view\"\n    >\n    </ng-container>\n    <kendo-calendar-header\n        [activeView]=\"activeViewEnum\"\n        [currentDate]=\"activeDate\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [rangeLength]=\"views\"\n        [templateRef]=\"headerTitleTemplate?.templateRef\"\n        [isPrevDisabled]=\"isPrevDisabled\"\n        [isNextDisabled]=\"isNextDisabled\"\n        [showNavigationButtons]=\"true\"\n        (todayButtonClick)=\"handleDateChange({ selectedDates: [$event], focusedDate: $event })\"\n        (prevButtonClick)=\"navigate(prevView)\"\n        (nextButtonClick)=\"navigate(nextView)\"\n    >\n    </kendo-calendar-header>\n    <kendo-calendar-horizontal\n        [activeView]=\"activeViewEnum\"\n        [isActive]=\"isActive || isHovered\"\n        [cellTemplateRef]=\"activeCellTemplate()?.templateRef\"\n        [weekNumberTemplateRef]=\"weekNumberTemplate?.templateRef\"\n        [cellUID]=\"cellUID\"\n        [views]=\"views\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [focusedDate]=\"focusedDate\"\n        [animateNavigation]=\"animateNavigation\"\n        [showViewHeader]=\"showViewHeader\"\n        [weekNumber]=\"weekNumber\"\n        [activeRangeEnd]=\"activeRangeEnd\"\n        [selectionRange]=\"selectionRange\"\n        [selectedDates]=\"selectedDates\"\n        (valueChange)=\"handleDateChange($event)\"\n        (cellClick)=\"handleCellClick($event)\"\n        (weekNumberCellClick)=\"handleWeekNumberClick($event)\"\n        (cellEnter)=\"emitCellEvent(cellEnter, $event)\"\n        (cellLeave)=\"emitCellEvent(cellLeave, $event)\"\n        (activeDateChange)=\"setActiveDate($event)\"\n    >\n    </kendo-calendar-horizontal>\n  "
+            template: "\n    <ng-container kendoMultiViewCalendarLocalizedMessages\n        i18n-today=\"kendo.multiviewcalendar.today|The label for the today button in the calendar header\"\n        today=\"Today\"\n\n        i18n-prevButtonTitle=\"kendo.multiviewcalendar.prevButtonTitle|The label for the previous button in the Multiview calendar\"\n        prevButtonTitle=\"Navigate to previous view\"\n\n        i18n-nextButtonTitle=\"kendo.multiviewcalendar.nextButtonTitle|The label for the next button in the Multiview calendar\"\n        nextButtonTitle=\"Navigate to next view\"\n    >\n    </ng-container>\n    <kendo-calendar-header\n        [activeView]=\"activeViewEnum\"\n        [currentDate]=\"activeDate\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [rangeLength]=\"views\"\n        [templateRef]=\"headerTitleTemplate?.templateRef\"\n        [isPrevDisabled]=\"isPrevDisabled\"\n        [isNextDisabled]=\"isNextDisabled\"\n        [showNavigationButtons]=\"true\"\n        (todayButtonClick)=\"handleTodayButtonClick({ selectedDates: [$event], focusedDate: $event })\"\n        (prevButtonClick)=\"navigateView(prevView)\"\n        (nextButtonClick)=\"navigateView(nextView)\"\n    >\n    </kendo-calendar-header>\n    <kendo-calendar-horizontal\n        [activeView]=\"activeViewEnum\"\n        [isActive]=\"isActive || isHovered\"\n        [cellTemplateRef]=\"activeCellTemplate()?.templateRef\"\n        [weekNumberTemplateRef]=\"weekNumberTemplate?.templateRef\"\n        [cellUID]=\"cellUID\"\n        [views]=\"views\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [focusedDate]=\"focusedDate\"\n        [animateNavigation]=\"animateNavigation\"\n        [showViewHeader]=\"showViewHeader\"\n        [weekNumber]=\"weekNumber\"\n        [activeRangeEnd]=\"activeRangeEnd\"\n        [selectionRange]=\"selectionRange\"\n        [selectedDates]=\"selectedDates\"\n        (valueChange)=\"handleDateChange($event)\"\n        (cellClick)=\"handleCellClick($event)\"\n        (weekNumberCellClick)=\"handleWeekNumberClick($event)\"\n        (cellEnter)=\"emitCellEvent(cellEnter, $event)\"\n        (cellLeave)=\"emitCellEvent(cellLeave, $event)\"\n        (activeDateChange)=\"setActiveDate($event)\"\n    >\n    </kendo-calendar-horizontal>\n  "
         }),
         tslib_1.__metadata("design:paramtypes", [BusViewService,
             ElementRef,

package/dist/es/calendar/services/century-view.service.js

@@ -6,7 +6,7 @@ import * as tslib_1 from "tslib";
 var _a;
 /* tslint:disable:object-literal-sort-keys */
 import { Injectable } from '@angular/core';
-import { addDecades, addCenturies, cloneDate, durationInCenturies, firstYearOfDecade, firstDecadeOfCentury, lastDecadeOfCentury, createDate } from '@progress/kendo-date-math';
+import { addDecades, addCenturies, cloneDate, durationInCenturies, firstYearOfDecade, firstDecadeOfCentury, lastDecadeOfCentury, createDate, lastYearOfDecade, lastMonthOfYear, lastDayOfMonth } from '@progress/kendo-date-math';
 import { Action } from '../models/navigation-action.enum';
 import { EMPTY_SELECTIONRANGE } from '../models/selection-range.interface';
 import { getToday, isInSelectionRange, range } from '../../util';
@@ -114,6 +114,12 @@ var CenturyViewService = /** @class */ (function () {
         var firstYear = firstYearOfDecade(firstDecadeOfCentury(date));
         return createDate(firstYear.getFullYear(), 0, 1);
     };
+    CenturyViewService.prototype.lastDayOfPeriod = function (date) {
+        var decade = lastDecadeOfCentury(date);
+        var year = lastYearOfDecade(decade);
+        var month = lastMonthOfYear(year);
+        return lastDayOfMonth(month);
+    };
     CenturyViewService.prototype.isRangeStart = function (value) {
         return value.getFullYear() % 1000 === 0;
     };

package/dist/es/calendar/services/decade-view.service.js

@@ -6,7 +6,7 @@ import * as tslib_1 from "tslib";
 var _a;
 /* tslint:disable:object-literal-sort-keys */
 import { Injectable } from '@angular/core';
-import { addDecades, addYears, cloneDate, durationInDecades, firstYearOfDecade, lastYearOfDecade, createDate } from '@progress/kendo-date-math';
+import { addDecades, addYears, cloneDate, durationInDecades, firstYearOfDecade, lastYearOfDecade, createDate, lastMonthOfYear, lastDayOfMonth } from '@progress/kendo-date-math';
 import { Action } from '../models/navigation-action.enum';
 import { EMPTY_SELECTIONRANGE } from '../models/selection-range.interface';
 import { getToday, isInSelectionRange, range } from '../../util';
@@ -114,6 +114,11 @@ var DecadeViewService = /** @class */ (function () {
         var firstYear = firstYearOfDecade(date);
         return createDate(firstYear.getFullYear(), 0, 1);
     };
+    DecadeViewService.prototype.lastDayOfPeriod = function (date) {
+        var year = lastYearOfDecade(date);
+        var month = lastMonthOfYear(year);
+        return lastDayOfMonth(month);
+    };
     DecadeViewService.prototype.isRangeStart = function (value) {
         return value.getFullYear() % 100 === 0;
     };

package/dist/es/calendar/services/month-view.service.js

@@ -124,6 +124,9 @@ var MonthViewService = /** @class */ (function () {
         }
         return createDate(date.getFullYear(), date.getMonth(), 1);
     };
+    MonthViewService.prototype.lastDayOfPeriod = function (date) {
+        return lastDayOfMonth(date);
+    };
     MonthViewService.prototype.isRangeStart = function (value) {
         return !value.getMonth();
     };

package/dist/es/calendar/services/year-view.service.js

@@ -7,7 +7,7 @@ var _a;
 /* tslint:disable:object-literal-sort-keys */
 import { Injectable } from '@angular/core';
 import { IntlService } from '@progress/kendo-angular-intl';
-import { addMonths, addYears, cloneDate, createDate, durationInYears, firstMonthOfYear, lastMonthOfYear } from '@progress/kendo-date-math';
+import { addMonths, addYears, cloneDate, createDate, durationInYears, firstMonthOfYear, lastDayOfMonth, lastMonthOfYear } from '@progress/kendo-date-math';
 import { Action } from '../models/navigation-action.enum';
 import { EMPTY_SELECTIONRANGE } from '../models/selection-range.interface';
 import { getToday, isInSelectionRange, range } from '../../util';
@@ -138,6 +138,10 @@ var YearViewService = /** @class */ (function () {
         }
         return createDate(date.getFullYear(), 0, 1);
     };
+    YearViewService.prototype.lastDayOfPeriod = function (date) {
+        var month = lastMonthOfYear(date);
+        return lastDayOfMonth(month);
+    };
     YearViewService.prototype.isRangeStart = function (value) {
         return value.getFullYear() % 10 === 0;
     };

package/dist/es/daterange/date-range-input.js

@@ -19,8 +19,8 @@ var DateRangeInput = /** @class */ (function () {
         this.renderer = renderer;
         this.zone = zone;
         this.navigateCalendarOnFocus = false;
-        this.popupSubscriptions = new Subscription(function () { });
-        this.subscriptions = new Subscription(function () { });
+        this.popupSubscriptions = new Subscription();
+        this.subscriptions = new Subscription();
     }
     Object.defineProperty(DateRangeInput.prototype, "isActiveEnd", {
         get: function () {
@@ -79,7 +79,7 @@ var DateRangeInput = /** @class */ (function () {
     };
     DateRangeInput.prototype.unsubscribePopup = function () {
         this.popupSubscriptions.unsubscribe();
-        this.popupSubscriptions = new Subscription(function () { });
+        this.popupSubscriptions = new Subscription();
     };
     DateRangeInput.prototype.activate = function () {
         this.dateRangeService.setActiveRangeEnd(this.activeRangeEnd);

package/dist/es/daterange/date-range-popup.component.js

@@ -84,8 +84,8 @@ var DateRangePopupComponent = /** @class */ (function () {
          * @hidden
          */
         this.popupUID = guid();
-        this.calendarSubscriptions = new Subscription(function () { });
-        this.popupSubscriptions = new Subscription(function () { });
+        this.calendarSubscriptions = new Subscription();
+        this.popupSubscriptions = new Subscription();
         this.resolvedPromise = Promise.resolve();
     }
     Object.defineProperty(DateRangePopupComponent.prototype, "calendar", {

package/dist/es/daterange/date-range-selection.directive.js

@@ -38,7 +38,7 @@ var DateRangeSelectionDirective = /** @class */ (function () {
          * the section on [events]({% slug overview_multiviewcalendar %}#toc-events).
          */
         this.selectionRangeChange = new EventEmitter();
-        this.calendarSubscriptions = new Subscription(function () { });
+        this.calendarSubscriptions = new Subscription();
         this.dateRangeService = this.dateRangeService || new DateRangeService();
         renderer.setAttribute(element.nativeElement, 'aria-multiselectable', 'true');
     }

package/dist/es/package-metadata.js

@@ -9,7 +9,7 @@ export var packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1633509845,
+    publishDate: 1635945725,
     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'
 };

package/dist/es2015/calendar/calendar.component.d.ts

@@ -188,6 +188,14 @@ export declare class CalendarComponent implements ControlValueAccessor, OnChange
      * ([more information and example]({% slug overview_calendar %}#toc-events)).
      */
     activeViewChange: EventEmitter<CalendarView>;
+    /**
+     * Fires when navigating in the currently active view
+     * ([more information and example]({% slug events_calendar %})).
+     */
+    navigate: EventEmitter<{
+        activeView: CalendarView;
+        focusedDate: Date;
+    }>;
     /**
      * Fires when the active view date is changed
      * ([more information and example]({% slug overview_calendar %}#toc-events)).
@@ -295,6 +303,7 @@ export declare class CalendarComponent implements ControlValueAccessor, OnChange
     private resolvedPromise;
     private destroyed;
     private localizationChangeSubscription;
+    private activeViewDate;
     constructor(bus: BusViewService, dom: CalendarDOMService, element: ElementRef, navigator: NavigationService, renderer: Renderer2, cdr: ChangeDetectorRef, ngZone: NgZone, injector: Injector, scrollSyncService: ScrollSyncService, disabledDatesService: DisabledDatesService, localization: LocalizationService, selectionService: SelectionService, pickerService?: PickerService);
     ngOnInit(): void;
     ngOnChanges(changes: any): void;
@@ -378,10 +387,18 @@ export declare class CalendarComponent implements ControlValueAccessor, OnChange
      * @hidden
      */
     activeCellTemplate(): any;
+    /**
+     * @hidden
+     */
+    emitNavigate(focusedDate: Date): void;
     /**
      * @hidden
      */
     emitEvent(emitter: any, args: any): void;
+    /**
+     * @hidden
+     */
+    handleActiveDateChange(date: Date): void;
     /**
      * @hidden
      */

package/dist/es2015/calendar/calendar.component.js

@@ -168,6 +168,11 @@ let CalendarComponent = class CalendarComponent {
          * ([more information and example]({% slug overview_calendar %}#toc-events)).
          */
         this.activeViewChange = new EventEmitter();
+        /**
+         * Fires when navigating in the currently active view
+         * ([more information and example]({% slug events_calendar %})).
+         */
+        this.navigate = new EventEmitter();
         /**
          * Fires when the active view date is changed
          * ([more information and example]({% slug overview_calendar %}#toc-events)).
@@ -209,6 +214,14 @@ let CalendarComponent = class CalendarComponent {
      * > If the Calendar is out of the min or max range, it normalizes the defined `focusedDate`.
      */
     set focusedDate(focusedDate) {
+        if (this.activeViewDate && !isEqual(this._focusedDate, focusedDate)) {
+            const service = this.bus.service(this.activeViewEnum);
+            const lastDayInPeriod = service.lastDayOfPeriod(this.activeViewDate);
+            const isFocusedDateInRange = service.isInRange(focusedDate, this.activeViewDate, lastDayInPeriod);
+            if (!isFocusedDateInRange) {
+                this.emitNavigate(focusedDate);
+            }
+        }
         this._focusedDate = focusedDate || getToday();
         this.setAriaActivedescendant();
     }
@@ -363,7 +376,7 @@ let CalendarComponent = class CalendarComponent {
         return 'grid';
     }
     get calendarTabIndex() {
-        return this.disabled ? undefined : this.tabIndex;
+        return this.disabled || this.type === 'classic' ? undefined : this.tabIndex;
     }
     get ariaDisabled() {
         return this.disabled;
@@ -583,6 +596,13 @@ let CalendarComponent = class CalendarComponent {
                 return null;
         }
     }
+    /**
+     * @hidden
+     */
+    emitNavigate(focusedDate) {
+        const activeView = CalendarViewEnum[this.activeViewEnum];
+        this.navigate.emit({ activeView, focusedDate });
+    }
     /**
      * @hidden
      */
@@ -593,6 +613,13 @@ let CalendarComponent = class CalendarComponent {
             });
         }
     }
+    /**
+     * @hidden
+     */
+    handleActiveDateChange(date) {
+        this.activeViewDate = date;
+        this.emitEvent(this.activeViewDateChange, date);
+    }
     /**
      * @hidden
      */
@@ -834,6 +861,10 @@ tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
 ], CalendarComponent.prototype, "activeViewChange", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], CalendarComponent.prototype, "navigate", void 0);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -1005,7 +1036,7 @@ CalendarComponent = tslib_1.__decorate([
             })"
             (cellClick)="handleCellClick($event)"
             (weekNumberCellClick)="handleWeekNumberClick($event)"
-            (activeDateChange)="emitEvent(activeViewDateChange, $event)"
+            (activeDateChange)="handleActiveDateChange($event)"
             (pageChange)="onPageChange()"
         >
         </kendo-calendar-viewlist>
@@ -1035,6 +1066,7 @@ CalendarComponent = tslib_1.__decorate([
             [value]="value"
             [disabledDates]="disabledDates"
             (activeViewChange)="handleActiveViewChange($event)"
+            (navigate)="navigate.emit($event)"
             (valueChange)="handleMultiViewCalendarValueChange($event, multiviewcalendar.focusedDate)"
         >
             <kendo-multiviewcalendar-messages

package/dist/es2015/calendar/header.component.js

@@ -38,10 +38,9 @@ let HeaderComponent = class HeaderComponent {
         this.subscriptions = new Subscription();
     }
     ngOnInit() {
-        this.subscriptions
-            .add(this.intl.changes.subscribe(this.intlChange.bind(this)))
-            .add(this.localization.changes.subscribe(this.l10nChange.bind(this)))
-            .add(this.disabledDatesService.changes.subscribe(this.setTodayAvailability.bind(this)));
+        this.subscriptions.add(this.intl.changes.subscribe(this.intlChange.bind(this)));
+        this.subscriptions.add(this.localization.changes.subscribe(this.l10nChange.bind(this)));
+        this.subscriptions.add(this.disabledDatesService.changes.subscribe(this.setTodayAvailability.bind(this)));
     }
     ngOnChanges(_) {
         const service = this.bus.service(this.activeView);

package/dist/es2015/calendar/horizontal-view-list.component.js

@@ -300,7 +300,9 @@ tslib_1.__decorate([
 ], HorizontalViewListComponent.prototype, "activeDateChange", void 0);
 tslib_1.__decorate([
     HostBinding("class.k-calendar-view"),
-    HostBinding("class.k-justify-align-start"),
+    HostBinding("class.k-hstack"),
+    HostBinding("class.k-align-items-start"),
+    HostBinding("class.k-justify-content-center"),
     tslib_1.__metadata("design:type", Boolean)
 ], HorizontalViewListComponent.prototype, "getComponentClass", void 0);
 tslib_1.__decorate([

package/dist/es2015/calendar/models/view-service.interface.d.ts

@@ -27,4 +27,5 @@ export interface ViewService {
     viewDate(date: Date, max: Date, viewsCount: number): Date;
     dateRange(start: Date, end: Date): Date[];
     beginningOfPeriod(date: Date): Date;
+    lastDayOfPeriod(date: Date): Date;
 }

package/dist/es2015/calendar/multiview-calendar.component.d.ts

@@ -187,6 +187,14 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
      * ([more information and example]({% slug overview_multiviewcalendar %}#toc-events)).
      */
     activeViewChange: EventEmitter<CalendarView>;
+    /**
+     * Fires when navigating in the currently active view
+     * ([more information and example]({% slug events_multiviewcalendar %})).
+     */
+    navigate: EventEmitter<{
+        activeView: CalendarView;
+        focusedDate: Date;
+    }>;
     /**
      * Fires when a view cell is entered
      * ([more information and example]({% slug overview_multiviewcalendar %}#toc-events)).
@@ -349,6 +357,13 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
         selectedDates: Date[];
         focusedDate: Date;
     }): void;
+    /**
+     * @hidden
+     */
+    handleTodayButtonClick(args: {
+        selectedDates: Date[];
+        focusedDate: Date;
+    }): void;
     /**
      * @hidden
      */
@@ -386,7 +401,11 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
     /**
      * @hidden
      */
-    navigate(action: Action): void;
+    navigateView(action: Action): void;
+    /**
+     * @hidden
+     */
+    emitNavigate(focusedDate: Date): void;
     /**
      * @hidden
      */