@progress/kendo-angular-dateinputs 5.2.3 → 5.3.0-dev.202110290637

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1631623618,
+    publishDate: 1635489253,
     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/fesm2015/index.js

@@ -6,7 +6,7 @@ import { __decorate, __metadata, __param } from 'tslib';
 import { Injectable, EventEmitter, Injector, InjectionToken, Input, Output, HostBinding, Component, Inject, ElementRef, Renderer2, NgZone, TemplateRef, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef, isDevMode, Directive, forwardRef, ContentChild, Optional, ViewContainerRef, HostListener, ViewChildren, QueryList, ContentChildren, IterableDiffers, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
 import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages } from '@progress/kendo-angular-l10n';
-import { getDate, isEqual, cloneDate, addDays, addDecades, addCenturies, firstDecadeOfCentury, lastDecadeOfCentury, firstYearOfDecade, createDate, durationInCenturies, addYears, lastYearOfDecade, durationInDecades, addWeeks, addMonths, firstDayOfMonth, lastDayOfMonth, dayOfWeek, durationInMonths, firstMonthOfYear, lastMonthOfYear, durationInYears, weekInYear } from '@progress/kendo-date-math';
+import { getDate, isEqual, cloneDate, addDays, addDecades, addCenturies, firstDecadeOfCentury, lastDecadeOfCentury, firstYearOfDecade, createDate, lastYearOfDecade, lastMonthOfYear, lastDayOfMonth, durationInCenturies, addYears, durationInDecades, addWeeks, addMonths, firstDayOfMonth, dayOfWeek, durationInMonths, firstMonthOfYear, durationInYears, weekInYear } from '@progress/kendo-date-math';
 import { isDocumentAvailable, KendoInput, guid, hasObservers, Keys, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { IntlService, IntlModule } from '@progress/kendo-angular-intl';
@@ -23,7 +23,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1631623618,
+    publishDate: 1635489253,
     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'
 };
@@ -534,6 +534,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;
     }
@@ -695,6 +701,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;
     }
@@ -862,6 +873,9 @@ let MonthViewService = class MonthViewService {
         }
         return createDate(date.getFullYear(), date.getMonth(), 1);
     }
+    lastDayOfPeriod(date) {
+        return lastDayOfMonth(date);
+    }
     isRangeStart(value) {
         return !value.getMonth();
     }
@@ -1056,6 +1070,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;
     }
@@ -3046,6 +3064,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)).
@@ -3087,6 +3110,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();
     }
@@ -3155,6 +3186,10 @@ let CalendarComponent = class CalendarComponent {
      */
     set disabledDates(value) {
         this.disabledDatesService.initialize(value);
+        this._disabledDates = value;
+    }
+    get disabledDates() {
+        return this._disabledDates;
     }
     /**
      * Specifies the Calendar type.
@@ -3237,7 +3272,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;
@@ -3457,6 +3492,13 @@ let CalendarComponent = class CalendarComponent {
                 return null;
         }
     }
+    /**
+     * @hidden
+     */
+    emitNavigate(focusedDate) {
+        const activeView = CalendarViewEnum[this.activeViewEnum];
+        this.navigate.emit({ activeView, focusedDate });
+    }
     /**
      * @hidden
      */
@@ -3467,6 +3509,13 @@ let CalendarComponent = class CalendarComponent {
             });
         }
     }
+    /**
+     * @hidden
+     */
+    handleActiveDateChange(date) {
+        this.activeViewDate = date;
+        this.emitEvent(this.activeViewDateChange, date);
+    }
     /**
      * @hidden
      */
@@ -3708,6 +3757,10 @@ __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
 ], CalendarComponent.prototype, "activeViewChange", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], CalendarComponent.prototype, "navigate", void 0);
 __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
@@ -3879,7 +3932,7 @@ CalendarComponent = __decorate([
             })"
             (cellClick)="handleCellClick($event)"
             (weekNumberCellClick)="handleWeekNumberClick($event)"
