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

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

@@ -93,8 +93,9 @@ var TimeListComponent = /** @class */ (function () {
         this.dom.ensureHeights();
         this.itemHeight = this.dom.itemHeight;
         this.listHeight = this.dom.timeListHeight;
-        this.topOffset = (this.listHeight - this.itemHeight) / 2;
-        this.bottomOffset = this.listHeight - this.itemHeight;
+        var titleHeight = this.dom.timeListTitleHeight;
+        this.topOffset = (this.listHeight - this.itemHeight - titleHeight) / 2;
+        this.bottomOffset = this.listHeight - this.itemHeight - titleHeight;
         this.topThreshold = this.itemHeight * SNAP_THRESHOLD;
         this.bottomThreshold = this.itemHeight * (1 - SNAP_THRESHOLD);
         var translate = "translateY(" + this.topOffset + "px)";

package/dist/es/timepicker/timepicker.component.js

@@ -17,7 +17,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';
@@ -29,12 +29,12 @@ var formatRegExp = new RegExp(TIME_PART.hour + "|" + TIME_PART.minute + "|" + TI
  * Represents the [Kendo UI TimePicker component for Angular]({% slug overview_timepicker %}#toc-basic-usage).
  */
 var TimePickerComponent = /** @class */ (function () {
-    function TimePickerComponent(zone, localization, cdr, popupService, element, renderer, injector, pickerService, intl, touchEnabled) {
+    function TimePickerComponent(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;
@@ -196,6 +196,9 @@ var TimePickerComponent = /** @class */ (function () {
         this._value = null;
         this._active = false;
         this.domEvents = [];
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         validatePackage(packageMetadata);
         this.pickerSubscriptions = this.pickerService.onFocus.subscribe(this.handleFocus.bind(this));
         this.pickerSubscriptions.add(this.pickerService.onBlur.subscribe(this.handleBlur.bind(this)));
@@ -306,6 +309,85 @@ var TimePickerComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(TimePickerComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * Sets the size of the component.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (Default)
+         * * `'large'`
+         * * `null`
+         *
+         */
+        set: function (size) {
+            this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
+            this.renderer.removeClass(this.toggleButton.nativeElement, getSizeClass('input', this.size));
+            if (size) {
+                this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
+                this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('input', size));
+            }
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TimePickerComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * Sets the border radius of the component.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (Default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
+         *
+         */
+        set: function (rounded) {
+            this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+            if (rounded) {
+                this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+            }
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TimePickerComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * Sets the fillMode of the component.
+         *
+         * The possible values are:
+         * * `'solid'` (Default)
+         * * `'flat'`
+         * * `'outline'`
+         * * `null`
+         *
+         */
+        set: function (fillMode) {
+            this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
+            this.renderer.removeClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
+            this.renderer.removeClass(this.toggleButton.nativeElement, "k-button-" + this.fillMode + "-base");
+            if (fillMode) {
+                this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
+                this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', fillMode));
+                this.renderer.addClass(this.toggleButton.nativeElement, "k-button-" + fillMode + "-base");
+            }
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(TimePickerComponent.prototype, "disabledClass", {
         /**
          * @hidden
@@ -337,10 +419,10 @@ var TimePickerComponent = /** @class */ (function () {
             }
             var element = this.wrapper.nativeElement;
             if (value) {
-                this.renderer.addClass(element, 'k-state-focused');
+                this.renderer.addClass(element, 'k-focus');
             }
             else {
-                this.renderer.removeClass(element, 'k-state-focused');
+                this.renderer.removeClass(element, 'k-focus');
             }
         },
         enumerable: true,
@@ -397,13 +479,19 @@ var TimePickerComponent = /** @class */ (function () {
         this.localizationChangeSubscription = this.localization
             .changes.subscribe(function () { return _this.cdr.markForCheck(); });
         this.control = this.injector.get(NgControl, null);
-        if (this.element) {
-            this.renderer.removeAttribute(this.element.nativeElement, 'tabindex');
+        if (this.wrapper) {
+            this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
             this.zone.runOutsideAngular(function () {
                 _this.bindEvents();
             });
         }
     };
+    /**
+     * @hidden
+     */
+    TimePickerComponent.prototype.ngAfterViewInit = function () {
+        this.setComponentClasses();
+    };
     /**
      * @hidden
      */
@@ -716,7 +804,7 @@ var TimePickerComponent = /** @class */ (function () {
         }
     };
     TimePickerComponent.prototype.bindEvents = function () {
-        var element = this.element.nativeElement;
+        var element = this.wrapper.nativeElement;
         this.domEvents.push(this.renderer.listen(element, 'keydown', this.handleKeydown.bind(this)));
         if (isWindowAvailable()) {
             this.windowBlurSubscription = fromEvent(window, 'blur').subscribe(this.handleWindowBlur.bind(this));
@@ -768,6 +856,20 @@ var TimePickerComponent = /** @class */ (function () {
         this.cdr.markForCheck();
         this.zone.run(function () { return _this.onValidatorChange(); });
     };
+    TimePickerComponent.prototype.setComponentClasses = function () {
+        if (this.size) {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
+            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('button', this.size));
+        }
+        if (this.rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        }
+        if (this.fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, "k-button-" + this.fillMode + "-base");
+        }
+    };
     var TimePickerComponent_1;
     tslib_1.__decorate([
         ViewChild('container', { read: ViewContainerRef, static: false }),
@@ -778,9 +880,9 @@ var TimePickerComponent = /** @class */ (function () {
         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)
@@ -863,6 +965,21 @@ var TimePickerComponent = /** @class */ (function () {
         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)
@@ -884,12 +1001,12 @@ var TimePickerComponent = /** @class */ (function () {
         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);
@@ -909,7 +1026,7 @@ var TimePickerComponent = /** @class */ (function () {
                 PickerService
             ],
             selector: 'kendo-timepicker',
-            template: "\n        <ng-container kendoTimePickerLocalizedMessages\n            i18n-accept=\"kendo.timepicker.accept|The Accept button text in the timepicker component\"\n            accept=\"Set\"\n\n            i18n-acceptLabel=\"kendo.timepicker.acceptLabel|The label for the Accept button in the timepicker component\"\n            acceptLabel=\"Set time\"\n\n            i18n-cancel=\"kendo.timepicker.cancel|The Cancel button text in the timepicker component\"\n            cancel=\"Cancel\"\n\n            i18n-cancelLabel=\"kendo.timepicker.cancelLabel|The label for the Cancel button in the timepicker component\"\n            cancelLabel=\"Cancel changes\"\n\n            i18n-now=\"kendo.timepicker.now|The Now button text in the timepicker component\"\n            now=\"Now\"\n\n            i18n-nowLabel=\"kendo.timepicker.nowLabel|The label for the Now button in the timepicker component\"\n            nowLabel=\"Select now\"\n\n            i18n-toggle=\"kendo.timepicker.toggle|The label for the toggle button in the timepicker component\"\n            toggle=\"Toggle time list\"\n        >\n        </ng-container>\n        <span #wrapper\n            class=\"k-picker-wrap\"\n            [class.k-state-disabled]=\"disabled\"\n        >\n            <kendo-dateinput\n                #input\n                [focusableId]=\"focusableId\"\n                [hasPopup]=\"true\"\n                [isPopupOpen]=\"show\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly || readOnlyInput\"\n                [role]=\"inputRole\"\n                [ariaReadOnly]=\"readonly\"\n                [format]=\"format\"\n                [formatPlaceholder]=\"formatPlaceholder\"\n                [placeholder]=\"placeholder\"\n                [min]=\"normalizeTime(min)\"\n                [max]=\"normalizeTime(max)\"\n                [incompleteDateValidation]=\"incompleteDateValidation\"\n                [steps]=\"steps\"\n                [tabindex]=\"!show ? tabindex : -1\"\n                [title]=\"title\"\n                [value]=\"value\"\n                (valueChange)=\"handleInputChange($event)\"\n            ></kendo-dateinput>\n            <span class=\"k-select\"\n                role=\"button\"\n                [attr.title]=\"localization.get('toggle')\"\n                [attr.aria-label]=\"localization.get('toggle')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleIconClick,\n                    mousedown: handleMousedown\n                }\"\n                [scope]=\"this\"\n            >\n                <span class=\"k-icon k-i-clock\"></span>\n            </span>\n            <ng-template #popupTemplate>\n                <kendo-timeselector\n                    #timeSelector\n                    [cancelButton]=\"cancelButton\"\n                    [nowButton]=\"nowButton\"\n                    [format]=\"format\"\n                    [min]=\"min\"\n                    [max]=\"max\"\n                    [steps]=\"steps\"\n                    [value]=\"value\"\n                    [kendoEventsOutsideAngular]=\"{\n                        keydown: handleKeydown,\n                        mousedown: handleMousedown\n                    }\"\n                    [scope]=\"this\"\n                    (valueChange)=\"handleChange($event)\"\n                    (valueReject)=\"handleReject()\"\n                >\n                    <kendo-timeselector-messages\n                        [acceptLabel]=\"localization.get('acceptLabel')\"\n                        [accept]=\"localization.get('accept')\"\n                        [cancelLabel]=\"localization.get('cancelLabel')\"\n                        [cancel]=\"localization.get('cancel')\"\n                        [nowLabel]=\"localization.get('nowLabel')\"\n                        [now]=\"localization.get('now')\"\n                    >\n                    </kendo-timeselector-messages>\n                </kendo-timeselector>\n            </ng-template>\n        </span>\n        <ng-container #container></ng-container>\n    "
+            template: "\n        <ng-container kendoTimePickerLocalizedMessages\n            i18n-accept=\"kendo.timepicker.accept|The Accept button text in the timepicker component\"\n            accept=\"Set\"\n\n            i18n-acceptLabel=\"kendo.timepicker.acceptLabel|The label for the Accept button in the timepicker component\"\n            acceptLabel=\"Set time\"\n\n            i18n-cancel=\"kendo.timepicker.cancel|The Cancel button text in the timepicker component\"\n            cancel=\"Cancel\"\n\n            i18n-cancelLabel=\"kendo.timepicker.cancelLabel|The label for the Cancel button in the timepicker component\"\n            cancelLabel=\"Cancel changes\"\n\n            i18n-now=\"kendo.timepicker.now|The Now button text in the timepicker component\"\n            now=\"Now\"\n\n            i18n-nowLabel=\"kendo.timepicker.nowLabel|The label for the Now button in the timepicker component\"\n            nowLabel=\"Select now\"\n\n            i18n-toggle=\"kendo.timepicker.toggle|The label for the toggle button in the timepicker component\"\n            toggle=\"Toggle time list\"\n        >\n        </ng-container>\n        <kendo-dateinput\n            #input\n            [focusableId]=\"focusableId\"\n            [hasPopup]=\"true\"\n            [isPopupOpen]=\"show\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly || readOnlyInput\"\n            [role]=\"inputRole\"\n            [ariaReadOnly]=\"readonly\"\n            [format]=\"format\"\n            [formatPlaceholder]=\"formatPlaceholder\"\n            [placeholder]=\"placeholder\"\n            [min]=\"normalizeTime(min)\"\n            [max]=\"normalizeTime(max)\"\n            [incompleteDateValidation]=\"incompleteDateValidation\"\n            [fillMode]=\"fillMode\"\n            [rounded]=\"rounded\"\n            [size]=\"size\"\n            [steps]=\"steps\"\n            [tabindex]=\"!show ? tabindex : -1\"\n            [title]=\"title\"\n            [value]=\"value\"\n            (valueChange)=\"handleInputChange($event)\"\n        ></kendo-dateinput>\n        <button\n            #toggleButton\n            type=\"button\"\n            class=\"k-input-button k-button k-icon-button\"\n            [attr.title]=\"localization.get('toggle')\"\n            [attr.aria-label]=\"localization.get('toggle')\"\n            [kendoEventsOutsideAngular]=\"{\n                click: handleIconClick,\n                mousedown: handleMousedown\n            }\"\n            [scope]=\"this\"\n        >\n            <span class=\"k-button-icon k-icon k-i-clock\"></span>\n        </button>\n        <ng-template #popupTemplate>\n            <kendo-timeselector\n                #timeSelector\n                [cancelButton]=\"cancelButton\"\n                [nowButton]=\"nowButton\"\n                [format]=\"format\"\n                [min]=\"min\"\n                [max]=\"max\"\n                [steps]=\"steps\"\n                [value]=\"value\"\n                [kendoEventsOutsideAngular]=\"{\n                    keydown: handleKeydown,\n                    mousedown: handleMousedown\n                }\"\n                [scope]=\"this\"\n                (valueChange)=\"handleChange($event)\"\n                (valueReject)=\"handleReject()\"\n            >\n                <kendo-timeselector-messages\n                    [acceptLabel]=\"localization.get('acceptLabel')\"\n                    [accept]=\"localization.get('accept')\"\n                    [cancelLabel]=\"localization.get('cancelLabel')\"\n                    [cancel]=\"localization.get('cancel')\"\n                    [nowLabel]=\"localization.get('nowLabel')\"\n                    [now]=\"localization.get('now')\"\n                >\n                </kendo-timeselector-messages>\n            </kendo-timeselector>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
         }),
         tslib_1.__param(9, Optional()), tslib_1.__param(9, Inject(TOUCH_ENABLED)),
         tslib_1.__metadata("design:paramtypes", [NgZone,

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

@@ -414,7 +414,7 @@ var TimeSelectorComponent = /** @class */ (function () {
         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);
@@ -475,7 +475,7 @@ var TimeSelectorComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-timeselector',
-            template: "\n        <ng-container kendoTimeSelectorLocalizedMessages\n            i18n-accept=\"kendo.timeselector.accept|The Accept button text in the timeselector component\"\n            accept=\"Set\"\n\n            i18n-acceptLabel=\"kendo.timeselector.acceptLabel|The label for the Accept button in the timeselector component\"\n            acceptLabel=\"Set time\"\n\n            i18n-cancel=\"kendo.timeselector.cancel|The Cancel button text in the timeselector component\"\n            cancel=\"Cancel\"\n\n            i18n-cancelLabel=\"kendo.timeselector.cancelLabel|The label for the Cancel button in the timeselector component\"\n            cancelLabel=\"Cancel changes\"\n\n            i18n-now=\"kendo.timeselector.now|The Now button text in the timeselector component\"\n            now=\"Now\"\n\n            i18n-nowLabel=\"kendo.timeselector.nowLabel|The label for the Now button in the timeselector component\"\n            nowLabel=\"Select now\"\n        >\n        </ng-container>\n        <div class=\"k-time-header\">\n            <span class=\"k-title k-timeselector-title\">\n                {{ intl.formatDate(current, format) }}\n            </span>\n            <button\n                #now\n                *ngIf=\"showNowButton\"\n                class=\"k-button k-flat k-time-now\" type=\"button\"\n                [attr.title]=\"localization.get('nowLabel')\"\n                [attr.aria-label]=\"localization.get('nowLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleNow,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('now')}}</button>\n        </div>\n        <div class=\"k-time-list-container\">\n            <span class=\"k-time-highlight\"></span>\n            <ng-template ngFor [ngForOf]=\"dateFormatParts\" let-part let-idx=\"index\">\n                <div\n                    #listWrapper\n                    class=\"k-time-list-wrapper\"\n                    role=\"presentation\" tabindex=\"-1\"\n                    *ngIf=\"part.type !== 'literal'\"\n                >\n                    <span class=\"k-title k-timeselector-title\">{{intl.dateFieldName(part)}}</span>\n                    <kendo-timelist\n                        [min]=\"min\"\n                        [max]=\"max\"\n                        [part]=\"part\"\n                        [step]=\"partStep(part)\"\n                        [disabled]=\"disabled\"\n                        [(value)]=\"current\"\n                        [kendoEventsOutsideAngular]=\"{\n                            focus: handleListFocus,\n                            blur: handleBlur\n                        }\"\n                        [scope]=\"this\"\n                        [attr.data-timelist-index]=\"idx\"\n                    ></kendo-timelist>\n                </div>\n                <div class=\"k-time-separator\" *ngIf=\"part.type === 'literal'\">\n                    {{part.pattern}}\n                </div>\n            </ng-template>\n        </div>\n        <div class=\"k-time-footer k-action-buttons\" *ngIf=\"setButton || cancelButton\">\n            <button\n                #cancel\n                *ngIf=\"cancelButton\"\n                class=\"k-button k-time-cancel\" type=\"button\"\n                [attr.title]=\"localization.get('cancelLabel')\"\n                [attr.aria-label]=\"localization.get('cancelLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleReject,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('cancel')}}</button>\n            <button\n                #accept\n                *ngIf=\"setButton\"\n                type=\"button\"\n                class=\"k-time-accept k-button k-primary\"\n                [attr.title]=\"localization.get('acceptLabel')\"\n                [attr.aria-label]=\"localization.get('acceptLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleAccept,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('accept')}}</button>\n        </div>\n    "
+            template: "\n        <ng-container kendoTimeSelectorLocalizedMessages\n            i18n-accept=\"kendo.timeselector.accept|The Accept button text in the timeselector component\"\n            accept=\"Set\"\n\n            i18n-acceptLabel=\"kendo.timeselector.acceptLabel|The label for the Accept button in the timeselector component\"\n            acceptLabel=\"Set time\"\n\n            i18n-cancel=\"kendo.timeselector.cancel|The Cancel button text in the timeselector component\"\n            cancel=\"Cancel\"\n\n            i18n-cancelLabel=\"kendo.timeselector.cancelLabel|The label for the Cancel button in the timeselector component\"\n            cancelLabel=\"Cancel changes\"\n\n            i18n-now=\"kendo.timeselector.now|The Now button text in the timeselector component\"\n            now=\"Now\"\n\n            i18n-nowLabel=\"kendo.timeselector.nowLabel|The label for the Now button in the timeselector component\"\n            nowLabel=\"Select now\"\n        >\n        </ng-container>\n        <div class=\"k-time-header\">\n            <span class=\"k-title k-timeselector-title\">\n                {{ intl.formatDate(current, format) }}\n            </span>\n            <button\n                #now\n                *ngIf=\"showNowButton\"\n                type=\"button\"\n                class=\"k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-time-now\"\n                [attr.title]=\"localization.get('nowLabel')\"\n                [attr.aria-label]=\"localization.get('nowLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleNow,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('now')}}</button>\n        </div>\n        <div class=\"k-time-list-container\">\n            <span class=\"k-time-highlight\"></span>\n            <ng-template ngFor [ngForOf]=\"dateFormatParts\" let-part let-idx=\"index\">\n                <div\n                    #listWrapper\n                    class=\"k-time-list-wrapper\"\n                    role=\"presentation\" tabindex=\"-1\"\n                    *ngIf=\"part.type !== 'literal'\"\n                >\n                    <span class=\"k-title k-timeselector-title\">{{intl.dateFieldName(part)}}</span>\n                    <kendo-timelist\n                        [min]=\"min\"\n                        [max]=\"max\"\n                        [part]=\"part\"\n                        [step]=\"partStep(part)\"\n                        [disabled]=\"disabled\"\n                        [(value)]=\"current\"\n                        [kendoEventsOutsideAngular]=\"{\n                            focus: handleListFocus,\n                            blur: handleBlur\n                        }\"\n                        [scope]=\"this\"\n                        [attr.data-timelist-index]=\"idx\"\n                    ></kendo-timelist>\n                </div>\n                <div class=\"k-time-separator\" *ngIf=\"part.type === 'literal'\">\n                    {{part.pattern}}\n                </div>\n            </ng-template>\n        </div>\n        <div class=\"k-time-footer k-action-buttons k-actions k-hstack k-justify-content-stretch\" *ngIf=\"setButton || cancelButton\">\n            <button\n                #cancel\n                *ngIf=\"cancelButton\"\n                class=\"k-button k-time-cancel k-button-md k-rounded-md k-button-solid k-button-solid-base\"\n                type=\"button\"\n                [attr.title]=\"localization.get('cancelLabel')\"\n                [attr.aria-label]=\"localization.get('cancelLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleReject,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('cancel')}}</button>\n            <button\n                #accept\n                *ngIf=\"setButton\"\n                type=\"button\"\n                class=\"k-button k-time-accept k-button-md k-rounded-md k-button-solid k-button-solid-primary\"\n                [attr.title]=\"localization.get('acceptLabel')\"\n                [attr.aria-label]=\"localization.get('acceptLabel')\"\n                [kendoEventsOutsideAngular]=\"{\n                    click: handleAccept,\n                    focus: handleFocus,\n                    blur: handleBlur\n                }\"\n                [scope]=\"this\"\n                [disabled]=\"disabled\"\n            >{{localization.get('accept')}}</button>\n        </div>\n    "
         }),
         tslib_1.__param(7, Optional()),
         tslib_1.__metadata("design:paramtypes", [LocalizationService,

package/dist/es/util.js

@@ -355,4 +355,41 @@ export var isTabExitingCalendar = function (calendarType, focusedElement, shiftK
         (!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 var getSizeClass = function (component, size) {
+    var SIZE_CLASSES = {
+        'small': "k-" + component + "-sm",
+        'medium': "k-" + component + "-md",
+        'large': "k-" + component + "-lg"
+    };
+    return SIZE_CLASSES[size];
+};
+/**
+ * @hidden
+ * Returns the rounded class based on the rounded input.
+ */
+export var getRoundedClass = function (rounded) {
+    var ROUNDED_CLASSES = {
+        'small': 'k-rounded-sm',
+        'medium': 'k-rounded-md',
+        'large': 'k-rounded-lg',
+        'full': 'k-rounded-full'
+    };
+    return ROUNDED_CLASSES[rounded];
+};
+/**
+ * @hidden
+ * Return the fillMode class based on the component and fillMode input.
+ */
+export var getFillModeClass = function (component, fillMode) {
+    var FILLMODE_CLASSES = {
+        'solid': "k-" + component + "-solid",
+        'flat': "k-" + component + "-flat",
+        'outline': "k-" + component + "-outline"
+    };
+    return FILLMODE_CLASSES[fillMode];
+};
 export { ɵ0, ɵ1, ɵ2 };

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

@@ -388,6 +388,13 @@ export declare class CalendarComponent implements ControlValueAccessor, OnChange
      * @hidden
      */
     activeCellTemplate(): any;
+    /**
+     * @hidden
+     */
+    handleNavigate(event: {
+        focusedDate: Date;
+        activeView: CalendarView;
+    }): void;
     /**
      * @hidden
      */

package/dist/es2015/calendar/calendar.component.js

@@ -600,6 +600,14 @@ let CalendarComponent = class CalendarComponent {
                 return null;
         }
     }
+    /**
+     * @hidden
+     */
+    handleNavigate(event) {
+        this.focusedDate = event.focusedDate;
+        this.activeView = event.activeView;
+        this.emitNavigate(this.focusedDate);
+    }
     /**
      * @hidden
      */
@@ -738,6 +746,10 @@ let CalendarComponent = class CalendarComponent {
         }
     }
     handleKeydown(args) {
+        const headerActive = this.type === 'classic' && this.multiViewCalendar.isHeaderActive;
+        if (headerActive) {
+            return;
+        }
         // reserve the alt + arrow key commands for the picker
         const arrowKeyPressed = [Keys.ArrowUp, Keys.ArrowRight, Keys.ArrowDown, Keys.ArrowLeft].indexOf(args.keyCode) !== -1;
         if (isPresent(this.pickerService) && arrowKeyPressed && args.altKey) {
@@ -987,7 +999,7 @@ tslib_1.__decorate([
 ], 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);
@@ -1083,7 +1095,7 @@ CalendarComponent = tslib_1.__decorate([
             [value]="value"
             [disabledDates]="disabledDates"
             (activeViewChange)="handleActiveViewChange($event)"
-            (navigate)="navigate.emit($event)"
+            (navigate)="handleNavigate($event)"
             (valueChange)="handleMultiViewCalendarValueChange($event, multiviewcalendar.focusedDate)"
             (focus)="handleFocus()"
             (blur)="handleBlur($event)"

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

@@ -159,7 +159,7 @@ HeaderComponent = tslib_1.__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
         }"
@@ -175,7 +175,7 @@ HeaderComponent = tslib_1.__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"
@@ -186,7 +186,7 @@ HeaderComponent = tslib_1.__decorate([
         </button>
         <span
             class="k-today k-nav-today"
-            [class.k-state-disabled]="!todayAvailable"
+            [class.k-disabled]="!todayAvailable"
             [kendoEventsOutsideAngular]="{
                 click: handleTodayClick
             }"
@@ -196,7 +196,7 @@ HeaderComponent = tslib_1.__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"

package/dist/es2015/calendar/multiview-calendar.component.d.ts

@@ -24,6 +24,7 @@ import { CalendarViewEnum } from './models/view.enum';
 import { SelectionRangeEnd } from './models/selection-range-end.type';
 import { SelectionRange } from './models/selection-range.interface';
 import { CalendarSelection } from './models/selection';
+import { PickerService } from '../common/picker.service';
 /**
  * @hidden
  */
@@ -55,6 +56,7 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
     private zone;
     private disabledDatesService;
     private selectionService;
+    private pickerService?;
     /**
      * @hidden
      */
@@ -308,7 +310,7 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
     /**
      * @hidden
      */
-    handleBlur(event: FocusEvent): void;
+    handleFocusout(event: any): void;
     /**
      * @hidden
      */
@@ -333,7 +335,7 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
      * @hidden
      */
     keydown(event: KeyDown): void;
-    constructor(bus: BusViewService, element: ElementRef, navigator: NavigationService, renderer: Renderer2, cdr: ChangeDetectorRef, zone: NgZone, disabledDatesService: DisabledDatesService, selectionService: SelectionService);
+    constructor(bus: BusViewService, element: ElementRef, navigator: NavigationService, renderer: Renderer2, cdr: ChangeDetectorRef, zone: NgZone, disabledDatesService: DisabledDatesService, selectionService: SelectionService, pickerService?: PickerService);
     ngOnInit(): void;
     ngOnChanges(changes: any): void;
     ngOnDestroy(): void;
@@ -358,6 +360,10 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
      * Blurs the Calendar component.
      */
     blur(): void;
+    /**
+     * @hidden
+     */
+    handleHeaderFocus(): void;
     /**
      * @hidden
      */

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

@@ -3,8 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-/* tslint:disable:no-forward-ref */
-import { Component, ChangeDetectorRef, ChangeDetectionStrategy, ContentChild, EventEmitter, ElementRef, Renderer2, isDevMode, forwardRef, HostBinding, HostListener, Input, Output, ViewChild, NgZone } from '@angular/core';
+import { Component, ChangeDetectorRef, ChangeDetectionStrategy, ContentChild, EventEmitter, ElementRef, Renderer2, isDevMode, forwardRef, HostBinding, HostListener, Input, Output, ViewChild, NgZone, Optional } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { cloneDate, isEqual } from '@progress/kendo-date-math';
@@ -31,6 +30,7 @@ import { MIN_DATE, MAX_DATE } from '../defaults';
 import { areDatesEqual, dateInRange, getToday, hasExistingValue, last, noop } from '../util';
 import { Subscription } from 'rxjs';
 import { isPresent } from '../common/utils';
+import { PickerService } from '../common/picker.service';
 const BOTTOM_VIEW_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent/#toc-bottomview';
 const TOP_VIEW_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent/#toc-topview';
 const MIN_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent/#toc-min';
@@ -67,7 +67,7 @@ export const RANGE_CALENDAR_RANGE_VALIDATORS = {
  * ```
  */
 let MultiViewCalendarComponent = class MultiViewCalendarComponent {
-    constructor(bus, element, navigator, renderer, cdr, zone, disabledDatesService, selectionService) {
+    constructor(bus, element, navigator, renderer, cdr, zone, disabledDatesService, selectionService, pickerService) {
         this.bus = bus;
         this.element = element;
         this.navigator = navigator;
@@ -76,6 +76,7 @@ let MultiViewCalendarComponent = class MultiViewCalendarComponent {
         this.zone = zone;
         this.disabledDatesService = disabledDatesService;
         this.selectionService = selectionService;
+        this.pickerService = pickerService;
         /**
          * @hidden
          */
@@ -362,21 +363,22 @@ let MultiViewCalendarComponent = class MultiViewCalendarComponent {
     /**
      * @hidden
      */
-    handleBlur(event) {
-        const target = event.target;
-        if (!this.element.nativeElement.contains(event.relatedTarget)) {
+    handleFocusout(event) {
+        const relatedTarget = event.relatedTarget;
+        if (!this.element.nativeElement.contains(relatedTarget)) {
             this.blurEvent.emit(event);
             this.onControlTouched();
         }
         this.isActive = false;
         this.isHovered = false; //ensure that hovered is also not active
-        this.isHeaderActive = this.headerElement.nativeElement.contains(target);
+        this.isHeaderActive = this.headerElement.nativeElement.contains(relatedTarget);
     }
     /**
      * @hidden
      */
     handleFocus() {
         this.isActive = true;
+        this.isHeaderActive = false;
     }
     /**
      * @hidden
@@ -409,7 +411,13 @@ let MultiViewCalendarComponent = class MultiViewCalendarComponent {
      * @hidden
      */
     keydown(event) {
+        if (this.isHeaderActive) {
+            return;
+        }
         if (event.keyCode === Keys.Enter) {
+            if (isPresent(this.pickerService)) {
+                event.preventDefault(); // Don't submit form from Datepicker popup
+            }
             this.performSelection(this.focusedDate, event);
         }
         const candidate = dateInRange(this.navigator.move(this.focusedDate, this.navigator.action(event), this.activeViewEnum), this.min, this.max);
@@ -484,6 +492,12 @@ let MultiViewCalendarComponent = class MultiViewCalendarComponent {
         }
         this.element.nativeElement.blur();
     }
+    /**
+     * @hidden
+     */
+    handleHeaderFocus() {
+        this.isHeaderActive = true;
+    }
     /**
      * @hidden
      */
@@ -890,7 +904,7 @@ tslib_1.__decorate([
 ], 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);
@@ -902,9 +916,9 @@ tslib_1.__decorate([
 tslib_1.__decorate([
     HostListener('focusout', ['$event']),
     tslib_1.__metadata("design:type", Function),
-    tslib_1.__metadata("design:paramtypes", [FocusEvent]),
+    tslib_1.__metadata("design:paramtypes", [Object]),
     tslib_1.__metadata("design:returntype", void 0)
-], MultiViewCalendarComponent.prototype, "handleBlur", null);
+], MultiViewCalendarComponent.prototype, "handleFocusout", null);
 tslib_1.__decorate([
     HostListener("focus"),
     tslib_1.__metadata("design:type", Function),
@@ -984,6 +998,10 @@ MultiViewCalendarComponent = tslib_1.__decorate([
         (todayButtonClick)="handleTodayButtonClick({ selectedDates: [$event], focusedDate: $event })"
         (prevButtonClick)="navigateView(prevView)"
         (nextButtonClick)="navigateView(nextView)"
+        [kendoEventsOutsideAngular]="{
+            focusin: handleHeaderFocus
+        }"
+        [scope]="this"
     >
     </kendo-calendar-header>
     <kendo-calendar-horizontal
@@ -1012,6 +1030,7 @@ MultiViewCalendarComponent = tslib_1.__decorate([
     </kendo-calendar-horizontal>
   `
     }),
+    tslib_1.__param(8, Optional()),
     tslib_1.__metadata("design:paramtypes", [BusViewService,
         ElementRef,
         NavigationService,
@@ -1019,6 +1038,7 @@ MultiViewCalendarComponent = tslib_1.__decorate([
         ChangeDetectorRef,
         NgZone,
         DisabledDatesService,
-        SelectionService])
+        SelectionService,
+        PickerService])
 ], MultiViewCalendarComponent);
 export { MultiViewCalendarComponent };

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

@@ -7,6 +7,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IntlModule } from '@progress/kendo-angular-intl';
 import { PopupModule } from '@progress/kendo-angular-popup';
+import { EventsModule } from '@progress/kendo-angular-common';
 import { CalendarCommonModule } from './calendar-common.module';
 import { TemplatesModule } from './templates.module';
 import { HorizontalViewListComponent } from './horizontal-view-list.component';
@@ -72,7 +73,14 @@ MultiViewCalendarModule = tslib_1.__decorate([
             CalendarCommonModule,
             TemplatesModule
         ],
-        imports: [CommonModule, CalendarCommonModule, IntlModule, TemplatesModule, PopupModule],
+        imports: [
+            CommonModule,
+            CalendarCommonModule,
+            IntlModule,
+            TemplatesModule,
+            PopupModule,
+            EventsModule
+        ],
         providers: [
             NavigationService,
             CenturyViewService,