@progress/kendo-angular-dateinputs 6.0.3 → 7.0.0-dev.202204191043

package/{dist/es2015 → esm2015}/datetimepicker/datetimepicker.component.js

@@ -2,15 +2,11 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
-var DateTimePickerComponent_1;
-import { Component, HostBinding, ViewChild, ElementRef, Input, isDevMode, TemplateRef, ChangeDetectorRef, Output, EventEmitter, NgZone, ViewContainerRef, forwardRef, ContentChild, Inject, ChangeDetectionStrategy, Renderer2 } from '@angular/core';
+import { Component, HostBinding, ViewChild, Input, isDevMode, TemplateRef, Output, EventEmitter, ViewContainerRef, forwardRef, ContentChild, Inject, ChangeDetectionStrategy } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { Subscription, fromEvent } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { cloneDate, isEqual, getDate } from '@progress/kendo-date-math';
-import { PopupService } from '@progress/kendo-angular-popup';
-import { IntlService } from '@progress/kendo-angular-intl';
 import { hasObservers, KendoInput, Keys, guid } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -18,7 +14,7 @@ import { packageMetadata } from '../package-metadata';
 import { PickerService } from '../common/picker.service';
 import { DisabledDatesService } from '../calendar/services/disabled-dates.service';
 import { isPresent } from '../common/utils';
-import { mergeDateAndTime, noop, lastMillisecondOfDate, isInRange, isValidRange, isWindowAvailable, getFillModeClass, getRoundedClass, getSizeClass } from '../util';
+import { mergeDateAndTime, noop, lastMillisecondOfDate, isInRange, isValidRange, isWindowAvailable, getFillModeClass, getRoundedClass, getSizeClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE } from '../util';
 import { PreventableEvent } from '../preventable-event';
 import { minValidator } from '../validators/min.validator';
 import { maxValidator } from '../validators/max.validator';
@@ -34,6 +30,20 @@ import { CenturyCellTemplateDirective } from '../calendar/templates/century-cell
 import { WeekNumberCellTemplateDirective } from '../calendar/templates/weeknumber-cell-template.directive';
 import { HeaderTitleTemplateDirective } from '../calendar/templates/header-title-template.directive';
 import { incompleteDateValidator } from '../validators/incomplete-date.validator';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-popup";
+import * as i2 from "@progress/kendo-angular-intl";
+import * as i3 from "../common/picker.service";
+import * as i4 from "@progress/kendo-angular-l10n";
+import * as i5 from "../calendar/services/disabled-dates.service";
+import * as i6 from "../dateinput/dateinput.component";
+import * as i7 from "../calendar/calendar.component";
+import * as i8 from "../calendar/localization/calendar-custom-messages.component";
+import * as i9 from "../timepicker/timeselector.component";
+import * as i10 from "../timepicker/localization/timeselector-custom-messages.component";
+import * as i11 from "./localization/localized-messages.directive";
+import * as i12 from "@progress/kendo-angular-common";
+import * as i13 from "@angular/common";
 const timeFormatRegExp = new RegExp(`${TIME_PART.hour}|${TIME_PART.minute}|${TIME_PART.second}|${TIME_PART.dayperiod}|literal`);
 const VALUE_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/integration-with-json/';
 const MIN_MAX_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/date-time-limits/';
@@ -44,7 +54,7 @@ const TWO_DIGIT_YEAR_MAX = 68;
 /**
  * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
  */
-let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerComponent {
+export class DateTimePickerComponent {
     constructor(popupService, intl, cdr, pickerService, ngZone, wrapper, touchEnabled, localization, disabledDatesService, renderer) {
         this.popupService = popupService;
         this.intl = intl;
@@ -218,9 +228,9 @@ let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerCo
         this.disabledDatesValidateFn = noop;
         this.incompleteValidator = noop;
         this.subscriptions = new Subscription();
-        this._size = 'medium';
-        this._rounded = 'medium';
-        this._fillMode = 'solid';
+        this._size = DEFAULT_SIZE;
+        this._rounded = DEFAULT_ROUNDED;
+        this._fillMode = DEFAULT_FILL_MODE;
         validatePackage(packageMetadata);
     }
     /**
@@ -386,20 +396,21 @@ let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerCo
      * Sets the size of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (Default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `none`
      *
      */
     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));
