@progress/kendo-angular-dateinputs 5.2.4-dev.202110261444 → 5.3.1-dev.202112071202

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

@@ -3,13 +3,13 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-/* tslint:disable:no-forward-ref */
 import { Component, ChangeDetectorRef, ChangeDetectionStrategy, ContentChild, EventEmitter, ElementRef, Renderer2, isDevMode, forwardRef, HostBinding, HostListener, Input, Output, ViewChild, NgZone } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 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 +114,10 @@ let MultiViewCalendarComponent = class MultiViewCalendarComponent {
          * @hidden
          */
         this.isActive = false;
+        /**
+         * @hidden
+         */
+        this.isHeaderActive = false;
         /**
          * Defines the active view that the Calendar initially renders
          * ([see example]({% slug activeview_multiviewcalendar %})).
@@ -158,6 +162,11 @@ let MultiViewCalendarComponent = class MultiViewCalendarComponent {
          * ([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 +182,10 @@ let MultiViewCalendarComponent = class MultiViewCalendarComponent {
          * ([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;
@@ -336,9 +349,6 @@ let MultiViewCalendarComponent = class MultiViewCalendarComponent {
     get widgetId() {
         return this.id;
     }
-    get widgetRole() {
-        return 'grid';
-    }
     get calendarTabIndex() {
         return this.disabled ? undefined : this.tabIndex;
     }
@@ -351,16 +361,22 @@ let MultiViewCalendarComponent = class MultiViewCalendarComponent {
     /**
      * @hidden
      */
-    handleBlur() {
-        this.onControlTouched();
+    handleFocusout(event) {
+        const relatedTarget = event.relatedTarget;
+        if (!this.element.nativeElement.contains(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(relatedTarget);
     }
     /**
      * @hidden
      */
     handleFocus() {
         this.isActive = true;
+        this.isHeaderActive = false;
     }
     /**
      * @hidden
@@ -393,6 +409,9 @@ let MultiViewCalendarComponent = class MultiViewCalendarComponent {
      * @hidden
      */
     keydown(event) {
+        if (this.isHeaderActive) {
+            return;
+        }
         if (event.keyCode === Keys.Enter) {
             this.performSelection(this.focusedDate, event);
         }
@@ -402,6 +421,10 @@ let MultiViewCalendarComponent = class MultiViewCalendarComponent {
         }
         this.focusedDate = candidate;
         event.preventDefault();
+        const isSameView = this.bus.service(this.activeViewEnum).isInArray(this.focusedDate, this.viewList.dates);
+        if (!isSameView) {
+            this.emitNavigate(this.focusedDate);
+        }
     }
     ngOnInit() {
         this.subscriptions.add(this.bus.viewChanged.subscribe(({ view }) => {
@@ -464,6 +487,12 @@ let MultiViewCalendarComponent = class MultiViewCalendarComponent {
         }
         this.element.nativeElement.blur();
     }
+    /**
+     * @hidden
+     */
+    handleHeaderFocus() {
+        this.isHeaderActive = true;
+    }
     /**
      * @hidden
      */
@@ -487,6 +516,18 @@ let MultiViewCalendarComponent = class MultiViewCalendarComponent {
         this.onControlChange(this.parseSelectionToValue(availableDates));
         this.valueChange.emit(this.parseSelectionToValue(availableDates));
     }
+    /**
+     * @hidden
+     */
+    handleTodayButtonClick(args) {
+        const todayDate = args.focusedDate;
+        const isSameView = this.bus.service(this.activeViewEnum).isInArray(todayDate, this.viewList.dates);
+        const isBottomView = !this.bus.canMoveDown(this.activeViewEnum);
+        if (!isSameView && isBottomView) {
+            this.emitNavigate(todayDate);
+        }
+        this.handleDateChange(args);
+    }
     /**
      * @hidden
      */
@@ -553,9 +594,17 @@ let MultiViewCalendarComponent = class MultiViewCalendarComponent {
     /**
      * @hidden
      */
-    navigate(action) {
+    navigateView(action) {
         this.focusedDate = this.viewList.navigate(action);
         this.updateButtonState();
+        this.emitNavigate(this.focusedDate);
+    }
+    /**
+     * @hidden
+     */
+    emitNavigate(focusedDate) {
+        const activeView = CalendarViewEnum[this.activeViewEnum];
+        this.navigate.emit({ activeView, focusedDate });
     }
     /**
      * @hidden
@@ -572,6 +621,10 @@ let MultiViewCalendarComponent = class MultiViewCalendarComponent {
      */
     handleCellClick({ date, modifiers }) {
         this.performSelection(date, modifiers);
+        const isSameView = this.bus.service(this.activeViewEnum).isInArray(this.focusedDate, this.viewList.dates);
+        if (!isSameView) {
+            this.emitNavigate(this.focusedDate);
+        }
     }
     /**
      * @hidden
@@ -743,6 +796,10 @@ tslib_1.__decorate([
     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)
@@ -755,6 +812,10 @@ tslib_1.__decorate([
     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)
@@ -818,6 +879,10 @@ tslib_1.__decorate([
     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)
@@ -827,11 +892,6 @@ tslib_1.__decorate([
     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),
@@ -849,11 +909,11 @@ tslib_1.__decorate([
     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);
+], MultiViewCalendarComponent.prototype, "handleFocusout", null);
 tslib_1.__decorate([
     HostListener("focus"),
     tslib_1.__metadata("design:type", Function),
@@ -930,14 +990,18 @@ MultiViewCalendarComponent = tslib_1.__decorate([
         [isPrevDisabled]="isPrevDisabled"
         [isNextDisabled]="isNextDisabled"
         [showNavigationButtons]="true"
-        (todayButtonClick)="handleDateChange({ selectedDates: [$event], focusedDate: $event })"
-        (prevButtonClick)="navigate(prevView)"
-        (nextButtonClick)="navigate(nextView)"
+        (todayButtonClick)="handleTodayButtonClick({ selectedDates: [$event], focusedDate: $event })"
+        (prevButtonClick)="navigateView(prevView)"
+        (nextButtonClick)="navigateView(nextView)"
+        [kendoEventsOutsideAngular]="{
+            focusin: handleHeaderFocus
+        }"
+        [scope]="this"
     >
     </kendo-calendar-header>
     <kendo-calendar-horizontal
         [activeView]="activeViewEnum"
-        [isActive]="isActive || isHovered"
+        [isActive]="isActive || (isHovered && !isHeaderActive)"
         [cellTemplateRef]="activeCellTemplate()?.templateRef"
         [weekNumberTemplateRef]="weekNumberTemplate?.templateRef"
         [cellUID]="cellUID"

package/dist/es2015/calendar/multiview-calendar.module.js

@@ -7,6 +7,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IntlModule } from '@progress/kendo-angular-intl';
 import { PopupModule } from '@progress/kendo-angular-popup';
+import { EventsModule } from '@progress/kendo-angular-common';
 import { CalendarCommonModule } from './calendar-common.module';
 import { TemplatesModule } from './templates.module';
 import { HorizontalViewListComponent } from './horizontal-view-list.component';
@@ -72,7 +73,14 @@ MultiViewCalendarModule = tslib_1.__decorate([
             CalendarCommonModule,
             TemplatesModule
         ],
-        imports: [CommonModule, CalendarCommonModule, IntlModule, TemplatesModule, PopupModule],
+        imports: [
+            CommonModule,
+            CalendarCommonModule,
+            IntlModule,
+            TemplatesModule,
+            PopupModule,
+            EventsModule
+        ],
         providers: [
             NavigationService,
             CenturyViewService,

package/dist/es2015/calendar/services/century-view.service.d.ts

@@ -16,6 +16,7 @@ export declare class CenturyViewService implements ViewService {
     isInArray(date: Date, dates: Date[]): boolean;
     isInRange(candidate: Date, min: Date, max: Date): boolean;
     beginningOfPeriod(date: Date): Date;
+    lastDayOfPeriod(date: Date): Date;
     isRangeStart(value: Date): boolean;
     move(value: Date, action: Action): Date;
     cellTitle(value: Date): string;

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

@@ -5,7 +5,7 @@
 import * as tslib_1 from "tslib";
 /* 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';
@@ -115,6 +115,12 @@ let CenturyViewService = class CenturyViewService {
         const firstYear = firstYearOfDecade(firstDecadeOfCentury(date));
         return createDate(firstYear.getFullYear(), 0, 1);
     }
+    lastDayOfPeriod(date) {
+        const decade = lastDecadeOfCentury(date);
+        const year = lastYearOfDecade(decade);
+        const month = lastMonthOfYear(year);
+        return lastDayOfMonth(month);
+    }
     isRangeStart(value) {
         return value.getFullYear() % 1000 === 0;
     }

package/dist/es2015/calendar/services/decade-view.service.d.ts

@@ -16,6 +16,7 @@ export declare class DecadeViewService implements ViewService {
     isInArray(date: Date, dates: Date[]): boolean;
     isInRange(candidate: Date, min: Date, max: Date): boolean;
     beginningOfPeriod(date: Date): Date;
+    lastDayOfPeriod(date: Date): Date;
     isRangeStart(value: Date): boolean;
     move(value: Date, action: Action): Date;
     cellTitle(value: Date): string;

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

@@ -5,7 +5,7 @@
 import * as tslib_1 from "tslib";
 /* 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';
@@ -115,6 +115,11 @@ let DecadeViewService = class DecadeViewService {
         const firstYear = firstYearOfDecade(date);
         return createDate(firstYear.getFullYear(), 0, 1);
     }
+    lastDayOfPeriod(date) {
+        const year = lastYearOfDecade(date);
+        const month = lastMonthOfYear(year);
+        return lastDayOfMonth(month);
+    }
     isRangeStart(value) {
         return value.getFullYear() % 100 === 0;
     }

package/dist/es2015/calendar/services/month-view.service.d.ts

@@ -20,6 +20,7 @@ export declare class MonthViewService implements ViewService {
     isInArray(date: Date, dates: Date[]): boolean;
     isInRange(candidate: Date, min: Date, max: Date): boolean;
     beginningOfPeriod(date: Date): Date;
+    lastDayOfPeriod(date: Date): Date;
     isRangeStart(value: Date): boolean;
     move(value: Date, action: Action): Date;
     cellTitle(value: Date): string;

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

@@ -122,6 +122,9 @@ let MonthViewService = class MonthViewService {
         }
         return createDate(date.getFullYear(), date.getMonth(), 1);
     }
+    lastDayOfPeriod(date) {
+        return lastDayOfMonth(date);
+    }
     isRangeStart(value) {
         return !value.getMonth();
     }

package/dist/es2015/calendar/services/year-view.service.d.ts

@@ -19,6 +19,7 @@ export declare class YearViewService implements ViewService {
     isInArray(date: Date, dates: Date[]): boolean;
     isInRange(candidate: Date, min: Date, max: Date): boolean;
     beginningOfPeriod(date: Date): Date;
+    lastDayOfPeriod(date: Date): Date;
     isRangeStart(value: Date): boolean;
     move(value: Date, action: Action): Date;
     cellTitle(value: Date): string;

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

@@ -6,7 +6,7 @@ import * as tslib_1 from "tslib";
 /* 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';
@@ -136,6 +136,10 @@ let YearViewService = class YearViewService {
         }
         return createDate(date.getFullYear(), 0, 1);
     }
+    lastDayOfPeriod(date) {
+        const month = lastMonthOfYear(date);
+        return lastDayOfMonth(month);
+    }
     isRangeStart(value) {
         return value.getFullYear() % 10 === 0;
     }

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

@@ -297,7 +297,11 @@ ViewListComponent = tslib_1.__decorate([
         (scrollChange)="scrollChange($event)"
         (activeIndexChange)="setActiveDate($event)"
         >
-        <table class="k-calendar-table" #list>
+        <table
+            #list
+            role="grid"
+            class="k-calendar-table"
+        >
             <colgroup><col *ngFor="let _ of cols" /></colgroup>
 
             <tbody class="k-calendar-tbody"

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

@@ -154,11 +154,13 @@ export declare class DateInputComponent implements OnInit, ControlValueAccessor,
     /**
      * Specifies the biggest date that is valid
      * ([see example]({% slug dateranges_dateinput %})).
+     * By default, the `max` value is `2099-12-31`.
      */
     max: Date;
     /**
      * Specifies the smallest date that is valid
      * ([see example]({% slug dateranges_dateinput %})).
+     * By default, the `min` value is `1900-1-1`.
      */
     min: Date;
     /**

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

@@ -181,11 +181,13 @@ export declare class DatePickerComponent implements ControlValueAccessor, OnInit
     /**
      * Specifies the smallest valid date
      * ([see example]({% slug dateranges_datepicker %})).
+     * By default, the `min` value is `1900-1-1`.
      */
     min: Date;
     /**
      * Specifies the biggest valid date
      * ([see example]({% slug dateranges_datepicker %})).
+     * By default, the `max` value is `2099-12-31`.
      */
     max: Date;
     /**

package/dist/es2015/datepicker/datepicker.component.js

@@ -28,7 +28,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';
@@ -121,11 +121,13 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
         /**
          * 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);
         /**
@@ -629,7 +631,7 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
      * @hidden
      */
     handleKeydown(e) {
-        const { altKey, keyCode } = e;
+        const { altKey, shiftKey, keyCode, target } = e;
         if (keyCode === Keys.Escape) {
             this.show = false;
         }
@@ -641,7 +643,7 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
                 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;
         }