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

package/dist/es2015/package-metadata.js

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

package/dist/es2015/timepicker/services/dom.service.d.ts

@@ -9,6 +9,7 @@ import { ElementRef } from '@angular/core';
 export declare class TimePickerDOMService {
     itemHeight: number;
     timeListHeight: number;
+    timeListTitleHeight: number;
     ensureHeights(): void;
     calculateHeights(container?: HTMLElement): void;
     isActive(element: ElementRef): boolean;

package/dist/es2015/timepicker/services/dom.service.js

@@ -9,19 +9,22 @@ import { domContainerFactory as containerFactory } from '../../util';
 const div = containerFactory('div');
 const ul = containerFactory('ul');
 const li = containerFactory('li');
+const span = containerFactory('span');
+const listTitle = () => span('hour', 'k-title k-timeselector-title');
+const ɵ0 = listTitle;
 const listItem = () => li('<span>02</span>', 'k-item');
-const ɵ0 = listItem;
+const ɵ1 = listItem;
 const list = () => ul([listItem()], 'k-reset');
-const ɵ1 = list;
-const scrollable = () => (div([list()], 'k-time-container k-content k-scrollable'));
-const ɵ2 = scrollable;
+const ɵ2 = list;
+const scrollable = () => (div([list()], 'k-time-container k-flex k-content k-calendar-content k-scrollable'));
+const ɵ3 = scrollable;
 const timeListWrapper = () => {
     if (!isDocumentAvailable()) {
         return null;
     }
-    return div([div([scrollable()], 'k-time-list')], 'k-time-list-wrapper', { left: '-10000px', position: 'absolute' });
+    return div([listTitle(), div([scrollable()], 'k-time-list')], 'k-time-list-wrapper', { left: '-10000px', position: 'absolute' });
 };
-const ɵ3 = timeListWrapper;
+const ɵ4 = timeListWrapper;
 const TIMELIST_WRAPPER = timeListWrapper();
 /**
  * @hidden
@@ -40,7 +43,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);
     }
@@ -55,4 +59,4 @@ TimePickerDOMService = tslib_1.__decorate([
     Injectable()
 ], TimePickerDOMService);
 export { TimePickerDOMService };
-export { ɵ0, ɵ1, ɵ2, ɵ3 };
+export { ɵ0, ɵ1, ɵ2, ɵ3, ɵ4 };

package/dist/es2015/timepicker/timelist.component.js

@@ -87,8 +87,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)`;

package/dist/es2015/timepicker/timepicker.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, TemplateRef, ViewContainerRef, OnInit, OnChanges, OnDestroy, Renderer2, Injector } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, TemplateRef, ViewContainerRef, OnInit, OnChanges, OnDestroy, Renderer2, Injector, AfterViewInit } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { PopupService, PopupRef } from '@progress/kendo-angular-popup';
@@ -14,15 +14,18 @@ import { TimeSelectorComponent } from './timeselector.component';
 import { DateInputComponent } from '../dateinput/dateinput.component';
 import { PopupSettings } from '../popup-settings.model';
 import { PreventableEvent } from '../preventable-event';
+import { DateInputSize } from '../common/models/size';
+import { DateInputRounded } from '../common/models/rounded';
+import { DateInputFillMode } from '../common/models/fillmode';
 /**
  * Represents the [Kendo UI TimePicker component for Angular]({% slug overview_timepicker %}#toc-basic-usage).
  */
-export declare class TimePickerComponent implements ControlValueAccessor, OnInit, OnChanges, OnDestroy, Validator {
+export declare class TimePickerComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnChanges, OnDestroy, Validator {
     zone: NgZone;
     localization: LocalizationService;
     private cdr;
     private popupService;
-    private element;
+    wrapper: ElementRef;
     private renderer;
     private injector;
     private pickerService;
@@ -30,7 +33,7 @@ export declare class TimePickerComponent implements ControlValueAccessor, OnInit
     private touchEnabled;
     container: ViewContainerRef;
     popupTemplate: TemplateRef<any>;
-    wrapper: ElementRef;
+    toggleButton: ElementRef;
     /**
      * @hidden
      */
@@ -195,6 +198,40 @@ export declare class TimePickerComponent implements ControlValueAccessor, OnInit
      * Specifies the value of the TimePicker component.
      */
     value: Date;
+    /**
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (Default)
+     * * `'large'`
+     * * `null`
+     *
+     */
+    size: DateInputSize;
+    /**
+     * Sets the border radius of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (Default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     *
+     */
+    rounded: DateInputRounded;
+    /**
+     * Sets the fillMode of the component.
+     *
+     * The possible values are:
+     * * `'solid'` (Default)
+     * * `'flat'`
+     * * `'outline'`
+     * * `null`
+     *
+     */
+    fillMode: DateInputFillMode;
     /**
      * Fires each time the user selects a new value.
      * For more information, refer to the section on
@@ -297,7 +334,10 @@ export declare class TimePickerComponent implements ControlValueAccessor, OnInit
     private windowBlurSubscription;
     private control;
     private domEvents;
-    constructor(zone: NgZone, localization: LocalizationService, cdr: ChangeDetectorRef, popupService: PopupService, element: ElementRef, renderer: Renderer2, injector: Injector, pickerService: PickerService, intl: IntlService, touchEnabled: boolean);
+    private _size;
+    private _rounded;
+    private _fillMode;
+    constructor(zone: NgZone, localization: LocalizationService, cdr: ChangeDetectorRef, popupService: PopupService, wrapper: ElementRef, renderer: Renderer2, injector: Injector, pickerService: PickerService, intl: IntlService, touchEnabled: boolean);
     /**
      * @hidden
      * Used by the TextBoxContainer to determine if the component is empty
@@ -307,6 +347,10 @@ export declare class TimePickerComponent implements ControlValueAccessor, OnInit
      * @hidden
      */
     ngOnInit(): void;
+    /**
+     * @hidden
+     */
+    ngAfterViewInit(): void;
     /**
      * @hidden
      */
@@ -424,4 +468,5 @@ export declare class TimePickerComponent implements ControlValueAccessor, OnInit
     private handleBlur;
     private blurComponent;
     private handleDateCompletenessChange;
+    private setComponentClasses;
 }

package/dist/es2015/timepicker/timepicker.component.js

@@ -18,7 +18,7 @@ import { PickerService } from '../common/picker.service';
 import { requiresZoneOnBlur, currentFocusTarget } from '../common/utils';
 import { TIME_PART } from './models/time-part.default';
 import { PreventableEvent } from '../preventable-event';
-import { noop, setTime, isWindowAvailable } from '../util';
+import { noop, setTime, isWindowAvailable, getFillModeClass, getSizeClass, getRoundedClass } from '../util';
 import { timeRangeValidator } from '../validators/time-range.validator';
 import { TOUCH_ENABLED } from '../touch-enabled';
 import { fromEvent } from 'rxjs';
@@ -30,12 +30,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) {
+    constructor(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, intl, touchEnabled) {
         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;
@@ -197,6 +197,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)));
@@ -282,6 +285,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
      */