+        const newSize = size ? size : DEFAULT_SIZE;
+        if (newSize !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', newSize));
+            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('input', newSize));
         }
-        this._size = size;
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -408,19 +419,20 @@ let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerCo
      * Sets the border radius of the component.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (Default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `full`
+     * * `none`
      *
      */
     set rounded(rounded) {
         this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-        if (rounded) {
-            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        if (newRounded !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(newRounded));
         }
-        this._rounded = rounded;
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -429,22 +441,23 @@ let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerCo
      * Sets the fillMode of the component.
      *
      * The possible values are:
-     * * `'solid'` (Default)
-     * * `'flat'`
-     * * `'outline'`
-     * * `null`
+     * * `solid` (Default)
+     * * `flat`
+     * * `outline`
+     * * `none`
      *
      */
     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`);
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        if (newFillMode !== 'none') {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', newFillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', newFillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${newFillMode}-base`);
         }
-        this._fillMode = fillMode;
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -869,7 +882,12 @@ let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerCo
             return;
         }
         const event = new PreventableEvent();
-        open ? this.open.emit(event) : this.close.emit(event);
+        if (open) {
+            this.open.emit(event);
+        }
+        else {
+            this.close.emit(event);
+        }
         if (event.isDefaultPrevented()) {
             return;
         }
@@ -983,215 +1001,17 @@ let DateTimePickerComponent = DateTimePickerComponent_1 = class DateTimePickerCo
             this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
         }
     }
