@progress/kendo-angular-dateinputs 5.3.1-dev.202112011809 → 6.0.0-dev.202201181611

package/dist/npm/calendar/calendar.component.js

@@ -694,6 +694,14 @@ var CalendarComponent = /** @class */ (function () {
                 return null;
         }
     };
+    /**
+     * @hidden
+     */
+    CalendarComponent.prototype.handleNavigate = function (event) {
+        this.focusedDate = event.focusedDate;
+        this.activeView = event.activeView;
+        this.emitNavigate(this.focusedDate);
+    };
     /**
      * @hidden
      */
@@ -835,6 +843,10 @@ var CalendarComponent = /** @class */ (function () {
         }
     };
     CalendarComponent.prototype.handleKeydown = function (args) {
+        var headerActive = this.type === 'classic' && this.multiViewCalendar.isHeaderActive;
+        if (headerActive) {
+            return;
+        }
         // reserve the alt + arrow key commands for the picker
         var arrowKeyPressed = [kendo_angular_common_1.Keys.ArrowUp, kendo_angular_common_1.Keys.ArrowRight, kendo_angular_common_1.Keys.ArrowDown, kendo_angular_common_1.Keys.ArrowLeft].indexOf(args.keyCode) !== -1;
         if (utils_1.isPresent(this.pickerService) && arrowKeyPressed && args.altKey) {
@@ -1083,7 +1095,7 @@ var CalendarComponent = /** @class */ (function () {
     ], CalendarComponent.prototype, "calendarTabIndex", null);
     tslib_1.__decorate([
         core_1.HostBinding('attr.aria-disabled'),
-        core_1.HostBinding('class.k-state-disabled'),
+        core_1.HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], CalendarComponent.prototype, "ariaDisabled", null);
@@ -1107,7 +1119,7 @@ var CalendarComponent = /** @class */ (function () {
                 selection_service_1.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)=\"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  "
+            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)=\"handleNavigate($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, core_1.Optional()),
         tslib_1.__metadata("design:paramtypes", [bus_view_service_1.BusViewService,

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

@@ -159,7 +159,7 @@ var HeaderComponent = /** @class */ (function () {
     HeaderComponent = tslib_1.__decorate([
         core_1.Component({
             selector: 'kendo-calendar-header',
-            template: "\n    <span class=\"k-button k-flat k-title k-calendar-title\" [class.k-state-disabled]=\"!navigate\"\n        [kendoEventsOutsideAngular]=\"{\n            click: handleNavigation\n        }\"\n        [scope]=\"this\">\n        <ng-template [ngIf]=\"!templateRef\">{{title}}</ng-template>\n        <ng-template\n            [ngIf]=\"templateRef\"\n            [ngTemplateOutlet]=\"templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: title, activeView: activeViewValue, date: currentDate }\"\n        ></ng-template>\n    </span>\n    <span class=\"k-spacer\"></span>\n    <span class=\"k-calendar-nav k-hstack\">\n        <button\n            *ngIf=\"showNavigationButtons\"\n            class=\"k-button k-flat k-icon-button k-prev-view\"\n            type=\"button\"\n            [attr.aria-disabled]=\"isPrevDisabled\"\n            [disabled]=\"isPrevDisabled\"\n            [title]=\"prevButtonTitle\"\n            (click)=\"prevButtonClick.emit()\"\n        >\n            <span class=\"k-icon k-i-arrow-60-left\"></span>\n        </button>\n        <span\n            class=\"k-today k-nav-today\"\n            [class.k-state-disabled]=\"!todayAvailable\"\n            [kendoEventsOutsideAngular]=\"{\n                click: handleTodayClick\n            }\"\n            [scope]=\"this\"\n        >\n            {{ todayMessage }}\n        </span>\n        <button\n            *ngIf=\"showNavigationButtons\"\n            class=\"k-button k-flat k-icon-button k-next-view\"\n            type=\"button\"\n            [attr.aria-disabled]=\"isNextDisabled\"\n            [disabled]=\"isNextDisabled\"\n            [title]=\"nextButtonTitle\"\n            (click)=\"nextButtonClick.emit()\"\n        >\n            <span class=\"k-icon k-i-arrow-60-right\"></span>\n        </button>\n    </span>\n  "
+            template: "\n    <span class=\"k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title\" [class.k-disabled]=\"!navigate\"\n        [kendoEventsOutsideAngular]=\"{\n            click: handleNavigation\n        }\"\n        [scope]=\"this\">\n        <ng-template [ngIf]=\"!templateRef\">{{title}}</ng-template>\n        <ng-template\n            [ngIf]=\"templateRef\"\n            [ngTemplateOutlet]=\"templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: title, activeView: activeViewValue, date: currentDate }\"\n        ></ng-template>\n    </span>\n    <span class=\"k-spacer\"></span>\n    <span class=\"k-calendar-nav k-hstack\">\n        <button\n            *ngIf=\"showNavigationButtons\"\n            class=\"k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-prev-view\"\n            type=\"button\"\n            [attr.aria-disabled]=\"isPrevDisabled\"\n            [disabled]=\"isPrevDisabled\"\n            [title]=\"prevButtonTitle\"\n            (click)=\"prevButtonClick.emit()\"\n        >\n            <span class=\"k-icon k-i-arrow-60-left\"></span>\n        </button>\n        <span\n            class=\"k-today k-nav-today\"\n            [class.k-disabled]=\"!todayAvailable\"\n            [kendoEventsOutsideAngular]=\"{\n                click: handleTodayClick\n            }\"\n            [scope]=\"this\"\n        >\n            {{ todayMessage }}\n        </span>\n        <button\n            *ngIf=\"showNavigationButtons\"\n            class=\"k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-next-view\"\n            type=\"button\"\n            [attr.aria-disabled]=\"isNextDisabled\"\n            [disabled]=\"isNextDisabled\"\n            [title]=\"nextButtonTitle\"\n            (click)=\"nextButtonClick.emit()\"\n        >\n            <span class=\"k-icon k-i-arrow-60-right\"></span>\n        </button>\n    </span>\n  "
         }),
         tslib_1.__metadata("design:paramtypes", [bus_view_service_1.BusViewService,
             core_1.ChangeDetectorRef,

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

@@ -5,7 +5,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-/* tslint:disable:no-forward-ref */
 var core_1 = require("@angular/core");
 var forms_1 = require("@angular/forms");
 var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
@@ -33,6 +32,7 @@ var defaults_1 = require("../defaults");
 var util_1 = require("../util");
 var rxjs_1 = require("rxjs");
 var utils_1 = require("../common/utils");
+var picker_service_1 = require("../common/picker.service");
 var BOTTOM_VIEW_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent/#toc-bottomview';
 var TOP_VIEW_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent/#toc-topview';
 var MIN_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent/#toc-min';
@@ -69,7 +69,7 @@ exports.RANGE_CALENDAR_RANGE_VALIDATORS = {
  * ```
  */
 var MultiViewCalendarComponent = /** @class */ (function () {
-    function MultiViewCalendarComponent(bus, element, navigator, renderer, cdr, zone, disabledDatesService, selectionService) {
+    function MultiViewCalendarComponent(bus, element, navigator, renderer, cdr, zone, disabledDatesService, selectionService, pickerService) {
         this.bus = bus;
         this.element = element;
         this.navigator = navigator;
@@ -78,6 +78,7 @@ var MultiViewCalendarComponent = /** @class */ (function () {
         this.zone = zone;
         this.disabledDatesService = disabledDatesService;
         this.selectionService = selectionService;
+        this.pickerService = pickerService;
         /**
          * @hidden
          */
@@ -448,21 +449,22 @@ var MultiViewCalendarComponent = /** @class */ (function () {
     /**
      * @hidden
      */
-    MultiViewCalendarComponent.prototype.handleBlur = function (event) {
-        var target = event.target;
-        if (!this.element.nativeElement.contains(event.relatedTarget)) {
+    MultiViewCalendarComponent.prototype.handleFocusout = function (event) {
+        var 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(target);
+        this.isHeaderActive = this.headerElement.nativeElement.contains(relatedTarget);
     };
     /**
      * @hidden
      */
     MultiViewCalendarComponent.prototype.handleFocus = function () {
         this.isActive = true;
+        this.isHeaderActive = false;
     };
     /**
      * @hidden
@@ -495,7 +497,13 @@ var MultiViewCalendarComponent = /** @class */ (function () {
      * @hidden
      */
     MultiViewCalendarComponent.prototype.keydown = function (event) {
+        if (this.isHeaderActive) {
+            return;
+        }
         if (event.keyCode === kendo_angular_common_1.Keys.Enter) {
+            if (utils_1.isPresent(this.pickerService)) {
+                event.preventDefault(); // Don't submit form from Datepicker popup
+            }
             this.performSelection(this.focusedDate, event);
         }
         var candidate = util_1.dateInRange(this.navigator.move(this.focusedDate, this.navigator.action(event), this.activeViewEnum), this.min, this.max);
@@ -572,6 +580,12 @@ var MultiViewCalendarComponent = /** @class */ (function () {
         }
         this.element.nativeElement.blur();
     };
+    /**
+     * @hidden
+     */
+    MultiViewCalendarComponent.prototype.handleHeaderFocus = function () {
+        this.isHeaderActive = true;
+    };
     /**
      * @hidden
      */
@@ -981,7 +995,7 @@ var MultiViewCalendarComponent = /** @class */ (function () {
     ], MultiViewCalendarComponent.prototype, "calendarTabIndex", null);
     tslib_1.__decorate([
         core_1.HostBinding('attr.aria-disabled'),
-        core_1.HostBinding('class.k-state-disabled'),
+        core_1.HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], MultiViewCalendarComponent.prototype, "ariaDisabled", null);
@@ -993,9 +1007,9 @@ var MultiViewCalendarComponent = /** @class */ (function () {
     tslib_1.__decorate([
         core_1.HostListener('focusout', ['$event']),
         tslib_1.__metadata("design:type", Function),
-        tslib_1.__metadata("design:paramtypes", [FocusEvent]),
+        tslib_1.__metadata("design:paramtypes", [Object]),
         tslib_1.__metadata("design:returntype", void 0)
-    ], MultiViewCalendarComponent.prototype, "handleBlur", null);
+    ], MultiViewCalendarComponent.prototype, "handleFocusout", null);
     tslib_1.__decorate([
         core_1.HostListener("focus"),
         tslib_1.__metadata("design:type", Function),
@@ -1050,8 +1064,9 @@ var MultiViewCalendarComponent = /** @class */ (function () {
                 selection_service_1.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)=\"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  "
+            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        [kendoEventsOutsideAngular]=\"{\n            focusin: handleHeaderFocus\n        }\"\n        [scope]=\"this\"\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.__param(8, core_1.Optional()),
         tslib_1.__metadata("design:paramtypes", [bus_view_service_1.BusViewService,
             core_1.ElementRef,
             navigation_service_1.NavigationService,
@@ -1059,7 +1074,8 @@ var MultiViewCalendarComponent = /** @class */ (function () {
             core_1.ChangeDetectorRef,
             core_1.NgZone,
             disabled_dates_service_1.DisabledDatesService,
-            selection_service_1.SelectionService])
+            selection_service_1.SelectionService,
+            picker_service_1.PickerService])
     ], MultiViewCalendarComponent);
     return MultiViewCalendarComponent;
 }());

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

@@ -9,6 +9,7 @@ var core_1 = require("@angular/core");
 var common_1 = require("@angular/common");
 var kendo_angular_intl_1 = require("@progress/kendo-angular-intl");
 var kendo_angular_popup_1 = require("@progress/kendo-angular-popup");
+var kendo_angular_common_1 = require("@progress/kendo-angular-common");
 var calendar_common_module_1 = require("./calendar-common.module");
 var templates_module_1 = require("./templates.module");
 var horizontal_view_list_component_1 = require("./horizontal-view-list.component");
@@ -75,7 +76,14 @@ var MultiViewCalendarModule = /** @class */ (function () {
                 calendar_common_module_1.CalendarCommonModule,
                 templates_module_1.TemplatesModule
             ],
-            imports: [common_1.CommonModule, calendar_common_module_1.CalendarCommonModule, kendo_angular_intl_1.IntlModule, templates_module_1.TemplatesModule, kendo_angular_popup_1.PopupModule],
+            imports: [
+                common_1.CommonModule,
+                calendar_common_module_1.CalendarCommonModule,
+                kendo_angular_intl_1.IntlModule,
+                templates_module_1.TemplatesModule,
+                kendo_angular_popup_1.PopupModule,
+                kendo_angular_common_1.EventsModule
+            ],
             providers: [
                 navigation_service_1.NavigationService,
                 century_view_service_1.CenturyViewService,

package/dist/npm/calendar/services/dom.service.js

@@ -19,7 +19,7 @@ var tr = util_1.domContainerFactory('tr');
 var tbody = util_1.domContainerFactory('tbody');
 var thead = util_1.domContainerFactory('thead');
 var table = util_1.domContainerFactory('table');
-var monthHeader = function () { return (div("\n            <span class=\"k-button k-flat k-title k-calendar-title\">March 2017</span>\n            <span class=\"k-spacer\"></span>\n            <span class=\"k-calendar-nav k-hstack\">\n                <span class=\"k-today k-nav-today\">TODAY</span>\n            </span>\n        ", 'k-calendar-header k-hstack')); };
+var monthHeader = function () { return (div("\n            <span class=\"k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title\">March 2017</span>\n            <span class=\"k-spacer\"></span>\n            <span class=\"k-calendar-nav k-hstack\">\n                <span class=\"k-today k-nav-today\">TODAY</span>\n            </span>\n        ", 'k-calendar-header k-hstack')); };
 var ɵ0 = monthHeader;
 exports.ɵ0 = ɵ0;
 var monthWeekHeader = function () { return (table([

package/dist/npm/calendar/view.component.js

@@ -124,7 +124,7 @@ var ViewComponent = /** @class */ (function () {
             'k-state-selected': !context.isOtherMonth && (context.isSelected || isRangeStart || isRangeEnd),
             'k-today': !context.isOtherMonth && context.isToday,
             'k-weekend': context.isWeekend,
-            'k-state-disabled': context.isDisabled,
+            'k-disabled': context.isDisabled,
             'k-other-month': context.isOtherMonth
         });
     };

package/dist/npm/common/models/fillmode.js

@@ -0,0 +1,6 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/common/models/rounded.js

@@ -0,0 +1,6 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/common/models/size.js

@@ -0,0 +1,6 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/dateinput/dateinput.component.js

@@ -457,11 +457,11 @@ var KendoDate = /** @class */ (function () {
  * Represents the [Kendo UI DateInput component for Angular]({% slug overview_dateinput %}#toc-basic-usage).
  */
 var DateInputComponent = /** @class */ (function () {
-    function DateInputComponent(cdr, intl, renderer, element, ngZone, injector, localization, pickerService) {
+    function DateInputComponent(cdr, intl, renderer, wrapper, ngZone, injector, localization, pickerService) {
         this.cdr = cdr;
         this.intl = intl;
         this.renderer = renderer;
-        this.element = element;
+        this.wrapper = wrapper;
         this.ngZone = ngZone;
         this.injector = injector;
         this.localization = localization;
@@ -663,6 +663,9 @@ var DateInputComponent = /** @class */ (function () {
         this.onControlChange = util_1.noop;
         this.onControlTouched = util_1.noop;
         this.onValidatorChange = util_1.noop;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         this.symbolsMap = this.dateSymbolMap();
         this.updateFormatSections();
         if (this.pickerService) {
@@ -703,6 +706,83 @@ var DateInputComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(DateInputComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * Sets the size of the component.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (Default)
+         * * `'large'`
+         * * `null`
+         *
+         */
+        set: function (size) {
+            this.renderer.removeClass(this.wrapper.nativeElement, util_1.getSizeClass('input', this.size));
+            if (size) {
+                this.renderer.addClass(this.wrapper.nativeElement, util_1.getSizeClass('input', size));
+            }
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DateInputComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * Sets the border radius of the component.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (Default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
+         *
+         */
+        set: function (rounded) {
+            this.renderer.removeClass(this.wrapper.nativeElement, util_1.getRoundedClass(this.rounded));
+            if (rounded) {
+                this.renderer.addClass(this.wrapper.nativeElement, util_1.getRoundedClass(rounded));
+            }
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DateInputComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * Sets the fillMode of the component.
+         *
+         * The possible values are:
+         * * `'solid'` (Default)
+         * * `'flat'`
+         * * `'outline'`
+         * * `null`
+         *
+         */
+        set: function (fillMode) {
+            this.renderer.removeClass(this.wrapper.nativeElement, util_1.getFillModeClass('input', this.fillMode));
+            if (fillMode) {
+                this.renderer.addClass(this.wrapper.nativeElement, util_1.getFillModeClass('input', fillMode));
+                if (this.spinners && this.spinup && this.spindown) {
+                    this.setSpinnerFill(this.spinup.nativeElement, fillMode, this.fillMode);
+                    this.setSpinnerFill(this.spindown.nativeElement, fillMode, this.fillMode);
+                }
+            }
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(DateInputComponent.prototype, "wrapperClass", {
         get: function () {
             return true;
@@ -737,16 +817,16 @@ var DateInputComponent = /** @class */ (function () {
         },
         set: function (value) {
             this._active = value;
-            if (!this.wrap) {
+            if (!this.wrapper) {
                 return;
             }
             if (!utils_1.isPresent(this.pickerService)) {
-                var element = this.wrap.nativeElement;
+                var element = this.wrapper.nativeElement;
                 if (value) {
-                    this.renderer.addClass(element, 'k-state-focused');
+                    this.renderer.addClass(element, 'k-focus');
                 }
                 else {
-                    this.renderer.removeClass(element, 'k-state-focused');
+                    this.renderer.removeClass(element, 'k-focus');
                 }
             }
         },
@@ -795,7 +875,7 @@ var DateInputComponent = /** @class */ (function () {
      */
     DateInputComponent.prototype.containsElement = function (element) {
         var _this = this;
-        return Boolean(dom_queries_1.closest(element, function (node) { return node === _this.element.nativeElement; }));
+        return Boolean(dom_queries_1.closest(element, function (node) { return node === _this.wrapper.nativeElement; }));
     };
     /**
      * @hidden
@@ -848,13 +928,16 @@ var DateInputComponent = /** @class */ (function () {
         this.updateElementValue();
         this.intlSubscription = this.intl.changes.subscribe(this.intlChange.bind(this));
         this.ngControl = this.injector.get(forms_1.NgControl, null);
-        if (this.element) {
-            this.renderer.removeAttribute(this.element.nativeElement, 'tabindex');
+        if (this.wrapper) {
+            this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
             this.ngZone.runOutsideAngular(function () {
                 _this.bindEvents();
             });
         }
     };
+    DateInputComponent.prototype.ngAfterViewInit = function () {
+        this.setComponentClasses();
+    };
     /**
      * @hidden
      */
@@ -1208,7 +1291,7 @@ var DateInputComponent = /** @class */ (function () {
         }
     };
     DateInputComponent.prototype.bindEvents = function () {
-        var element = this.element.nativeElement;
+        var element = this.wrapper.nativeElement;
         var mousewheelHandler = this.handleMouseWheel.bind(this);
         this.domEvents.push(this.renderer.listen(element, 'DOMMouseScroll', mousewheelHandler), this.renderer.listen(element, 'mousewheel', mousewheelHandler), this.renderer.listen(element, 'keydown', this.handleKeydown.bind(this)), this.renderer.listen(element, 'paste', this.handlePaste.bind(this)), this.renderer.listen(element, 'input', this.handleInput.bind(this)));
     };
@@ -1340,6 +1423,29 @@ var DateInputComponent = /** @class */ (function () {
             this.pickerService.dateCompletenessChange.emit();
         }
     };
+    DateInputComponent.prototype.setSpinnerFill = function (spinner, fill, oldFill) {
+        if (oldFill) {
+            this.renderer.removeClass(spinner, "k-button-" + oldFill);
+            this.renderer.removeClass(spinner, "k-button-" + oldFill + "-base");
+        }
+        this.renderer.addClass(spinner, "k-button-" + fill);
+        this.renderer.addClass(spinner, "k-button-" + fill + "-base");
+    };
+    DateInputComponent.prototype.setComponentClasses = function () {
+        if (this.size) {
+            this.renderer.addClass(this.wrapper.nativeElement, util_1.getSizeClass('input', this.size));
+        }
+        if (this.rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, util_1.getRoundedClass(this.rounded));
+        }
+        if (this.fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, util_1.getFillModeClass('input', this.fillMode));
+        }
+        if (this.spinners) {
+            this.setSpinnerFill(this.spinup.nativeElement, this.fillMode);
+            this.setSpinnerFill(this.spindown.nativeElement, this.fillMode);
+        }
+    };
     var DateInputComponent_1;
     tslib_1.__decorate([
         core_1.Input(),
@@ -1431,6 +1537,21 @@ var DateInputComponent = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", Boolean)
     ], DateInputComponent.prototype, "hasPopup", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], DateInputComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], DateInputComponent.prototype, "rounded", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], DateInputComponent.prototype, "fillMode", null);
     tslib_1.__decorate([
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
@@ -1452,20 +1573,24 @@ var DateInputComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", core_1.ElementRef)
     ], DateInputComponent.prototype, "dateInput", void 0);
     tslib_1.__decorate([
-        core_1.ViewChild('wrap', { static: false }),
-        tslib_1.__metadata("design:type", core_1.ElementRef)
-    ], DateInputComponent.prototype, "wrap", void 0);
-    tslib_1.__decorate([
-        core_1.HostBinding('class.k-widget'),
+        core_1.HostBinding('class.k-input'),
         core_1.HostBinding('class.k-dateinput'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], DateInputComponent.prototype, "wrapperClass", null);
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-state-disabled'),
+        core_1.HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], DateInputComponent.prototype, "disabledClass", null);
+    tslib_1.__decorate([
+        core_1.ViewChild('spinup', { static: false }),
+        tslib_1.__metadata("design:type", core_1.ElementRef)
+    ], DateInputComponent.prototype, "spinup", void 0);
+    tslib_1.__decorate([
+        core_1.ViewChild('spindown', { static: false }),
+        tslib_1.__metadata("design:type", core_1.ElementRef)
+    ], DateInputComponent.prototype, "spindown", void 0);
     DateInputComponent = DateInputComponent_1 = tslib_1.__decorate([
         core_1.Component({
             changeDetection: core_1.ChangeDetectionStrategy.OnPush,
@@ -1478,7 +1603,7 @@ var DateInputComponent = /** @class */ (function () {
                 kendo_angular_l10n_1.LocalizationService
             ],
             selector: 'kendo-dateinput',
-            template: "\n    <ng-container kendoDateInputLocalizedMessages\n        i18n-increment=\"kendo.dateinput.increment|The label for the **Increment** button in the DateInput\"\n        increment=\"Increase value\"\n\n        i18n-decrement=\"kendo.dateinput.decrement|The label for the **Decrement** button in the DateInput\"\n        decrement=\"Decrease value\"\n    >\n    </ng-container>\n    <span class=\"k-dateinput-wrap\" #wrap>\n        <input\n            #dateInput\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            autocapitalize=\"off\"\n            spellcheck=\"false\"\n            class=\"k-input\"\n            [attr.role]=\"role\"\n            [attr.aria-readonly]=\"ariaReadOnly\"\n            [id]=\"focusableId\"\n            [title]=\"title\"\n            [tabindex]=\"tabindex\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [placeholder]=\"placeholder\"\n            [attr.aria-expanded]=\"isPopupOpen\"\n            [attr.aria-haspopup]=\"hasPopup\"\n            [kendoEventsOutsideAngular]=\"{\n                click: handleClick,\n                focus: handleFocus,\n                mousedown: handleMousedown,\n                touchstart: handleMousedown,\n                dragstart: handleDragAndDrop,\n                drop: handleDragAndDrop,\n                blur: handleBlur\n            }\"\n            [scope]=\"this\"\n            />\n        <span *ngIf=\"spinners\" class=\"k-select\" (mousedown)=\"$event.preventDefault()\">\n            <span\n                class=\"k-link k-link-increase\"\n                [class.k-state-active]=\"arrowDirection === arrow.Up\"\n                (mousedown)=\"arrowDirection = arrow.Up\"\n                (mouseleave)=\"arrowDirection = arrow.None\"\n                (click)=\"handleButtonClick(1)\"\n                [title]=\"localization.get('increment')\"\n                [attr.aria-label]=\"localization.get('increment')\">\n                <span class=\"k-icon k-i-arrow-n\"></span>\n            </span>\n            <span\n                class=\"k-link k-link-decrease\"\n                (click)=\"handleButtonClick(-1)\"\n                [class.k-state-active]=\"arrowDirection === arrow.Down\"\n                (mousedown)=\"arrowDirection = arrow.Down\"\n                (mouseleave)=\"arrowDirection = arrow.None\"\n                [title]=\"localization.get('decrement')\"\n                [attr.aria-label]=\"localization.get('decrement')\">\n                <span class=\"k-icon k-i-arrow-s\"></span>\n            </span>\n        </span>\n    </span>\n  "
+            template: "\n    <ng-container kendoDateInputLocalizedMessages\n        i18n-increment=\"kendo.dateinput.increment|The label for the **Increment** button in the DateInput\"\n        increment=\"Increase value\"\n\n        i18n-decrement=\"kendo.dateinput.decrement|The label for the **Decrement** button in the DateInput\"\n        decrement=\"Decrease value\"\n    >\n    </ng-container>\n    <input\n        #dateInput\n        autocomplete=\"off\"\n        autocorrect=\"off\"\n        autocapitalize=\"off\"\n        spellcheck=\"false\"\n        class=\"k-input-inner\"\n        [attr.role]=\"role\"\n        [attr.aria-readonly]=\"ariaReadOnly\"\n        [id]=\"focusableId\"\n        [title]=\"title\"\n        [tabindex]=\"tabindex\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [placeholder]=\"placeholder\"\n        [attr.aria-expanded]=\"isPopupOpen\"\n        [attr.aria-haspopup]=\"hasPopup\"\n        [kendoEventsOutsideAngular]=\"{\n            click: handleClick,\n            focus: handleFocus,\n            mousedown: handleMousedown,\n            touchstart: handleMousedown,\n            dragstart: handleDragAndDrop,\n            drop: handleDragAndDrop,\n            blur: handleBlur\n        }\"\n        [scope]=\"this\"\n        />\n    <span *ngIf=\"spinners\" class=\"k-input-spinner k-spin-button\" (mousedown)=\"$event.preventDefault()\">\n        <button\n            #spinup\n            tabindex=\"-1\"\n            class=\"k-spinner-increase k-button k-icon-button\"\n            [class.k-active]=\"arrowDirection === arrow.Up\"\n            (mousedown)=\"arrowDirection = arrow.Up\"\n            (mouseleave)=\"arrowDirection = arrow.None\"\n            (click)=\"handleButtonClick(1)\"\n            [title]=\"localization.get('increment')\"\n            [attr.aria-label]=\"localization.get('increment')\">\n            <span class=\"k-button-icon k-icon k-i-arrow-n\"></span>\n        </button>\n        <button\n            #spindown\n            tabindex=\"-1\"\n            class=\"k-spinner-decrease k-button k-icon-button\"\n            (click)=\"handleButtonClick(-1)\"\n            [class.k-active]=\"arrowDirection === arrow.Down\"\n            (mousedown)=\"arrowDirection = arrow.Down\"\n            (mouseleave)=\"arrowDirection = arrow.None\"\n            [title]=\"localization.get('decrement')\"\n            [attr.aria-label]=\"localization.get('decrement')\">\n            <span class=\"k-button-icon k-icon k-i-arrow-s\"></span>\n        </button>\n    </span>\n  "
         }),
         tslib_1.__param(7, core_1.Optional()),
         tslib_1.__metadata("design:paramtypes", [core_1.ChangeDetectorRef,