@@ -304,10 +374,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() {
@@ -347,13 +417,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
      */
@@ -651,7 +727,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));
@@ -700,6 +776,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`);
+        }
+    }
 };
 tslib_1.__decorate([
     ViewChild('container', { read: ViewContainerRef, static: false }),
@@ -710,9 +800,9 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", TemplateRef)
 ], TimePickerComponent.prototype, "popupTemplate", void 0);
 tslib_1.__decorate([
-    ViewChild('wrapper', { static: false }),
+    ViewChild('toggleButton', { static: true }),
     tslib_1.__metadata("design:type", ElementRef)
-], TimePickerComponent.prototype, "wrapper", void 0);
+], TimePickerComponent.prototype, "toggleButton", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
@@ -795,6 +885,21 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", Date),
     tslib_1.__metadata("design:paramtypes", [Date])
 ], TimePickerComponent.prototype, "value", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], TimePickerComponent.prototype, "size", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], TimePickerComponent.prototype, "rounded", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], TimePickerComponent.prototype, "fillMode", null);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -816,12 +921,12 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", EventEmitter)
 ], TimePickerComponent.prototype, "close", void 0);
 tslib_1.__decorate([
-    HostBinding('class.k-widget'),
     HostBinding('class.k-timepicker'),
+    HostBinding('class.k-input'),
     tslib_1.__metadata("design:type", Boolean)
 ], TimePickerComponent.prototype, "wrapperClasses", void 0);
 tslib_1.__decorate([
-    HostBinding('class.k-state-disabled'),
+    HostBinding('class.k-disabled'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], TimePickerComponent.prototype, "disabledClass", null);
@@ -865,73 +970,73 @@ TimePickerComponent = TimePickerComponent_1 = tslib_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>
     `
     }),

package/dist/es2015/timepicker/timeselector.component.js

@@ -393,7 +393,7 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", Boolean)
 ], TimeSelectorComponent.prototype, "componentClass", void 0);
 tslib_1.__decorate([
-    HostBinding('class.k-state-disabled'),
+    HostBinding('class.k-disabled'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], TimeSelectorComponent.prototype, "disabledClass", null);
@@ -482,7 +482,8 @@ TimeSelectorComponent = tslib_1.__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]="{
@@ -524,11 +525,12 @@ TimeSelectorComponent = tslib_1.__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]="{
@@ -543,7 +545,7 @@ TimeSelectorComponent = tslib_1.__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]="{

package/dist/es2015/util.d.ts

@@ -4,6 +4,9 @@
 *-------------------------------------------------------------------------------------------*/
 import { SelectionRange } from './calendar/models/selection-range.interface';
 import { CalendarType } from './calendar/models/type';
+import { DateInputSize } from './common/models/size';
+import { DateInputRounded } from './common/models/rounded';
+import { DateInputFillMode } from './common/models/fillmode';
 /**
  * @hidden
  */
@@ -167,3 +170,18 @@ export declare const millisecondStepFor: (digits: number) => number;
  * Checks if a tab keydown would would move the focus outside of the calendar.
  */
 export declare const isTabExitingCalendar: (calendarType: CalendarType, focusedElement: Element, shiftKey: boolean) => boolean;
+/**
+ * @hidden
+ * Returns the size class based on the component and size input.
+ */
+export declare const getSizeClass: (component: string, size: DateInputSize) => string;
+/**
+ * @hidden
+ * Returns the rounded class based on the rounded input.
+ */
+export declare const getRoundedClass: (rounded: DateInputRounded) => string;
+/**
+ * @hidden
+ * Return the fillMode class based on the component and fillMode input.
+ */
+export declare const getFillModeClass: (component: string, fillMode: DateInputFillMode) => string;

package/dist/es2015/util.js

@@ -349,4 +349,41 @@ export 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.
+ */
+export 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.
+ */
+export 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.
+ */
+export const getFillModeClass = (component, fillMode) => {
+    const FILLMODE_CLASSES = {
+        'solid': `k-${component}-solid`,
+        'flat': `k-${component}-flat`,
+        'outline': `k-${component}-outline`
+    };
+    return FILLMODE_CLASSES[fillMode];
+};
 export { ɵ0, ɵ1, ɵ2 };