-};
-tslib_1.__decorate([
-    HostBinding('class.k-datetimepicker'),
-    HostBinding('class.k-input'),
-    tslib_1.__metadata("design:type", Boolean)
-], DateTimePickerComponent.prototype, "hostClasses", void 0);
-tslib_1.__decorate([
-    HostBinding('class.k-disabled'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], DateTimePickerComponent.prototype, "disabledClass", null);
-tslib_1.__decorate([
-    ViewChild('toggleButton', { static: true }),
-    tslib_1.__metadata("design:type", ElementRef)
-], DateTimePickerComponent.prototype, "toggleButton", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Date),
-    tslib_1.__metadata("design:paramtypes", [Date])
-], DateTimePickerComponent.prototype, "value", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], DateTimePickerComponent.prototype, "format", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number)
-], DateTimePickerComponent.prototype, "twoDigitYearMax", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number),
-    tslib_1.__metadata("design:paramtypes", [Number])
-], DateTimePickerComponent.prototype, "tabindex", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], DateTimePickerComponent.prototype, "disabledDates", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], DateTimePickerComponent.prototype, "popupSettings", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], DateTimePickerComponent.prototype, "focusableId", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], DateTimePickerComponent.prototype, "title", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], DateTimePickerComponent.prototype, "disabled", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], DateTimePickerComponent.prototype, "readonly", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], DateTimePickerComponent.prototype, "readOnlyInput", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], DateTimePickerComponent.prototype, "cancelButton", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], DateTimePickerComponent.prototype, "formatPlaceholder", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], DateTimePickerComponent.prototype, "placeholder", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], DateTimePickerComponent.prototype, "steps", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Date)
-], DateTimePickerComponent.prototype, "focusedDate", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], DateTimePickerComponent.prototype, "calendarType", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], DateTimePickerComponent.prototype, "animateCalendarNavigation", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], DateTimePickerComponent.prototype, "weekNumber", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Date),
-    tslib_1.__metadata("design:paramtypes", [Date])
-], DateTimePickerComponent.prototype, "min", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Date),
-    tslib_1.__metadata("design:paramtypes", [Date])
-], DateTimePickerComponent.prototype, "max", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], DateTimePickerComponent.prototype, "rangeValidation", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], DateTimePickerComponent.prototype, "disabledDatesValidation", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], DateTimePickerComponent.prototype, "incompleteDateValidation", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], DateTimePickerComponent.prototype, "valueChange", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], DateTimePickerComponent.prototype, "open", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], DateTimePickerComponent.prototype, "close", void 0);
-tslib_1.__decorate([
-    Output('focus'),
-    tslib_1.__metadata("design:type", EventEmitter)
-], DateTimePickerComponent.prototype, "onFocus", void 0);
-tslib_1.__decorate([
-    Output('blur'),
-    tslib_1.__metadata("design:type", EventEmitter)
-], DateTimePickerComponent.prototype, "onBlur", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], DateTimePickerComponent.prototype, "defaultTab", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], DateTimePickerComponent.prototype, "size", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], DateTimePickerComponent.prototype, "rounded", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], DateTimePickerComponent.prototype, "fillMode", null);
-tslib_1.__decorate([
-    ContentChild(CellTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", CellTemplateDirective)
-], DateTimePickerComponent.prototype, "cellTemplate", void 0);
-tslib_1.__decorate([
-    ContentChild(MonthCellTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", MonthCellTemplateDirective)
-], DateTimePickerComponent.prototype, "monthCellTemplate", void 0);
-tslib_1.__decorate([
-    ContentChild(YearCellTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", YearCellTemplateDirective)
-], DateTimePickerComponent.prototype, "yearCellTemplate", void 0);
-tslib_1.__decorate([
-    ContentChild(DecadeCellTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", DecadeCellTemplateDirective)
-], DateTimePickerComponent.prototype, "decadeCellTemplate", void 0);
-tslib_1.__decorate([
-    ContentChild(CenturyCellTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", CenturyCellTemplateDirective)
-], DateTimePickerComponent.prototype, "centuryCellTemplate", void 0);
-tslib_1.__decorate([
-    ContentChild(WeekNumberCellTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", WeekNumberCellTemplateDirective)
-], DateTimePickerComponent.prototype, "weekNumberTemplate", void 0);
-tslib_1.__decorate([
-    ContentChild(HeaderTitleTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", HeaderTitleTemplateDirective)
-], DateTimePickerComponent.prototype, "headerTitleTemplate", void 0);
-tslib_1.__decorate([
-    ViewChild('container', { read: ViewContainerRef, static: true }),
-    tslib_1.__metadata("design:type", ViewContainerRef)
-], DateTimePickerComponent.prototype, "container", void 0);
-tslib_1.__decorate([
-    ViewChild('popupTemplate', { read: TemplateRef, static: true }),
-    tslib_1.__metadata("design:type", TemplateRef)
-], DateTimePickerComponent.prototype, "popupTemplate", void 0);
-DateTimePickerComponent = DateTimePickerComponent_1 = tslib_1.__decorate([
-    Component({
-        selector: 'kendo-datetimepicker',
-        exportAs: 'kendo-datetimepicker',
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        providers: [
-            PickerService,
-            LocalizationService,
-            DisabledDatesService,
-            { provide: L10N_PREFIX, useValue: 'kendo.datetimepicker' },
-            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimePickerComponent_1), multi: true },
-            { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateTimePickerComponent_1), multi: true },
-            { provide: KendoInput, useExisting: forwardRef(() => DateTimePickerComponent_1) }
-        ],
-        template: `
+}
+DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i1.PopupService }, { token: i2.IntlService }, { token: i0.ChangeDetectorRef }, { token: i3.PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }, { token: i4.LocalizationService }, { token: i5.DisabledDatesService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", focusableId: "focusableId", title: "title", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+        PickerService,
+        LocalizationService,
+        DisabledDatesService,
+        { provide: L10N_PREFIX, useValue: 'kendo.datetimepicker' },
+        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
+        { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
+        { provide: KendoInput, useExisting: forwardRef(() => DateTimePickerComponent) }
+    ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, read: TemplateRef, static: true }], exportAs: ["kendo-datetimepicker"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container
             kendoDateTimePickerLocalizedMessages
 
@@ -1348,11 +1168,270 @@ DateTimePickerComponent = DateTimePickerComponent_1 = tslib_1.__decorate([
                 >
                     <div class="k-datetime-calendar-wrap">
                         <kendo-calendar
+                            [focusedDate]="focusedDate"
                             [(value)]="calendarValue"
                             [type]="calendarType"
                             [min]="calendarMin"
                             [max]="calendarMax"
+                            [weekNumber]="weekNumber"
+                            [navigation]="false"
+                            [animateNavigation]="animateCalendarNavigation"
+                            [cellTemplate]="cellTemplate"
+                            [monthCellTemplate]="monthCellTemplate"
+                            [yearCellTemplate]="yearCellTemplate"
+                            [decadeCellTemplate]="decadeCellTemplate"
+                            [centuryCellTemplate]="centuryCellTemplate"
+                            [weekNumberTemplate]="weekNumberTemplate"
+                            [headerTitleTemplate]="headerTitleTemplate"
+                            [disabled]="disableCalendar"
+                            [disabledDates]="disabledDates"
+                            (valueChange)="handleCalendarValueChange()"
+                        >
+                            <kendo-calendar-messages
+                                [today]="localization.get('today')"
+                                [prevButtonTitle]="localization.get('prevButtonTitle')"
+                                [nextButtonTitle]="localization.get('nextButtonTitle')"
+                            >
+                            </kendo-calendar-messages>
+                        </kendo-calendar>
+                    </div>
+                    <div class="k-datetime-time-wrap">
+                        <kendo-timeselector
+                            [value]="value"
+                            [format]="timeSelectorFormat"
+                            [min]="timeSelectorMin"
+                            [max]="timeSelectorMax"
+                            [setButton]="false"
+                            [cancelButton]="false"
+                            [steps]="steps"
+                            [disabled]="disableTimeSelector"
+                        >
+                            <kendo-timeselector-messages
+                                [now]="localization.get('now')"
+                                [nowLabel]="localization.get('nowLabel')"
+                            >
+                            </kendo-timeselector-messages>
+                        </kendo-timeselector>
+                    </div>
+                </div>
+                <div
+                    class="k-datetime-footer k-action-buttons k-actions k-hstack k-justify-content-stretch"
+                    [kendoEventsOutsideAngular]="{
+                        keydown: handleTabOut,
+                        focusin: handleFocus,
+                        focusout: handleBlur
+                    }"
+                    [scope]="this"
+                >
+                    <button
+                        *ngIf="cancelButton"
+                        type="button"
+                        class="k-button k-time-cancel"
+                        [ngClass]="popupButtonsClasses()"
+                        [attr.title]="localization.get('cancelLabel')"
+                        [attr.aria-label]="localization.get('cancelLabel')"
+                        [kendoEventsOutsideAngular]="{
+                            click: handleCancel
+                        }"
+                        [scope]="this"
+                    >
+                        {{localization.get('cancel')}}
+                    </button>
+                    <button
+                        type="button"
+                        class="k-button k-time-accept"
+                        [ngClass]="popupButtonsClasses('primary')"
+                        [attr.title]="localization.get('acceptLabel')"
+                        [attr.aria-label]="localization.get('acceptLabel')"
+                        [disabled]="!calendarValue"
+                        [kendoEventsOutsideAngular]="{
+                            click: handleAccept
+                        }"
+                        [scope]="this"
+                    >
+                        {{localization.get('accept')}}
+                    </button>
+                </div>
+            </div>
+        </ng-template>
+    `, isInline: true, components: [{ type: i6.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7.CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i8.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: i9.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: i10.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: i11.LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-datetimepicker',
+                    exportAs: 'kendo-datetimepicker',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        PickerService,
+                        LocalizationService,
+                        DisabledDatesService,
+                        { provide: L10N_PREFIX, useValue: 'kendo.datetimepicker' },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
+                        { provide: KendoInput, useExisting: forwardRef(() => DateTimePickerComponent) }
+                    ],
+                    template: `
+        <ng-container
+            kendoDateTimePickerLocalizedMessages
+
+            i18n-dateTab="kendo.datetimepicker.dateTab|The Date tab text in the datetimepicker popup header"
+            dateTab="Date"
+
+            i18n-dateTabLabel="kendo.datetimepicker.dateTabLabel|The label for the Date tab in the datetimepicker popup header"
+            dateTabLabel="Date tab"
+
+            i18n-timeTab="kendo.datetimepicker.timeTab|The Time tab text in the datetimepicker popup header"
+            timeTab="Time"
+
+            i18n-timeTabLabel="kendo.datetimepicker.timeTabLabel|The label for the Time tab in the datetimepicker popup header"
+            timeTabLabel="Time tab"
+
+            i18n-toggle="kendo.datetimepicker.toggle|The title of the toggle button in the datetimepicker component"
+            toggle="Toggle popup"
+
+            i18n-accept="kendo.datetimepicker.accept|The Accept button text in the datetimepicker component"
+            accept="Set"
+
+            i18n-acceptLabel="kendo.datetimepicker.acceptLabel|The label for the Accept button in the datetimepicker component"
+            acceptLabel="Set"
+
+            i18n-cancel="kendo.datetimepicker.cancel|The Cancel button text in the datetimepicker component"
+            cancel="Cancel"
+
+            i18n-cancelLabel="kendo.datetimepicker.cancelLabel|The label for the Cancel button in the datetimepicker component"
+            cancelLabel="Cancel"
+
+            i18n-now="kendo.datetimepicker.now|The Now button text in the timepicker component"
+            now="NOW"
+
+            i18n-nowLabel="kendo.datetimepicker.nowLabel|The label for the Now button in the timepicker component"
+            nowLabel="Select now"
+
+            i18n-today="kendo.datetimepicker.today|The label for the today button in the calendar header"
+            today="Today"
+
+            i18n-prevButtonTitle="kendo.datetimepicker.prevButtonTitle|The title of the previous button in the Classic calendar"
+            prevButtonTitle="Navigate to previous view"
+
+            i18n-nextButtonTitle="kendo.datetimepicker.nextButtonTitle|The title of the next button in the Classic calendar"
+            nextButtonTitle="Navigate to next view"
+        >
+        </ng-container>
+
+        <kendo-dateinput
+            [value]="value"
+            [format]="format"
+            [twoDigitYearMax]="twoDigitYearMax"
+            [min]="min"
+            [max]="max"
+            [incompleteDateValidation]="incompleteDateValidation"
+            [formatPlaceholder]="formatPlaceholder"
+            [placeholder]="placeholder"
+            [disabled]="disabled"
+            [readonly]="readonly || readOnlyInput"
+            [role]="inputRole"
+            [ariaReadOnly]="readonly"
+            [steps]="steps"
+            [tabindex]="tabindex"
+            [title]="title"
+            [focusableId]="focusableId"
+            [hasPopup]="true"
+            [isPopupOpen]="isOpen"
+            (valueChange)="handleInputValueChange($event)"
+            [kendoEventsOutsideAngular]="{
+                keydown: handleKeyDown
+            }"
+            [scope]="this"
+            [fillMode]="fillMode"
+            [rounded]="rounded"
+            [size]="size"
+        >
+        </kendo-dateinput>
+        <button
+            #toggleButton
+            type="button"
+            class="k-input-button k-button k-icon-button"
+            [tabindex]="-1"
+            [attr.title]="localization.get('toggle')"
+            [attr.aria-label]="localization.get('toggle')"
+            [kendoEventsOutsideAngular]="{
+                mousedown: preventMouseDown,
+                click: handleIconClick
+            }"
+            [scope]="this"
+        >
+            <span class="k-button-icon k-icon"
+                [ngClass]="{
+                    'k-i-calendar': activeTab === 'date',
+                    'k-i-clock': activeTab === 'time'
+                }"
+            ></span>
+        </button>
+
+        <ng-container #container></ng-container>
+
+        <ng-template #popupTemplate>
+            <div
+                class="k-datetime-wrap k-{{activeTab}}-tab"
+                [kendoEventsOutsideAngular]="{
+                    mousedown: preventMouseDown,
+                    keydown: handleKeyDown
+                }"
+                [scope]="this"
+            >
+                <div class="k-datetime-buttongroup"
+                    [kendoEventsOutsideAngular]="{
+                        focusin: handleFocus,
+                        focusout: handleBlur
+                    }"
+                    [scope]="this"
+                >
+                    <div class="k-button-group k-button-group-stretched">
+                        <button
+                            type="button"
+                            class="k-button k-group-start k-date-tab"
+                            [ngClass]="popupButtonsClasses()"
+                            [class.k-active]="activeTab === 'date'"
+                            [attr.title]="localization.get('dateTabLabel')"
+                            [attr.aria-label]="localization.get('dateTabLabel')"
+                            [kendoEventsOutsideAngular]="{
+                                click: changeActiveTab.bind(this, 'date'),
+                                keydown: handleBackTabOut
+                            }"
+                            [scope]="this"
+                        >
+                            {{localization.get('dateTab')}}
+                        </button>
+                        <button
+                            type="button"
+                            class="k-button k-group-end k-time-tab"
+                            [ngClass]="popupButtonsClasses()"
+                            [class.k-active]="activeTab === 'time'"
+                            [attr.title]="localization.get('timeTabLabel')"
+                            [attr.aria-label]="localization.get('timeTabLabel')"
+                            [kendoEventsOutsideAngular]="{
+                                click: changeActiveTab.bind(this, 'time')
+                            }"
+                        >
+                            {{localization.get('timeTab')}}
+                        </button>
+                    </div>
+                </div>
+                <div
+                    #dateTimeSelector
+                    class="k-datetime-selector"
+                    [style.transition]="tabSwitchTransition"
+                    [kendoEventsOutsideAngular]="{
+                        transitionend: handleTabChangeTransitionEnd.bind(this, dateTimeSelector)
+                    }"
+                >
+                    <div class="k-datetime-calendar-wrap">
+                        <kendo-calendar
                             [focusedDate]="focusedDate"
+                            [(value)]="calendarValue"
+                            [type]="calendarType"
+                            [min]="calendarMin"
+                            [max]="calendarMax"
                             [weekNumber]="weekNumber"
                             [navigation]="false"
                             [animateNavigation]="animateCalendarNavigation"
@@ -1435,15 +1514,115 @@ DateTimePickerComponent = DateTimePickerComponent_1 = tslib_1.__decorate([
             </div>
         </ng-template>
     `
-    }),
-    tslib_1.__param(6, Inject(TOUCH_ENABLED)),
-    tslib_1.__metadata("design:paramtypes", [PopupService,
-        IntlService,
-        ChangeDetectorRef,
-        PickerService,
-        NgZone,
-        ElementRef, Boolean, LocalizationService,
-        DisabledDatesService,
-        Renderer2])
-], DateTimePickerComponent);
-export { DateTimePickerComponent };
+                }]
+        }], ctorParameters: function () { return [{ type: i1.PopupService }, { type: i2.IntlService }, { type: i0.ChangeDetectorRef }, { type: i3.PickerService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TOUCH_ENABLED]
+                }] }, { type: i4.LocalizationService }, { type: i5.DisabledDatesService }, { type: i0.Renderer2 }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-datetimepicker']
+            }, {
+                type: HostBinding,
+                args: ['class.k-input']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['class.k-disabled']
+            }], toggleButton: [{
+                type: ViewChild,
+                args: ['toggleButton', { static: true }]
+            }], value: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], twoDigitYearMax: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], disabledDates: [{
+                type: Input
+            }], popupSettings: [{
+                type: Input
+            }], focusableId: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], readOnlyInput: [{
+                type: Input
+            }], cancelButton: [{
+                type: Input
+            }], formatPlaceholder: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], steps: [{
+                type: Input
+            }], focusedDate: [{
+                type: Input
+            }], calendarType: [{
+                type: Input
+            }], animateCalendarNavigation: [{
+                type: Input
+            }], weekNumber: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], rangeValidation: [{
+                type: Input
+            }], disabledDatesValidation: [{
+                type: Input
+            }], incompleteDateValidation: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], open: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], onFocus: [{
+                type: Output,
+                args: ['focus']
+            }], onBlur: [{
+                type: Output,
+                args: ['blur']
+            }], defaultTab: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], cellTemplate: [{
+                type: ContentChild,
+                args: [CellTemplateDirective, { static: false }]
+            }], monthCellTemplate: [{
+                type: ContentChild,
+                args: [MonthCellTemplateDirective, { static: false }]
+            }], yearCellTemplate: [{
+                type: ContentChild,
+                args: [YearCellTemplateDirective, { static: false }]
+            }], decadeCellTemplate: [{
+                type: ContentChild,
+                args: [DecadeCellTemplateDirective, { static: false }]
+            }], centuryCellTemplate: [{
+                type: ContentChild,
+                args: [CenturyCellTemplateDirective, { static: false }]
+            }], weekNumberTemplate: [{
+                type: ContentChild,
+                args: [WeekNumberCellTemplateDirective, { static: false }]
+            }], headerTitleTemplate: [{
+                type: ContentChild,
+                args: [HeaderTitleTemplateDirective, { static: false }]
+            }], container: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef, static: true }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { read: TemplateRef, static: true }]
+            }] } });