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

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

@@ -2,13 +2,9 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-/* tslint:disable:max-line-length */
-import * as tslib_1 from "tslib";
-var DatePickerComponent_1;
-import { Component, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, TemplateRef, EventEmitter, HostBinding, Renderer2, Input, Output, ContentChild, ViewChild, ViewContainerRef, NgZone, Inject, Optional, forwardRef, isDevMode, Injector } from '@angular/core';
+import { Component, ChangeDetectionStrategy, EventEmitter, HostBinding, Input, Output, ContentChild, ViewChild, ViewContainerRef, Inject, Optional, forwardRef, isDevMode } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
-import { PopupService } from '@progress/kendo-angular-popup';
 import { cloneDate } from '@progress/kendo-date-math';
 import { hasObservers, KendoInput, guid, Keys } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -28,12 +24,22 @@ 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, getSizeClass, getRoundedClass, getFillModeClass } from '../util';
+import { noop, isValidRange, setTime, isWindowAvailable, isTabExitingCalendar, getSizeClass, getRoundedClass, getFillModeClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE } from '../util';
 import { TOUCH_ENABLED } from '../touch-enabled';
 import { requiresZoneOnBlur, currentFocusTarget } from '../common/utils';
 import { fromEvent } from 'rxjs';
 import { incompleteDateValidator } from '../validators/incomplete-date.validator';
 import { disabledDatesValidator } from '../validators/disabled-date.validator';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@progress/kendo-angular-popup";
+import * as i3 from "../common/picker.service";
+import * as i4 from "../calendar/services/disabled-dates.service";
+import * as i5 from "../dateinput/dateinput.component";
+import * as i6 from "../calendar/calendar.component";
+import * as i7 from "../calendar/localization/calendar-custom-messages.component";
+import * as i8 from "./localization/datepicker-localized-messages.directive";
+import * as i9 from "@progress/kendo-angular-common";
 const MIN_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DatePickerComponent/#toc-min';
 const MAX_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DatePickerComponent/#toc-max';
 const VALUE_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/#toc-using-with-json';
@@ -42,7 +48,7 @@ const TWO_DIGIT_YEAR_MAX = 68;
 /**
  * Represents the [Kendo UI DatePicker component for Angular]({% slug overview_datepicker %}#toc-basic-usage).
  */
