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

package/dist/fesm5/index.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __metadata, __param, __extends } from 'tslib';
-import { Injectable, Injector, EventEmitter, Input, TemplateRef, Output, HostBinding, Component, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, Renderer2, isDevMode, Directive, forwardRef, ContentChild, ViewChild, HostListener, NgZone, InjectionToken, Inject, Optional, ViewContainerRef, ViewChildren, QueryList, ContentChildren, IterableDiffers, NgModule } from '@angular/core';
+import { Injectable, Injector, EventEmitter, Input, TemplateRef, Output, HostBinding, Component, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, Renderer2, isDevMode, Directive, forwardRef, ContentChild, ViewChild, HostListener, Optional, NgZone, InjectionToken, Inject, ViewContainerRef, 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, lastYearOfDecade, lastMonthOfYear, lastDayOfMonth, durationInCenturies, addYears, durationInDecades, addWeeks, addMonths, firstDayOfMonth, dayOfWeek, durationInMonths, firstMonthOfYear, durationInYears, weekInYear } from '@progress/kendo-date-math';
@@ -23,7 +23,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1640014125,
+    publishDate: 1642573758,
     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'
 };
@@ -449,6 +449,43 @@ var isTabExitingCalendar = function (calendarType, focusedElement, shiftKey) {
         (!shiftKey && focusedElement.classList.contains('k-next-view')) // exited on next button focused and regular tab
     );
 };
+/**
+ * @hidden
+ * Returns the size class based on the component and size input.
+ */
+var getSizeClass = function (component, size) {
+    var SIZE_CLASSES = {
+        'small': "k-" + component + "-sm",
+        'medium': "k-" + component + "-md",
+        'large': "k-" + component + "-lg"
+    };
+    return SIZE_CLASSES[size];
+};
+/**
+ * @hidden
+ * Returns the rounded class based on the rounded input.
+ */
+var getRoundedClass = function (rounded) {
+    var ROUNDED_CLASSES = {
+        'small': 'k-rounded-sm',
+        'medium': 'k-rounded-md',
+        'large': 'k-rounded-lg',
+        'full': 'k-rounded-full'
+    };
+    return ROUNDED_CLASSES[rounded];
+};
+/**
+ * @hidden
+ * Return the fillMode class based on the component and fillMode input.
+ */
+var getFillModeClass = function (component, fillMode) {
+    var FILLMODE_CLASSES = {
+        'solid': "k-" + component + "-solid",
+        'flat': "k-" + component + "-flat",
+        'outline': "k-" + component + "-outline"
+    };
+    return FILLMODE_CLASSES[fillMode];
+};
 
 var _a;
 var EMPTY_DATA = [[]];
