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

package/dist/fesm2015/index.js

@@ -23,7 +23,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1641547209,
+    publishDate: 1642521990,
     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'
 };
@@ -443,6 +443,43 @@ const isTabExitingCalendar = (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.
+ */
+const getSizeClass = (component, size) => {
+    const 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.
+ */
+const getRoundedClass = (rounded) => {
+    const 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.
+ */
+const getFillModeClass = (component, fillMode) => {
+    const FILLMODE_CLASSES = {
+        'solid': `k-${component}-solid`,
+        'flat': `k-${component}-flat`,
+        'outline': `k-${component}-outline`
+    };
+    return FILLMODE_CLASSES[fillMode];
+};
 
 const EMPTY_DATA = [[]];
 const CELLS_LENGTH = 4;
@@ -1845,7 +1882,7 @@ HeaderComponent = __decorate([
     Component({
         selector: 'kendo-calendar-header',
         template: `
-    <span class="k-button k-flat k-title k-calendar-title" [class.k-state-disabled]="!navigate"
+    <span class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title" [class.k-disabled]="!navigate"
         [kendoEventsOutsideAngular]="{
             click: handleNavigation
         }"
@@ -1861,7 +1898,7 @@ HeaderComponent = __decorate([
     <span class="k-calendar-nav k-hstack">
         <button
             *ngIf="showNavigationButtons"
-            class="k-button k-flat k-icon-button k-prev-view"
+            class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-prev-view"
             type="button"
             [attr.aria-disabled]="isPrevDisabled"
             [disabled]="isPrevDisabled"
@@ -1872,7 +1909,7 @@ HeaderComponent = __decorate([
         </button>
         <span
             class="k-today k-nav-today"
-            [class.k-state-disabled]="!todayAvailable"
+            [class.k-disabled]="!todayAvailable"
             [kendoEventsOutsideAngular]="{
                 click: handleTodayClick
             }"
@@ -1882,7 +1919,7 @@ HeaderComponent = __decorate([
         </span>
         <button
             *ngIf="showNavigationButtons"
-            class="k-button k-flat k-icon-button k-next-view"
+            class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-next-view"
             type="button"
             [attr.aria-disabled]="isNextDisabled"
             [disabled]="isNextDisabled"
@@ -3195,7 +3232,7 @@ __decorate([
 ], 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);
@@ -3343,7 +3380,7 @@ const tbody = domContainerFactory('tbody');
 const thead = domContainerFactory('thead');
 const table = domContainerFactory('table');
 const monthHeader = () => (div(`
-            <span class="k-button k-flat k-title k-calendar-title">March 2017</span>
+            <span class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title">March 2017</span>
             <span class="k-spacer"></span>
             <span class="k-calendar-nav k-hstack">
                 <span class="k-today k-nav-today">TODAY</span>
@@ -5558,7 +5595,7 @@ __decorate([
 ], 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);
@@ -6137,11 +6174,11 @@ class KendoDate {
  * Represents the [Kendo UI DateInput component for Angular]({% slug overview_dateinput %}#toc-basic-usage).
  */
 let DateInputComponent = DateInputComponent_1 = class DateInputComponent {
-    constructor(cdr, intl, renderer, element, ngZone, injector, localization, pickerService) {
+    constructor(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;
@@ -6343,6 +6380,9 @@ let DateInputComponent = DateInputComponent_1 = class DateInputComponent {
         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) {
@@ -6374,6 +6414,71 @@ let DateInputComponent = DateInputComponent_1 = class DateInputComponent {
     get value() {
         return this._value;
     }
+    /**
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (Default)
+     * * `'large'`
+     * * `null`
+     *
+     */
+    set size(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;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * Sets the border radius of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (Default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     *
+     */
+    set rounded(rounded) {
+        this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        if (rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+        }
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * Sets the fillMode of the component.
+     *
+     * The possible values are:
+     * * `'solid'` (Default)
+     * * `'flat'`
+     * * `'outline'`
+     * * `null`
+     *
+     */
+    set fillMode(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;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
     get wrapperClass() {
         return true;
     }
@@ -6391,16 +6496,16 @@ let DateInputComponent = DateInputComponent_1 = class DateInputComponent {
     }
     set isActive(value) {
         this._active = value;
-        if (!this.wrap) {
+        if (!this.wrapper) {
             return;
         }
         if (!isPresent(this.pickerService)) {
-            const element = this.wrap.nativeElement;
+            const 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');
             }
         }
     }
@@ -6437,7 +6542,7 @@ let DateInputComponent = DateInputComponent_1 = class DateInputComponent {
      * @hidden
      */
     containsElement(element) {
-        return Boolean(closest(element, node => node === this.element.nativeElement));
+        return Boolean(closest(element, node => node === this.wrapper.nativeElement));
     }
     /**
      * @hidden
@@ -6489,13 +6594,16 @@ let DateInputComponent = DateInputComponent_1 = class DateInputComponent {
         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(() => {
                 this.bindEvents();
             });
         }
     }
+    ngAfterViewInit() {
+        this.setComponentClasses();
+    }
     /**
      * @hidden
      */
@@ -6844,7 +6952,7 @@ let DateInputComponent = DateInputComponent_1 = class DateInputComponent {
         }
     }
     bindEvents() {
-        const element = this.element.nativeElement;
+        const element = this.wrapper.nativeElement;
         const 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 +7083,29 @@ let DateInputComponent = DateInputComponent_1 = class DateInputComponent {
             this.pickerService.dateCompletenessChange.emit();
         }
     }
+    setSpinnerFill(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`);
+    }
+    setComponentClasses() {
+        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);
+        }
+    }
 };
 __decorate([
     Input(),
@@ -7066,6 +7197,21 @@ __decorate([
     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 +7233,24 @@ __decorate([
     __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,
@@ -7122,57 +7272,59 @@ DateInputComponent = DateInputComponent_1 = __decorate([
         decrement="Decrease value"
     >
     </ng-container>
-    <span class="k-dateinput-wrap" #wrap>
-        <input
-            #dateInput
-            autocomplete="off"
-            autocorrect="off"
-            autocapitalize="off"
-            spellcheck="false"
-            class="k-input"
-            [attr.role]="role"
-            [attr.aria-readonly]="ariaReadOnly"
-            [id]="focusableId"
-            [title]="title"
-            [tabindex]="tabindex"
-            [disabled]="disabled"
-            [readonly]="readonly"
-            [placeholder]="placeholder"
-            [attr.aria-expanded]="isPopupOpen"
-            [attr.aria-haspopup]="hasPopup"
-            [kendoEventsOutsideAngular]="{
-                click: handleClick,
-                focus: handleFocus,
-                mousedown: handleMousedown,
-                touchstart: handleMousedown,
-                dragstart: handleDragAndDrop,
-                drop: handleDragAndDrop,
-                blur: handleBlur
-            }"
-            [scope]="this"
-            />
-        <span *ngIf="spinners" class="k-select" (mousedown)="$event.preventDefault()">
-            <span
-                class="k-link k-link-increase"
-                [class.k-state-active]="arrowDirection === arrow.Up"
-                (mousedown)="arrowDirection = arrow.Up"
-                (mouseleave)="arrowDirection = arrow.None"
-                (click)="handleButtonClick(1)"
-                [title]="localization.get('increment')"
-                [attr.aria-label]="localization.get('increment')">
-                <span class="k-icon k-i-arrow-n"></span>
-            </span>
-            <span
-                class="k-link k-link-decrease"
-                (click)="handleButtonClick(-1)"
-                [class.k-state-active]="arrowDirection === arrow.Down"
-                (mousedown)="arrowDirection = arrow.Down"
-                (mouseleave)="arrowDirection = arrow.None"
-                [title]="localization.get('decrement')"
-                [attr.aria-label]="localization.get('decrement')">
-                <span class="k-icon k-i-arrow-s"></span>
-            </span>
-        </span>
+    <input
+        #dateInput
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+        spellcheck="false"
+        class="k-input-inner"
+        [attr.role]="role"
+        [attr.aria-readonly]="ariaReadOnly"
+        [id]="focusableId"
+        [title]="title"
+        [tabindex]="tabindex"
+        [disabled]="disabled"
+        [readonly]="readonly"
+        [placeholder]="placeholder"
+        [attr.aria-expanded]="isPopupOpen"
+        [attr.aria-haspopup]="hasPopup"
+        [kendoEventsOutsideAngular]="{
+            click: handleClick,
+            focus: handleFocus,
+            mousedown: handleMousedown,
+            touchstart: handleMousedown,
+            dragstart: handleDragAndDrop,
+            drop: handleDragAndDrop,
+            blur: handleBlur
+        }"
+        [scope]="this"
+        />
+    <span *ngIf="spinners" class="k-input-spinner k-spin-button" (mousedown)="$event.preventDefault()">
+        <button
+            #spinup
+            tabindex="-1"
+            class="k-spinner-increase k-button k-icon-button"
+            [class.k-active]="arrowDirection === arrow.Up"
+            (mousedown)="arrowDirection = arrow.Up"
+            (mouseleave)="arrowDirection = arrow.None"
+            (click)="handleButtonClick(1)"
+            [title]="localization.get('increment')"
+            [attr.aria-label]="localization.get('increment')">
+            <span class="k-button-icon k-icon k-i-arrow-n"></span>
+        </button>
+        <button
+            #spindown
+            tabindex="-1"
+            class="k-spinner-decrease k-button k-icon-button"
+            (click)="handleButtonClick(-1)"
+            [class.k-active]="arrowDirection === arrow.Down"
+            (mousedown)="arrowDirection = arrow.Down"
+            (mouseleave)="arrowDirection = arrow.None"
+            [title]="localization.get('decrement')"
+            [attr.aria-label]="localization.get('decrement')">
+            <span class="k-button-icon k-icon k-i-arrow-s"></span>
+        </button>
     </span>
   `
     }),
@@ -7242,12 +7394,12 @@ const TWO_DIGIT_YEAR_MAX$1 = 68;
  * Represents the [Kendo UI DatePicker component for Angular]({% slug overview_datepicker %}#toc-basic-usage).
  */
 let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
-    constructor(zone, localization, cdr, popupService, element, renderer, injector, pickerService, disabledDatesService, touchEnabled$$1) {
+    constructor(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;
@@ -7473,6 +7625,9 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
         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)));
@@ -7574,6 +7729,73 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
     get disabledDates() {
         return this._disabledDates;
     }
+    /**
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (Default)
+     * * `'large'`
+     * * `null`
+     *
+     */
+    set size(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;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * Sets the border radius of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (Default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     *
+     */
+    set rounded(rounded) {
+        this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        if (rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+        }
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * Sets the fillMode of the component.
+     *
+     * The possible values are:
+     * * `'solid'` (Default)
+     * * `'flat'`
+     * * `'outline'`
+     * * `null`
+     *
+     */
+    set fillMode(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;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
     /**
      * @hidden
      */
@@ -7596,10 +7818,10 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
         }
         const 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');
         }
     }
     get show() {
@@ -7634,13 +7856,16 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
             .changes
             .subscribe(() => 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(() => {
                 this.bindEvents();
             });
         }
     }
+    ngAfterViewInit() {
+        this.setComponentClasses();
+    }
     /**
      * @hidden
      */
@@ -7932,7 +8157,7 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
         }
     }
     bindEvents() {
-        const element = this.element.nativeElement;
+        const 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));
@@ -7988,6 +8213,20 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
         this.cdr.markForCheck();
         this.zone.run(() => this.onValidatorChange());
     }
+    setComponentClasses() {
+        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`);
+        }
+    }
 };
 __decorate([
     ViewChild('container', { read: ViewContainerRef, static: true }),
@@ -7998,9 +8237,9 @@ __decorate([
     __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)
@@ -8185,6 +8424,21 @@ __decorate([
     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)
@@ -8206,12 +8460,12 @@ __decorate([
     __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);
@@ -8247,44 +8501,45 @@ DatePickerComponent = DatePickerComponent_1 = __decorate([
             nextButtonTitle="Navigate to next view"
         >
         </ng-container>
-        <span #wrapper
-            class="k-picker-wrap"
-            [class.k-state-disabled]="disabled"
+        <kendo-dateinput
+            #input
+            [role]="inputRole"
+            [focusableId]="focusableId"
+            [hasPopup]="true"
+            [isPopupOpen]="show"
+            [disabled]="disabled"
+            [readonly]="readonly || readOnlyInput"
+            [ariaReadOnly]="readonly"
+            [tabindex]="tabindex"
+            [title]="title"
+            [format]="format"
+            [twoDigitYearMax]="twoDigitYearMax"
+            [formatPlaceholder]="formatPlaceholder"
+            [placeholder]="placeholder"
+            [min]="min"
+            [max]="max"
+            [incompleteDateValidation]="incompleteDateValidation"
+            [fillMode]="null"
+            [rounded]="null"
+            [size]="null"
+            [value]="value"
+            (valueChange)="handleInputChange($event)"
+        ></kendo-dateinput>
+        <button
+            #toggleButton
+            type="button"
+            class="k-input-button k-button k-icon-button"
+            [tabindex]="-1"
+            [attr.title]="localization.get('toggle')"
+            [attr.aria-label]="localization.get('toggle')"
+            [kendoEventsOutsideAngular]="{
+                click: handleIconClick,
+                mousedown: handleMousedown
+            }"
+            [scope]="this"
         >
-            <kendo-dateinput
-                #input
-                [role]="inputRole"
-                [focusableId]="focusableId"
-                [hasPopup]="true"
-                [isPopupOpen]="show"
-                [disabled]="disabled"
-                [readonly]="readonly || readOnlyInput"
-                [ariaReadOnly]="readonly"
-                [tabindex]="tabindex"
-                [title]="title"
-                [format]="format"
-                [twoDigitYearMax]="twoDigitYearMax"
-                [formatPlaceholder]="formatPlaceholder"
-                [placeholder]="placeholder"
-                [min]="min"
-                [max]="max"
-                [incompleteDateValidation]="incompleteDateValidation"
-                [value]="value"
-                (valueChange)="handleInputChange($event)"
-            ></kendo-dateinput>
-            <span class="k-select"
-                role="button"
-                [attr.title]="localization.get('toggle')"
-                [attr.aria-label]="localization.get('toggle')"
-                [kendoEventsOutsideAngular]="{
-                    click: handleIconClick,
-                    mousedown: handleMousedown
-                }"
-                [scope]="this"
-            >
-                <span class="k-icon k-i-calendar"></span>
-            </span>
-        </span>
+            <span class="k-button-icon k-icon k-i-calendar"></span>
+        </button>
         <ng-container #container></ng-container>
         <ng-template #popupTemplate>
             <kendo-calendar
@@ -8375,12 +8630,12 @@ const formatRegExp = new RegExp(`${TIME_PART.hour}|${TIME_PART.minute}|${TIME_PA
  * Represents the [Kendo UI TimePicker component for Angular]({% slug overview_timepicker %}#toc-basic-usage).
  */
 let TimePickerComponent = TimePickerComponent_1 = class TimePickerComponent {
-    constructor(zone, localization, cdr, popupService, element, renderer, injector, pickerService, intl, touchEnabled$$1) {
+    constructor(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;
@@ -8542,6 +8797,9 @@ let TimePickerComponent = TimePickerComponent_1 = class TimePickerComponent {
         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)));
@@ -8627,6 +8885,73 @@ let TimePickerComponent = TimePickerComponent_1 = class TimePickerComponent {
     get value() {
         return this._value;
     }
+    /**
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (Default)
+     * * `'large'`
+     * * `null`
+     *
+     */
+    set size(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;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * Sets the border radius of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (Default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     *
+     */
+    set rounded(rounded) {
+        this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        if (rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+        }
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * Sets the fillMode of the component.
+     *
+     * The possible values are:
+     * * `'solid'` (Default)
+     * * `'flat'`
+     * * `'outline'`
+     * * `null`
+     *
+     */
+    set fillMode(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;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
     /**
      * @hidden
      */
@@ -8649,10 +8974,10 @@ let TimePickerComponent = TimePickerComponent_1 = class TimePickerComponent {
         }
         const 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');
         }
     }
     get show() {
@@ -8692,13 +9017,19 @@ let TimePickerComponent = TimePickerComponent_1 = class TimePickerComponent {
         this.localizationChangeSubscription = this.localization
             .changes.subscribe(() => 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(() => {
                 this.bindEvents();
             });
         }
     }
+    /**
+     * @hidden
+     */
+    ngAfterViewInit() {
+        this.setComponentClasses();
+    }
     /**
      * @hidden
      */
@@ -8996,7 +9327,7 @@ let TimePickerComponent = TimePickerComponent_1 = class TimePickerComponent {
         }
     }
     bindEvents() {
-        const element = this.element.nativeElement;
+        const 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));
@@ -9045,6 +9376,20 @@ let TimePickerComponent = TimePickerComponent_1 = class TimePickerComponent {
         this.cdr.markForCheck();
         this.zone.run(() => this.onValidatorChange());
     }
+    setComponentClasses() {
+        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`);
+        }
+    }
 };
 __decorate([
     ViewChild('container', { read: ViewContainerRef, static: false }),
@@ -9055,9 +9400,9 @@ __decorate([
     __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)
@@ -9140,6 +9485,21 @@ __decorate([
     __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)
@@ -9161,12 +9521,12 @@ __decorate([
     __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);
@@ -9210,73 +9570,73 @@ TimePickerComponent = TimePickerComponent_1 = __decorate([
             toggle="Toggle time list"
         >
         </ng-container>
-        <span #wrapper
-            class="k-picker-wrap"
-            [class.k-state-disabled]="disabled"
+        <kendo-dateinput
+            #input
+            [focusableId]="focusableId"
+            [hasPopup]="true"
+            [isPopupOpen]="show"
+            [disabled]="disabled"
+            [readonly]="readonly || readOnlyInput"
+            [role]="inputRole"
+            [ariaReadOnly]="readonly"
+            [format]="format"
+            [formatPlaceholder]="formatPlaceholder"
+            [placeholder]="placeholder"
+            [min]="normalizeTime(min)"
+            [max]="normalizeTime(max)"
+            [incompleteDateValidation]="incompleteDateValidation"
+            [fillMode]="fillMode"
+            [rounded]="rounded"
+            [size]="size"
+            [steps]="steps"
+            [tabindex]="!show ? tabindex : -1"
+            [title]="title"
+            [value]="value"
+            (valueChange)="handleInputChange($event)"
+        ></kendo-dateinput>
+        <button
+            #toggleButton
+            type="button"
+            class="k-input-button k-button k-icon-button"
+            [attr.title]="localization.get('toggle')"
+            [attr.aria-label]="localization.get('toggle')"
+            [kendoEventsOutsideAngular]="{
+                click: handleIconClick,
+                mousedown: handleMousedown
+            }"
+            [scope]="this"
         >
-            <kendo-dateinput
-                #input
-                [focusableId]="focusableId"
-                [hasPopup]="true"
-                [isPopupOpen]="show"
-                [disabled]="disabled"
-                [readonly]="readonly || readOnlyInput"
-                [role]="inputRole"
-                [ariaReadOnly]="readonly"
+            <span class="k-button-icon k-icon k-i-clock"></span>
+        </button>
+        <ng-template #popupTemplate>
+            <kendo-timeselector
+                #timeSelector
+                [cancelButton]="cancelButton"
+                [nowButton]="nowButton"
                 [format]="format"
-                [formatPlaceholder]="formatPlaceholder"
-                [placeholder]="placeholder"
-                [min]="normalizeTime(min)"
-                [max]="normalizeTime(max)"
-                [incompleteDateValidation]="incompleteDateValidation"
+                [min]="min"
+                [max]="max"
                 [steps]="steps"
-                [tabindex]="!show ? tabindex : -1"
-                [title]="title"
                 [value]="value"
-                (valueChange)="handleInputChange($event)"
-            ></kendo-dateinput>
-            <span class="k-select"
-                role="button"
-                [attr.title]="localization.get('toggle')"
-                [attr.aria-label]="localization.get('toggle')"
                 [kendoEventsOutsideAngular]="{
-                    click: handleIconClick,
+                    keydown: handleKeydown,
                     mousedown: handleMousedown
                 }"
                 [scope]="this"
+                (valueChange)="handleChange($event)"
+                (valueReject)="handleReject()"
             >
-                <span class="k-icon k-i-clock"></span>
-            </span>
-            <ng-template #popupTemplate>
-                <kendo-timeselector
-                    #timeSelector
-                    [cancelButton]="cancelButton"
-                    [nowButton]="nowButton"
-                    [format]="format"
-                    [min]="min"
-                    [max]="max"
-                    [steps]="steps"
-                    [value]="value"
-                    [kendoEventsOutsideAngular]="{
-                        keydown: handleKeydown,
-                        mousedown: handleMousedown
-                    }"
-                    [scope]="this"
-                    (valueChange)="handleChange($event)"
-                    (valueReject)="handleReject()"
+                <kendo-timeselector-messages
+                    [acceptLabel]="localization.get('acceptLabel')"
+                    [accept]="localization.get('accept')"
+                    [cancelLabel]="localization.get('cancelLabel')"
+                    [cancel]="localization.get('cancel')"
+                    [nowLabel]="localization.get('nowLabel')"
+                    [now]="localization.get('now')"
                 >
-                    <kendo-timeselector-messages
-                        [acceptLabel]="localization.get('acceptLabel')"
-                        [accept]="localization.get('accept')"
-                        [cancelLabel]="localization.get('cancelLabel')"
-                        [cancel]="localization.get('cancel')"
-                        [nowLabel]="localization.get('nowLabel')"
-                        [now]="localization.get('now')"
-                    >
-                    </kendo-timeselector-messages>
-                </kendo-timeselector>
-            </ng-template>
-        </span>
+                </kendo-timeselector-messages>
+            </kendo-timeselector>
+        </ng-template>
         <ng-container #container></ng-container>
     `
     }),
@@ -9304,13 +9664,13 @@ const TWO_DIGIT_YEAR_MAX$2 = 68;
  * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
  */
 let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerComponent {
-    constructor(popupService, intl, cdr, pickerService, ngZone, host, touchEnabled$$1, localization, disabledDatesService, renderer) {
+    constructor(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;
@@ -9477,8 +9837,17 @@ let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerCo
         this.disabledDatesValidateFn = noop;
         this.incompleteValidator = noop;
         this.subscriptions = new Subscription();
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         validatePackage(packageMetadata);
     }
+    /**
+     * @hidden
+     */
+    get disabledClass() {
+        return this.disabled;
+    }
     /**
      * @hidden
      */
@@ -9614,10 +9983,10 @@ let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerCo
     }
     set isActive(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;
     }
@@ -9632,6 +10001,73 @@ let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerCo
     get defaultTab() {
         return this._defaultTab;
     }
+    /**
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (Default)
+     * * `'large'`
+     * * `null`
+     *
+     */
+    set size(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;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * Sets the border radius of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (Default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     *
+     */
+    set rounded(rounded) {
+        this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        if (rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+        }
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * Sets the fillMode of the component.
+     *
+     * The possible values are:
+     * * `'solid'` (Default)
+     * * `'flat'`
+     * * `'outline'`
+     * * `null`
+     *
+     */
+    set fillMode(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;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
     /**
      * @hidden
      */
@@ -9697,6 +10133,9 @@ let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerCo
             this.subscriptions.add(this.ngZone.runOutsideAngular(() => fromEvent(window, 'blur').subscribe(this.handleCancel.bind(this))));
         }
     }
+    ngAfterViewInit() {
+        this.setComponentClasses();
+    }
     ngOnChanges(changes) {
         if (isPresent(changes.min) || isPresent(changes.max)) {
             this.verifyMinMaxRange();
@@ -9848,7 +10287,7 @@ let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerCo
             return;
         }
         this.isActive = false;
-        const isNgControlUntouched = this.host.nativeElement.classList.contains('ng-untouched');
+        const isNgControlUntouched = this.wrapper.nativeElement.classList.contains('ng-untouched');
         const runInZone = isNgControlUntouched || hasObservers(this.onBlur) || (this.isOpen && hasObservers(this.close));
         this.run(runInZone, () => {
             this.onBlur.emit();
@@ -9973,6 +10412,13 @@ let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerCo
             this.input.focus();
         }
     }
+    /**
+     * @hidden
+     */
+    popupButtonsClasses(type) {
+        const 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
      *
@@ -10096,7 +10542,7 @@ let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerCo
     }
     /**
      * 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.
      */
     focusTargetInComponent(event) {
         if (!isPresent(event)) {
@@ -10142,16 +10588,35 @@ let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerCo
         this.cdr.markForCheck();
         this.ngZone.run(() => this.onValidatorChange());
     }
+    setComponentClasses() {
+        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`);
+        }
+    }
 };
 __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),
@@ -10280,6 +10745,21 @@ __decorate([
     __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)
@@ -10378,56 +10858,55 @@ DateTimePickerComponent = DateTimePickerComponent_1 = __decorate([
         >
         </ng-container>
 
-        <span
-            #wrapper
-            class="k-picker-wrap"
-            [class.k-state-disabled]="disabled"
+        <kendo-dateinput
+            [value]="value"
+            [format]="format"
+            [twoDigitYearMax]="twoDigitYearMax"
+            [min]="min"
+            [max]="max"
+            [incompleteDateValidation]="incompleteDateValidation"
+            [formatPlaceholder]="formatPlaceholder"
+            [placeholder]="placeholder"
+            [disabled]="disabled"
+            [readonly]="readonly || readOnlyInput"
+            [role]="inputRole"
+            [ariaReadOnly]="readonly"
+            [steps]="steps"
+            [tabindex]="tabindex"
+            [title]="title"
+            [focusableId]="focusableId"
+            [hasPopup]="true"
+            [isPopupOpen]="isOpen"
+            (valueChange)="handleInputValueChange($event)"
+            [kendoEventsOutsideAngular]="{
+                keydown: handleKeyDown
+            }"
+            [scope]="this"
+            [fillMode]="fillMode"
+            [rounded]="rounded"
+            [size]="size"
         >
-            <kendo-dateinput
-                [value]="value"
-                [format]="format"
-                [twoDigitYearMax]="twoDigitYearMax"
-                [min]="min"
-                [max]="max"
-                [incompleteDateValidation]="incompleteDateValidation"
-                [formatPlaceholder]="formatPlaceholder"
-                [placeholder]="placeholder"
-                [disabled]="disabled"
-                [readonly]="readonly || readOnlyInput"
-                [role]="inputRole"
-                [ariaReadOnly]="readonly"
-                [steps]="steps"
-                [tabindex]="tabindex"
-                [title]="title"
-                [focusableId]="focusableId"
-                [hasPopup]="true"
-                [isPopupOpen]="isOpen"
-                (valueChange)="handleInputValueChange($event)"
-                [kendoEventsOutsideAngular]="{
-                    keydown: handleKeyDown
-                }"
-                [scope]="this"
-            >
-            </kendo-dateinput>
-            <span class="k-select"
-                [attr.title]="localization.get('toggle')"
-                [attr.aria-label]="localization.get('toggle')"
-                [kendoEventsOutsideAngular]="{
-                    mousedown: preventMouseDown,
-                    click: handleIconClick
+        </kendo-dateinput>
+        <button
+            #toggleButton
+            type="button"
+            class="k-input-button k-button k-icon-button"
+            [tabindex]="-1"
+            [attr.title]="localization.get('toggle')"
+            [attr.aria-label]="localization.get('toggle')"
+            [kendoEventsOutsideAngular]="{
+                mousedown: preventMouseDown,
+                click: handleIconClick
+            }"
+            [scope]="this"
+        >
+            <span class="k-button-icon k-icon"
+                [ngClass]="{
+                    'k-i-calendar': activeTab === 'date',
+                    'k-i-clock': activeTab === 'time'
                 }"
-                [scope]="this"
-            >
-                <span class="k-link k-link-date">
-                    <span
-                        class="k-icon"
-                        [class.k-i-calendar]="activeTab === 'date'"
-                        [class.k-i-clock]="activeTab === 'time'"
-                    >
-                    </span>
-                </span>
-            </span>
-        </span>
+            ></span>
+        </button>
 
         <ng-container #container></ng-container>
 
@@ -10450,8 +10929,9 @@ DateTimePickerComponent = DateTimePickerComponent_1 = __decorate([
                     <div class="k-button-group k-button-group-stretched">
                         <button
                             type="button"
-                            class="k-button k-date-tab"
-                            [class.k-state-active]="activeTab === 'date'"
+                            class="k-button k-group-start k-date-tab"
+                            [ngClass]="popupButtonsClasses()"
+                            [class.k-active]="activeTab === 'date'"
                             [attr.title]="localization.get('dateTabLabel')"
                             [attr.aria-label]="localization.get('dateTabLabel')"
                             [kendoEventsOutsideAngular]="{
@@ -10464,8 +10944,9 @@ DateTimePickerComponent = DateTimePickerComponent_1 = __decorate([
                         </button>
                         <button
                             type="button"
-                            class="k-button k-time-tab"
-                            [class.k-state-active]="activeTab === 'time'"
+                            class="k-button k-group-end k-time-tab"
+                            [ngClass]="popupButtonsClasses()"
+                            [class.k-active]="activeTab === 'time'"
                             [attr.title]="localization.get('timeTabLabel')"
                             [attr.aria-label]="localization.get('timeTabLabel')"
                             [kendoEventsOutsideAngular]="{
@@ -10545,6 +11026,7 @@ DateTimePickerComponent = DateTimePickerComponent_1 = __decorate([
                         *ngIf="cancelButton"
                         type="button"
                         class="k-button k-time-cancel"
+                        [ngClass]="popupButtonsClasses()"
                         [attr.title]="localization.get('cancelLabel')"
                         [attr.aria-label]="localization.get('cancelLabel')"
                         [kendoEventsOutsideAngular]="{
@@ -10556,7 +11038,8 @@ DateTimePickerComponent = DateTimePickerComponent_1 = __decorate([
                     </button>
                     <button
                         type="button"
-                        class="k-time-accept k-button k-primary"
+                        class="k-button k-time-accept"
+                        [ngClass]="popupButtonsClasses('primary')"
                         [attr.title]="localization.get('acceptLabel')"
                         [attr.aria-label]="localization.get('acceptLabel')"
                         [disabled]="!calendarValue"
@@ -11299,7 +11782,7 @@ class DateRangeInput {
         const action = show ? 'addClass' : 'removeClass';
         const 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');
         }
     }
 }
@@ -11875,7 +12358,7 @@ let ViewComponent = class ViewComponent {
             '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
         });
     }
@@ -12797,14 +13280,16 @@ DateRangeModule = __decorate([
 const div$1 = domContainerFactory('div');
 const ul$1 = domContainerFactory('ul');
 const li$1 = domContainerFactory('li');
+const span = domContainerFactory('span');
+const listTitle = () => span('hour', 'k-title k-timeselector-title');
 const listItem = () => li$1('<span>02</span>', 'k-item');
 const list = () => ul$1([listItem()], 'k-reset');
-const scrollable$1 = () => (div$1([list()], 'k-time-container k-content k-scrollable'));
+const scrollable$1 = () => (div$1([list()], 'k-time-container k-flex k-content k-calendar-content k-scrollable'));
 const timeListWrapper = () => {
     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' });
 };
 const TIMELIST_WRAPPER = timeListWrapper();
 /**
@@ -12824,7 +13309,8 @@ let TimePickerDOMService = class TimePickerDOMService {
         const listContainer = container && container.querySelector('.k-time-list-container');
         const hostContainer = listContainer || document.body;
         const 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);
     }
@@ -13464,8 +13950,9 @@ let TimeListComponent = class TimeListComponent {
         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;
+        const 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);
         const translate = `translateY(${this.topOffset}px)`;
@@ -13687,12 +14174,12 @@ TimeListComponent = __decorate([
 const isEqualTillMinute = (value, min) => value.getHours() === min.getHours() && value.getMinutes() === min.getMinutes();
 const isEqualTillSecond = (value, min) => isEqualTillMinute(value, min) && value.getSeconds() === min.getSeconds();
 const isEqualTillMillisecond = (value, min) => isEqualTillSecond(value, min) && value.getMilliseconds() === min.getMilliseconds();
-const ɵ3$7 = (value) => value.getHours(), ɵ4$2 = (_, min) => min.getHours(), ɵ5$1 = (value) => value.getMinutes(), ɵ6$1 = (value, min) => isEqualTillMinute(value, min) ? min.getMinutes() : 0, ɵ7$1 = (value) => value.getSeconds(), ɵ8$1 = (value, min) => isEqualTillSecond(value, min) ? min.getSeconds() : 0, ɵ9$1 = (value) => value.getMilliseconds(), ɵ10$1 = (value, min) => isEqualTillMillisecond(value, min) ? min.getMilliseconds() : 0;
+const ɵ3$7 = (value) => value.getHours(), ɵ4$3 = (_, min) => min.getHours(), ɵ5$1 = (value) => value.getMinutes(), ɵ6$1 = (value, min) => isEqualTillMinute(value, min) ? min.getMinutes() : 0, ɵ7$1 = (value) => value.getSeconds(), ɵ8$1 = (value, min) => isEqualTillSecond(value, min) ? min.getSeconds() : 0, ɵ9$1 = (value) => value.getMilliseconds(), ɵ10$1 = (value, min) => isEqualTillMillisecond(value, min) ? min.getMilliseconds() : 0;
 const defaultGetters = [
     {
         type: TIME_PART.hour,
         getter: ɵ3$7,
-        minGetter: ɵ4$2
+        minGetter: ɵ4$3
     }, {
         type: TIME_PART.minute,
         getter: ɵ5$1,
@@ -14126,7 +14613,7 @@ __decorate([
     __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);
@@ -14215,7 +14702,8 @@ TimeSelectorComponent = __decorate([
             <button
                 #now
                 *ngIf="showNowButton"
-                class="k-button k-flat k-time-now" type="button"
+                type="button"
+                class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-time-now"
                 [attr.title]="localization.get('nowLabel')"
                 [attr.aria-label]="localization.get('nowLabel')"
                 [kendoEventsOutsideAngular]="{
@@ -14257,11 +14745,12 @@ TimeSelectorComponent = __decorate([
                 </div>
             </ng-template>
         </div>
-        <div class="k-time-footer k-action-buttons" *ngIf="setButton || cancelButton">
+        <div class="k-time-footer k-action-buttons k-actions k-hstack k-justify-content-stretch" *ngIf="setButton || cancelButton">
             <button
                 #cancel
                 *ngIf="cancelButton"
-                class="k-button k-time-cancel" type="button"
+                class="k-button k-time-cancel k-button-md k-rounded-md k-button-solid k-button-solid-base"
+                type="button"
                 [attr.title]="localization.get('cancelLabel')"
                 [attr.aria-label]="localization.get('cancelLabel')"
                 [kendoEventsOutsideAngular]="{
@@ -14276,7 +14765,7 @@ TimeSelectorComponent = __decorate([
                 #accept
                 *ngIf="setButton"
                 type="button"
-                class="k-time-accept k-button k-primary"
+                class="k-button k-time-accept k-button-md k-rounded-md k-button-solid k-button-solid-primary"
                 [attr.title]="localization.get('acceptLabel')"
                 [attr.aria-label]="localization.get('acceptLabel')"
                 [kendoEventsOutsideAngular]="{