-let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
+export class DatePickerComponent {
     constructor(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, disabledDatesService, touchEnabled) {
         this.zone = zone;
         this.localization = localization;
@@ -221,7 +227,7 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
          * }
          * ```
          */
-        this.onFocus = new EventEmitter(); //tslint:disable-line:no-output-rename
+        this.onFocus = new EventEmitter();
         /**
          * Fires each time the input element gets blurred
          * ([more information and example]({% slug overview_datepicker %}#toc-events)).
@@ -243,7 +249,7 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
          * }
          * ```
          */
-        this.onBlur = new EventEmitter(); //tslint:disable-line:no-output-rename
+        this.onBlur = new EventEmitter();
         /**
          * Fires each time the popup is about to open.
          * This event is preventable. If you cancel the event, the popup will remain closed
@@ -274,9 +280,9 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
         this.incompleteValidator = noop;
         this.resolvedPromise = Promise.resolve(null);
         this.domEvents = [];
-        this._size = 'medium';
-        this._rounded = 'medium';
-        this._fillMode = 'solid';
+        this._size = DEFAULT_SIZE;
+        this._rounded = DEFAULT_ROUNDED;
+        this._fillMode = DEFAULT_FILL_MODE;
         validatePackage(packageMetadata);
         this.pickerSubscriptions = this.pickerService.onFocus.subscribe(this.handleFocus.bind(this));
         this.pickerSubscriptions.add(this.pickerService.onBlur.subscribe(this.handleBlur.bind(this)));
@@ -382,20 +388,21 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
      * 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;
@@ -404,19 +411,20 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
      * 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;
@@ -425,22 +433,23 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
      * 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.toggleButton.nativeElement, getFillModeClass('button', fillMode));
-            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${fillMode}-base`);
-            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        if (newFillMode !== 'none') {
+            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', newFillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${newFillMode}-base`);
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', newFillMode));
         }
-        this._fillMode = fillMode;
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -614,7 +623,7 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
      * Blurs the DatePicker component.
      */
     blur() {
-        (this.calendar || this.input)['blur'](); //tslint:disable-line:no-string-literal
+        (this.calendar || this.input)['blur']();
     }
     /**
      * Toggles the visibility of the popup. If you use the `toggle` method to show or hide the popup,
@@ -716,9 +725,6 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
                 this.show = false;
             }
         }
-        if (keyCode === Keys.Enter && target.classList.contains('k-calendar')) {
-            e.preventDefault(); // Don't submit form on date selection in popup
-        }
         if (keyCode === Keys.Tab && this.show && this.calendar.isActive && isTabExitingCalendar(this.calendarType, target, shiftKey)) {
             this.input.focus();
             this.show = false;
@@ -876,266 +882,20 @@ let DatePickerComponent = DatePickerComponent_1 = class DatePickerComponent {
             this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
         }
     }
-};
-tslib_1.__decorate([
-    ViewChild('container', { read: ViewContainerRef, static: true }),
-    tslib_1.__metadata("design:type", ViewContainerRef)
-], DatePickerComponent.prototype, "container", void 0);
-tslib_1.__decorate([
-    ViewChild('popupTemplate', { static: true }),
-    tslib_1.__metadata("design:type", TemplateRef)
-], DatePickerComponent.prototype, "popupTemplate", void 0);
-tslib_1.__decorate([
-    ViewChild('toggleButton', { static: true }),
-    tslib_1.__metadata("design:type", ElementRef)
-], DatePickerComponent.prototype, "toggleButton", void 0);
-tslib_1.__decorate([
-    ContentChild(CellTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", CellTemplateDirective)
-], DatePickerComponent.prototype, "cellTemplate", void 0);
-tslib_1.__decorate([
-    Input('cellTemplate'),
-    tslib_1.__metadata("design:type", CellTemplateDirective),
-    tslib_1.__metadata("design:paramtypes", [CellTemplateDirective])
-], DatePickerComponent.prototype, "cellTemplateRef", null);
-tslib_1.__decorate([
-    ContentChild(MonthCellTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", MonthCellTemplateDirective)
-], DatePickerComponent.prototype, "monthCellTemplate", void 0);
-tslib_1.__decorate([
-    Input('monthCellTemplate'),
-    tslib_1.__metadata("design:type", MonthCellTemplateDirective),
-    tslib_1.__metadata("design:paramtypes", [MonthCellTemplateDirective])
-], DatePickerComponent.prototype, "monthCellTemplateRef", null);
-tslib_1.__decorate([
-    ContentChild(YearCellTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", YearCellTemplateDirective)
-], DatePickerComponent.prototype, "yearCellTemplate", void 0);
-tslib_1.__decorate([
-    Input('yearCellTemplate'),
-    tslib_1.__metadata("design:type", YearCellTemplateDirective),
-    tslib_1.__metadata("design:paramtypes", [YearCellTemplateDirective])
-], DatePickerComponent.prototype, "yearCellTemplateRef", null);
-tslib_1.__decorate([
-    ContentChild(DecadeCellTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", DecadeCellTemplateDirective)
-], DatePickerComponent.prototype, "decadeCellTemplate", void 0);
-tslib_1.__decorate([
-    Input('decadeCellTemplate'),
-    tslib_1.__metadata("design:type", DecadeCellTemplateDirective),
-    tslib_1.__metadata("design:paramtypes", [DecadeCellTemplateDirective])
-], DatePickerComponent.prototype, "decadeCellTemplateRef", null);
-tslib_1.__decorate([
-    ContentChild(CenturyCellTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", CenturyCellTemplateDirective)
-], DatePickerComponent.prototype, "centuryCellTemplate", void 0);
-tslib_1.__decorate([
-    Input('centuryCellTemplate'),
-    tslib_1.__metadata("design:type", CenturyCellTemplateDirective),
-    tslib_1.__metadata("design:paramtypes", [CenturyCellTemplateDirective])
-], DatePickerComponent.prototype, "centuryCellTemplateRef", null);
-tslib_1.__decorate([
-    ContentChild(WeekNumberCellTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", WeekNumberCellTemplateDirective)
-], DatePickerComponent.prototype, "weekNumberTemplate", void 0);
-tslib_1.__decorate([
-    Input('weekNumberTemplate'),
-    tslib_1.__metadata("design:type", WeekNumberCellTemplateDirective),
-    tslib_1.__metadata("design:paramtypes", [WeekNumberCellTemplateDirective])
-], DatePickerComponent.prototype, "weekNumberTemplateRef", null);
-tslib_1.__decorate([
-    ContentChild(HeaderTitleTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", HeaderTitleTemplateDirective)
-], DatePickerComponent.prototype, "headerTitleTemplate", void 0);
-tslib_1.__decorate([
-    Input('headerTitleTemplate'),
-    tslib_1.__metadata("design:type", HeaderTitleTemplateDirective),
-    tslib_1.__metadata("design:paramtypes", [HeaderTitleTemplateDirective])
-], DatePickerComponent.prototype, "headerTitleTemplateRef", null);
-tslib_1.__decorate([
-    ContentChild(NavigationItemTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", NavigationItemTemplateDirective)
-], DatePickerComponent.prototype, "navigationItemTemplate", void 0);
-tslib_1.__decorate([
-    Input('navigationItemTemplate'),
-    tslib_1.__metadata("design:type", NavigationItemTemplateDirective),
-    tslib_1.__metadata("design:paramtypes", [NavigationItemTemplateDirective])
-], DatePickerComponent.prototype, "navigationItemTemplateRef", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], DatePickerComponent.prototype, "focusableId", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], DatePickerComponent.prototype, "activeView", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], DatePickerComponent.prototype, "bottomView", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], DatePickerComponent.prototype, "topView", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], DatePickerComponent.prototype, "calendarType", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], DatePickerComponent.prototype, "animateCalendarNavigation", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], DatePickerComponent.prototype, "disabled", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], DatePickerComponent.prototype, "readonly", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], DatePickerComponent.prototype, "readOnlyInput", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], DatePickerComponent.prototype, "popupSettings", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], DatePickerComponent.prototype, "navigation", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Date)
-], DatePickerComponent.prototype, "min", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Date)
-], DatePickerComponent.prototype, "max", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], DatePickerComponent.prototype, "incompleteDateValidation", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Date)
-], DatePickerComponent.prototype, "focusedDate", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Date),
-    tslib_1.__metadata("design:paramtypes", [Date])
-], DatePickerComponent.prototype, "value", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], DatePickerComponent.prototype, "format", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number)
-], DatePickerComponent.prototype, "twoDigitYearMax", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], DatePickerComponent.prototype, "formatPlaceholder", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], DatePickerComponent.prototype, "placeholder", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number)
-], DatePickerComponent.prototype, "tabindex", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number),
-    tslib_1.__metadata("design:paramtypes", [Number])
-], DatePickerComponent.prototype, "tabIndex", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], DatePickerComponent.prototype, "disabledDates", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], DatePickerComponent.prototype, "title", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], DatePickerComponent.prototype, "rangeValidation", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], DatePickerComponent.prototype, "disabledDatesValidation", void 0);
-tslib_1.__decorate([
-    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)
-], DatePickerComponent.prototype, "valueChange", void 0);
-tslib_1.__decorate([
-    Output('focus'),
-    tslib_1.__metadata("design:type", EventEmitter)
-], DatePickerComponent.prototype, "onFocus", void 0);
-tslib_1.__decorate([
-    Output('blur'),
-    tslib_1.__metadata("design:type", EventEmitter)
-], DatePickerComponent.prototype, "onBlur", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], DatePickerComponent.prototype, "open", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], DatePickerComponent.prototype, "close", void 0);
-tslib_1.__decorate([
-    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-disabled'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], DatePickerComponent.prototype, "disabledClass", null);
-DatePickerComponent = DatePickerComponent_1 = tslib_1.__decorate([
-    Component({
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        exportAs: 'kendo-datepicker',
-        providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent_1), multi: true },
-            { provide: NG_VALIDATORS, useExisting: forwardRef(() => DatePickerComponent_1), multi: true },
-            { provide: KendoInput, useExisting: forwardRef(() => DatePickerComponent_1) },
-            LocalizationService,
-            PickerService,
-            DisabledDatesService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.datepicker'
-            }
-        ],
-        selector: 'kendo-datepicker',
-        template: `
+}
+DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i3.PickerService }, { token: i4.DisabledDatesService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], focusableId: "focusableId", activeView: "activeView", bottomView: "bottomView", topView: "topView", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", popupSettings: "popupSettings", navigation: "navigation", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
+        { provide: NG_VALIDATORS, useExisting: forwardRef(() => DatePickerComponent), multi: true },
+        { provide: KendoInput, useExisting: forwardRef(() => DatePickerComponent) },
+        LocalizationService,
+        PickerService,
+        DisabledDatesService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.datepicker'
+        }
+    ], 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 }, { propertyName: "navigationItemTemplate", first: true, predicate: NavigationItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }], exportAs: ["kendo-datepicker"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoDatePickerLocalizedMessages
             i18n-today="kendo.datepicker.today|The label for the today button in the calendar header"
             today="Today"
@@ -1168,9 +928,120 @@ DatePickerComponent = DatePickerComponent_1 = tslib_1.__decorate([
             [min]="min"
             [max]="max"
             [incompleteDateValidation]="incompleteDateValidation"
-            [fillMode]="null"
-            [rounded]="null"
-            [size]="null"
+            fillMode="none"
+            rounded="none"
+            size="none"
+            [value]="value"
+            (valueChange)="handleInputChange($event)"
+        ></kendo-dateinput>
+        <button
+            #toggleButton
+            type="button"
+            class="k-input-button k-button k-icon-button"
+            [tabindex]="-1"
+            [attr.title]="localization.get('toggle')"
+            [attr.aria-label]="localization.get('toggle')"
+            [kendoEventsOutsideAngular]="{
+                click: handleIconClick,
+                mousedown: handleMousedown
+            }"
+            [scope]="this"
+        >
+            <span class="k-button-icon k-icon k-i-calendar"></span>
+        </button>
+        <ng-container #container></ng-container>
+        <ng-template #popupTemplate>
+            <kendo-calendar
+                #calendar
+                [type]="calendarType"
+                [min]="min"
+                [max]="max"
+                [navigation]="navigation"
+                [animateNavigation]="animateCalendarNavigation"
+                [activeView]="activeView"
+                [bottomView]="bottomView"
+                [topView]="topView"
+                [weekNumber]="weekNumber"
+                [cellTemplate]="cellTemplate"
+                [monthCellTemplate]="monthCellTemplate"
+                [yearCellTemplate]="yearCellTemplate"
+                [decadeCellTemplate]="decadeCellTemplate"
+                [centuryCellTemplate]="centuryCellTemplate"
+                [weekNumberTemplate]="weekNumberTemplate"
+                [headerTitleTemplate]="headerTitleTemplate"
+                [navigationItemTemplate]="navigationItemTemplate"
+                [focusedDate]="focusedDate"
+                [value]="value"
+                (valueChange)="handleChange(mergeTime($event))"
+                [kendoEventsOutsideAngular]="{
+                    keydown: handleKeydown
+                }"
+                [scope]="this"
+                [disabledDates]="disabledDates"
+            >
+                <kendo-calendar-messages
+                    [today]="localization.get('today')"
+                    [prevButtonTitle]="localization.get('prevButtonTitle')"
+                    [nextButtonTitle]="localization.get('nextButtonTitle')"
+                >
+                </kendo-calendar-messages>
+            </kendo-calendar>
+        <ng-template>
+    `, isInline: true, components: [{ type: i5.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: i6.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: i7.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: i8.DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    exportAs: 'kendo-datepicker',
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => DatePickerComponent), multi: true },
+                        { provide: KendoInput, useExisting: forwardRef(() => DatePickerComponent) },
+                        LocalizationService,
+                        PickerService,
+                        DisabledDatesService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.datepicker'
+                        }
+                    ],
+                    selector: 'kendo-datepicker',
+                    template: `
+        <ng-container kendoDatePickerLocalizedMessages
+            i18n-today="kendo.datepicker.today|The label for the today button in the calendar header"
+            today="Today"
+
+            i18n-toggle="kendo.datepicker.toggle|The title of the toggle button in the datepicker component"
+            toggle="Toggle calendar"
+
+            i18n-prevButtonTitle="kendo.datepicker.prevButtonTitle|The title of the previous button in the Classic calendar"
+            prevButtonTitle="Navigate to previous view"
+
+            i18n-nextButtonTitle="kendo.datepicker.nextButtonTitle|The title of the next button in the Classic calendar"
+            nextButtonTitle="Navigate to next view"
+        >
+        </ng-container>
+        <kendo-dateinput
+            #input
+            [role]="inputRole"
+            [focusableId]="focusableId"
+            [hasPopup]="true"
+            [isPopupOpen]="show"
+            [disabled]="disabled"
+            [readonly]="readonly || readOnlyInput"
+            [ariaReadOnly]="readonly"
+            [tabindex]="tabindex"
+            [title]="title"
+            [format]="format"
+            [twoDigitYearMax]="twoDigitYearMax"
+            [formatPlaceholder]="formatPlaceholder"
+            [placeholder]="placeholder"
+            [min]="min"
+            [max]="max"
+            [incompleteDateValidation]="incompleteDateValidation"
+            fillMode="none"
+            rounded="none"
+            size="none"
             [value]="value"
             (valueChange)="handleInputChange($event)"
         ></kendo-dateinput>
@@ -1228,16 +1099,148 @@ DatePickerComponent = DatePickerComponent_1 = tslib_1.__decorate([
             </kendo-calendar>
         <ng-template>
     `
-    }),
-    tslib_1.__param(9, Optional()), tslib_1.__param(9, Inject(TOUCH_ENABLED)),
-    tslib_1.__metadata("design:paramtypes", [NgZone,
-        LocalizationService,
-        ChangeDetectorRef,
-        PopupService,
-        ElementRef,
-        Renderer2,
-        Injector,
-        PickerService,
-        DisabledDatesService, Boolean])
-], DatePickerComponent);
-export { DatePickerComponent };
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i3.PickerService }, { type: i4.DisabledDatesService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TOUCH_ENABLED]
+                }] }]; }, propDecorators: { container: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef, static: true }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], toggleButton: [{
+                type: ViewChild,
+                args: ['toggleButton', { static: true }]
+            }], cellTemplate: [{
+                type: ContentChild,
+                args: [CellTemplateDirective, { static: false }]
+            }], cellTemplateRef: [{
+                type: Input,
+                args: ['cellTemplate']
+            }], monthCellTemplate: [{
+                type: ContentChild,
+                args: [MonthCellTemplateDirective, { static: false }]
+            }], monthCellTemplateRef: [{
+                type: Input,
+                args: ['monthCellTemplate']
+            }], yearCellTemplate: [{
+                type: ContentChild,
+                args: [YearCellTemplateDirective, { static: false }]
+            }], yearCellTemplateRef: [{
+                type: Input,
+                args: ['yearCellTemplate']
+            }], decadeCellTemplate: [{
+                type: ContentChild,
+                args: [DecadeCellTemplateDirective, { static: false }]
+            }], decadeCellTemplateRef: [{
+                type: Input,
+                args: ['decadeCellTemplate']
+            }], centuryCellTemplate: [{
+                type: ContentChild,
+                args: [CenturyCellTemplateDirective, { static: false }]
+            }], centuryCellTemplateRef: [{
+                type: Input,
+                args: ['centuryCellTemplate']
+            }], weekNumberTemplate: [{
+                type: ContentChild,
+                args: [WeekNumberCellTemplateDirective, { static: false }]
+            }], weekNumberTemplateRef: [{
+                type: Input,
+                args: ['weekNumberTemplate']
+            }], headerTitleTemplate: [{
+                type: ContentChild,
+                args: [HeaderTitleTemplateDirective, { static: false }]
+            }], headerTitleTemplateRef: [{
+                type: Input,
+                args: ['headerTitleTemplate']
+            }], navigationItemTemplate: [{
+                type: ContentChild,
+                args: [NavigationItemTemplateDirective, { static: false }]
+            }], navigationItemTemplateRef: [{
+                type: Input,
+                args: ['navigationItemTemplate']
+            }], focusableId: [{
+                type: Input
+            }], activeView: [{
+                type: Input
+            }], bottomView: [{
+                type: Input
+            }], topView: [{
+                type: Input
+            }], calendarType: [{
+                type: Input
+            }], animateCalendarNavigation: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], readOnlyInput: [{
+                type: Input
+            }], popupSettings: [{
+                type: Input
+            }], navigation: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], incompleteDateValidation: [{
+                type: Input
+            }], focusedDate: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], twoDigitYearMax: [{
+                type: Input
+            }], formatPlaceholder: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], disabledDates: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], rangeValidation: [{
+                type: Input
+            }], disabledDatesValidation: [{
+                type: Input
+            }], weekNumber: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], onFocus: [{
+                type: Output,
+                args: ['focus']
+            }], onBlur: [{
+                type: Output,
+                args: ['blur']
+            }], open: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], wrapperClasses: [{
+                type: HostBinding,
+                args: ['class.k-datepicker']
+            }, {
+                type: HostBinding,
+                args: ['class.k-input']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['class.k-disabled']
+            }] } });