@@ -1814,7 +1851,7 @@ var HeaderComponent = /** @class */ (function () {
     HeaderComponent = __decorate([
         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  "
         }),
         __metadata("design:paramtypes", [BusViewService,
             ChangeDetectorRef,
@@ -2243,6 +2280,19 @@ var disabledDatesRangeValidator = function (isDateDisabled) {
     };
 };
 
+/**
+ * @hidden
+ */
+var PickerService = /** @class */ (function () {
+    function PickerService() {
+        this.onFocus = new EventEmitter();
+        this.onBlur = new EventEmitter();
+        this.sameDateSelected = new EventEmitter();
+        this.dateCompletenessChange = new EventEmitter();
+    }
+    return PickerService;
+}());
+
 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';
@@ -2279,7 +2329,7 @@ var 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;
@@ -2288,6 +2338,7 @@ var MultiViewCalendarComponent = /** @class */ (function () {
         this.zone = zone;
         this.disabledDatesService = disabledDatesService;
         this.selectionService = selectionService;
+        this.pickerService = pickerService;
         /**
          * @hidden
          */
@@ -2710,6 +2761,9 @@ var MultiViewCalendarComponent = /** @class */ (function () {
             return;
         }
         if (event.keyCode === Keys.Enter) {
+            if (isPresent(this.pickerService)) {
+                event.preventDefault(); // Don't submit form from Datepicker popup
+            }
             this.performSelection(this.focusedDate, event);
         }
         var candidate = dateInRange(this.navigator.move(this.focusedDate, this.navigator.action(event), this.activeViewEnum), this.min, this.max);
@@ -3201,7 +3255,7 @@ var MultiViewCalendarComponent = /** @class */ (function () {
     ], MultiViewCalendarComponent.prototype, "calendarTabIndex", null);
     __decorate([
         HostBinding('attr.aria-disabled'),
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], MultiViewCalendarComponent.prototype, "ariaDisabled", null);
@@ -3272,6 +3326,7 @@ var MultiViewCalendarComponent = /** @class */ (function () {
             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        [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  "
         }),
+        __param(8, Optional()),
         __metadata("design:paramtypes", [BusViewService,
             ElementRef,
             NavigationService,
@@ -3279,7 +3334,8 @@ var MultiViewCalendarComponent = /** @class */ (function () {
             ChangeDetectorRef,
             NgZone,
             DisabledDatesService,
-            SelectionService])
+            SelectionService,
+            PickerService])
     ], MultiViewCalendarComponent);
     return MultiViewCalendarComponent;
 }());
@@ -3293,7 +3349,7 @@ var tr = domContainerFactory('tr');
 var tbody = domContainerFactory('tbody');
 var thead = domContainerFactory('thead');
 var table = 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 monthWeekHeader = function () { return (table([
     thead([
         tr([th('MO', 'k-calendar-th')], 'k-calendar-tr')
@@ -4526,19 +4582,6 @@ var NavigationItemTemplateDirective = /** @class */ (function () {
     return NavigationItemTemplateDirective;
 }());
 
-/**
- * @hidden
- */
-var PickerService = /** @class */ (function () {
-    function PickerService() {
-        this.onFocus = new EventEmitter();
-        this.onBlur = new EventEmitter();
-        this.sameDateSelected = new EventEmitter();
-        this.dateCompletenessChange = new EventEmitter();
-    }
-    return PickerService;
-}());
-
 var BOTTOM_VIEW_DOC_LINK$1 = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent/#toc-bottomview';
 var TOP_VIEW_DOC_LINK$1 = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent/#toc-topview';
 var MIN_DOC_LINK$1 = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent/#toc-min';
@@ -5593,7 +5636,7 @@ var CalendarComponent = /** @class */ (function () {
     ], CalendarComponent.prototype, "calendarTabIndex", null);
     __decorate([
         HostBinding('attr.aria-disabled'),
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], CalendarComponent.prototype, "ariaDisabled", null);
@@ -6092,11 +6135,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;
@@ -6298,6 +6341,9 @@ var DateInputComponent = /** @class */ (function () {
         this.onControlChange = noop;
         this.onControlTouched = noop;
         this.onValidatorChange = noop;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         this.symbolsMap = this.dateSymbolMap();
         this.updateFormatSections();
         if (this.pickerService) {
@@ -6338,6 +6384,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, getSizeClass('input', this.size));
+            if (size) {
+                this.renderer.addClass(this.wrapper.nativeElement, 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, getRoundedClass(this.rounded));
+            if (rounded) {
+                this.renderer.addClass(this.wrapper.nativeElement, 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, getFillModeClass('input', this.fillMode));
+            if (fillMode) {
+                this.renderer.addClass(this.wrapper.nativeElement, 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;
@@ -6372,16 +6495,16 @@ var DateInputComponent = /** @class */ (function () {
         },
         set: function (value) {
             this._active = value;
-            if (!this.wrap) {
+            if (!this.wrapper) {
                 return;
             }
             if (!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');
                 }
             }
         },
@@ -6430,7 +6553,7 @@ var DateInputComponent = /** @class */ (function () {
      */
     DateInputComponent.prototype.containsElement = function (element) {
         var _this = this;
-        return Boolean(closest(element, function (node) { return node === _this.element.nativeElement; }));
+        return Boolean(closest(element, function (node) { return node === _this.wrapper.nativeElement; }));
     };
     /**
      * @hidden
@@ -6483,13 +6606,16 @@ var DateInputComponent = /** @class */ (function () {
         this.updateElementValue();
         this.intlSubscription = this.intl.changes.subscribe(this.intlChange.bind(this));
         this.ngControl = this.injector.get(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
      */
@@ -6843,7 +6969,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)));
     };
@@ -6975,6 +7101,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, getSizeClass('input', this.size));
+        }
+        if (this.rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        }
+        if (this.fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
+        }
+        if (this.spinners) {
+            this.setSpinnerFill(this.spinup.nativeElement, this.fillMode);
+            this.setSpinnerFill(this.spindown.nativeElement, this.fillMode);
+        }
+    };
     var DateInputComponent_1;
     __decorate([
         Input(),
@@ -7066,6 +7215,21 @@ var DateInputComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", Boolean)
     ], DateInputComponent.prototype, "hasPopup", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], DateInputComponent.prototype, "size", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], DateInputComponent.prototype, "rounded", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], DateInputComponent.prototype, "fillMode", null);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
@@ -7087,20 +7251,24 @@ var DateInputComponent = /** @class */ (function () {
         __metadata("design:type", ElementRef)
     ], DateInputComponent.prototype, "dateInput", void 0);
     __decorate([
-        ViewChild('wrap', { static: false }),
-        __metadata("design:type", ElementRef)
-    ], DateInputComponent.prototype, "wrap", void 0);
-    __decorate([
-        HostBinding('class.k-widget'),
+        HostBinding('class.k-input'),
         HostBinding('class.k-dateinput'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], DateInputComponent.prototype, "wrapperClass", null);
     __decorate([
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], DateInputComponent.prototype, "disabledClass", null);
+    __decorate([
+        ViewChild('spinup', { static: false }),
+        __metadata("design:type", ElementRef)
+    ], DateInputComponent.prototype, "spinup", void 0);
+    __decorate([
+        ViewChild('spindown', { static: false }),
+        __metadata("design:type", ElementRef)
+    ], DateInputComponent.prototype, "spindown", void 0);
     DateInputComponent = DateInputComponent_1 = __decorate([
         Component({
             changeDetection: ChangeDetectionStrategy.OnPush,
@@ -7113,7 +7281,7 @@ var DateInputComponent = /** @class */ (function () {
                 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  "
         }),
         __param(7, Optional()),
         __metadata("design:paramtypes", [ChangeDetectorRef,
@@ -7183,12 +7351,12 @@ var TWO_DIGIT_YEAR_MAX$1 = 68;
  * Represents the [Kendo UI DatePicker component for Angular]({% slug overview_datepicker %}#toc-basic-usage).
  */
 var DatePickerComponent = /** @class */ (function () {
-    function DatePickerComponent(zone, localization, cdr, popupService, element, renderer, injector, pickerService, disabledDatesService, touchEnabled$$1) {
+    function DatePickerComponent(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, disabledDatesService, touchEnabled$$1) {
         this.zone = zone;
         this.localization = localization;
         this.cdr = cdr;
         this.popupService = popupService;
-        this.element = element;
+        this.wrapper = wrapper;
         this.renderer = renderer;
         this.injector = injector;
         this.pickerService = pickerService;
@@ -7414,6 +7582,9 @@ var DatePickerComponent = /** @class */ (function () {
         this.incompleteValidator = noop;
         this.resolvedPromise = Promise.resolve(null);
         this.domEvents = [];
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         validatePackage(packageMetadata);
         this.pickerSubscriptions = this.pickerService.onFocus.subscribe(this.handleFocus.bind(this));
         this.pickerSubscriptions.add(this.pickerService.onBlur.subscribe(this.handleBlur.bind(this)));
@@ -7564,6 +7735,85 @@ var DatePickerComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(DatePickerComponent.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, getSizeClass('input', this.size));
+            this.renderer.removeClass(this.toggleButton.nativeElement, getSizeClass('input', this.size));
+            if (size) {
+                this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
+                this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('input', size));
+            }
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DatePickerComponent.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, getRoundedClass(this.rounded));
+            if (rounded) {
+                this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+            }
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DatePickerComponent.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, getFillModeClass('input', this.fillMode));
+            this.renderer.removeClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
+            this.renderer.removeClass(this.toggleButton.nativeElement, "k-button-" + this.fillMode + "-base");
+            if (fillMode) {
+                this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', fillMode));
+                this.renderer.addClass(this.toggleButton.nativeElement, "k-button-" + fillMode + "-base");
+                this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
+            }
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(DatePickerComponent.prototype, "disabledClass", {
         /**
          * @hidden
@@ -7595,10 +7845,10 @@ var DatePickerComponent = /** @class */ (function () {
             }
             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');
             }
         },
         enumerable: true,
@@ -7642,13 +7892,16 @@ var DatePickerComponent = /** @class */ (function () {
             .changes
             .subscribe(function () { return _this.cdr.markForCheck(); });
         this.control = this.injector.get(NgControl, null);
-        if (this.element) {
-            this.renderer.removeAttribute(this.element.nativeElement, 'tabindex');
+        if (this.wrapper) {
+            this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
             this.zone.runOutsideAngular(function () {
                 _this.bindEvents();
             });
         }
     };
+    DatePickerComponent.prototype.ngAfterViewInit = function () {
+        this.setComponentClasses();
+    };
     /**
      * @hidden
      */
@@ -7871,6 +8124,9 @@ var DatePickerComponent = /** @class */ (function () {
                 this.show = false;
             }
         }
+        if (keyCode === Keys.Enter && target.classList.contains('k-calendar')) {
+            e.preventDefault(); // Don't submit form on date selection in popup
+        }
         if (keyCode === Keys.Tab && this.show && this.calendar.isActive && isTabExitingCalendar(this.calendarType, target, shiftKey)) {
             this.input.focus();
             this.show = false;
@@ -7959,7 +8215,7 @@ var DatePickerComponent = /** @class */ (function () {
         }
     };
     DatePickerComponent.prototype.bindEvents = function () {
-        var element = this.element.nativeElement;
+        var element = this.wrapper.nativeElement;
         this.domEvents.push(this.renderer.listen(element, 'keydown', this.handleKeydown.bind(this)));
         if (isWindowAvailable()) {
             this.windowBlurSubscription = fromEvent(window, 'blur').subscribe(this.handleWindowBlur.bind(this));
@@ -8018,6 +8274,20 @@ var DatePickerComponent = /** @class */ (function () {
         this.cdr.markForCheck();
         this.zone.run(function () { return _this.onValidatorChange(); });
     };
+    DatePickerComponent.prototype.setComponentClasses = function () {
+        if (this.size) {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
+            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('button', this.size));
+        }
+        if (this.rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        }
+        if (this.fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, "k-button-" + this.fillMode + "-base");
+        }
+    };
     var DatePickerComponent_1;
     __decorate([
         ViewChild('container', { read: ViewContainerRef, static: true }),
@@ -8028,9 +8298,9 @@ var DatePickerComponent = /** @class */ (function () {
         __metadata("design:type", TemplateRef)
     ], DatePickerComponent.prototype, "popupTemplate", void 0);
     __decorate([
-        ViewChild('wrapper', { static: false }),
+        ViewChild('toggleButton', { static: true }),
         __metadata("design:type", ElementRef)
-    ], DatePickerComponent.prototype, "wrapper", void 0);
+    ], DatePickerComponent.prototype, "toggleButton", void 0);
     __decorate([
         ContentChild(CellTemplateDirective, { static: false }),
         __metadata("design:type", CellTemplateDirective)
@@ -8215,6 +8485,21 @@ var DatePickerComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", Boolean)
     ], DatePickerComponent.prototype, "weekNumber", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], DatePickerComponent.prototype, "size", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], DatePickerComponent.prototype, "rounded", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], DatePickerComponent.prototype, "fillMode", null);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
@@ -8236,12 +8521,12 @@ var DatePickerComponent = /** @class */ (function () {
         __metadata("design:type", EventEmitter)
     ], DatePickerComponent.prototype, "close", void 0);
     __decorate([
-        HostBinding('class.k-widget'),
         HostBinding('class.k-datepicker'),
+        HostBinding('class.k-input'),
         __metadata("design:type", Boolean)
     ], DatePickerComponent.prototype, "wrapperClasses", void 0);
     __decorate([
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], DatePickerComponent.prototype, "disabledClass", null);
@@ -8262,7 +8547,7 @@ var DatePickerComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-datepicker',
-            template: "\n        <ng-container kendoDatePickerLocalizedMessages\n            i18n-today=\"kendo.datepicker.today|The label for the today button in the calendar header\"\n            today=\"Today\"\n\n            i18n-toggle=\"kendo.datepicker.toggle|The title of the toggle button in the datepicker component\"\n            toggle=\"Toggle calendar\"\n\n            i18n-prevButtonTitle=\"kendo.datepicker.prevButtonTitle|The title of the previous button in the Classic calendar\"\n            prevButtonTitle=\"Navigate to previous view\"\n\n            i18n-nextButtonTitle=\"kendo.datepicker.nextButtonTitle|The title of the next button in the Classic calendar\"\n            nextButtonTitle=\"Navigate to next view\"\n        >\n        </ng-container>\n        <span #wrapper\n            class=\"k-picker-wrap\"\n            [class.k-state-disabled]=\"disabled\"\n        >\n            <kendo-dateinput\n                #input\n                [role]=\"inputRole\"\n                [focusableId]=\"focusableId\"\n                [hasPopup]=\"true\"\n                [isPopupOpen]=\"show\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly || readOnlyInput\"\n                [ariaReadOnly]=\"readonly\"\n                [tabindex]=\"tabindex\"\n                [title]=\"title\"\n                [format]=\"format\"\n                [twoDigitYearMax]=\"twoDigitYearMax\"\n                [formatPlaceholder]=\"formatPlaceholder\"\n                [placeholder]=\"placeholder\"\n                [min]=\"min\"\n                [max]=\"max\"\n                [incompleteDateValidation]=\"incompleteDateValidation\"\n                [value]=\"value\"\n                (valueChange)=\"handleInputChange($event)\"\n            ></kendo-dateinput>\n            <span class=\"k-select\"\n                role=\"button\"\n                [attr.title]=\"localization.get('toggle')\"\n                [attr.aria-label]=\"localization.get('toggle')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleIconClick,\n                    mousedown: handleMousedown\n                }\"\n                [scope]=\"this\"\n            >\n                <span class=\"k-icon k-i-calendar\"></span>\n            </span>\n        </span>\n        <ng-container #container></ng-container>\n        <ng-template #popupTemplate>\n            <kendo-calendar\n                #calendar\n                [type]=\"calendarType\"\n                [min]=\"min\"\n                [max]=\"max\"\n                [navigation]=\"navigation\"\n                [animateNavigation]=\"animateCalendarNavigation\"\n                [activeView]=\"activeView\"\n                [bottomView]=\"bottomView\"\n                [topView]=\"topView\"\n                [weekNumber]=\"weekNumber\"\n                [cellTemplate]=\"cellTemplate\"\n                [monthCellTemplate]=\"monthCellTemplate\"\n                [yearCellTemplate]=\"yearCellTemplate\"\n                [decadeCellTemplate]=\"decadeCellTemplate\"\n                [centuryCellTemplate]=\"centuryCellTemplate\"\n                [weekNumberTemplate]=\"weekNumberTemplate\"\n                [headerTitleTemplate]=\"headerTitleTemplate\"\n                [navigationItemTemplate]=\"navigationItemTemplate\"\n                [focusedDate]=\"focusedDate\"\n                [value]=\"value\"\n                (valueChange)=\"handleChange(mergeTime($event))\"\n                [kendoEventsOutsideAngular]=\"{\n                    keydown: handleKeydown\n                }\"\n                [scope]=\"this\"\n                [disabledDates]=\"disabledDates\"\n            >\n                <kendo-calendar-messages\n                    [today]=\"localization.get('today')\"\n                    [prevButtonTitle]=\"localization.get('prevButtonTitle')\"\n                    [nextButtonTitle]=\"localization.get('nextButtonTitle')\"\n                >\n                </kendo-calendar-messages>\n            </kendo-calendar>\n        <ng-template>\n    "
+            template: "\n        <ng-container kendoDatePickerLocalizedMessages\n            i18n-today=\"kendo.datepicker.today|The label for the today button in the calendar header\"\n            today=\"Today\"\n\n            i18n-toggle=\"kendo.datepicker.toggle|The title of the toggle button in the datepicker component\"\n            toggle=\"Toggle calendar\"\n\n            i18n-prevButtonTitle=\"kendo.datepicker.prevButtonTitle|The title of the previous button in the Classic calendar\"\n            prevButtonTitle=\"Navigate to previous view\"\n\n            i18n-nextButtonTitle=\"kendo.datepicker.nextButtonTitle|The title of the next button in the Classic calendar\"\n            nextButtonTitle=\"Navigate to next view\"\n        >\n        </ng-container>\n        <kendo-dateinput\n            #input\n            [role]=\"inputRole\"\n            [focusableId]=\"focusableId\"\n            [hasPopup]=\"true\"\n            [isPopupOpen]=\"show\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly || readOnlyInput\"\n            [ariaReadOnly]=\"readonly\"\n            [tabindex]=\"tabindex\"\n            [title]=\"title\"\n            [format]=\"format\"\n            [twoDigitYearMax]=\"twoDigitYearMax\"\n            [formatPlaceholder]=\"formatPlaceholder\"\n            [placeholder]=\"placeholder\"\n            [min]=\"min\"\n            [max]=\"max\"\n            [incompleteDateValidation]=\"incompleteDateValidation\"\n            [fillMode]=\"null\"\n            [rounded]=\"null\"\n            [size]=\"null\"\n            [value]=\"value\"\n            (valueChange)=\"handleInputChange($event)\"\n        ></kendo-dateinput>\n        <button\n            #toggleButton\n            type=\"button\"\n            class=\"k-input-button k-button k-icon-button\"\n            [tabindex]=\"-1\"\n            [attr.title]=\"localization.get('toggle')\"\n            [attr.aria-label]=\"localization.get('toggle')\"\n            [kendoEventsOutsideAngular]=\"{\n                click: handleIconClick,\n                mousedown: handleMousedown\n            }\"\n            [scope]=\"this\"\n        >\n            <span class=\"k-button-icon k-icon k-i-calendar\"></span>\n        </button>\n        <ng-container #container></ng-container>\n        <ng-template #popupTemplate>\n            <kendo-calendar\n                #calendar\n                [type]=\"calendarType\"\n                [min]=\"min\"\n                [max]=\"max\"\n                [navigation]=\"navigation\"\n                [animateNavigation]=\"animateCalendarNavigation\"\n                [activeView]=\"activeView\"\n                [bottomView]=\"bottomView\"\n                [topView]=\"topView\"\n                [weekNumber]=\"weekNumber\"\n                [cellTemplate]=\"cellTemplate\"\n                [monthCellTemplate]=\"monthCellTemplate\"\n                [yearCellTemplate]=\"yearCellTemplate\"\n                [decadeCellTemplate]=\"decadeCellTemplate\"\n                [centuryCellTemplate]=\"centuryCellTemplate\"\n                [weekNumberTemplate]=\"weekNumberTemplate\"\n                [headerTitleTemplate]=\"headerTitleTemplate\"\n                [navigationItemTemplate]=\"navigationItemTemplate\"\n                [focusedDate]=\"focusedDate\"\n                [value]=\"value\"\n                (valueChange)=\"handleChange(mergeTime($event))\"\n                [kendoEventsOutsideAngular]=\"{\n                    keydown: handleKeydown\n                }\"\n                [scope]=\"this\"\n                [disabledDates]=\"disabledDates\"\n            >\n                <kendo-calendar-messages\n                    [today]=\"localization.get('today')\"\n                    [prevButtonTitle]=\"localization.get('prevButtonTitle')\"\n                    [nextButtonTitle]=\"localization.get('nextButtonTitle')\"\n                >\n                </kendo-calendar-messages>\n            </kendo-calendar>\n        <ng-template>\n    "
         }),
         __param(9, Optional()), __param(9, Inject(TOUCH_ENABLED)),
         __metadata("design:paramtypes", [NgZone,
@@ -8315,12 +8600,12 @@ var formatRegExp = new RegExp(TIME_PART.hour + "|" + TIME_PART.minute + "|" + TI
  * Represents the [Kendo UI TimePicker component for Angular]({% slug overview_timepicker %}#toc-basic-usage).
  */
 var TimePickerComponent = /** @class */ (function () {
-    function TimePickerComponent(zone, localization, cdr, popupService, element, renderer, injector, pickerService, intl, touchEnabled$$1) {
+    function TimePickerComponent(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, intl, touchEnabled$$1) {
         this.zone = zone;
         this.localization = localization;
         this.cdr = cdr;
         this.popupService = popupService;
-        this.element = element;
+        this.wrapper = wrapper;
         this.renderer = renderer;
         this.injector = injector;
         this.pickerService = pickerService;
@@ -8482,6 +8767,9 @@ var TimePickerComponent = /** @class */ (function () {
         this._value = null;
         this._active = false;
         this.domEvents = [];
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         validatePackage(packageMetadata);
         this.pickerSubscriptions = this.pickerService.onFocus.subscribe(this.handleFocus.bind(this));
         this.pickerSubscriptions.add(this.pickerService.onBlur.subscribe(this.handleBlur.bind(this)));
@@ -8592,6 +8880,85 @@ var TimePickerComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(TimePickerComponent.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, getSizeClass('input', this.size));
+            this.renderer.removeClass(this.toggleButton.nativeElement, getSizeClass('input', this.size));
+            if (size) {
+                this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
+                this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('input', size));
+            }
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TimePickerComponent.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, getRoundedClass(this.rounded));
+            if (rounded) {
+                this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+            }
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TimePickerComponent.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, getFillModeClass('input', this.fillMode));
+            this.renderer.removeClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
+            this.renderer.removeClass(this.toggleButton.nativeElement, "k-button-" + this.fillMode + "-base");
+            if (fillMode) {
+                this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
+                this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', fillMode));
+                this.renderer.addClass(this.toggleButton.nativeElement, "k-button-" + fillMode + "-base");
+            }
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(TimePickerComponent.prototype, "disabledClass", {
         /**
          * @hidden
@@ -8623,10 +8990,10 @@ var TimePickerComponent = /** @class */ (function () {
             }
             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');
             }
         },
         enumerable: true,
@@ -8683,13 +9050,19 @@ var TimePickerComponent = /** @class */ (function () {
         this.localizationChangeSubscription = this.localization
             .changes.subscribe(function () { return _this.cdr.markForCheck(); });
         this.control = this.injector.get(NgControl, null);
-        if (this.element) {
-            this.renderer.removeAttribute(this.element.nativeElement, 'tabindex');
+        if (this.wrapper) {
+            this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
             this.zone.runOutsideAngular(function () {
                 _this.bindEvents();
             });
         }
     };
+    /**
+     * @hidden
+     */
+    TimePickerComponent.prototype.ngAfterViewInit = function () {
+        this.setComponentClasses();
+    };
     /**
      * @hidden
      */
@@ -9002,7 +9375,7 @@ var TimePickerComponent = /** @class */ (function () {
         }
     };
     TimePickerComponent.prototype.bindEvents = function () {
-        var element = this.element.nativeElement;
+        var element = this.wrapper.nativeElement;
         this.domEvents.push(this.renderer.listen(element, 'keydown', this.handleKeydown.bind(this)));
         if (isWindowAvailable()) {
             this.windowBlurSubscription = fromEvent(window, 'blur').subscribe(this.handleWindowBlur.bind(this));
@@ -9054,6 +9427,20 @@ var TimePickerComponent = /** @class */ (function () {
         this.cdr.markForCheck();
         this.zone.run(function () { return _this.onValidatorChange(); });
     };
+    TimePickerComponent.prototype.setComponentClasses = function () {
+        if (this.size) {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
+            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('button', this.size));
+        }
+        if (this.rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        }
+        if (this.fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, "k-button-" + this.fillMode + "-base");
+        }
+    };
     var TimePickerComponent_1;
     __decorate([
         ViewChild('container', { read: ViewContainerRef, static: false }),
@@ -9064,9 +9451,9 @@ var TimePickerComponent = /** @class */ (function () {
         __metadata("design:type", TemplateRef)
     ], TimePickerComponent.prototype, "popupTemplate", void 0);
     __decorate([
-        ViewChild('wrapper', { static: false }),
+        ViewChild('toggleButton', { static: true }),
         __metadata("design:type", ElementRef)
-    ], TimePickerComponent.prototype, "wrapper", void 0);
+    ], TimePickerComponent.prototype, "toggleButton", void 0);
     __decorate([
         Input(),
         __metadata("design:type", String)
@@ -9149,6 +9536,21 @@ var TimePickerComponent = /** @class */ (function () {
         __metadata("design:type", Date),
         __metadata("design:paramtypes", [Date])
     ], TimePickerComponent.prototype, "value", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], TimePickerComponent.prototype, "size", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], TimePickerComponent.prototype, "rounded", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], TimePickerComponent.prototype, "fillMode", null);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
@@ -9170,12 +9572,12 @@ var TimePickerComponent = /** @class */ (function () {
         __metadata("design:type", EventEmitter)
     ], TimePickerComponent.prototype, "close", void 0);
     __decorate([
-        HostBinding('class.k-widget'),
         HostBinding('class.k-timepicker'),
+        HostBinding('class.k-input'),
         __metadata("design:type", Boolean)
     ], TimePickerComponent.prototype, "wrapperClasses", void 0);
     __decorate([
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], TimePickerComponent.prototype, "disabledClass", null);
@@ -9195,7 +9597,7 @@ var TimePickerComponent = /** @class */ (function () {
                 PickerService
             ],
             selector: 'kendo-timepicker',
-            template: "\n        <ng-container kendoTimePickerLocalizedMessages\n            i18n-accept=\"kendo.timepicker.accept|The Accept button text in the timepicker component\"\n            accept=\"Set\"\n\n            i18n-acceptLabel=\"kendo.timepicker.acceptLabel|The label for the Accept button in the timepicker component\"\n            acceptLabel=\"Set time\"\n\n            i18n-cancel=\"kendo.timepicker.cancel|The Cancel button text in the timepicker component\"\n            cancel=\"Cancel\"\n\n            i18n-cancelLabel=\"kendo.timepicker.cancelLabel|The label for the Cancel button in the timepicker component\"\n            cancelLabel=\"Cancel changes\"\n\n            i18n-now=\"kendo.timepicker.now|The Now button text in the timepicker component\"\n            now=\"Now\"\n\n            i18n-nowLabel=\"kendo.timepicker.nowLabel|The label for the Now button in the timepicker component\"\n            nowLabel=\"Select now\"\n\n            i18n-toggle=\"kendo.timepicker.toggle|The label for the toggle button in the timepicker component\"\n            toggle=\"Toggle time list\"\n        >\n        </ng-container>\n        <span #wrapper\n            class=\"k-picker-wrap\"\n            [class.k-state-disabled]=\"disabled\"\n        >\n            <kendo-dateinput\n                #input\n                [focusableId]=\"focusableId\"\n                [hasPopup]=\"true\"\n                [isPopupOpen]=\"show\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly || readOnlyInput\"\n                [role]=\"inputRole\"\n                [ariaReadOnly]=\"readonly\"\n                [format]=\"format\"\n                [formatPlaceholder]=\"formatPlaceholder\"\n                [placeholder]=\"placeholder\"\n                [min]=\"normalizeTime(min)\"\n                [max]=\"normalizeTime(max)\"\n                [incompleteDateValidation]=\"incompleteDateValidation\"\n                [steps]=\"steps\"\n                [tabindex]=\"!show ? tabindex : -1\"\n                [title]=\"title\"\n                [value]=\"value\"\n                (valueChange)=\"handleInputChange($event)\"\n            ></kendo-dateinput>\n            <span class=\"k-select\"\n                role=\"button\"\n                [attr.title]=\"localization.get('toggle')\"\n                [attr.aria-label]=\"localization.get('toggle')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleIconClick,\n                    mousedown: handleMousedown\n                }\"\n                [scope]=\"this\"\n            >\n                <span class=\"k-icon k-i-clock\"></span>\n            </span>\n            <ng-template #popupTemplate>\n                <kendo-timeselector\n                    #timeSelector\n                    [cancelButton]=\"cancelButton\"\n                    [nowButton]=\"nowButton\"\n                    [format]=\"format\"\n                    [min]=\"min\"\n                    [max]=\"max\"\n                    [steps]=\"steps\"\n                    [value]=\"value\"\n                    [kendoEventsOutsideAngular]=\"{\n                        keydown: handleKeydown,\n                        mousedown: handleMousedown\n                    }\"\n                    [scope]=\"this\"\n                    (valueChange)=\"handleChange($event)\"\n                    (valueReject)=\"handleReject()\"\n                >\n                    <kendo-timeselector-messages\n                        [acceptLabel]=\"localization.get('acceptLabel')\"\n                        [accept]=\"localization.get('accept')\"\n                        [cancelLabel]=\"localization.get('cancelLabel')\"\n                        [cancel]=\"localization.get('cancel')\"\n                        [nowLabel]=\"localization.get('nowLabel')\"\n                        [now]=\"localization.get('now')\"\n                    >\n                    </kendo-timeselector-messages>\n                </kendo-timeselector>\n            </ng-template>\n        </span>\n        <ng-container #container></ng-container>\n    "
+            template: "\n        <ng-container kendoTimePickerLocalizedMessages\n            i18n-accept=\"kendo.timepicker.accept|The Accept button text in the timepicker component\"\n            accept=\"Set\"\n\n            i18n-acceptLabel=\"kendo.timepicker.acceptLabel|The label for the Accept button in the timepicker component\"\n            acceptLabel=\"Set time\"\n\n            i18n-cancel=\"kendo.timepicker.cancel|The Cancel button text in the timepicker component\"\n            cancel=\"Cancel\"\n\n            i18n-cancelLabel=\"kendo.timepicker.cancelLabel|The label for the Cancel button in the timepicker component\"\n            cancelLabel=\"Cancel changes\"\n\n            i18n-now=\"kendo.timepicker.now|The Now button text in the timepicker component\"\n            now=\"Now\"\n\n            i18n-nowLabel=\"kendo.timepicker.nowLabel|The label for the Now button in the timepicker component\"\n            nowLabel=\"Select now\"\n\n            i18n-toggle=\"kendo.timepicker.toggle|The label for the toggle button in the timepicker component\"\n            toggle=\"Toggle time list\"\n        >\n        </ng-container>\n        <kendo-dateinput\n            #input\n            [focusableId]=\"focusableId\"\n            [hasPopup]=\"true\"\n            [isPopupOpen]=\"show\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly || readOnlyInput\"\n            [role]=\"inputRole\"\n            [ariaReadOnly]=\"readonly\"\n            [format]=\"format\"\n            [formatPlaceholder]=\"formatPlaceholder\"\n            [placeholder]=\"placeholder\"\n            [min]=\"normalizeTime(min)\"\n            [max]=\"normalizeTime(max)\"\n            [incompleteDateValidation]=\"incompleteDateValidation\"\n            [fillMode]=\"fillMode\"\n            [rounded]=\"rounded\"\n            [size]=\"size\"\n            [steps]=\"steps\"\n            [tabindex]=\"!show ? tabindex : -1\"\n            [title]=\"title\"\n            [value]=\"value\"\n            (valueChange)=\"handleInputChange($event)\"\n        ></kendo-dateinput>\n        <button\n            #toggleButton\n            type=\"button\"\n            class=\"k-input-button k-button k-icon-button\"\n            [attr.title]=\"localization.get('toggle')\"\n            [attr.aria-label]=\"localization.get('toggle')\"\n            [kendoEventsOutsideAngular]=\"{\n                click: handleIconClick,\n                mousedown: handleMousedown\n            }\"\n            [scope]=\"this\"\n        >\n            <span class=\"k-button-icon k-icon k-i-clock\"></span>\n        </button>\n        <ng-template #popupTemplate>\n            <kendo-timeselector\n                #timeSelector\n                [cancelButton]=\"cancelButton\"\n                [nowButton]=\"nowButton\"\n                [format]=\"format\"\n                [min]=\"min\"\n                [max]=\"max\"\n                [steps]=\"steps\"\n                [value]=\"value\"\n                [kendoEventsOutsideAngular]=\"{\n                    keydown: handleKeydown,\n                    mousedown: handleMousedown\n                }\"\n                [scope]=\"this\"\n                (valueChange)=\"handleChange($event)\"\n                (valueReject)=\"handleReject()\"\n            >\n                <kendo-timeselector-messages\n                    [acceptLabel]=\"localization.get('acceptLabel')\"\n                    [accept]=\"localization.get('accept')\"\n                    [cancelLabel]=\"localization.get('cancelLabel')\"\n                    [cancel]=\"localization.get('cancel')\"\n                    [nowLabel]=\"localization.get('nowLabel')\"\n                    [now]=\"localization.get('now')\"\n                >\n                </kendo-timeselector-messages>\n            </kendo-timeselector>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
         }),
         __param(9, Optional()), __param(9, Inject(TOUCH_ENABLED)),
         __metadata("design:paramtypes", [NgZone,
@@ -9222,13 +9624,13 @@ var TWO_DIGIT_YEAR_MAX$2 = 68;
  * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
  */
 var DateTimePickerComponent = /** @class */ (function () {
-    function DateTimePickerComponent(popupService, intl, cdr, pickerService, ngZone, host, touchEnabled$$1, localization, disabledDatesService, renderer) {
+    function DateTimePickerComponent(popupService, intl, cdr, pickerService, ngZone, wrapper, touchEnabled$$1, localization, disabledDatesService, renderer) {
         this.popupService = popupService;
         this.intl = intl;
         this.cdr = cdr;
         this.pickerService = pickerService;
         this.ngZone = ngZone;
-        this.host = host;
+        this.wrapper = wrapper;
         this.touchEnabled = touchEnabled$$1;
         this.localization = localization;
         this.disabledDatesService = disabledDatesService;
@@ -9395,9 +9797,22 @@ var DateTimePickerComponent = /** @class */ (function () {
         this.disabledDatesValidateFn = noop;
         this.incompleteValidator = noop;
         this.subscriptions = new Subscription();
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         validatePackage(packageMetadata);
     }
     DateTimePickerComponent_1 = DateTimePickerComponent;
+    Object.defineProperty(DateTimePickerComponent.prototype, "disabledClass", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this.disabled;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(DateTimePickerComponent.prototype, "input", {
         /**
          * @hidden
@@ -9578,10 +9993,10 @@ var DateTimePickerComponent = /** @class */ (function () {
         },
         set: function (value) {
             if (value) {
-                this.renderer.addClass(this.wrapper.nativeElement, 'k-state-focused');
+                this.renderer.addClass(this.wrapper.nativeElement, 'k-focus');
             }
             else {
-                this.renderer.removeClass(this.wrapper.nativeElement, 'k-state-focused');
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-focus');
             }
             this._isActive = value;
         },
@@ -9603,6 +10018,85 @@ var DateTimePickerComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(DateTimePickerComponent.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, getSizeClass('input', this.size));
+            this.renderer.removeClass(this.toggleButton.nativeElement, getSizeClass('input', this.size));
+            if (size) {
+                this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
+                this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('input', size));
+            }
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DateTimePickerComponent.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, getRoundedClass(this.rounded));
+            if (rounded) {
+                this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+            }
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DateTimePickerComponent.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, getFillModeClass('input', this.fillMode));
+            this.renderer.removeClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
+            this.renderer.removeClass(this.toggleButton.nativeElement, "k-button-" + this.fillMode + "-base");
+            if (fillMode) {
+                this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
+                this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', fillMode));
+                this.renderer.addClass(this.toggleButton.nativeElement, "k-button-" + fillMode + "-base");
+            }
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(DateTimePickerComponent.prototype, "tabSwitchTransition", {
         /**
          * @hidden
@@ -9693,6 +10187,9 @@ var DateTimePickerComponent = /** @class */ (function () {
             this.subscriptions.add(this.ngZone.runOutsideAngular(function () { return fromEvent(window, 'blur').subscribe(_this.handleCancel.bind(_this)); }));
         }
     };
+    DateTimePickerComponent.prototype.ngAfterViewInit = function () {
+        this.setComponentClasses();
+    };
     DateTimePickerComponent.prototype.ngOnChanges = function (changes) {
         if (isPresent(changes.min) || isPresent(changes.max)) {
             this.verifyMinMaxRange();
@@ -9847,7 +10344,7 @@ var DateTimePickerComponent = /** @class */ (function () {
             return;
         }
         this.isActive = false;
-        var isNgControlUntouched = this.host.nativeElement.classList.contains('ng-untouched');
+        var isNgControlUntouched = this.wrapper.nativeElement.classList.contains('ng-untouched');
         var runInZone = isNgControlUntouched || hasObservers(this.onBlur) || (this.isOpen && hasObservers(this.close));
         this.run(runInZone, function () {
             _this.onBlur.emit();
@@ -9975,6 +10472,13 @@ var DateTimePickerComponent = /** @class */ (function () {
             this.input.focus();
         }
     };
+    /**
+     * @hidden
+     */
+    DateTimePickerComponent.prototype.popupButtonsClasses = function (type) {
+        var buttonType = type ? type : 'base';
+        return (this.size ? getSizeClass('button', this.size) : '') + " " + (this.rounded ? getRoundedClass(this.rounded) : '') + " " + (this.fillMode ? 'k-button-' + this.fillMode + ' ' + 'k-button-' + this.fillMode + '-' + buttonType : '');
+    };
     /**
      * @hidden
      *
@@ -10099,7 +10603,7 @@ var DateTimePickerComponent = /** @class */ (function () {
     };
     /**
      * Indicates whether the focus target is part of this component,
-     * that is, whether the focus target is inside the component wrapper or in the popup.
+     * that is, whether the focus target is inside the component or in the popup.
      */
     DateTimePickerComponent.prototype.focusTargetInComponent = function (event) {
         if (!isPresent(event)) {
@@ -10146,16 +10650,35 @@ var DateTimePickerComponent = /** @class */ (function () {
         this.cdr.markForCheck();
         this.ngZone.run(function () { return _this.onValidatorChange(); });
     };
+    DateTimePickerComponent.prototype.setComponentClasses = function () {
+        if (this.size) {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
+            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('button', this.size));
+        }
+        if (this.rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        }
+        if (this.fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, "k-button-" + this.fillMode + "-base");
+        }
+    };
     var DateTimePickerComponent_1;
     __decorate([
-        HostBinding('class.k-widget'),
         HostBinding('class.k-datetimepicker'),
+        HostBinding('class.k-input'),
         __metadata("design:type", Boolean)
     ], DateTimePickerComponent.prototype, "hostClasses", void 0);
     __decorate([
-        ViewChild('wrapper', { static: true }),
+        HostBinding('class.k-disabled'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], DateTimePickerComponent.prototype, "disabledClass", null);
+    __decorate([
+        ViewChild('toggleButton', { static: true }),
         __metadata("design:type", ElementRef)
-    ], DateTimePickerComponent.prototype, "wrapper", void 0);
+    ], DateTimePickerComponent.prototype, "toggleButton", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Date),
@@ -10284,6 +10807,21 @@ var DateTimePickerComponent = /** @class */ (function () {
         __metadata("design:type", String),
         __metadata("design:paramtypes", [String])
     ], DateTimePickerComponent.prototype, "defaultTab", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], DateTimePickerComponent.prototype, "size", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], DateTimePickerComponent.prototype, "rounded", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], DateTimePickerComponent.prototype, "fillMode", null);
     __decorate([
         ContentChild(CellTemplateDirective, { static: false }),
         __metadata("design:type", CellTemplateDirective)
@@ -10334,7 +10872,7 @@ var DateTimePickerComponent = /** @class */ (function () {
                 { provide: NG_VALIDATORS, useExisting: forwardRef(function () { return DateTimePickerComponent_1; }), multi: true },
                 { provide: KendoInput, useExisting: forwardRef(function () { return DateTimePickerComponent_1; }) }
             ],
-            template: "\n        <ng-container\n            kendoDateTimePickerLocalizedMessages\n\n            i18n-dateTab=\"kendo.datetimepicker.dateTab|The Date tab text in the datetimepicker popup header\"\n            dateTab=\"Date\"\n\n            i18n-dateTabLabel=\"kendo.datetimepicker.dateTabLabel|The label for the Date tab in the datetimepicker popup header\"\n            dateTabLabel=\"Date tab\"\n\n            i18n-timeTab=\"kendo.datetimepicker.timeTab|The Time tab text in the datetimepicker popup header\"\n            timeTab=\"Time\"\n\n            i18n-timeTabLabel=\"kendo.datetimepicker.timeTabLabel|The label for the Time tab in the datetimepicker popup header\"\n            timeTabLabel=\"Time tab\"\n\n            i18n-toggle=\"kendo.datetimepicker.toggle|The title of the toggle button in the datetimepicker component\"\n            toggle=\"Toggle popup\"\n\n            i18n-accept=\"kendo.datetimepicker.accept|The Accept button text in the datetimepicker component\"\n            accept=\"Set\"\n\n            i18n-acceptLabel=\"kendo.datetimepicker.acceptLabel|The label for the Accept button in the datetimepicker component\"\n            acceptLabel=\"Set\"\n\n            i18n-cancel=\"kendo.datetimepicker.cancel|The Cancel button text in the datetimepicker component\"\n            cancel=\"Cancel\"\n\n            i18n-cancelLabel=\"kendo.datetimepicker.cancelLabel|The label for the Cancel button in the datetimepicker component\"\n            cancelLabel=\"Cancel\"\n\n            i18n-now=\"kendo.datetimepicker.now|The Now button text in the timepicker component\"\n            now=\"NOW\"\n\n            i18n-nowLabel=\"kendo.datetimepicker.nowLabel|The label for the Now button in the timepicker component\"\n            nowLabel=\"Select now\"\n\n            i18n-today=\"kendo.datetimepicker.today|The label for the today button in the calendar header\"\n            today=\"Today\"\n\n            i18n-prevButtonTitle=\"kendo.datetimepicker.prevButtonTitle|The title of the previous button in the Classic calendar\"\n            prevButtonTitle=\"Navigate to previous view\"\n\n            i18n-nextButtonTitle=\"kendo.datetimepicker.nextButtonTitle|The title of the next button in the Classic calendar\"\n            nextButtonTitle=\"Navigate to next view\"\n        >\n        </ng-container>\n\n        <span\n            #wrapper\n            class=\"k-picker-wrap\"\n            [class.k-state-disabled]=\"disabled\"\n        >\n            <kendo-dateinput\n                [value]=\"value\"\n                [format]=\"format\"\n                [twoDigitYearMax]=\"twoDigitYearMax\"\n                [min]=\"min\"\n                [max]=\"max\"\n                [incompleteDateValidation]=\"incompleteDateValidation\"\n                [formatPlaceholder]=\"formatPlaceholder\"\n                [placeholder]=\"placeholder\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly || readOnlyInput\"\n                [role]=\"inputRole\"\n                [ariaReadOnly]=\"readonly\"\n                [steps]=\"steps\"\n                [tabindex]=\"tabindex\"\n                [title]=\"title\"\n                [focusableId]=\"focusableId\"\n                [hasPopup]=\"true\"\n                [isPopupOpen]=\"isOpen\"\n                (valueChange)=\"handleInputValueChange($event)\"\n                [kendoEventsOutsideAngular]=\"{\n                    keydown: handleKeyDown\n                }\"\n                [scope]=\"this\"\n            >\n            </kendo-dateinput>\n            <span class=\"k-select\"\n                [attr.title]=\"localization.get('toggle')\"\n                [attr.aria-label]=\"localization.get('toggle')\"\n                [kendoEventsOutsideAngular]=\"{\n                    mousedown: preventMouseDown,\n                    click: handleIconClick\n                }\"\n                [scope]=\"this\"\n            >\n                <span class=\"k-link k-link-date\">\n                    <span\n                        class=\"k-icon\"\n                        [class.k-i-calendar]=\"activeTab === 'date'\"\n                        [class.k-i-clock]=\"activeTab === 'time'\"\n                    >\n                    </span>\n                </span>\n            </span>\n        </span>\n\n        <ng-container #container></ng-container>\n\n        <ng-template #popupTemplate>\n            <div\n                class=\"k-datetime-wrap k-{{activeTab}}-tab\"\n                [kendoEventsOutsideAngular]=\"{\n                    mousedown: preventMouseDown,\n                    keydown: handleKeyDown\n                }\"\n                [scope]=\"this\"\n            >\n                <div class=\"k-datetime-buttongroup\"\n                    [kendoEventsOutsideAngular]=\"{\n                        focusin: handleFocus,\n                        focusout: handleBlur\n                    }\"\n                    [scope]=\"this\"\n                >\n                    <div class=\"k-button-group k-button-group-stretched\">\n                        <button\n                            type=\"button\"\n                            class=\"k-button k-date-tab\"\n                            [class.k-state-active]=\"activeTab === 'date'\"\n                            [attr.title]=\"localization.get('dateTabLabel')\"\n                            [attr.aria-label]=\"localization.get('dateTabLabel')\"\n                            [kendoEventsOutsideAngular]=\"{\n                                click: changeActiveTab.bind(this, 'date'),\n                                keydown: handleBackTabOut\n                            }\"\n                            [scope]=\"this\"\n                        >\n                            {{localization.get('dateTab')}}\n                        </button>\n                        <button\n                            type=\"button\"\n                            class=\"k-button k-time-tab\"\n                            [class.k-state-active]=\"activeTab === 'time'\"\n                            [attr.title]=\"localization.get('timeTabLabel')\"\n                            [attr.aria-label]=\"localization.get('timeTabLabel')\"\n                            [kendoEventsOutsideAngular]=\"{\n                                click: changeActiveTab.bind(this, 'time')\n                            }\"\n                        >\n                            {{localization.get('timeTab')}}\n                        </button>\n                    </div>\n                </div>\n                <div\n                    #dateTimeSelector\n                    class=\"k-datetime-selector\"\n                    [style.transition]=\"tabSwitchTransition\"\n                    [kendoEventsOutsideAngular]=\"{\n                        transitionend: handleTabChangeTransitionEnd.bind(this, dateTimeSelector)\n                    }\"\n                >\n                    <div class=\"k-datetime-calendar-wrap\">\n                        <kendo-calendar\n                            [(value)]=\"calendarValue\"\n                            [type]=\"calendarType\"\n                            [min]=\"calendarMin\"\n                            [max]=\"calendarMax\"\n                            [focusedDate]=\"focusedDate\"\n                            [weekNumber]=\"weekNumber\"\n                            [navigation]=\"false\"\n                            [animateNavigation]=\"animateCalendarNavigation\"\n                            [cellTemplate]=\"cellTemplate\"\n                            [monthCellTemplate]=\"monthCellTemplate\"\n                            [yearCellTemplate]=\"yearCellTemplate\"\n                            [decadeCellTemplate]=\"decadeCellTemplate\"\n                            [centuryCellTemplate]=\"centuryCellTemplate\"\n                            [weekNumberTemplate]=\"weekNumberTemplate\"\n                            [headerTitleTemplate]=\"headerTitleTemplate\"\n                            [disabled]=\"disableCalendar\"\n                            [disabledDates]=\"disabledDates\"\n                            (valueChange)=\"handleCalendarValueChange()\"\n                        >\n                            <kendo-calendar-messages\n                                [today]=\"localization.get('today')\"\n                                [prevButtonTitle]=\"localization.get('prevButtonTitle')\"\n                                [nextButtonTitle]=\"localization.get('nextButtonTitle')\"\n                            >\n                            </kendo-calendar-messages>\n                        </kendo-calendar>\n                    </div>\n                    <div class=\"k-datetime-time-wrap\">\n                        <kendo-timeselector\n                            [value]=\"value\"\n                            [format]=\"timeSelectorFormat\"\n                            [min]=\"timeSelectorMin\"\n                            [max]=\"timeSelectorMax\"\n                            [setButton]=\"false\"\n                            [cancelButton]=\"false\"\n                            [steps]=\"steps\"\n                            [disabled]=\"disableTimeSelector\"\n                        >\n                            <kendo-timeselector-messages\n                                [now]=\"localization.get('now')\"\n                                [nowLabel]=\"localization.get('nowLabel')\"\n                            >\n                            </kendo-timeselector-messages>\n                        </kendo-timeselector>\n                    </div>\n                </div>\n                <div\n                    class=\"k-datetime-footer k-action-buttons k-actions k-hstack k-justify-content-stretch\"\n                    [kendoEventsOutsideAngular]=\"{\n                        keydown: handleTabOut,\n                        focusin: handleFocus,\n                        focusout: handleBlur\n                    }\"\n                    [scope]=\"this\"\n                >\n                    <button\n                        *ngIf=\"cancelButton\"\n                        type=\"button\"\n                        class=\"k-button k-time-cancel\"\n                        [attr.title]=\"localization.get('cancelLabel')\"\n                        [attr.aria-label]=\"localization.get('cancelLabel')\"\n                        [kendoEventsOutsideAngular]=\"{\n                            click: handleCancel\n                        }\"\n                        [scope]=\"this\"\n                    >\n                        {{localization.get('cancel')}}\n                    </button>\n                    <button\n                        type=\"button\"\n                        class=\"k-time-accept k-button k-primary\"\n                        [attr.title]=\"localization.get('acceptLabel')\"\n                        [attr.aria-label]=\"localization.get('acceptLabel')\"\n                        [disabled]=\"!calendarValue\"\n                        [kendoEventsOutsideAngular]=\"{\n                            click: handleAccept\n                        }\"\n                        [scope]=\"this\"\n                    >\n                        {{localization.get('accept')}}\n                    </button>\n                </div>\n            </div>\n        </ng-template>\n    "
+            template: "\n        <ng-container\n            kendoDateTimePickerLocalizedMessages\n\n            i18n-dateTab=\"kendo.datetimepicker.dateTab|The Date tab text in the datetimepicker popup header\"\n            dateTab=\"Date\"\n\n            i18n-dateTabLabel=\"kendo.datetimepicker.dateTabLabel|The label for the Date tab in the datetimepicker popup header\"\n            dateTabLabel=\"Date tab\"\n\n            i18n-timeTab=\"kendo.datetimepicker.timeTab|The Time tab text in the datetimepicker popup header\"\n            timeTab=\"Time\"\n\n            i18n-timeTabLabel=\"kendo.datetimepicker.timeTabLabel|The label for the Time tab in the datetimepicker popup header\"\n            timeTabLabel=\"Time tab\"\n\n            i18n-toggle=\"kendo.datetimepicker.toggle|The title of the toggle button in the datetimepicker component\"\n            toggle=\"Toggle popup\"\n\n            i18n-accept=\"kendo.datetimepicker.accept|The Accept button text in the datetimepicker component\"\n            accept=\"Set\"\n\n            i18n-acceptLabel=\"kendo.datetimepicker.acceptLabel|The label for the Accept button in the datetimepicker component\"\n            acceptLabel=\"Set\"\n\n            i18n-cancel=\"kendo.datetimepicker.cancel|The Cancel button text in the datetimepicker component\"\n            cancel=\"Cancel\"\n\n            i18n-cancelLabel=\"kendo.datetimepicker.cancelLabel|The label for the Cancel button in the datetimepicker component\"\n            cancelLabel=\"Cancel\"\n\n            i18n-now=\"kendo.datetimepicker.now|The Now button text in the timepicker component\"\n            now=\"NOW\"\n\n            i18n-nowLabel=\"kendo.datetimepicker.nowLabel|The label for the Now button in the timepicker component\"\n            nowLabel=\"Select now\"\n\n            i18n-today=\"kendo.datetimepicker.today|The label for the today button in the calendar header\"\n            today=\"Today\"\n\n            i18n-prevButtonTitle=\"kendo.datetimepicker.prevButtonTitle|The title of the previous button in the Classic calendar\"\n            prevButtonTitle=\"Navigate to previous view\"\n\n            i18n-nextButtonTitle=\"kendo.datetimepicker.nextButtonTitle|The title of the next button in the Classic calendar\"\n            nextButtonTitle=\"Navigate to next view\"\n        >\n        </ng-container>\n\n        <kendo-dateinput\n            [value]=\"value\"\n            [format]=\"format\"\n            [twoDigitYearMax]=\"twoDigitYearMax\"\n            [min]=\"min\"\n            [max]=\"max\"\n            [incompleteDateValidation]=\"incompleteDateValidation\"\n            [formatPlaceholder]=\"formatPlaceholder\"\n            [placeholder]=\"placeholder\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly || readOnlyInput\"\n            [role]=\"inputRole\"\n            [ariaReadOnly]=\"readonly\"\n            [steps]=\"steps\"\n            [tabindex]=\"tabindex\"\n            [title]=\"title\"\n            [focusableId]=\"focusableId\"\n            [hasPopup]=\"true\"\n            [isPopupOpen]=\"isOpen\"\n            (valueChange)=\"handleInputValueChange($event)\"\n            [kendoEventsOutsideAngular]=\"{\n                keydown: handleKeyDown\n            }\"\n            [scope]=\"this\"\n            [fillMode]=\"fillMode\"\n            [rounded]=\"rounded\"\n            [size]=\"size\"\n        >\n        </kendo-dateinput>\n        <button\n            #toggleButton\n            type=\"button\"\n            class=\"k-input-button k-button k-icon-button\"\n            [tabindex]=\"-1\"\n            [attr.title]=\"localization.get('toggle')\"\n            [attr.aria-label]=\"localization.get('toggle')\"\n            [kendoEventsOutsideAngular]=\"{\n                mousedown: preventMouseDown,\n                click: handleIconClick\n            }\"\n            [scope]=\"this\"\n        >\n            <span class=\"k-button-icon k-icon\"\n                [ngClass]=\"{\n                    'k-i-calendar': activeTab === 'date',\n                    'k-i-clock': activeTab === 'time'\n                }\"\n            ></span>\n        </button>\n\n        <ng-container #container></ng-container>\n\n        <ng-template #popupTemplate>\n            <div\n                class=\"k-datetime-wrap k-{{activeTab}}-tab\"\n                [kendoEventsOutsideAngular]=\"{\n                    mousedown: preventMouseDown,\n                    keydown: handleKeyDown\n                }\"\n                [scope]=\"this\"\n            >\n                <div class=\"k-datetime-buttongroup\"\n                    [kendoEventsOutsideAngular]=\"{\n                        focusin: handleFocus,\n                        focusout: handleBlur\n                    }\"\n                    [scope]=\"this\"\n                >\n                    <div class=\"k-button-group k-button-group-stretched\">\n                        <button\n                            type=\"button\"\n                            class=\"k-button k-group-start k-date-tab\"\n                            [ngClass]=\"popupButtonsClasses()\"\n                            [class.k-active]=\"activeTab === 'date'\"\n                            [attr.title]=\"localization.get('dateTabLabel')\"\n                            [attr.aria-label]=\"localization.get('dateTabLabel')\"\n                            [kendoEventsOutsideAngular]=\"{\n                                click: changeActiveTab.bind(this, 'date'),\n                                keydown: handleBackTabOut\n                            }\"\n                            [scope]=\"this\"\n                        >\n                            {{localization.get('dateTab')}}\n                        </button>\n                        <button\n                            type=\"button\"\n                            class=\"k-button k-group-end k-time-tab\"\n                            [ngClass]=\"popupButtonsClasses()\"\n                            [class.k-active]=\"activeTab === 'time'\"\n                            [attr.title]=\"localization.get('timeTabLabel')\"\n                            [attr.aria-label]=\"localization.get('timeTabLabel')\"\n                            [kendoEventsOutsideAngular]=\"{\n                                click: changeActiveTab.bind(this, 'time')\n                            }\"\n                        >\n                            {{localization.get('timeTab')}}\n                        </button>\n                    </div>\n                </div>\n                <div\n                    #dateTimeSelector\n                    class=\"k-datetime-selector\"\n                    [style.transition]=\"tabSwitchTransition\"\n                    [kendoEventsOutsideAngular]=\"{\n                        transitionend: handleTabChangeTransitionEnd.bind(this, dateTimeSelector)\n                    }\"\n                >\n                    <div class=\"k-datetime-calendar-wrap\">\n                        <kendo-calendar\n                            [(value)]=\"calendarValue\"\n                            [type]=\"calendarType\"\n                            [min]=\"calendarMin\"\n                            [max]=\"calendarMax\"\n                            [focusedDate]=\"focusedDate\"\n                            [weekNumber]=\"weekNumber\"\n                            [navigation]=\"false\"\n                            [animateNavigation]=\"animateCalendarNavigation\"\n                            [cellTemplate]=\"cellTemplate\"\n                            [monthCellTemplate]=\"monthCellTemplate\"\n                            [yearCellTemplate]=\"yearCellTemplate\"\n                            [decadeCellTemplate]=\"decadeCellTemplate\"\n                            [centuryCellTemplate]=\"centuryCellTemplate\"\n                            [weekNumberTemplate]=\"weekNumberTemplate\"\n                            [headerTitleTemplate]=\"headerTitleTemplate\"\n                            [disabled]=\"disableCalendar\"\n                            [disabledDates]=\"disabledDates\"\n                            (valueChange)=\"handleCalendarValueChange()\"\n                        >\n                            <kendo-calendar-messages\n                                [today]=\"localization.get('today')\"\n                                [prevButtonTitle]=\"localization.get('prevButtonTitle')\"\n                                [nextButtonTitle]=\"localization.get('nextButtonTitle')\"\n                            >\n                            </kendo-calendar-messages>\n                        </kendo-calendar>\n                    </div>\n                    <div class=\"k-datetime-time-wrap\">\n                        <kendo-timeselector\n                            [value]=\"value\"\n                            [format]=\"timeSelectorFormat\"\n                            [min]=\"timeSelectorMin\"\n                            [max]=\"timeSelectorMax\"\n                            [setButton]=\"false\"\n                            [cancelButton]=\"false\"\n                            [steps]=\"steps\"\n                            [disabled]=\"disableTimeSelector\"\n                        >\n                            <kendo-timeselector-messages\n                                [now]=\"localization.get('now')\"\n                                [nowLabel]=\"localization.get('nowLabel')\"\n                            >\n                            </kendo-timeselector-messages>\n                        </kendo-timeselector>\n                    </div>\n                </div>\n                <div\n                    class=\"k-datetime-footer k-action-buttons k-actions k-hstack k-justify-content-stretch\"\n                    [kendoEventsOutsideAngular]=\"{\n                        keydown: handleTabOut,\n                        focusin: handleFocus,\n                        focusout: handleBlur\n                    }\"\n                    [scope]=\"this\"\n                >\n                    <button\n                        *ngIf=\"cancelButton\"\n                        type=\"button\"\n                        class=\"k-button k-time-cancel\"\n                        [ngClass]=\"popupButtonsClasses()\"\n                        [attr.title]=\"localization.get('cancelLabel')\"\n                        [attr.aria-label]=\"localization.get('cancelLabel')\"\n                        [kendoEventsOutsideAngular]=\"{\n                            click: handleCancel\n                        }\"\n                        [scope]=\"this\"\n                    >\n                        {{localization.get('cancel')}}\n                    </button>\n                    <button\n                        type=\"button\"\n                        class=\"k-button k-time-accept\"\n                        [ngClass]=\"popupButtonsClasses('primary')\"\n                        [attr.title]=\"localization.get('acceptLabel')\"\n                        [attr.aria-label]=\"localization.get('acceptLabel')\"\n                        [disabled]=\"!calendarValue\"\n                        [kendoEventsOutsideAngular]=\"{\n                            click: handleAccept\n                        }\"\n                        [scope]=\"this\"\n                    >\n                        {{localization.get('accept')}}\n                    </button>\n                </div>\n            </div>\n        </ng-template>\n    "
         }),
         __param(6, Inject(TOUCH_ENABLED)),
         __metadata("design:paramtypes", [PopupService,
@@ -11125,7 +11663,7 @@ var DateRangeInput = /** @class */ (function () {
         var action = show ? 'addClass' : 'removeClass';
         var nativeElement = this.element.nativeElement;
         if (nativeElement && nativeElement.querySelector) {
-            this.renderer[action](nativeElement.querySelector('.k-dateinput-wrap'), 'k-state-focused');
+            this.renderer[action](nativeElement, 'k-focus');
         }
     };
     return DateRangeInput;
@@ -11754,7 +12292,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
         });
     };
@@ -12726,14 +13264,16 @@ var DateRangeModule = /** @class */ (function () {
 var div$1 = domContainerFactory('div');
 var ul$1 = domContainerFactory('ul');
 var li$1 = domContainerFactory('li');
+var span = domContainerFactory('span');
+var listTitle = function () { return span('hour', 'k-title k-timeselector-title'); };
 var listItem = function () { return li$1('<span>02</span>', 'k-item'); };
 var list = function () { return ul$1([listItem()], 'k-reset'); };
-var scrollable$1 = function () { return (div$1([list()], 'k-time-container k-content k-scrollable')); };
+var scrollable$1 = function () { return (div$1([list()], 'k-time-container k-flex k-content k-calendar-content k-scrollable')); };
 var timeListWrapper = function () {
     if (!isDocumentAvailable()) {
         return null;
     }
-    return div$1([div$1([scrollable$1()], 'k-time-list')], 'k-time-list-wrapper', { left: '-10000px', position: 'absolute' });
+    return div$1([listTitle(), div$1([scrollable$1()], 'k-time-list')], 'k-time-list-wrapper', { left: '-10000px', position: 'absolute' });
 };
 var TIMELIST_WRAPPER = timeListWrapper();
 /**
@@ -12755,7 +13295,8 @@ var TimePickerDOMService = /** @class */ (function () {
         var listContainer = container && container.querySelector('.k-time-list-container');
         var hostContainer = listContainer || document.body;
         var wrapper = hostContainer.appendChild(TIMELIST_WRAPPER);
-        this.timeListHeight = wrapper.querySelector('.k-scrollable').getBoundingClientRect().height;
+        this.timeListTitleHeight = wrapper.querySelector('.k-timeselector-title').getBoundingClientRect().height;
+        this.timeListHeight = wrapper.getBoundingClientRect().height;
         this.itemHeight = wrapper.querySelector('li').getBoundingClientRect().height;
         hostContainer.removeChild(wrapper);
     };
@@ -13415,8 +13956,9 @@ var TimeListComponent = /** @class */ (function () {
         this.dom.ensureHeights();
         this.itemHeight = this.dom.itemHeight;
         this.listHeight = this.dom.timeListHeight;
-        this.topOffset = (this.listHeight - this.itemHeight) / 2;
-        this.bottomOffset = this.listHeight - this.itemHeight;
+        var titleHeight = this.dom.timeListTitleHeight;
+        this.topOffset = (this.listHeight - this.itemHeight - titleHeight) / 2;
+        this.bottomOffset = this.listHeight - this.itemHeight - titleHeight;
         this.topThreshold = this.itemHeight * SNAP_THRESHOLD;
         this.bottomThreshold = this.itemHeight * (1 - SNAP_THRESHOLD);
         var translate = "translateY(" + this.topOffset + "px)";
@@ -13619,12 +14161,12 @@ var TimeListComponent = /** @class */ (function () {
 var isEqualTillMinute = function (value, min) { return value.getHours() === min.getHours() && value.getMinutes() === min.getMinutes(); };
 var isEqualTillSecond = function (value, min) { return isEqualTillMinute(value, min) && value.getSeconds() === min.getSeconds(); };
 var isEqualTillMillisecond = function (value, min) { return isEqualTillSecond(value, min) && value.getMilliseconds() === min.getMilliseconds(); };
-var ɵ3$7 = function (value) { return value.getHours(); }, ɵ4$2 = function (_, min) { return min.getHours(); }, ɵ5$1 = function (value) { return value.getMinutes(); }, ɵ6$1 = function (value, min) { return isEqualTillMinute(value, min) ? min.getMinutes() : 0; }, ɵ7$1 = function (value) { return value.getSeconds(); }, ɵ8$1 = function (value, min) { return isEqualTillSecond(value, min) ? min.getSeconds() : 0; }, ɵ9$1 = function (value) { return value.getMilliseconds(); }, ɵ10$1 = function (value, min) { return isEqualTillMillisecond(value, min) ? min.getMilliseconds() : 0; };
+var ɵ3$7 = function (value) { return value.getHours(); }, ɵ4$3 = function (_, min) { return min.getHours(); }, ɵ5$1 = function (value) { return value.getMinutes(); }, ɵ6$1 = function (value, min) { return isEqualTillMinute(value, min) ? min.getMinutes() : 0; }, ɵ7$1 = function (value) { return value.getSeconds(); }, ɵ8$1 = function (value, min) { return isEqualTillSecond(value, min) ? min.getSeconds() : 0; }, ɵ9$1 = function (value) { return value.getMilliseconds(); }, ɵ10$1 = function (value, min) { return isEqualTillMillisecond(value, min) ? min.getMilliseconds() : 0; };
 var defaultGetters = [
     {
         type: TIME_PART.hour,
         getter: ɵ3$7,
-        minGetter: ɵ4$2
+        minGetter: ɵ4$3
     }, {
         type: TIME_PART.minute,
         getter: ɵ5$1,
@@ -14079,7 +14621,7 @@ var TimeSelectorComponent = /** @class */ (function () {
         __metadata("design:type", Boolean)
     ], TimeSelectorComponent.prototype, "componentClass", void 0);
     __decorate([
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], TimeSelectorComponent.prototype, "disabledClass", null);
@@ -14140,7 +14682,7 @@ var TimeSelectorComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-timeselector',
-            template: "\n        <ng-container kendoTimeSelectorLocalizedMessages\n            i18n-accept=\"kendo.timeselector.accept|The Accept button text in the timeselector component\"\n            accept=\"Set\"\n\n            i18n-acceptLabel=\"kendo.timeselector.acceptLabel|The label for the Accept button in the timeselector component\"\n            acceptLabel=\"Set time\"\n\n            i18n-cancel=\"kendo.timeselector.cancel|The Cancel button text in the timeselector component\"\n            cancel=\"Cancel\"\n\n            i18n-cancelLabel=\"kendo.timeselector.cancelLabel|The label for the Cancel button in the timeselector component\"\n            cancelLabel=\"Cancel changes\"\n\n            i18n-now=\"kendo.timeselector.now|The Now button text in the timeselector component\"\n            now=\"Now\"\n\n            i18n-nowLabel=\"kendo.timeselector.nowLabel|The label for the Now button in the timeselector component\"\n            nowLabel=\"Select now\"\n        >\n        </ng-container>\n        <div class=\"k-time-header\">\n            <span class=\"k-title k-timeselector-title\">\n                {{ intl.formatDate(current, format) }}\n            </span>\n            <button\n                #now\n                *ngIf=\"showNowButton\"\n                class=\"k-button k-flat k-time-now\" type=\"button\"\n                [attr.title]=\"localization.get('nowLabel')\"\n                [attr.aria-label]=\"localization.get('nowLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleNow,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('now')}}</button>\n        </div>\n        <div class=\"k-time-list-container\">\n            <span class=\"k-time-highlight\"></span>\n            <ng-template ngFor [ngForOf]=\"dateFormatParts\" let-part let-idx=\"index\">\n                <div\n                    #listWrapper\n                    class=\"k-time-list-wrapper\"\n                    role=\"presentation\" tabindex=\"-1\"\n                    *ngIf=\"part.type !== 'literal'\"\n                >\n                    <span class=\"k-title k-timeselector-title\">{{intl.dateFieldName(part)}}</span>\n                    <kendo-timelist\n                        [min]=\"min\"\n                        [max]=\"max\"\n                        [part]=\"part\"\n                        [step]=\"partStep(part)\"\n                        [disabled]=\"disabled\"\n                        [(value)]=\"current\"\n                        [kendoEventsOutsideAngular]=\"{\n                            focus: handleListFocus,\n                            blur: handleBlur\n                        }\"\n                        [scope]=\"this\"\n                        [attr.data-timelist-index]=\"idx\"\n                    ></kendo-timelist>\n                </div>\n                <div class=\"k-time-separator\" *ngIf=\"part.type === 'literal'\">\n                    {{part.pattern}}\n                </div>\n            </ng-template>\n        </div>\n        <div class=\"k-time-footer k-action-buttons\" *ngIf=\"setButton || cancelButton\">\n            <button\n                #cancel\n                *ngIf=\"cancelButton\"\n                class=\"k-button k-time-cancel\" type=\"button\"\n                [attr.title]=\"localization.get('cancelLabel')\"\n                [attr.aria-label]=\"localization.get('cancelLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleReject,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('cancel')}}</button>\n            <button\n                #accept\n                *ngIf=\"setButton\"\n                type=\"button\"\n                class=\"k-time-accept k-button k-primary\"\n                [attr.title]=\"localization.get('acceptLabel')\"\n                [attr.aria-label]=\"localization.get('acceptLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleAccept,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('accept')}}</button>\n        </div>\n    "
+            template: "\n        <ng-container kendoTimeSelectorLocalizedMessages\n            i18n-accept=\"kendo.timeselector.accept|The Accept button text in the timeselector component\"\n            accept=\"Set\"\n\n            i18n-acceptLabel=\"kendo.timeselector.acceptLabel|The label for the Accept button in the timeselector component\"\n            acceptLabel=\"Set time\"\n\n            i18n-cancel=\"kendo.timeselector.cancel|The Cancel button text in the timeselector component\"\n            cancel=\"Cancel\"\n\n            i18n-cancelLabel=\"kendo.timeselector.cancelLabel|The label for the Cancel button in the timeselector component\"\n            cancelLabel=\"Cancel changes\"\n\n            i18n-now=\"kendo.timeselector.now|The Now button text in the timeselector component\"\n            now=\"Now\"\n\n            i18n-nowLabel=\"kendo.timeselector.nowLabel|The label for the Now button in the timeselector component\"\n            nowLabel=\"Select now\"\n        >\n        </ng-container>\n        <div class=\"k-time-header\">\n            <span class=\"k-title k-timeselector-title\">\n                {{ intl.formatDate(current, format) }}\n            </span>\n            <button\n                #now\n                *ngIf=\"showNowButton\"\n                type=\"button\"\n                class=\"k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-time-now\"\n                [attr.title]=\"localization.get('nowLabel')\"\n                [attr.aria-label]=\"localization.get('nowLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleNow,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('now')}}</button>\n        </div>\n        <div class=\"k-time-list-container\">\n            <span class=\"k-time-highlight\"></span>\n            <ng-template ngFor [ngForOf]=\"dateFormatParts\" let-part let-idx=\"index\">\n                <div\n                    #listWrapper\n                    class=\"k-time-list-wrapper\"\n                    role=\"presentation\" tabindex=\"-1\"\n                    *ngIf=\"part.type !== 'literal'\"\n                >\n                    <span class=\"k-title k-timeselector-title\">{{intl.dateFieldName(part)}}</span>\n                    <kendo-timelist\n                        [min]=\"min\"\n                        [max]=\"max\"\n                        [part]=\"part\"\n                        [step]=\"partStep(part)\"\n                        [disabled]=\"disabled\"\n                        [(value)]=\"current\"\n                        [kendoEventsOutsideAngular]=\"{\n                            focus: handleListFocus,\n                            blur: handleBlur\n                        }\"\n                        [scope]=\"this\"\n                        [attr.data-timelist-index]=\"idx\"\n                    ></kendo-timelist>\n                </div>\n                <div class=\"k-time-separator\" *ngIf=\"part.type === 'literal'\">\n                    {{part.pattern}}\n                </div>\n            </ng-template>\n        </div>\n        <div class=\"k-time-footer k-action-buttons k-actions k-hstack k-justify-content-stretch\" *ngIf=\"setButton || cancelButton\">\n            <button\n                #cancel\n                *ngIf=\"cancelButton\"\n                class=\"k-button k-time-cancel k-button-md k-rounded-md k-button-solid k-button-solid-base\"\n                type=\"button\"\n                [attr.title]=\"localization.get('cancelLabel')\"\n                [attr.aria-label]=\"localization.get('cancelLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleReject,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('cancel')}}</button>\n            <button\n                #accept\n                *ngIf=\"setButton\"\n                type=\"button\"\n                class=\"k-button k-time-accept k-button-md k-rounded-md k-button-solid k-button-solid-primary\"\n                [attr.title]=\"localization.get('acceptLabel')\"\n                [attr.aria-label]=\"localization.get('acceptLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleAccept,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('accept')}}</button>\n        </div>\n    "
         }),
         __param(7, Optional()),
         __metadata("design:paramtypes", [LocalizationService,