@progress/kendo-angular-dateinputs 5.2.4-dev.202110081056 → 5.3.1-dev.202112011809

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

@@ -11,6 +11,7 @@ import { cloneDate, isEqual } from '@progress/kendo-date-math';
 import { hasObservers, KendoInput, guid, Keys } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
+import { MultiViewCalendarComponent } from './multiview-calendar.component';
 import { NavigationComponent } from './navigation.component';
 import { ViewListComponent } from './view-list.component';
 import { CalendarDOMService } from './services/dom.service';
@@ -168,6 +169,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 +219,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();
         },
@@ -435,23 +449,18 @@ var CalendarComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(CalendarComponent.prototype, "widgetRole", {
-        get: function () {
-            return 'grid';
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(CalendarComponent.prototype, "calendarTabIndex", {
         get: function () {
-            return this.disabled ? undefined : this.tabIndex;
+            // in Classic mode, the inner MultiViewCalendar is the focusable element
+            return this.disabled || this.type === 'classic' ? undefined : this.tabIndex;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(CalendarComponent.prototype, "ariaDisabled", {
         get: function () {
-            return this.disabled;
+            // in Classic mode, the inner MultiViewCalendar should handle the disabled class and aria attr
+            return this.type === 'classic' ? undefined : this.disabled;
         },
         enumerable: true,
         configurable: true
@@ -537,19 +546,23 @@ var CalendarComponent = /** @class */ (function () {
      * ```
      */
     CalendarComponent.prototype.focus = function () {
-        if (!this.element) {
-            return;
+        var focusTarget = this.type === 'infinite' ?
+            this.element && this.element.nativeElement :
+            this.multiViewCalendar;
+        if (isPresent(focusTarget)) {
+            focusTarget.focus();
         }
-        this.element.nativeElement.focus();
     };
     /**
      * Blurs the Calendar component.
      */
     CalendarComponent.prototype.blur = function () {
-        if (!this.element) {
-            return;
+        var blurTarget = this.type === 'infinite' ?
+            this.element && this.element.nativeElement :
+            this.multiViewCalendar;
+        if (isPresent(blurTarget)) {
+            blurTarget.blur();
         }
-        this.element.nativeElement.blur();
     };
     /**
      * @hidden
@@ -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
      */
@@ -718,6 +745,39 @@ var CalendarComponent = /** @class */ (function () {
             });
         });
     };
+    /**
+     * @hidden
+     */
+    CalendarComponent.prototype.handleBlur = function (args) {
+        var _this = this;
+        if (this.element.nativeElement.contains(args.relatedTarget)) {
+            return;
+        }
+        this.isActive = false;
+        // the injector can get the NgControl instance of the parent component (for example, the DateTimePicker)
+        // and enters the zone for no reason because the parent component is still untouched
+        if (!this.pickerService && requiresZoneOnBlur(this.control)) {
+            this.ngZone.run(function () {
+                _this.onControlTouched();
+                _this.emitBlur(args);
+                _this.cdr.markForCheck();
+            });
+        }
+        else {
+            this.emitBlur(args);
+            this.detectChanges();
+        }
+    };
+    /**
+     * @hidden
+     */
+    CalendarComponent.prototype.handleFocus = function () {
+        this.isActive = true;
+        if (!NgZone.isInAngularZone()) {
+            this.detectChanges();
+        }
+        this.emitFocus();
+    };
     CalendarComponent.prototype.setClasses = function (element) {
         this.renderer.addClass(element, 'k-widget');
         this.renderer.addClass(element, 'k-calendar');
@@ -762,30 +822,6 @@ var CalendarComponent = /** @class */ (function () {
             this.pickerService.onFocus.emit();
         }
     };
-    CalendarComponent.prototype.handleBlur = function (args) {
-        var _this = this;
-        this.isActive = false;
-        // the injector can get the NgControl instance of the parent component (for example, the DateTimePicker)
-        // and enters the zone for no reason because the parent component is still untouched
-        if (!this.pickerService && requiresZoneOnBlur(this.control)) {
-            this.ngZone.run(function () {
-                _this.onControlTouched();
-                _this.emitBlur(args);
-                _this.cdr.markForCheck();
-            });
-        }
-        else {
-            this.emitBlur(args);
-            this.detectChanges();
-        }
-    };
-    CalendarComponent.prototype.handleFocus = function () {
-        this.isActive = true;
-        if (!NgZone.isInAngularZone()) {
-            this.detectChanges();
-        }
-        this.emitFocus();
-    };
     CalendarComponent.prototype.handleComponentClick = function () {
         if (!this.isActive) {
             if (this.type === 'infinite' && this.monthView.isScrolled()) {
@@ -822,7 +858,12 @@ var CalendarComponent = /** @class */ (function () {
         }
     };
     CalendarComponent.prototype.setAriaActivedescendant = function () {
-        if (!isPresent(this.element)) {
+        // in Classic mode, the inner MultiViewCalendar handles the activedescendant
+        if (!isPresent(this.element) || (this.type === 'classic' && !this.element.nativeElement.hasAttribute('aria-activedescendant'))) {
+            return;
+        }
+        if (this.type === 'classic') {
+            this.renderer.removeAttribute(this.element.nativeElement, 'aria-activedescendant');
             return;
         }
         var focusedCellId = this.cellUID + this.focusedDate.getTime();
@@ -931,6 +972,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)
@@ -1019,16 +1064,15 @@ var CalendarComponent = /** @class */ (function () {
         ViewChild(ViewListComponent, { static: false }),
         tslib_1.__metadata("design:type", ViewListComponent)
     ], CalendarComponent.prototype, "monthView", void 0);
+    tslib_1.__decorate([
+        ViewChild(MultiViewCalendarComponent, { static: false }),
+        tslib_1.__metadata("design:type", MultiViewCalendarComponent)
+    ], CalendarComponent.prototype, "multiViewCalendar", void 0);
     tslib_1.__decorate([
         HostBinding('attr.id'),
         tslib_1.__metadata("design:type", String),
         tslib_1.__metadata("design:paramtypes", [])
     ], CalendarComponent.prototype, "widgetId", null);
-    tslib_1.__decorate([
-        HostBinding('attr.role'),
-        tslib_1.__metadata("design:type", String),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], CalendarComponent.prototype, "widgetRole", null);
     tslib_1.__decorate([
         HostBinding('attr.tabindex'),
         tslib_1.__metadata("design:type", Number),
@@ -1060,7 +1104,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            (focus)=\"handleFocus()\"\n            (blur)=\"handleBlur($event)\"\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

@@ -349,7 +349,7 @@ var HorizontalViewListComponent = /** @class */ (function () {
         Component({
             changeDetection: ChangeDetectionStrategy.OnPush,
             selector: 'kendo-calendar-horizontal',
-            template: "\n        <ng-template #tableTemplate let-date=\"date\" let-class=\"className\">\n            <table\n                class=\"k-content k-calendar-content k-calendar-table\"\n                [ngClass]=\"class\"\n            >\n                <caption *ngIf=\"showViewHeader\" [ngClass]=\"getCaptionClass()\">{{ getCaptionTitle(date) }}</caption>\n                <thead *ngIf=\"isMonthView()\" class=\"k-calendar-thead\">\n                    <tr class=\"k-calendar-tr\" role=\"row\">\n                        <th *ngFor=\"let name of weekNames\" class=\"k-calendar-th\">{{name}}</th>\n                    </tr>\n                </thead>\n                <tbody\n                    class=\"k-calendar-tbody\"\n                    kendoCalendarView\n                    role=\"rowgroup\"\n                    direction=\"horizontal\"\n                    [activeView]=\"activeView\"\n                    [isActive]=\"isActive\"\n                    [min]=\"min\"\n                    [max]=\"max\"\n                    [cellUID]=\"cellUID\"\n                    [focusedDate]=\"focusedDate\"\n                    [selectedDates]=\"selectedDates\"\n                    [selectionRange]=\"selectionRange\"\n                    [activeRangeEnd]=\"activeRangeEnd\"\n                    [weekNumber]=\"weekNumber\"\n                    [templateRef]=\"cellTemplateRef\"\n                    [weekNumberTemplateRef]=\"weekNumberTemplateRef\"\n                    [viewDate]=\"date\"\n                    (cellClick)=\"cellClick.emit($event)\"\n                    (weekNumberCellClick)=\"weekNumberCellClick.emit($event)\"\n                    (cellEnter)=\"cellEnter.emit($event)\"\n                    (cellLeave)=\"cellLeave.emit($event)\"\n                >\n                </tbody>\n            </table>\n        </ng-template>\n\n        <!-- When Next is clicked a placeholder table is rendered before the Main Table -->\n        <ng-template\n            *ngIf=\"nextAnimationDate\"\n            [ngTemplateOutlet]=\"tableTemplate\"\n            [ngTemplateOutletContext]=\"{\n                date: nextAnimationDate,\n                className: 'k-pointer-events-none'\n            }\"\n        >\n        </ng-template>\n\n        <ng-template\n            *kFor=\"let date of dates\"\n            [ngTemplateOutlet]=\"tableTemplate\"\n            [ngTemplateOutletContext]=\"{\n                date: date\n            }\"\n        >\n        </ng-template>\n\n        <!-- When Prev is clicked a placeholder table is rendered after the Main Table -->\n        <ng-template\n            *ngIf=\"prevAnimationDate\"\n            [ngTemplateOutlet]=\"tableTemplate\"\n            [ngTemplateOutletContext]=\"{\n                date: prevAnimationDate,\n                className: 'k-pointer-events-none'\n            }\"\n        >\n        </ng-template>\n    "
+            template: "\n        <ng-template #tableTemplate let-date=\"date\" let-class=\"className\">\n            <table\n                role=\"grid\"\n                class=\"k-content k-calendar-content k-calendar-table\"\n                [ngClass]=\"class\"\n            >\n                <caption *ngIf=\"showViewHeader\" [ngClass]=\"getCaptionClass()\">{{ getCaptionTitle(date) }}</caption>\n                <thead *ngIf=\"isMonthView()\" class=\"k-calendar-thead\">\n                    <tr class=\"k-calendar-tr\" role=\"row\">\n                        <th *ngFor=\"let name of weekNames\" class=\"k-calendar-th\">{{name}}</th>\n                    </tr>\n                </thead>\n                <tbody\n                    class=\"k-calendar-tbody\"\n                    kendoCalendarView\n                    role=\"rowgroup\"\n                    direction=\"horizontal\"\n                    [activeView]=\"activeView\"\n                    [isActive]=\"isActive\"\n                    [min]=\"min\"\n                    [max]=\"max\"\n                    [cellUID]=\"cellUID\"\n                    [focusedDate]=\"focusedDate\"\n                    [selectedDates]=\"selectedDates\"\n                    [selectionRange]=\"selectionRange\"\n                    [activeRangeEnd]=\"activeRangeEnd\"\n                    [weekNumber]=\"weekNumber\"\n                    [templateRef]=\"cellTemplateRef\"\n                    [weekNumberTemplateRef]=\"weekNumberTemplateRef\"\n                    [viewDate]=\"date\"\n                    (cellClick)=\"cellClick.emit($event)\"\n                    (weekNumberCellClick)=\"weekNumberCellClick.emit($event)\"\n                    (cellEnter)=\"cellEnter.emit($event)\"\n                    (cellLeave)=\"cellLeave.emit($event)\"\n                >\n                </tbody>\n            </table>\n        </ng-template>\n\n        <!-- When Next is clicked a placeholder table is rendered before the Main Table -->\n        <ng-template\n            *ngIf=\"nextAnimationDate\"\n            [ngTemplateOutlet]=\"tableTemplate\"\n            [ngTemplateOutletContext]=\"{\n                date: nextAnimationDate,\n                className: 'k-pointer-events-none'\n            }\"\n        >\n        </ng-template>\n\n        <ng-template\n            *kFor=\"let date of dates\"\n            [ngTemplateOutlet]=\"tableTemplate\"\n            [ngTemplateOutletContext]=\"{\n                date: date\n            }\"\n        >\n        </ng-template>\n\n        <!-- When Prev is clicked a placeholder table is rendered after the Main Table -->\n        <ng-template\n            *ngIf=\"prevAnimationDate\"\n            [ngTemplateOutlet]=\"tableTemplate\"\n            [ngTemplateOutletContext]=\"{\n                date: prevAnimationDate,\n                className: 'k-pointer-events-none'\n            }\"\n        >\n        </ng-template>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [BusViewService,
             IntlService,

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

@@ -10,6 +10,7 @@ import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { cloneDate, isEqual } from '@progress/kendo-date-math';
 import { hasObservers, guid, Keys } from '@progress/kendo-angular-common';
 import { HorizontalViewListComponent } from './horizontal-view-list.component';
+import { HeaderComponent } from './header.component';
 import { BusViewService } from './services/bus-view.service';
 import { NavigationService } from './services/navigation.service';
 import { SelectionService } from './services/selection.service';
@@ -114,6 +115,10 @@ var MultiViewCalendarComponent = /** @class */ (function () {
          * @hidden
          */
         this.isActive = false;
+        /**
+         * @hidden
+         */
+        this.isHeaderActive = false;
         /**
          * Defines the active view that the Calendar initially renders
          * ([see example]({% slug activeview_multiviewcalendar %})).
@@ -158,6 +163,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)).
@@ -173,6 +183,10 @@ var MultiViewCalendarComponent = /** @class */ (function () {
          * ([more information and example]({% slug overview_multiviewcalendar %}#toc-events)).
          */
         this.valueChange = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.blurEvent = new EventEmitter();
         this.cellUID = guid();
         this.isHovered = false;
         this.isPrevDisabled = true;
@@ -190,7 +204,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", {
@@ -408,13 +422,6 @@ var MultiViewCalendarComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(MultiViewCalendarComponent.prototype, "widgetRole", {
-        get: function () {
-            return 'grid';
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(MultiViewCalendarComponent.prototype, "calendarTabIndex", {
         get: function () {
             return this.disabled ? undefined : this.tabIndex;
@@ -439,10 +446,15 @@ var MultiViewCalendarComponent = /** @class */ (function () {
     /**
      * @hidden
      */
-    MultiViewCalendarComponent.prototype.handleBlur = function () {
-        this.onControlTouched();
+    MultiViewCalendarComponent.prototype.handleBlur = function (event) {
+        var target = event.target;
+        if (!this.element.nativeElement.contains(event.relatedTarget)) {
+            this.blurEvent.emit(event);
+            this.onControlTouched();
+        }
         this.isActive = false;
         this.isHovered = false; //ensure that hovered is also not active
+        this.isHeaderActive = this.headerElement.nativeElement.contains(target);
     };
     /**
      * @hidden
@@ -490,6 +502,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 +594,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 +672,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 +700,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 +876,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)
@@ -848,6 +892,10 @@ var MultiViewCalendarComponent = /** @class */ (function () {
         Output(),
         tslib_1.__metadata("design:type", EventEmitter)
     ], MultiViewCalendarComponent.prototype, "valueChange", void 0);
+    tslib_1.__decorate([
+        Output('blur'),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], MultiViewCalendarComponent.prototype, "blurEvent", void 0);
     tslib_1.__decorate([
         ContentChild(CellTemplateDirective, { static: true }),
         tslib_1.__metadata("design:type", CellTemplateDirective)
@@ -911,6 +959,10 @@ var MultiViewCalendarComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", HeaderTitleTemplateDirective),
         tslib_1.__metadata("design:paramtypes", [HeaderTitleTemplateDirective])
     ], MultiViewCalendarComponent.prototype, "headerTitleTemplateRef", null);
+    tslib_1.__decorate([
+        ViewChild(HeaderComponent, { static: false, read: ElementRef }),
+        tslib_1.__metadata("design:type", ElementRef)
+    ], MultiViewCalendarComponent.prototype, "headerElement", void 0);
     tslib_1.__decorate([
         ViewChild(HorizontalViewListComponent, { static: false }),
         tslib_1.__metadata("design:type", HorizontalViewListComponent)
@@ -920,11 +972,6 @@ var MultiViewCalendarComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", String),
         tslib_1.__metadata("design:paramtypes", [])
     ], MultiViewCalendarComponent.prototype, "widgetId", null);
-    tslib_1.__decorate([
-        HostBinding('attr.role'),
-        tslib_1.__metadata("design:type", String),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], MultiViewCalendarComponent.prototype, "widgetRole", null);
     tslib_1.__decorate([
         HostBinding('attr.tabindex'),
         tslib_1.__metadata("design:type", Number),
@@ -942,9 +989,9 @@ var MultiViewCalendarComponent = /** @class */ (function () {
         tslib_1.__metadata("design:paramtypes", [])
     ], MultiViewCalendarComponent.prototype, "ariaActivedescendant", null);
     tslib_1.__decorate([
-        HostListener("blur"),
+        HostListener('focusout', ['$event']),
         tslib_1.__metadata("design:type", Function),
-        tslib_1.__metadata("design:paramtypes", []),
+        tslib_1.__metadata("design:paramtypes", [FocusEvent]),
         tslib_1.__metadata("design:returntype", void 0)
     ], MultiViewCalendarComponent.prototype, "handleBlur", null);
     tslib_1.__decorate([
@@ -1001,7 +1048,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 && !isHeaderActive)\"\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/calendar/view-list.component.js

@@ -287,7 +287,7 @@ var ViewListComponent = /** @class */ (function () {
         Component({
             changeDetection: ChangeDetectionStrategy.OnPush,
             selector: 'kendo-calendar-viewlist',
-            template: "\n    <kendo-calendar-header\n        [currentDate]=\"activeDate\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [activeView]=\"activeView\"\n        [templateRef]=\"headerTitleTemplateRef\"\n        (todayButtonClick)=\"todayButtonClick.emit($event)\"\n    >\n    </kendo-calendar-header>\n    <table class=\"k-calendar-weekdays k-calendar-table\" style=\"table-layout: auto;\" *ngIf=\"isMonthView()\">\n        <thead class=\"k-calendar-thead\">\n            <tr class=\"k-calendar-tr\">\n                <th class=\"k-calendar-th\" *ngFor=\"let name of weekNames\" [style.width.%]=\"colWidth\">{{name}}</th>\n            </tr>\n        </thead>\n    </table>\n    <kendo-virtualization\n        [tabindex]=\"-1\"\n        [skip]=\"skip\"\n        [take]=\"take\"\n        [total]=\"total\"\n        [itemHeight]=\"viewHeight\"\n        [topOffset]=\"viewOffset\"\n        [bottomOffset]=\"bottomOffset\"\n        [scrollOffsetSize]=\"viewOffset\"\n        [maxScrollDifference]=\"viewHeight\"\n        (pageChange)=\"onPageChange($event)\"\n        (scrollChange)=\"scrollChange($event)\"\n        (activeIndexChange)=\"setActiveDate($event)\"\n        >\n        <table class=\"k-calendar-table\" #list>\n            <colgroup><col *ngFor=\"let _ of cols\" /></colgroup>\n\n            <tbody class=\"k-calendar-tbody\"\n                   *kFor=\"let date of dates\"\n                   kendoCalendarView\n                   role=\"rowgroup\"\n                   [activeView]=\"activeView\"\n                   [isActive]=\"isActive\"\n                   [min]=\"min\" [max]=\"max\"\n                   [cellUID]=\"cellUID\"\n                   [focusedDate]=\"focusedDate\"\n                   [selectedDates]=\"selectedDates\"\n                   [weekNumber]=\"weekNumber\"\n                   [templateRef]=\"cellTemplateRef\"\n                   [weekNumberTemplateRef]=\"weekNumberTemplateRef\"\n                   [viewDate]=\"date\"\n                   (cellClick)=\"cellClick.emit($event)\"\n                   (weekNumberCellClick)=\"weekNumberCellClick.emit($event)\"\n            ></tbody>\n        </table>\n    </kendo-virtualization>\n  "
+            template: "\n    <kendo-calendar-header\n        [currentDate]=\"activeDate\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [activeView]=\"activeView\"\n        [templateRef]=\"headerTitleTemplateRef\"\n        (todayButtonClick)=\"todayButtonClick.emit($event)\"\n    >\n    </kendo-calendar-header>\n    <table class=\"k-calendar-weekdays k-calendar-table\" style=\"table-layout: auto;\" *ngIf=\"isMonthView()\">\n        <thead class=\"k-calendar-thead\">\n            <tr class=\"k-calendar-tr\">\n                <th class=\"k-calendar-th\" *ngFor=\"let name of weekNames\" [style.width.%]=\"colWidth\">{{name}}</th>\n            </tr>\n        </thead>\n    </table>\n    <kendo-virtualization\n        [tabindex]=\"-1\"\n        [skip]=\"skip\"\n        [take]=\"take\"\n        [total]=\"total\"\n        [itemHeight]=\"viewHeight\"\n        [topOffset]=\"viewOffset\"\n        [bottomOffset]=\"bottomOffset\"\n        [scrollOffsetSize]=\"viewOffset\"\n        [maxScrollDifference]=\"viewHeight\"\n        (pageChange)=\"onPageChange($event)\"\n        (scrollChange)=\"scrollChange($event)\"\n        (activeIndexChange)=\"setActiveDate($event)\"\n        >\n        <table\n            #list\n            role=\"grid\"\n            class=\"k-calendar-table\"\n        >\n            <colgroup><col *ngFor=\"let _ of cols\" /></colgroup>\n\n            <tbody class=\"k-calendar-tbody\"\n                   *kFor=\"let date of dates\"\n                   kendoCalendarView\n                   role=\"rowgroup\"\n                   [activeView]=\"activeView\"\n                   [isActive]=\"isActive\"\n                   [min]=\"min\" [max]=\"max\"\n                   [cellUID]=\"cellUID\"\n                   [focusedDate]=\"focusedDate\"\n                   [selectedDates]=\"selectedDates\"\n                   [weekNumber]=\"weekNumber\"\n                   [templateRef]=\"cellTemplateRef\"\n                   [weekNumberTemplateRef]=\"weekNumberTemplateRef\"\n                   [viewDate]=\"date\"\n                   (cellClick)=\"cellClick.emit($event)\"\n                   (weekNumberCellClick)=\"weekNumberCellClick.emit($event)\"\n            ></tbody>\n        </table>\n    </kendo-virtualization>\n  "
         }),
         tslib_1.__metadata("design:paramtypes", [BusViewService,
             ChangeDetectorRef,

package/dist/es/datepicker/datepicker.component.js

@@ -27,7 +27,7 @@ import { HeaderTitleTemplateDirective } from '../calendar/templates/header-title
 import { NavigationItemTemplateDirective } from '../calendar/templates/navigation-item-template.directive';
 import { PickerService } from '../common/picker.service';
 import { DisabledDatesService } from '../calendar/services/disabled-dates.service';
-import { noop, isValidRange, setTime, isWindowAvailable } from '../util';
+import { noop, isValidRange, setTime, isWindowAvailable, isTabExitingCalendar } from '../util';
 import { TOUCH_ENABLED } from '../touch-enabled';
 import { requiresZoneOnBlur, currentFocusTarget } from '../common/utils';
 import { fromEvent } from 'rxjs';
@@ -120,11 +120,13 @@ var DatePickerComponent = /** @class */ (function () {
         /**
          * Specifies the smallest valid date
          * ([see example]({% slug dateranges_datepicker %})).
+         * By default, the `min` value is `1900-1-1`.
          */
         this.min = cloneDate(MIN_DATE);
         /**
          * Specifies the biggest valid date
          * ([see example]({% slug dateranges_datepicker %})).
+         * By default, the `max` value is `2099-12-31`.
          */
         this.max = cloneDate(MAX_DATE);
         /**
@@ -716,7 +718,7 @@ var DatePickerComponent = /** @class */ (function () {
      * @hidden
      */
     DatePickerComponent.prototype.handleKeydown = function (e) {
-        var altKey = e.altKey, keyCode = e.keyCode;
+        var altKey = e.altKey, shiftKey = e.shiftKey, keyCode = e.keyCode, target = e.target;
         if (keyCode === Keys.Escape) {
             this.show = false;
         }
@@ -728,7 +730,7 @@ var DatePickerComponent = /** @class */ (function () {
                 this.show = false;
             }
         }
-        if (keyCode === Keys.Tab && this.show && this.calendar.isActive) {
+        if (keyCode === Keys.Tab && this.show && this.calendar.isActive && isTabExitingCalendar(this.calendarType, target, shiftKey)) {
             this.input.focus();
             this.show = false;
         }