@progress/kendo-angular-dateinputs 16.0.0-develop.8 → 16.0.0

package/esm2020/calendar/multiview-calendar.component.mjs

@@ -6,7 +6,7 @@ import { Component, ChangeDetectorRef, ChangeDetectionStrategy, ContentChild, Ev
 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 { hasObservers, guid, Keys, isObject } from '@progress/kendo-angular-common';
 import { HorizontalViewListComponent } from './horizontal-view-list.component';
 import { HeaderComponent } from './header.component';
 import { BusViewService } from './services/bus-view.service';
@@ -21,13 +21,14 @@ import { WeekNumberCellTemplateDirective } from './templates/weeknumber-cell-tem
 import { HeaderTitleTemplateDirective } from './templates/header-title-template.directive';
 import { Action } from './models/navigation-action.enum';
 import { CalendarViewEnum } from './models/view.enum';
+import { handleRangeSelection } from './models/selection';
 import { minValidator } from '../validators/min.validator';
 import { maxValidator } from '../validators/max.validator';
 import { disabledDatesRangeValidator } from '../validators/disabled-dates-range.validator';
 import { MIN_DATE, MAX_DATE } from '../defaults';
-import { areDatesEqual, dateInRange, getToday, hasExistingValue, last, noop } from '../util';
+import { DEFAULT_SIZE, areDatesEqual, dateInRange, getSizeClass, getToday, hasExistingValue, last, noop } from '../util';
 import { Subscription } from 'rxjs';
-import { isArrowWithShiftPressed, isPresent } from '../common/utils';
+import { isArrowWithShiftPressed, isNullOrDate, isPresent } from '../common/utils';
 import { NavigationService } from './services/navigation.service';
 import { HeaderTemplateDirective } from './templates/header-template.directive';
 import { FooterTemplateDirective } from './templates/footer-template.directivе';
@@ -97,6 +98,7 @@ export class MultiViewCalendarComponent {
          * Determines whether to display the calendar header.
          */
         this.showCalendarHeader = true;
+        this._size = DEFAULT_SIZE;
         /**
          * Toggles the visibility of the footer.
          * @default false
@@ -112,15 +114,14 @@ export class MultiViewCalendarComponent {
          * ([see example]({% slug disabled_dates_multiviewcalendar %}#toc-validation)).
          */
         this.disabledDatesRangeValidation = false;
+        this._selection = 'single';
         /**
-         * Sets the Calendar selection mode
-         * ([see example]({% slug multiple_selection_multiviewcalendar %})).
+         * Allows reverse selection when using `range` selection.
+         * If `allowReverse` is set to `true`, the component skips the validation of whether the start date is after the end date.
          *
-         * The available values are:
-         * * `single` (default)
-         * * `multiple`
+         * @default false
          */
-        this.selection = 'single';
+        this.allowReverse = false;
         /**
          * Sets or gets the `disabled` property of the Calendar and
          * determines whether the component is active
@@ -215,6 +216,11 @@ export class MultiViewCalendarComponent {
          * ([see example](slug:events_multiviewcalendar)).
          */
         this.valueChange = new EventEmitter();
+        /**
+         * @hidden
+         * Fires when the range selection changes.
+         */
+        this.rangeSelectionChange = new EventEmitter();
         /**
          * Fires each time the MultiViewCalendar gets blurred
          * ([see example](slug:events_multiviewcalendar)).
@@ -248,9 +254,15 @@ export class MultiViewCalendarComponent {
         this.prevView = Action.PrevView;
         this.nextView = Action.NextView;
         this.selectedDates = [];
+        this.shouldHoverWhenNoStart = false;
+        this.canHover = false;
+        this.changes = {};
+        this.valueSetter = false;
+        this.selectionSetter = false;
         this._min = new Date(MIN_DATE);
         this._max = new Date(MAX_DATE);
         this._focusedDate = getToday();
+        this._selectionRange = { start: null, end: null };
         this.resolvedPromise = Promise.resolve();
         this.onControlChange = noop;
         this.onControlTouched = noop;
@@ -259,9 +271,32 @@ export class MultiViewCalendarComponent {
         this.maxValidateFn = noop;
         this.disabledDatesRangeValidateFn = noop;
         this.subscriptions = new Subscription();
-        this.setClasses(element.nativeElement);
         this.id = `kendo-multiviewcalendarid-${this.bus.calendarId}-`;
     }
+    /**
+     * @hidden
+     *
+     * TODO: Make visible when the Infinite Calendar is fixed to set properly the size option.
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `none`
+     *
+     */
+    set size(size) {
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.renderer.removeClass(this.element.nativeElement, getSizeClass('calendar', this.size));
+        if (newSize !== 'none') {
+            this.renderer.addClass(this.element.nativeElement, getSizeClass('calendar', newSize));
+        }
+        this._size = newSize;
+    }
+    get size() {
+        return this._size;
+    }
     /**
      * Sets or gets the `focusedDate` property of the Calendar and
      * defines the focused date of the component
@@ -315,29 +350,37 @@ export class MultiViewCalendarComponent {
     get max() {
         return this._max;
     }
+    /**
+     * Sets the Calendar selection mode
+     * ([see example]({% slug multiple_selection_multiviewcalendar %})).
+     *
+     * The available values are:
+     * * `single` (default)
+     * * `multiple`
+     * * `range`
+     */
+    set selection(_selection) {
+        this.selectionSetter = true;
+        this._selection = _selection;
+    }
+    get selection() {
+        return this._selection;
+    }
     /**
      * Sets or gets the `value` property of the Calendar and defines the selected value of the component.
      *
      * > The `value` has to be a valid
      * [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date)
-     * instance when in `single` selection mode or an array of valid JavaScript Date instances when in `multiple` selection mode.
+     * instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or
+     * an object of type `SelectionRange` when in `range` selection mode.
      */
+    set value(candidate) {
+        this.valueSetter = true;
+        this._value = candidate;
+    }
     get value() {
         return this._value;
     }
-    set value(candidate) {
-        this.verifyValue(candidate);
-        this._value = Array.isArray(candidate) ?
-            candidate.filter(date => isPresent(date)).map(element => cloneDate(element)) :
-            cloneDate(candidate);
-        const selection = [].concat(candidate).filter(date => isPresent(date)).map(date => cloneDate(date));
-        if (!areDatesEqual(selection, this.selectedDates)) {
-            const lastSelected = last(selection);
-            this.rangePivot = cloneDate(lastSelected);
-            this.focusedDate = cloneDate(lastSelected) || this.focusedDate;
-            this.selectedDates = selection;
-        }
-    }
     /**
      * @hidden
      */
@@ -354,10 +397,23 @@ export class MultiViewCalendarComponent {
     set disabledDates(value) {
         this.disabledDatesService.initialize(value);
     }
+    /**
+     * Specify, which end of the defined selection range should be marked as active.
+     *
+     * > Value will be ignored if the selection range is undefined.
+     * > If range selection is used then the default value is 'start'.
+     */
+    set activeRangeEnd(_activeRangeEnd) {
+        this._activeRangeEnd = _activeRangeEnd;
+    }
+    get activeRangeEnd() {
+        return (this.selection === 'range' && !this._activeRangeEnd) ? 'start' : this._activeRangeEnd;
+    }
     /**
      * Sets or gets the `selectionRange` property of the Calendar and
      * defines the selection range of the component
      * ([see example]({% slug dates_multiviewcalendar %}#toc-selection-range)).
+     * > We recommend using the `value` property as it now supports `range` selection.
      */
     set selectionRange(range) {
         this._selectionRange = range;
@@ -531,6 +587,7 @@ export class MultiViewCalendarComponent {
      */
     handleMouseLeave() {
         this.isHovered = false;
+        this.setRangeSelectionToValue();
     }
     /**
      * @hidden
@@ -581,8 +638,13 @@ export class MultiViewCalendarComponent {
             return;
         }
         else if (onEnterKeyPress) {
-            this.selectionService.lastClicked = this.focusedDate;
-            this.performSelection(this.focusedDate, event);
+            if (this.selection !== 'range') {
+                this.selectionService.lastClicked = this.focusedDate;
+                this.performSelection(this.focusedDate, event);
+            }
+            else {
+                this.performRangeSelection(this.focusedDate);
+            }
         }
         if (this.views >= 2) {
             if ((escKey || (altKey && onArrowUpPress))) {
@@ -605,12 +667,13 @@ export class MultiViewCalendarComponent {
         if (!isSameView) {
             this.emitNavigate(this.focusedDate);
         }
-        if (isArrowWithShiftPressed(event)) {
+        if (isArrowWithShiftPressed(event) && this.selection !== 'range') {
             event['anyArrow'] = true;
             this.performSelection(this.focusedDate, event);
         }
     }
     ngOnInit() {
+        this.setClasses(this.element.nativeElement);
         this.subscriptions.add(this.bus.viewChanged.subscribe(({ view }) => {
             this.activeView = CalendarViewEnum[view];
             this.activeViewChange.emit(this.activeView);
@@ -619,21 +682,36 @@ export class MultiViewCalendarComponent {
         }));
     }
     ngOnChanges(changes) {
+        this.changes = changes;
         this.verifyChanges();
         this.bus.configure(this.bottomViewEnum, this.topViewEnum);
-        if (hasExistingValue(changes, 'focusedDate')) {
-            const focusedDate = changes.focusedDate.currentValue;
+    }
+    ngDoCheck() {
+        if (this.valueSetter || this.selectionSetter) {
+            if (this.selection === 'range' &&
+                (this.value?.start || this.value?.end) &&
+                this.focusedDate.getTime() !== this.value.start?.getTime() &&
+                this.focusedDate.getTime() !== this.value.end?.getTime()) {
+                this.focusedDate = this.value.start || this.value.end || getToday();
+            }
+            this.setValue(this.value);
+            this.valueSetter = false;
+            this.selectionSetter = false;
+        }
+        if (hasExistingValue(this.changes, 'focusedDate')) {
+            const focusedDate = this.changes.focusedDate.currentValue;
             this.focusedDate = dateInRange(focusedDate, this.min, this.max);
         }
-        if (changes.min || changes.max || changes.rangeValidation || changes.disabledDates || changes.disabledDatesRangeValidation) {
+        if (this.changes.min || this.changes.max || this.changes.rangeValidation || this.changes.disabledDates || this.changes.disabledDatesRangeValidation) {
             this.minValidateFn = this.rangeValidation ? minValidator(this.min) : noop;
             this.maxValidateFn = this.rangeValidation ? maxValidator(this.max) : noop;
             this.disabledDatesRangeValidateFn = this.disabledDatesRangeValidation ? disabledDatesRangeValidator(this.disabledDatesService.isDateDisabled) : noop;
             this.onValidatorChange();
         }
-        if (changes.min || changes.max || changes.focusedDate || changes.activeView) {
+        if (this.changes.min || this.changes.max || this.changes.focusedDate || this.changes.activeView) {
             this.updateButtonState();
         }
+        this.changes = {};
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
@@ -671,7 +749,7 @@ export class MultiViewCalendarComponent {
             return;
         }
         const activeElement = this.views >= 2 ? this.element.nativeElement.querySelector('.k-calendar-view') :
-            this.element.nativeElement.querySelector('.k-content.k-calendar-table');
+            this.element.nativeElement.querySelector('.k-calendar-table');
         activeElement.blur();
     }
     /**
@@ -692,11 +770,48 @@ export class MultiViewCalendarComponent {
         if (this.disabledDatesService.isDateDisabled(this.focusedDate)) {
             return;
         }
+        if (this.selection === 'range') {
+            return;
+        }
         this.selectedDates = availableDates.map(date => cloneDate(date));
         this.value = this.parseSelectionToValue(availableDates);
         this.onControlChange(this.parseSelectionToValue(availableDates));
         this.valueChange.emit(this.parseSelectionToValue(availableDates));
     }
+    /**
+     * @hidden
+     */
+    onCellEnter(cellEnter, date) {
+        this.emitCellEvent(cellEnter, date);
+        if (this.selection === 'range' && (this.canHover || this.shouldHoverWhenNoStart)) {
+            this.zone.run(() => {
+                if (this.canHover && !this.shouldHoverWhenNoStart) {
+                    if (this.allowReverse) {
+                        if (this.activeRangeEnd === 'end' && this.selectionRange.start) {
+                            this.selectionRange = { start: this.selectionRange.start, end: date };
+                        }
+                        if (this.activeRangeEnd === 'start' && this.selectionRange.end) {
+                            this.selectionRange = { start: date, end: this.selectionRange.end };
+                        }
+                    }
+                    else {
+                        if (this.activeRangeEnd === 'end' && this.selectionRange.start && date >= this.selectionRange.start) {
+                            this.selectionRange = { start: this.selectionRange.start, end: date };
+                        }
+                        if (this.selectionRange.start && date < this.selectionRange.start) {
+                            this.selectionRange = { start: this.selectionRange.start, end: null };
+                        }
+                    }
+                }
+                else if (this.shouldHoverWhenNoStart && date <= this.selectionRange.end) {
+                    this.selectionRange = { start: date, end: this.selectionRange.end };
+                }
+                else {
+                    this.selectionRange = { start: null, end: this.selectionRange.end };
+                }
+            });
+        }
+    }
     /**
      * @hidden
      */
@@ -801,8 +916,13 @@ export class MultiViewCalendarComponent {
      * @hidden
      */
     handleCellClick({ date, modifiers }) {
-        this.selectionService.lastClicked = date;
-        this.performSelection(date, modifiers);
+        if (this.selection === 'range') {
+            this.performRangeSelection(date);
+        }
+        else {
+            this.selectionService.lastClicked = date;
+            this.performSelection(date, modifiers);
+        }
         const isSameView = this.bus.service(this.activeViewEnum).isInArray(this.focusedDate, this.viewList.dates);
         if (!isSameView) {
             this.emitNavigate(this.focusedDate);
@@ -816,16 +936,31 @@ export class MultiViewCalendarComponent {
             return;
         }
         this.zone.run(() => {
-            this.handleDateChange({
-                selectedDates: dates,
-                focusedDate: last(dates)
-            });
+            if (this.selection === 'multiple') {
+                this.handleDateChange({
+                    selectedDates: dates,
+                    focusedDate: last(dates),
+                });
+            }
+            if (this.selection === 'range') {
+                this.activeRangeEnd = 'start';
+                const shouldEmitValueChange = this.selectionRange.start?.getTime() !== dates[0].getTime() ||
+                    this.selectionRange.end?.getTime() !== last(dates).getTime();
+                this.selectionRange.start = dates[0];
+                this.selectionRange.end = last(dates);
+                this.value = this.selectionRange;
+                if (shouldEmitValueChange) {
+                    this.valueChange.emit(this.value);
+                }
+            }
         });
     }
     setClasses(element) {
-        this.renderer.addClass(element, 'k-widget');
         this.renderer.addClass(element, 'k-calendar');
-        this.renderer.addClass(element, 'k-calendar-range');
+        this.renderer.addClass(element, getSizeClass('calendar', this.size));
+        if (this.views >= 2) {
+            this.renderer.addClass(element, 'k-calendar-range');
+        }
     }
     verifyChanges() {
         if (!isDevMode()) {
@@ -842,14 +977,22 @@ export class MultiViewCalendarComponent {
         if (!isDevMode()) {
             return;
         }
-        if (this.selection === 'single' && candidate && !(candidate instanceof Date)) {
-            throw new Error(`The 'value' should be a valid JavaScript Date instance. Check ${VALUE_DOC_LINK} for possible resolution.`);
+        if (this.selection === 'single' && candidate && !(isNullOrDate(candidate))) {
+            throw new Error(`When using 'single' selection the 'value' should be a valid JavaScript Date instance. Check ${VALUE_DOC_LINK} for possible resolution.`);
         }
-        else if (this.selection === 'multiple' && candidate && Array.isArray(candidate)) {
-            const onlyDates = candidate.every(value => value instanceof Date);
-            if (!onlyDates) {
-                throw new Error(`The 'value' should be an array of valid JavaScript Date instances. Check ${VALUE_DOC_LINK} for possible resolution.`);
+        else if (this.selection === 'multiple' && candidate) {
+            if (Array.isArray(candidate)) {
+                const onlyDates = candidate.every(value => value instanceof Date);
+                if (!onlyDates) {
+                    throw new Error(`When using 'multiple' selection the 'value' should be an array of valid JavaScript Date instances. Check ${VALUE_DOC_LINK} for possible resolution.`);
+                }
             }
+            if (Object.keys(candidate).find(k => k === 'start') && Object.keys(candidate).find(k => k === 'end')) {
+                throw new Error(`When using 'multiple' selection the 'value' should be an array of valid JavaScript Date instances. Check ${VALUE_DOC_LINK} for possible resolution.`);
+            }
+        }
+        else if (this.selection === 'range' && candidate && !(isNullOrDate(candidate['start']) && isNullOrDate(candidate['end']))) {
+            throw new Error(`The 'value' should be an object with start and end dates. Check ${VALUE_DOC_LINK} for possible resolution.`);
         }
     }
     updateButtonState() {
@@ -863,6 +1006,77 @@ export class MultiViewCalendarComponent {
         selection = selection || [];
         return this.selection === 'single' ? cloneDate(last(selection)) : selection.map(date => cloneDate(date));
     }
+    setValue(candidate) {
+        this.verifyValue(candidate);
+        if (candidate === null) {
+            this._value = null;
+            this.selectedDates = [];
+        }
+        else if (Array.isArray(candidate)) {
+            this.selectionRange = { start: null, end: null };
+            this._value = candidate.filter(date => isPresent(date)).map(element => cloneDate(element));
+        }
+        else if (isObject(candidate) && Object.keys(candidate).find(k => k === 'start') && Object.keys(candidate).find(k => k === 'end')) {
+            this.selectedDates = [];
+            this.selectionRange = { start: null, end: null };
+            this._value = { start: null, end: null };
+            this._value.start = candidate.start instanceof Date ? cloneDate(candidate.start) : null;
+            this._value.end = candidate.end instanceof Date ? cloneDate(candidate.end) : null;
+            this.selectionRange = Object.assign({}, this._value);
+            if (this._value?.start && !this._value?.end) {
+                this.activeRangeEnd = 'end';
+                this.canHover = true;
+            }
+            if (this._value?.end && !this._value?.start) {
+                this.activeRangeEnd = 'start';
+                this.canHover = true;
+            }
+            if (this._value?.end && this._value?.start) {
+                this.canHover = false;
+            }
+        }
+        else {
+            this.selectionRange = { start: null, end: null };
+            this._value = cloneDate(candidate);
+        }
+        if (this.selection !== 'range') {
+            const selection = [].concat(candidate).filter(date => isPresent(date)).map(date => cloneDate(date));
+            if (!areDatesEqual(selection, this.selectedDates)) {
+                const lastSelected = last(selection);
+                this.rangePivot = cloneDate(lastSelected);
+                this.focusedDate = cloneDate(lastSelected) || this.focusedDate;
+                this.selectedDates = selection;
+            }
+        }
+    }
+    setRangeSelectionToValue() {
+        if (this.selection === 'range' && this.value) {
+            this.selectionRange = this.value;
+            this.cdr.markForCheck();
+        }
+    }
+    performRangeSelection(date) {
+        this.focusedDate = date;
+        const clonedRangeSelection = Object.assign({}, this.selectionRange);
+        const emitValueChange = (this.activeRangeEnd === 'start' && this.value?.start?.getTime() !== date?.getTime()) ||
+            (this.activeRangeEnd === 'end' && this.value?.end?.getTime() !== date?.getTime());
+        this.zone.run(() => {
+            const rangeSelection = handleRangeSelection(date, clonedRangeSelection, this.activeRangeEnd, this.allowReverse);
+            this.activeRangeEnd = rangeSelection.activeRangeEnd;
+            if (this.canHover && rangeSelection.activeRangeEnd === 'end' && rangeSelection.selectionRange.end?.getTime() === date.getTime()) {
+                this.activeRangeEnd = 'start';
+                rangeSelection.activeRangeEnd = 'start';
+            }
+            this.canHover = this.activeRangeEnd === 'end' && rangeSelection.selectionRange.start && !rangeSelection.selectionRange.end;
+            if (emitValueChange && (this.value?.start?.getTime() !== rangeSelection.selectionRange?.start?.getTime() ||
+                this.value?.end?.getTime() !== rangeSelection.selectionRange?.end?.getTime())) {
+                this.value = rangeSelection.selectionRange;
+                this.valueChange.emit(this.value);
+                this.rangeSelectionChange.emit(rangeSelection);
+            }
+            this.cdr.markForCheck();
+        });
+    }
     performSelection(date, selectionModifiers) {
         const selection = this.selectionService.performSelection({
             date: date,
@@ -879,8 +1093,8 @@ export class MultiViewCalendarComponent {
         });
     }
 }
-MultiViewCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MultiViewCalendarComponent, deps: [{ token: i1.BusViewService }, { token: i0.ElementRef }, { token: i2.NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i3.DisabledDatesService }, { token: i4.SelectionService }], target: i0.ɵɵFactoryTarget.Component });
-MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: { showOtherMonthDays: "showOtherMonthDays", showCalendarHeader: "showCalendarHeader", id: "id", focusedDate: "focusedDate", footer: "footer", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesRangeValidation: "disabledDatesRangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", weekDaysFormat: "weekDaysFormat", isActive: "isActive", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", weekNumber: "weekNumber", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", views: "views", orientation: "orientation", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", cellEnter: "cellEnter", cellLeave: "cellLeave", valueChange: "valueChange", blurEvent: "blur", focusEvent: "focus", focusCalendar: "focusCalendar", onClosePopup: "onClosePopup", onTabPress: "onTabPress", onShiftTabPress: "onShiftTabPress" }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "mousedown": "handleMousedown($event)", "click": "handleClick()", "keydown": "keydown($event)" }, properties: { "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
+MultiViewCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiViewCalendarComponent, deps: [{ token: i1.BusViewService }, { token: i0.ElementRef }, { token: i2.NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i3.DisabledDatesService }, { token: i4.SelectionService }], target: i0.ɵɵFactoryTarget.Component });
+MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: { showOtherMonthDays: "showOtherMonthDays", showCalendarHeader: "showCalendarHeader", size: "size", id: "id", focusedDate: "focusedDate", footer: "footer", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesRangeValidation: "disabledDatesRangeValidation", selection: "selection", allowReverse: "allowReverse", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", weekDaysFormat: "weekDaysFormat", isActive: "isActive", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", weekNumber: "weekNumber", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", views: "views", orientation: "orientation", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", cellEnter: "cellEnter", cellLeave: "cellLeave", valueChange: "valueChange", rangeSelectionChange: "rangeSelectionChange", blurEvent: "blur", focusEvent: "focus", focusCalendar: "focusCalendar", onClosePopup: "onClosePopup", onTabPress: "onTabPress", onShiftTabPress: "onShiftTabPress" }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "mousedown": "handleMousedown($event)", "click": "handleClick()", "keydown": "keydown($event)" }, properties: { "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
         BusViewService,
         RANGE_CALENDAR_VALUE_ACCESSOR,
         RANGE_CALENDAR_RANGE_VALIDATORS,
@@ -911,6 +1125,7 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
         *ngIf="showCalendarHeader"
         [activeView]="activeViewEnum"
         [currentDate]="activeDate"
+        [size]="size"
         [min]="min"
         [max]="max"
         [id]="headerId"
@@ -928,6 +1143,7 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
     </kendo-calendar-header>
     <kendo-calendar-horizontal
         [showOtherMonthDays]="showOtherMonthDays"
+        [allowReverse]="allowReverse"
         [id]="calendarHeaderIdLabel"
         [attr.aria-labelledby]="multiViewCalendarHeaderIdLabel"
         [activeView]="activeViewEnum"
@@ -952,7 +1168,7 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
         [disabled]="disabled"
         (cellClick)="handleCellClick($event)"
         (weekNumberCellClick)="handleWeekNumberClick($event)"
-        (cellEnter)="emitCellEvent(cellEnter, $event)"
+        (cellEnter)="onCellEnter(cellEnter, $event)"
         (cellLeave)="emitCellEvent(cellLeave, $event)"
         (activeDateChange)="setActiveDate($event)"
         (focusCalendar)="handleFocus()"
@@ -965,8 +1181,8 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
         [activeViewValue]="activeView"
         [currentDate]="activeDate">
     </kendo-calendar-footer>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { kind: "component", type: i7.FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }, { kind: "component", type: i8.HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: ["showOtherMonthDays", "cellTemplateRef", "weekNumberTemplateRef", "activeRangeEnd", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectionRange", "selectedDates", "views", "showViewHeader", "animateNavigation", "orientation", "activeDescendant", "tabIndex", "disabled", "id", "weekDaysFormat", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "activeDateChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }, { kind: "directive", type: i9.MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MultiViewCalendarComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id", "size"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { kind: "component", type: i7.FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }, { kind: "component", type: i8.HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: ["showOtherMonthDays", "cellTemplateRef", "weekNumberTemplateRef", "allowReverse", "activeRangeEnd", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectionRange", "selectedDates", "views", "showViewHeader", "animateNavigation", "orientation", "activeDescendant", "tabIndex", "disabled", "id", "weekDaysFormat", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "activeDateChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }, { kind: "directive", type: i9.MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiViewCalendarComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1004,6 +1220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         *ngIf="showCalendarHeader"
         [activeView]="activeViewEnum"
         [currentDate]="activeDate"
+        [size]="size"
         [min]="min"
         [max]="max"
         [id]="headerId"
@@ -1021,6 +1238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
     </kendo-calendar-header>
     <kendo-calendar-horizontal
         [showOtherMonthDays]="showOtherMonthDays"
+        [allowReverse]="allowReverse"
         [id]="calendarHeaderIdLabel"
         [attr.aria-labelledby]="multiViewCalendarHeaderIdLabel"
         [activeView]="activeViewEnum"
@@ -1045,7 +1263,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         [disabled]="disabled"
         (cellClick)="handleCellClick($event)"
         (weekNumberCellClick)="handleWeekNumberClick($event)"
-        (cellEnter)="emitCellEvent(cellEnter, $event)"
+        (cellEnter)="onCellEnter(cellEnter, $event)"
         (cellLeave)="emitCellEvent(cellLeave, $event)"
         (activeDateChange)="setActiveDate($event)"
         (focusCalendar)="handleFocus()"
@@ -1064,6 +1282,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], showCalendarHeader: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], id: [{
                 type: Input
             }], focusedDate: [{
@@ -1080,6 +1300,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], selection: [{
                 type: Input
+            }], allowReverse: [{
+                type: Input
             }], value: [{
                 type: Input
             }], disabled: [{
@@ -1124,6 +1346,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Output
             }], valueChange: [{
                 type: Output
+            }], rangeSelectionChange: [{
+                type: Output
             }], blurEvent: [{
                 type: Output,
                 args: ['blur']

package/esm2020/calendar/multiview-calendar.module.mjs

@@ -57,8 +57,8 @@ import * as i0 from "@angular/core";
  */
 export class MultiViewCalendarModule {
 }
-MultiViewCalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MultiViewCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MultiViewCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: MultiViewCalendarModule, declarations: [HorizontalViewListComponent,
+MultiViewCalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiViewCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MultiViewCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MultiViewCalendarModule, declarations: [HorizontalViewListComponent,
         MultiViewCalendarLocalizedMessagesDirective,
         MultiViewCalendarCustomMessagesComponent,
         MultiViewCalendarComponent], imports: [CommonModule,
@@ -72,7 +72,7 @@ MultiViewCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         MultiViewCalendarComponent,
         CalendarCommonModule,
         TemplatesModule] });
-MultiViewCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MultiViewCalendarModule, providers: [
+MultiViewCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiViewCalendarModule, providers: [
         NavigationService,
         CenturyViewService,
         DecadeViewService,
@@ -86,7 +86,7 @@ MultiViewCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
         PopupModule,
         EventsModule, CalendarCommonModule,
         TemplatesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MultiViewCalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiViewCalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2020/calendar/navigation.component.mjs

@@ -117,8 +117,8 @@ export class NavigationComponent {
         }
     }
 }
-NavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavigationComponent, deps: [{ token: i1.BusViewService }, { token: i2.CalendarDOMService }, { token: i3.IntlService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-NavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NavigationComponent, selector: "kendo-calendar-navigation", inputs: { activeView: "activeView", min: "min", max: "max", focusedDate: "focusedDate", templateRef: "templateRef" }, outputs: { valueChange: "valueChange", pageChange: "pageChange" }, host: { properties: { "class.k-calendar-navigation": "this.getComponentClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+NavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationComponent, deps: [{ token: i1.BusViewService }, { token: i2.CalendarDOMService }, { token: i3.IntlService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+NavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NavigationComponent, selector: "kendo-calendar-navigation", inputs: { activeView: "activeView", min: "min", max: "max", focusedDate: "focusedDate", templateRef: "templateRef" }, outputs: { valueChange: "valueChange", pageChange: "pageChange" }, host: { properties: { "class.k-calendar-navigation": "this.getComponentClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <span class="k-calendar-navigation-highlight"></span>
     <kendo-virtualization
         [skip]="skip"
@@ -145,7 +145,7 @@ NavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
         </ul>
     </kendo-virtualization>
   `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "component", type: i6.VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { kind: "directive", type: i7.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,