-            (activeDateChange)="emitEvent(activeViewDateChange, $event)"
+            (activeDateChange)="handleActiveDateChange($event)"
             (pageChange)="onPageChange()"
         >
         </kendo-calendar-viewlist>
@@ -3909,6 +3962,7 @@ CalendarComponent = __decorate([
             [value]="value"
             [disabledDates]="disabledDates"
             (activeViewChange)="handleActiveViewChange($event)"
+            (navigate)="navigate.emit($event)"
             (valueChange)="handleMultiViewCalendarValueChange($event, multiviewcalendar.focusedDate)"
         >
             <kendo-multiviewcalendar-messages
@@ -9132,7 +9186,9 @@ __decorate([
 ], HorizontalViewListComponent.prototype, "activeDateChange", void 0);
 __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"),
     __metadata("design:type", Boolean)
 ], HorizontalViewListComponent.prototype, "getComponentClass", void 0);
 __decorate([
@@ -9387,6 +9443,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)).
@@ -9419,7 +9480,7 @@ let MultiViewCalendarComponent = class MultiViewCalendarComponent {
         this.minValidateFn = noop;
         this.maxValidateFn = noop;
         this.disabledDatesRangeValidateFn = noop;
-        this.subscriptions = new Subscription(() => { });
+        this.subscriptions = new Subscription();
         this.setClasses(element.nativeElement);
     }
     /**
@@ -9631,6 +9692,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 }) => {
@@ -9716,6 +9781,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
      */
@@ -9782,9 +9859,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
@@ -9801,6 +9886,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
@@ -9972,6 +10061,10 @@ __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
 ], MultiViewCalendarComponent.prototype, "activeViewChange", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], MultiViewCalendarComponent.prototype, "navigate", void 0);
 __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
@@ -10159,9 +10252,9 @@ MultiViewCalendarComponent = __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)"
     >
     </kendo-calendar-header>
     <kendo-calendar-horizontal
@@ -10463,8 +10556,8 @@ let DateRangePopupComponent = class DateRangePopupComponent {
          * @hidden
          */
         this.popupUID = guid();
-        this.calendarSubscriptions = new Subscription(() => { });
-        this.popupSubscriptions = new Subscription(() => { });
+        this.calendarSubscriptions = new Subscription();
+        this.popupSubscriptions = new Subscription();
         this.resolvedPromise = Promise.resolve();
     }
     /**
@@ -10824,8 +10917,8 @@ class DateRangeInput {
         this.renderer = renderer;
         this.zone = zone;
         this.navigateCalendarOnFocus = false;
-        this.popupSubscriptions = new Subscription(() => { });
-        this.subscriptions = new Subscription(() => { });
+        this.popupSubscriptions = new Subscription();
+        this.subscriptions = new Subscription();
     }
     get isActiveEnd() {
         return this.dateRangeService.activeRangeEnd === this.activeRangeEnd;
@@ -10874,7 +10967,7 @@ class DateRangeInput {
     }
     unsubscribePopup() {
         this.popupSubscriptions.unsubscribe();
-        this.popupSubscriptions = new Subscription(() => { });
+        this.popupSubscriptions = new Subscription();
     }
     activate() {
         this.dateRangeService.setActiveRangeEnd(this.activeRangeEnd);
@@ -11112,7 +11205,7 @@ let DateRangeSelectionDirective = class DateRangeSelectionDirective {
          * the section on [events]({% slug overview_multiviewcalendar %}#toc-events).
          */
         this.selectionRangeChange = new EventEmitter();
-        this.calendarSubscriptions = new Subscription(() => { });
+        this.calendarSubscriptions = new Subscription();
         this.dateRangeService = this.dateRangeService || new DateRangeService();
         renderer.setAttribute(element.nativeElement, 'aria-multiselectable', 'true');
     }
@@ -11413,10 +11506,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);