@progress/kendo-angular-dateinputs 5.3.1-dev.202201070925 → 6.0.1-dev.202201310951

package/dist/es/calendar/calendar.component.js

@@ -510,11 +510,13 @@ var CalendarComponent = /** @class */ (function () {
     };
     CalendarComponent.prototype.ngOnDestroy = function () {
         this.scrollSyncService.destroy();
-        this.viewChangeSubscription.unsubscribe();
         this.domEvents.forEach(function (unbindCallback) { return unbindCallback(); });
         if (this.pickerService) {
             this.pickerService.calendar = null;
         }
+        if (this.viewChangeSubscription) {
+            this.viewChangeSubscription.unsubscribe();
+        }
         if (this.pageChangeSubscription) {
             this.pageChangeSubscription.unsubscribe();
         }
@@ -1092,7 +1094,7 @@ var CalendarComponent = /** @class */ (function () {
     ], CalendarComponent.prototype, "calendarTabIndex", null);
     tslib_1.__decorate([
         HostBinding('attr.aria-disabled'),
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], CalendarComponent.prototype, "ariaDisabled", null);

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

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

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

@@ -993,7 +993,7 @@ var MultiViewCalendarComponent = /** @class */ (function () {
     ], MultiViewCalendarComponent.prototype, "calendarTabIndex", null);
     tslib_1.__decorate([
         HostBinding('attr.aria-disabled'),
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], MultiViewCalendarComponent.prototype, "ariaDisabled", null);

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

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

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

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

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

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

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

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

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

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es/dateinput/dateinput.component.js

@@ -16,7 +16,7 @@ import { packageMetadata } from '../package-metadata';
 import { addMonths, cloneDate, createDate, getDate, isEqual, lastDayOfMonth } from '@progress/kendo-date-math';
 import { isDocumentAvailable, hasObservers, KendoInput, Keys, guid } from '@progress/kendo-angular-common';
 import { Arrow } from './arrow.enum';
-import { approximateStringMatching, noop, isInRange, dateInRange, isValidRange, setTime, cropTwoDigitYear, setYears, msPaddingFromFormat, millisecondDigitsInFormat, millisecondStepFor } from '../util';
+import { approximateStringMatching, noop, isInRange, dateInRange, isValidRange, setTime, cropTwoDigitYear, setYears, msPaddingFromFormat, millisecondDigitsInFormat, millisecondStepFor, getSizeClass, getRoundedClass, getFillModeClass } from '../util';
 import { PickerService } from '../common/picker.service';
 import { closest } from '../common/dom-queries';
 import { requiresZoneOnBlur, isPresent } from '../common/utils';
@@ -453,11 +453,11 @@ var KendoDate = /** @class */ (function () {
  * Represents the [Kendo UI DateInput component for Angular]({% slug overview_dateinput %}#toc-basic-usage).
  */
 var DateInputComponent = /** @class */ (function () {
-    function DateInputComponent(cdr, intl, renderer, element, ngZone, injector, localization, pickerService) {
+    function DateInputComponent(cdr, intl, renderer, wrapper, ngZone, injector, localization, pickerService) {
         this.cdr = cdr;
         this.intl = intl;
         this.renderer = renderer;
-        this.element = element;
+        this.wrapper = wrapper;
         this.ngZone = ngZone;
         this.injector = injector;
         this.localization = localization;
@@ -659,6 +659,9 @@ var DateInputComponent = /** @class */ (function () {
         this.onControlChange = noop;
         this.onControlTouched = noop;
         this.onValidatorChange = noop;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         this.symbolsMap = this.dateSymbolMap();
         this.updateFormatSections();
         if (this.pickerService) {
@@ -699,6 +702,83 @@ var DateInputComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(DateInputComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * Sets the size of the component.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (Default)
+         * * `'large'`
+         * * `null`
+         *
+         */
+        set: function (size) {
+            this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
+            if (size) {
+                this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
+            }
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DateInputComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * Sets the border radius of the component.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (Default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
+         *
+         */
+        set: function (rounded) {
+            this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+            if (rounded) {
+                this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+            }
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DateInputComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * Sets the fillMode of the component.
+         *
+         * The possible values are:
+         * * `'solid'` (Default)
+         * * `'flat'`
+         * * `'outline'`
+         * * `null`
+         *
+         */
+        set: function (fillMode) {
+            this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
+            if (fillMode) {
+                this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
+                if (this.spinners && this.spinup && this.spindown) {
+                    this.setSpinnerFill(this.spinup.nativeElement, fillMode, this.fillMode);
+                    this.setSpinnerFill(this.spindown.nativeElement, fillMode, this.fillMode);
+                }
+            }
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(DateInputComponent.prototype, "wrapperClass", {
         get: function () {
             return true;
@@ -733,16 +813,16 @@ var DateInputComponent = /** @class */ (function () {
         },
         set: function (value) {
             this._active = value;
-            if (!this.wrap) {
+            if (!this.wrapper) {
                 return;
             }
             if (!isPresent(this.pickerService)) {
-                var element = this.wrap.nativeElement;
+                var element = this.wrapper.nativeElement;
                 if (value) {
-                    this.renderer.addClass(element, 'k-state-focused');
+                    this.renderer.addClass(element, 'k-focus');
                 }
                 else {
-                    this.renderer.removeClass(element, 'k-state-focused');
+                    this.renderer.removeClass(element, 'k-focus');
                 }
             }
         },
@@ -791,7 +871,7 @@ var DateInputComponent = /** @class */ (function () {
      */
     DateInputComponent.prototype.containsElement = function (element) {
         var _this = this;
-        return Boolean(closest(element, function (node) { return node === _this.element.nativeElement; }));
+        return Boolean(closest(element, function (node) { return node === _this.wrapper.nativeElement; }));
     };
     /**
      * @hidden
@@ -844,13 +924,16 @@ var DateInputComponent = /** @class */ (function () {
         this.updateElementValue();
         this.intlSubscription = this.intl.changes.subscribe(this.intlChange.bind(this));
         this.ngControl = this.injector.get(NgControl, null);
-        if (this.element) {
-            this.renderer.removeAttribute(this.element.nativeElement, 'tabindex');
+        if (this.wrapper) {
+            this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
             this.ngZone.runOutsideAngular(function () {
                 _this.bindEvents();
             });
         }
     };
+    DateInputComponent.prototype.ngAfterViewInit = function () {
+        this.setComponentClasses();
+    };
     /**
      * @hidden
      */
@@ -1204,7 +1287,7 @@ var DateInputComponent = /** @class */ (function () {
         }
     };
     DateInputComponent.prototype.bindEvents = function () {
-        var element = this.element.nativeElement;
+        var element = this.wrapper.nativeElement;
         var mousewheelHandler = this.handleMouseWheel.bind(this);
         this.domEvents.push(this.renderer.listen(element, 'DOMMouseScroll', mousewheelHandler), this.renderer.listen(element, 'mousewheel', mousewheelHandler), this.renderer.listen(element, 'keydown', this.handleKeydown.bind(this)), this.renderer.listen(element, 'paste', this.handlePaste.bind(this)), this.renderer.listen(element, 'input', this.handleInput.bind(this)));
     };
@@ -1336,6 +1419,29 @@ var DateInputComponent = /** @class */ (function () {
             this.pickerService.dateCompletenessChange.emit();
         }
     };
+    DateInputComponent.prototype.setSpinnerFill = function (spinner, fill, oldFill) {
+        if (oldFill) {
+            this.renderer.removeClass(spinner, "k-button-" + oldFill);
+            this.renderer.removeClass(spinner, "k-button-" + oldFill + "-base");
+        }
+        this.renderer.addClass(spinner, "k-button-" + fill);
+        this.renderer.addClass(spinner, "k-button-" + fill + "-base");
+    };
+    DateInputComponent.prototype.setComponentClasses = function () {
+        if (this.size) {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
+        }
+        if (this.rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        }
+        if (this.fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
+        }
+        if (this.spinners) {
+            this.setSpinnerFill(this.spinup.nativeElement, this.fillMode);
+            this.setSpinnerFill(this.spindown.nativeElement, this.fillMode);
+        }
+    };
     var DateInputComponent_1;
     tslib_1.__decorate([
         Input(),
@@ -1427,6 +1533,21 @@ var DateInputComponent = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", Boolean)
     ], DateInputComponent.prototype, "hasPopup", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], DateInputComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], DateInputComponent.prototype, "rounded", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], DateInputComponent.prototype, "fillMode", null);
     tslib_1.__decorate([
         Output(),
         tslib_1.__metadata("design:type", EventEmitter)
@@ -1448,20 +1569,24 @@ var DateInputComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", ElementRef)
     ], DateInputComponent.prototype, "dateInput", void 0);
     tslib_1.__decorate([
-        ViewChild('wrap', { static: false }),
-        tslib_1.__metadata("design:type", ElementRef)
-    ], DateInputComponent.prototype, "wrap", void 0);
-    tslib_1.__decorate([
-        HostBinding('class.k-widget'),
+        HostBinding('class.k-input'),
         HostBinding('class.k-dateinput'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], DateInputComponent.prototype, "wrapperClass", null);
     tslib_1.__decorate([
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], DateInputComponent.prototype, "disabledClass", null);
+    tslib_1.__decorate([
+        ViewChild('spinup', { static: false }),
+        tslib_1.__metadata("design:type", ElementRef)
+    ], DateInputComponent.prototype, "spinup", void 0);
+    tslib_1.__decorate([
+        ViewChild('spindown', { static: false }),
+        tslib_1.__metadata("design:type", ElementRef)
+    ], DateInputComponent.prototype, "spindown", void 0);
     DateInputComponent = DateInputComponent_1 = tslib_1.__decorate([
         Component({
             changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1474,7 +1599,7 @@ var DateInputComponent = /** @class */ (function () {
                 LocalizationService
             ],
             selector: 'kendo-dateinput',
-            template: "\n    <ng-container kendoDateInputLocalizedMessages\n        i18n-increment=\"kendo.dateinput.increment|The label for the **Increment** button in the DateInput\"\n        increment=\"Increase value\"\n\n        i18n-decrement=\"kendo.dateinput.decrement|The label for the **Decrement** button in the DateInput\"\n        decrement=\"Decrease value\"\n    >\n    </ng-container>\n    <span class=\"k-dateinput-wrap\" #wrap>\n        <input\n            #dateInput\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            autocapitalize=\"off\"\n            spellcheck=\"false\"\n            class=\"k-input\"\n            [attr.role]=\"role\"\n            [attr.aria-readonly]=\"ariaReadOnly\"\n            [id]=\"focusableId\"\n            [title]=\"title\"\n            [tabindex]=\"tabindex\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [placeholder]=\"placeholder\"\n            [attr.aria-expanded]=\"isPopupOpen\"\n            [attr.aria-haspopup]=\"hasPopup\"\n            [kendoEventsOutsideAngular]=\"{\n                click: handleClick,\n                focus: handleFocus,\n                mousedown: handleMousedown,\n                touchstart: handleMousedown,\n                dragstart: handleDragAndDrop,\n                drop: handleDragAndDrop,\n                blur: handleBlur\n            }\"\n            [scope]=\"this\"\n            />\n        <span *ngIf=\"spinners\" class=\"k-select\" (mousedown)=\"$event.preventDefault()\">\n            <span\n                class=\"k-link k-link-increase\"\n                [class.k-state-active]=\"arrowDirection === arrow.Up\"\n                (mousedown)=\"arrowDirection = arrow.Up\"\n                (mouseleave)=\"arrowDirection = arrow.None\"\n                (click)=\"handleButtonClick(1)\"\n                [title]=\"localization.get('increment')\"\n                [attr.aria-label]=\"localization.get('increment')\">\n                <span class=\"k-icon k-i-arrow-n\"></span>\n            </span>\n            <span\n                class=\"k-link k-link-decrease\"\n                (click)=\"handleButtonClick(-1)\"\n                [class.k-state-active]=\"arrowDirection === arrow.Down\"\n                (mousedown)=\"arrowDirection = arrow.Down\"\n                (mouseleave)=\"arrowDirection = arrow.None\"\n                [title]=\"localization.get('decrement')\"\n                [attr.aria-label]=\"localization.get('decrement')\">\n                <span class=\"k-icon k-i-arrow-s\"></span>\n            </span>\n        </span>\n    </span>\n  "
+            template: "\n    <ng-container kendoDateInputLocalizedMessages\n        i18n-increment=\"kendo.dateinput.increment|The label for the **Increment** button in the DateInput\"\n        increment=\"Increase value\"\n\n        i18n-decrement=\"kendo.dateinput.decrement|The label for the **Decrement** button in the DateInput\"\n        decrement=\"Decrease value\"\n    >\n    </ng-container>\n    <input\n        #dateInput\n        autocomplete=\"off\"\n        autocorrect=\"off\"\n        autocapitalize=\"off\"\n        spellcheck=\"false\"\n        class=\"k-input-inner\"\n        [attr.role]=\"role\"\n        [attr.aria-readonly]=\"ariaReadOnly\"\n        [id]=\"focusableId\"\n        [title]=\"title\"\n        [tabindex]=\"tabindex\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [placeholder]=\"placeholder\"\n        [attr.aria-expanded]=\"isPopupOpen\"\n        [attr.aria-haspopup]=\"hasPopup\"\n        [kendoEventsOutsideAngular]=\"{\n            click: handleClick,\n            focus: handleFocus,\n            mousedown: handleMousedown,\n            touchstart: handleMousedown,\n            dragstart: handleDragAndDrop,\n            drop: handleDragAndDrop,\n            blur: handleBlur\n        }\"\n        [scope]=\"this\"\n        />\n    <span *ngIf=\"spinners\" class=\"k-input-spinner k-spin-button\" (mousedown)=\"$event.preventDefault()\">\n        <button\n            #spinup\n            tabindex=\"-1\"\n            class=\"k-spinner-increase k-button k-icon-button\"\n            [class.k-active]=\"arrowDirection === arrow.Up\"\n            (mousedown)=\"arrowDirection = arrow.Up\"\n            (mouseleave)=\"arrowDirection = arrow.None\"\n            (click)=\"handleButtonClick(1)\"\n            [title]=\"localization.get('increment')\"\n            [attr.aria-label]=\"localization.get('increment')\">\n            <span class=\"k-button-icon k-icon k-i-arrow-n\"></span>\n        </button>\n        <button\n            #spindown\n            tabindex=\"-1\"\n            class=\"k-spinner-decrease k-button k-icon-button\"\n            (click)=\"handleButtonClick(-1)\"\n            [class.k-active]=\"arrowDirection === arrow.Down\"\n            (mousedown)=\"arrowDirection = arrow.Down\"\n            (mouseleave)=\"arrowDirection = arrow.None\"\n            [title]=\"localization.get('decrement')\"\n            [attr.aria-label]=\"localization.get('decrement')\">\n            <span class=\"k-button-icon k-icon k-i-arrow-s\"></span>\n        </button>\n    </span>\n  "
         }),
         tslib_1.__param(7, Optional()),
         tslib_1.__metadata("design:paramtypes", [ChangeDetectorRef,

package/dist/es/datepicker/datepicker.component.js

@@ -27,7 +27,7 @@ import { HeaderTitleTemplateDirective } from '../calendar/templates/header-title
 import { NavigationItemTemplateDirective } from '../calendar/templates/navigation-item-template.directive';
 import { PickerService } from '../common/picker.service';
 import { DisabledDatesService } from '../calendar/services/disabled-dates.service';
-import { noop, isValidRange, setTime, isWindowAvailable, isTabExitingCalendar } from '../util';
+import { noop, isValidRange, setTime, isWindowAvailable, isTabExitingCalendar, getSizeClass, getRoundedClass, getFillModeClass } from '../util';
 import { TOUCH_ENABLED } from '../touch-enabled';
 import { requiresZoneOnBlur, currentFocusTarget } from '../common/utils';
 import { fromEvent } from 'rxjs';
@@ -42,12 +42,12 @@ var TWO_DIGIT_YEAR_MAX = 68;
  * Represents the [Kendo UI DatePicker component for Angular]({% slug overview_datepicker %}#toc-basic-usage).
  */
 var DatePickerComponent = /** @class */ (function () {
-    function DatePickerComponent(zone, localization, cdr, popupService, element, renderer, injector, pickerService, disabledDatesService, touchEnabled) {
+    function DatePickerComponent(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, disabledDatesService, 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;
@@ -273,6 +273,9 @@ var DatePickerComponent = /** @class */ (function () {
         this.incompleteValidator = noop;
         this.resolvedPromise = Promise.resolve(null);
         this.domEvents = [];
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         validatePackage(packageMetadata);
         this.pickerSubscriptions = this.pickerService.onFocus.subscribe(this.handleFocus.bind(this));
         this.pickerSubscriptions.add(this.pickerService.onBlur.subscribe(this.handleBlur.bind(this)));
@@ -423,6 +426,85 @@ var DatePickerComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(DatePickerComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * Sets the size of the component.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (Default)
+         * * `'large'`
+         * * `null`
+         *
+         */
+        set: function (size) {
+            this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
+            this.renderer.removeClass(this.toggleButton.nativeElement, getSizeClass('input', this.size));
+            if (size) {
+                this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
+                this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('input', size));
+            }
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DatePickerComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * Sets the border radius of the component.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (Default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
+         *
+         */
+        set: function (rounded) {
+            this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+            if (rounded) {
+                this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+            }
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DatePickerComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * Sets the fillMode of the component.
+         *
+         * The possible values are:
+         * * `'solid'` (Default)
+         * * `'flat'`
+         * * `'outline'`
+         * * `null`
+         *
+         */
+        set: function (fillMode) {
+            this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
+            this.renderer.removeClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
+            this.renderer.removeClass(this.toggleButton.nativeElement, "k-button-" + this.fillMode + "-base");
+            if (fillMode) {
+                this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', fillMode));
+                this.renderer.addClass(this.toggleButton.nativeElement, "k-button-" + fillMode + "-base");
+                this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
+            }
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(DatePickerComponent.prototype, "disabledClass", {
         /**
          * @hidden
@@ -454,10 +536,10 @@ var DatePickerComponent = /** @class */ (function () {
             }
             var element = this.wrapper.nativeElement;
             if (value) {
-                this.renderer.addClass(element, 'k-state-focused');
+                this.renderer.addClass(element, 'k-focus');
             }
             else {
-                this.renderer.removeClass(element, 'k-state-focused');
+                this.renderer.removeClass(element, 'k-focus');
             }
         },
         enumerable: true,
@@ -501,13 +583,16 @@ var DatePickerComponent = /** @class */ (function () {
             .changes
             .subscribe(function () { return _this.cdr.markForCheck(); });
         this.control = this.injector.get(NgControl, null);
-        if (this.element) {
-            this.renderer.removeAttribute(this.element.nativeElement, 'tabindex');
+        if (this.wrapper) {
+            this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
             this.zone.runOutsideAngular(function () {
                 _this.bindEvents();
             });
         }
     };
+    DatePickerComponent.prototype.ngAfterViewInit = function () {
+        this.setComponentClasses();
+    };
     /**
      * @hidden
      */
@@ -821,7 +906,7 @@ var DatePickerComponent = /** @class */ (function () {
         }
     };
     DatePickerComponent.prototype.bindEvents = function () {
-        var element = this.element.nativeElement;
+        var element = this.wrapper.nativeElement;
         this.domEvents.push(this.renderer.listen(element, 'keydown', this.handleKeydown.bind(this)));
         if (isWindowAvailable()) {
             this.windowBlurSubscription = fromEvent(window, 'blur').subscribe(this.handleWindowBlur.bind(this));
@@ -880,6 +965,20 @@ var DatePickerComponent = /** @class */ (function () {
         this.cdr.markForCheck();
         this.zone.run(function () { return _this.onValidatorChange(); });
     };
+    DatePickerComponent.prototype.setComponentClasses = function () {
+        if (this.size) {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
+            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('button', this.size));
+        }
+        if (this.rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        }
+        if (this.fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, "k-button-" + this.fillMode + "-base");
+        }
+    };
     var DatePickerComponent_1;
     tslib_1.__decorate([
         ViewChild('container', { read: ViewContainerRef, static: true }),
@@ -890,9 +989,9 @@ var DatePickerComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", TemplateRef)
     ], DatePickerComponent.prototype, "popupTemplate", void 0);
     tslib_1.__decorate([
-        ViewChild('wrapper', { static: false }),
+        ViewChild('toggleButton', { static: true }),
         tslib_1.__metadata("design:type", ElementRef)
-    ], DatePickerComponent.prototype, "wrapper", void 0);
+    ], DatePickerComponent.prototype, "toggleButton", void 0);
     tslib_1.__decorate([
         ContentChild(CellTemplateDirective, { static: false }),
         tslib_1.__metadata("design:type", CellTemplateDirective)
@@ -1077,6 +1176,21 @@ var DatePickerComponent = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", Boolean)
     ], DatePickerComponent.prototype, "weekNumber", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], DatePickerComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], DatePickerComponent.prototype, "rounded", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], DatePickerComponent.prototype, "fillMode", null);
     tslib_1.__decorate([
         Output(),
         tslib_1.__metadata("design:type", EventEmitter)
@@ -1098,12 +1212,12 @@ var DatePickerComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", EventEmitter)
     ], DatePickerComponent.prototype, "close", void 0);
     tslib_1.__decorate([
-        HostBinding('class.k-widget'),
         HostBinding('class.k-datepicker'),
+        HostBinding('class.k-input'),
         tslib_1.__metadata("design:type", Boolean)
     ], DatePickerComponent.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", [])
     ], DatePickerComponent.prototype, "disabledClass", null);
@@ -1124,7 +1238,7 @@ var DatePickerComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-datepicker',
-            template: "\n        <ng-container kendoDatePickerLocalizedMessages\n            i18n-today=\"kendo.datepicker.today|The label for the today button in the calendar header\"\n            today=\"Today\"\n\n            i18n-toggle=\"kendo.datepicker.toggle|The title of the toggle button in the datepicker component\"\n            toggle=\"Toggle calendar\"\n\n            i18n-prevButtonTitle=\"kendo.datepicker.prevButtonTitle|The title of the previous button in the Classic calendar\"\n            prevButtonTitle=\"Navigate to previous view\"\n\n            i18n-nextButtonTitle=\"kendo.datepicker.nextButtonTitle|The title of the next button in the Classic calendar\"\n            nextButtonTitle=\"Navigate to next view\"\n        >\n        </ng-container>\n        <span #wrapper\n            class=\"k-picker-wrap\"\n            [class.k-state-disabled]=\"disabled\"\n        >\n            <kendo-dateinput\n                #input\n                [role]=\"inputRole\"\n                [focusableId]=\"focusableId\"\n                [hasPopup]=\"true\"\n                [isPopupOpen]=\"show\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly || readOnlyInput\"\n                [ariaReadOnly]=\"readonly\"\n                [tabindex]=\"tabindex\"\n                [title]=\"title\"\n                [format]=\"format\"\n                [twoDigitYearMax]=\"twoDigitYearMax\"\n                [formatPlaceholder]=\"formatPlaceholder\"\n                [placeholder]=\"placeholder\"\n                [min]=\"min\"\n                [max]=\"max\"\n                [incompleteDateValidation]=\"incompleteDateValidation\"\n                [value]=\"value\"\n                (valueChange)=\"handleInputChange($event)\"\n            ></kendo-dateinput>\n            <span class=\"k-select\"\n                role=\"button\"\n                [attr.title]=\"localization.get('toggle')\"\n                [attr.aria-label]=\"localization.get('toggle')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleIconClick,\n                    mousedown: handleMousedown\n                }\"\n                [scope]=\"this\"\n            >\n                <span class=\"k-icon k-i-calendar\"></span>\n            </span>\n        </span>\n        <ng-container #container></ng-container>\n        <ng-template #popupTemplate>\n            <kendo-calendar\n                #calendar\n                [type]=\"calendarType\"\n                [min]=\"min\"\n                [max]=\"max\"\n                [navigation]=\"navigation\"\n                [animateNavigation]=\"animateCalendarNavigation\"\n                [activeView]=\"activeView\"\n                [bottomView]=\"bottomView\"\n                [topView]=\"topView\"\n                [weekNumber]=\"weekNumber\"\n                [cellTemplate]=\"cellTemplate\"\n                [monthCellTemplate]=\"monthCellTemplate\"\n                [yearCellTemplate]=\"yearCellTemplate\"\n                [decadeCellTemplate]=\"decadeCellTemplate\"\n                [centuryCellTemplate]=\"centuryCellTemplate\"\n                [weekNumberTemplate]=\"weekNumberTemplate\"\n                [headerTitleTemplate]=\"headerTitleTemplate\"\n                [navigationItemTemplate]=\"navigationItemTemplate\"\n                [focusedDate]=\"focusedDate\"\n                [value]=\"value\"\n                (valueChange)=\"handleChange(mergeTime($event))\"\n                [kendoEventsOutsideAngular]=\"{\n                    keydown: handleKeydown\n                }\"\n                [scope]=\"this\"\n                [disabledDates]=\"disabledDates\"\n            >\n                <kendo-calendar-messages\n                    [today]=\"localization.get('today')\"\n                    [prevButtonTitle]=\"localization.get('prevButtonTitle')\"\n                    [nextButtonTitle]=\"localization.get('nextButtonTitle')\"\n                >\n                </kendo-calendar-messages>\n            </kendo-calendar>\n        <ng-template>\n    "
+            template: "\n        <ng-container kendoDatePickerLocalizedMessages\n            i18n-today=\"kendo.datepicker.today|The label for the today button in the calendar header\"\n            today=\"Today\"\n\n            i18n-toggle=\"kendo.datepicker.toggle|The title of the toggle button in the datepicker component\"\n            toggle=\"Toggle calendar\"\n\n            i18n-prevButtonTitle=\"kendo.datepicker.prevButtonTitle|The title of the previous button in the Classic calendar\"\n            prevButtonTitle=\"Navigate to previous view\"\n\n            i18n-nextButtonTitle=\"kendo.datepicker.nextButtonTitle|The title of the next button in the Classic calendar\"\n            nextButtonTitle=\"Navigate to next view\"\n        >\n        </ng-container>\n        <kendo-dateinput\n            #input\n            [role]=\"inputRole\"\n            [focusableId]=\"focusableId\"\n            [hasPopup]=\"true\"\n            [isPopupOpen]=\"show\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly || readOnlyInput\"\n            [ariaReadOnly]=\"readonly\"\n            [tabindex]=\"tabindex\"\n            [title]=\"title\"\n            [format]=\"format\"\n            [twoDigitYearMax]=\"twoDigitYearMax\"\n            [formatPlaceholder]=\"formatPlaceholder\"\n            [placeholder]=\"placeholder\"\n            [min]=\"min\"\n            [max]=\"max\"\n            [incompleteDateValidation]=\"incompleteDateValidation\"\n            [fillMode]=\"null\"\n            [rounded]=\"null\"\n            [size]=\"null\"\n            [value]=\"value\"\n            (valueChange)=\"handleInputChange($event)\"\n        ></kendo-dateinput>\n        <button\n            #toggleButton\n            type=\"button\"\n            class=\"k-input-button k-button k-icon-button\"\n            [tabindex]=\"-1\"\n            [attr.title]=\"localization.get('toggle')\"\n            [attr.aria-label]=\"localization.get('toggle')\"\n            [kendoEventsOutsideAngular]=\"{\n                click: handleIconClick,\n                mousedown: handleMousedown\n            }\"\n            [scope]=\"this\"\n        >\n            <span class=\"k-button-icon k-icon k-i-calendar\"></span>\n        </button>\n        <ng-container #container></ng-container>\n        <ng-template #popupTemplate>\n            <kendo-calendar\n                #calendar\n                [type]=\"calendarType\"\n                [min]=\"min\"\n                [max]=\"max\"\n                [navigation]=\"navigation\"\n                [animateNavigation]=\"animateCalendarNavigation\"\n                [activeView]=\"activeView\"\n                [bottomView]=\"bottomView\"\n                [topView]=\"topView\"\n                [weekNumber]=\"weekNumber\"\n                [cellTemplate]=\"cellTemplate\"\n                [monthCellTemplate]=\"monthCellTemplate\"\n                [yearCellTemplate]=\"yearCellTemplate\"\n                [decadeCellTemplate]=\"decadeCellTemplate\"\n                [centuryCellTemplate]=\"centuryCellTemplate\"\n                [weekNumberTemplate]=\"weekNumberTemplate\"\n                [headerTitleTemplate]=\"headerTitleTemplate\"\n                [navigationItemTemplate]=\"navigationItemTemplate\"\n                [focusedDate]=\"focusedDate\"\n                [value]=\"value\"\n                (valueChange)=\"handleChange(mergeTime($event))\"\n                [kendoEventsOutsideAngular]=\"{\n                    keydown: handleKeydown\n                }\"\n                [scope]=\"this\"\n                [disabledDates]=\"disabledDates\"\n            >\n                <kendo-calendar-messages\n                    [today]=\"localization.get('today')\"\n                    [prevButtonTitle]=\"localization.get('prevButtonTitle')\"\n                    [nextButtonTitle]=\"localization.get('nextButtonTitle')\"\n                >\n                </kendo-calendar-messages>\n            </kendo-calendar>\n        <ng-template>\n    "
         }),
         tslib_1.__param(9, Optional()), tslib_1.__param(9, Inject(TOUCH_ENABLED)),
         tslib_1.__metadata("design:paramtypes", [NgZone,

package/dist/es/daterange/date-range-input.js

@@ -123,7 +123,7 @@ var DateRangeInput = /** @class */ (function () {
         var action = show ? 'addClass' : 'removeClass';
         var nativeElement = this.element.nativeElement;
         if (nativeElement && nativeElement.querySelector) {
-            this.renderer[action](nativeElement.querySelector('.k-dateinput-wrap'), 'k-state-focused');
+            this.renderer[action](nativeElement, 'k-focus');
         }
     };
     return DateRangeInput;