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

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

@@ -1,1256 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* 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";
-import { Component, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, TemplateRef, EventEmitter, HostBinding, Renderer2, Input, Output, ContentChild, ViewChild, ViewContainerRef, NgZone, Inject, Optional, forwardRef, isDevMode, Injector } 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';
-import { packageMetadata } from '../package-metadata';
-import { MIN_DATE, MAX_DATE } from '../defaults';
-import { minValidator } from '../validators/min.validator';
-import { maxValidator } from '../validators/max.validator';
-import { PreventableEvent } from '../preventable-event';
-import { CalendarViewEnum } from '../calendar/models/view.enum';
-import { CellTemplateDirective } from '../calendar/templates/cell-template.directive';
-import { MonthCellTemplateDirective } from '../calendar/templates/month-cell-template.directive';
-import { YearCellTemplateDirective } from '../calendar/templates/year-cell-template.directive';
-import { DecadeCellTemplateDirective } from '../calendar/templates/decade-cell-template.directive';
-import { CenturyCellTemplateDirective } from '../calendar/templates/century-cell-template.directive';
-import { WeekNumberCellTemplateDirective } from '../calendar/templates/weeknumber-cell-template.directive';
-import { HeaderTitleTemplateDirective } from '../calendar/templates/header-title-template.directive';
-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 { 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';
-var MIN_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DatePickerComponent/#toc-min';
-var MAX_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DatePickerComponent/#toc-max';
-var VALUE_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/#toc-using-with-json';
-var DEFAULT_FORMAT = 'd';
-var TWO_DIGIT_YEAR_MAX = 68;
-/**
- * Represents the [Kendo UI DatePicker component for Angular]({% slug overview_datepicker %}#toc-basic-usage).
- */
-var DatePickerComponent = /** @class */ (function () {
-    function DatePickerComponent(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, disabledDatesService, touchEnabled) {
-        this.zone = zone;
-        this.localization = localization;
-        this.cdr = cdr;
-        this.popupService = popupService;
-        this.wrapper = wrapper;
-        this.renderer = renderer;
-        this.injector = injector;
-        this.pickerService = pickerService;
-        this.disabledDatesService = disabledDatesService;
-        this.touchEnabled = touchEnabled;
-        /**
-         * @hidden
-         */
-        this.focusableId = "k-" + guid();
-        /**
-         * Defines the active view that the Calendar initially renders
-         * ([see example]({% slug calendar_type_datepicker %}#toc-active-view)).
-         * By default, the active view is `month`.
-         *
-         * > You have to set `activeView` within the `topView`-`bottomView` range.
-         */
-        this.activeView = CalendarViewEnum[CalendarViewEnum.month];
-        /**
-         * Defines the bottommost Calendar view to which the user can navigate
-         * ([see example]({% slug calendar_type_datepicker %}#toc-focused-dates)).
-         */
-        this.bottomView = CalendarViewEnum[CalendarViewEnum.month];
-        /**
-         * Defines the topmost Calendar view to which the user can navigate
-         * ([see example]({% slug calendar_type_datepicker %}#toc-focused-dates)).
-         */
-        this.topView = CalendarViewEnum[CalendarViewEnum.century];
-        /**
-         * Specifies the Calendar type.
-         *
-         * The possible values are:
-         * - `infinite` (default)
-         * - `classic`
-         *
-         */
-        this.calendarType = 'infinite';
-        /**
-         * Determines whether to enable animation when navigating to previous/next Calendar view.
-         * Applies to the [`classic`]({% slug api_dateinputs_datepickercomponent %}#toc-calendartype) Calendar only.
-         *
-         * > This feature uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). In order to run the animation in browsers that do not support it, you need the `web-animations-js` polyfill.
-         *
-         * @default false
-         */
-        this.animateCalendarNavigation = false;
-        /**
-         * Sets or gets the `disabled` property of the DatePicker and determines whether the component is active
-         * ([see example]({% slug disabled_datepicker %})).
-         */
-        this.disabled = false;
-        /**
-         * Sets the read-only state of the DatePicker
-         * ([see example]({% slug readonly_datepicker %}#toc-read-only-datepicker)).
-         */
-        this.readonly = false;
-        /**
-         * Sets the read-only state of the DatePicker input field
-         * ([see example]({% slug readonly_datepicker %}#toc-read-only-input)).
-         *
-         * > Note that if you set the [`readonly`]({% slug api_dateinputs_datepickercomponent %}#toc-readonly) property value to `true`,
-         * the input will be rendered in a read-only state regardless of the `readOnlyInput` value.
-         */
-        this.readOnlyInput = false;
-        /**
-         * Sets or gets the `navigation` property of the Calendar
-         * and determines whether the navigation side-bar is displayed.
-         * ([see example]({% slug sidebar_datepicker %})).
-         */
-        this.navigation = true;
-        /**
-         * Specifies the smallest valid date
-         * ([see example]({% slug dateranges_datepicker %})).
-         * By default, the `min` value is `1900-1-1`.
-         */
-        this.min = cloneDate(MIN_DATE);
-        /**
-         * Specifies the biggest valid date
-         * ([see example]({% slug dateranges_datepicker %})).
-         * By default, the `max` value is `2099-12-31`.
-         */
-        this.max = cloneDate(MAX_DATE);
-        /**
-         * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
-         */
-        this.incompleteDateValidation = false;
-        /**
-         * Specifies the focused date of the Calendar component
-         * ([see example]({% slug calendar_type_datepicker %}#toc-focused-dates)).
-         */
-        this.focusedDate = null;
-        /**
-         * Specifies the date format that is used to display the input value
-         * ([see example]({% slug formats_datepicker %})).
-         *
-         * Format value options:
-         * - `string` - Provide a `string` if a single format is going to be used regardless whether the input is focused or blurred.
-         * - [`FormatSettings`]({% slug api_dateinputs_formatsettings %}) - To display different formats when the component is focused or blurred, provide a settings object with specified `inputFormat` and `displayFormat` values.
-         */
-        this.format = DEFAULT_FORMAT;
-        /**
-         * The maximum year to assume to be from the current century when typing two-digit year value
-         * ([see example]({% slug formats_datepicker %}#toc-two-digit-year-format)).
-         *
-         * The default value is 68, indicating that typing any value less than 69
-         * will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
-         */
-        this.twoDigitYearMax = TWO_DIGIT_YEAR_MAX;
-        /**
-         * Specifies the hint the DatePicker displays when its value is `null`.
-         * ([more information and exaples]({% slug placeholders_datepicker %})).
-         *
-         * @example
-         * ```ts
-         * _@Component({
-         * selector: 'my-app',
-         * template: `
-         *  <kendo-datepicker placeholder="Enter birth date..."></kendo-datepicker>
-         * `
-         * })
-         * export class AppComponent { }
-         * ```
-         */
-        this.placeholder = null;
-        /**
-         * Sets or gets the `tabindex` property of the DatePicker.
-         */
-        this.tabindex = 0;
-        /**
-         * Sets the title of the input element of the DatePicker.
-         */
-        this.title = "";
-        /**
-         * Determines whether the built-in min or max validators are enforced when validating a form.
-         */
-        this.rangeValidation = true;
-        /**
-         * Determines whether the built-in validator for disabled
-         * date ranges is enforced when validating a form
-         * ([see example]({% slug disabled_dates_datepicker %}#toc-validation)).
-         */
-        this.disabledDatesValidation = true;
-        /**
-         * Determines whether to display a week number column in the `month` view of the Calendar
-         * ([see example]({% slug calendar_type_datepicker %}#toc-week-number-column)).
-         */
-        this.weekNumber = false;
-        /**
-         * Fires each time the user selects a new value
-         * ([more information and example]({% slug overview_datepicker %}#toc-events)).
-         */
-        this.valueChange = new EventEmitter();
-        /**
-         * Fires each time the user focuses the input element
-         * ([more information and example]({% slug overview_datepicker %}#toc-events)).
-         *
-         * > To wire the event programmatically, use the `onFocus` property.
-         *
-         * @example
-         * ```ts
-         * _@Component({
-         * selector: 'my-app',
-         * template: `
-         *  <kendo-datepicker (focus)="handleFocus()"></kendo-datepicker>
-         * `
-         * })
-         * export class AppComponent {
-         *   public handleFocus(): void {
-         *      console.log("Component is focused");
-         *   }
-         * }
-         * ```
-         */
-        this.onFocus = new EventEmitter(); //tslint:disable-line:no-output-rename
-        /**
-         * Fires each time the input element gets blurred
-         * ([more information and example]({% slug overview_datepicker %}#toc-events)).
-         *
-         * > To wire the event programmatically, use the `onBlur` property.
-         *
-         * @example
-         * ```ts
-         * _@Component({
-         * selector: 'my-app',
-         * template: `
-         *  <kendo-datepicker (blur)="handleBlur()"></kendo-datepicker>
-         * `
-         * })
-         * export class AppComponent {
-         *   public handleBlur(): void {
-         *      console.log("Component is blurred");
-         *   }
-         * }
-         * ```
-         */
-        this.onBlur = new EventEmitter(); //tslint:disable-line:no-output-rename
-        /**
-         * Fires each time the popup is about to open.
-         * This event is preventable. If you cancel the event, the popup will remain closed
-         * ([more information and example]({% slug overview_datepicker %}#toc-events)).
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires each time the popup is about to close.
-         * This event is preventable. If you cancel the event, the popup will remain open
-         * ([more information and example]({% slug overview_datepicker %}#toc-events)).
-         */
-        this.close = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.wrapperClasses = true;
-        this.popupUID = guid();
-        this._popupSettings = { animate: true };
-        this._show = false;
-        this._value = null;
-        this._active = false;
-        this.onControlChange = noop;
-        this.onControlTouched = noop;
-        this.onValidatorChange = noop;
-        this.minValidateFn = noop;
-        this.maxValidateFn = noop;
-        this.disabledDatesValidateFn = noop;
-        this.incompleteValidator = noop;
-        this.resolvedPromise = Promise.resolve(null);
-        this.domEvents = [];
-        this._size = 'medium';
-        this._rounded = 'medium';
-        this._fillMode = 'solid';
-        validatePackage(packageMetadata);
-        this.pickerSubscriptions = this.pickerService.onFocus.subscribe(this.handleFocus.bind(this));
-        this.pickerSubscriptions.add(this.pickerService.onBlur.subscribe(this.handleBlur.bind(this)));
-        this.pickerSubscriptions.add(this.pickerService.sameDateSelected.subscribe(this.handleSameSelection.bind(this)));
-        this.pickerSubscriptions.add(this.pickerService.dateCompletenessChange.subscribe(this.handleDateCompletenessChange.bind(this)));
-    }
-    DatePickerComponent_1 = DatePickerComponent;
-    Object.defineProperty(DatePickerComponent.prototype, "cellTemplateRef", {
-        /**
-         * @hidden
-         */
-        set: function (template) {
-            this.cellTemplate = template;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DatePickerComponent.prototype, "monthCellTemplateRef", {
-        /**
-         * @hidden
-         */
-        set: function (template) {
-            this.monthCellTemplate = template;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DatePickerComponent.prototype, "yearCellTemplateRef", {
-        /**
-         * @hidden
-         */
-        set: function (template) {
-            this.yearCellTemplate = template;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DatePickerComponent.prototype, "decadeCellTemplateRef", {
-        /**
-         * @hidden
-         */
-        set: function (template) {
-            this.decadeCellTemplate = template;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DatePickerComponent.prototype, "centuryCellTemplateRef", {
-        /**
-         * @hidden
-         */
-        set: function (template) {
-            this.centuryCellTemplate = template;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DatePickerComponent.prototype, "weekNumberTemplateRef", {
-        /**
-         * @hidden
-         */
-        set: function (template) {
-            this.weekNumberTemplate = template;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DatePickerComponent.prototype, "headerTitleTemplateRef", {
-        /**
-         * @hidden
-         */
-        set: function (template) {
-            this.headerTitleTemplate = template;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DatePickerComponent.prototype, "navigationItemTemplateRef", {
-        /**
-         * @hidden
-         */
-        set: function (template) {
-            this.navigationItemTemplate = template;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DatePickerComponent.prototype, "popupSettings", {
-        get: function () {
-            return this._popupSettings;
-        },
-        /**
-         * Configures the popup options of the DatePicker.
-         *
-         * The available options are:
-         * - `animate: Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
-         * - `appendTo: 'root' | 'component' | ViewContainerRef`&mdash;Controls the popup container. By default, the popup will be appended to the root component.
-         * - `popupClass: String`&mdash;Specifies a list of CSS classes that are used to style the popup.
-         */
-        set: function (settings) {
-            this._popupSettings = Object.assign({}, { animate: true }, settings);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DatePickerComponent.prototype, "value", {
-        get: function () {
-            return this._value;
-        },
-        /**
-         * Specifies the value of the DatePicker component.
-         *
-         * > The `value` has to be a valid
-         * [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance.
-         */
-        set: function (value) {
-            this.verifyValue(value);
-            this._value = cloneDate(value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DatePickerComponent.prototype, "tabIndex", {
-        get: function () {
-            return this.tabindex;
-        },
-        /**
-         * @hidden
-         */
-        set: function (tabIndex) {
-            this.tabindex = tabIndex;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DatePickerComponent.prototype, "disabledDates", {
-        get: function () {
-            return this._disabledDates;
-        },
-        /**
-         * Sets the dates of the DatePicker that will be disabled
-         * ([see example]({% slug disabled_dates_datepicker %})).
-         */
-        set: function (value) {
-            this._disabledDates = value;
-            this.disabledDatesService.initialize(value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DatePickerComponent.prototype, "size", {
-        get: function () {
-            return this._size;
-        },
-        /**
-         * Sets the size of the component.
-         *
-         * The possible values are:
-         * * `'small'`
-         * * `'medium'` (Default)
-         * * `'large'`
-         * * `null`
-         *
-         */
-        set: function (size) {
-            this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
-            this.renderer.removeClass(this.toggleButton.nativeElement, getSizeClass('input', this.size));
-            if (size) {
-                this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
-                this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('input', size));
-            }
-            this._size = size;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DatePickerComponent.prototype, "rounded", {
-        get: function () {
-            return this._rounded;
-        },
-        /**
-         * Sets the border radius of the component.
-         *
-         * The possible values are:
-         * * `'small'`
-         * * `'medium'` (Default)
-         * * `'large'`
-         * * `'full'`
-         * * `null`
-         *
-         */
-        set: function (rounded) {
-            this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-            if (rounded) {
-                this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
-            }
-            this._rounded = rounded;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DatePickerComponent.prototype, "fillMode", {
-        get: function () {
-            return this._fillMode;
-        },
-        /**
-         * Sets the fillMode of the component.
-         *
-         * The possible values are:
-         * * `'solid'` (Default)
-         * * `'flat'`
-         * * `'outline'`
-         * * `null`
-         *
-         */
-        set: function (fillMode) {
-            this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
-            this.renderer.removeClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
-            this.renderer.removeClass(this.toggleButton.nativeElement, "k-button-" + this.fillMode + "-base");
-            if (fillMode) {
-                this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', fillMode));
-                this.renderer.addClass(this.toggleButton.nativeElement, "k-button-" + fillMode + "-base");
-                this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
-            }
-            this._fillMode = fillMode;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DatePickerComponent.prototype, "disabledClass", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.disabled;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DatePickerComponent.prototype, "inputRole", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.readOnlyInput ? 'listbox' : 'spinbutton';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DatePickerComponent.prototype, "isActive", {
-        get: function () {
-            return this._active;
-        },
-        set: function (value) {
-            this._active = value;
-            if (!this.wrapper) {
-                return;
-            }
-            var element = this.wrapper.nativeElement;
-            if (value) {
-                this.renderer.addClass(element, 'k-focus');
-            }
-            else {
-                this.renderer.removeClass(element, 'k-focus');
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DatePickerComponent.prototype, "show", {
-        get: function () {
-            return this._show;
-        },
-        set: function (show) {
-            var _this = this;
-            if (show && (this.disabled || this.readonly)) {
-                return;
-            }
-            var skipZone = !show && (!this._show || !hasObservers(this.close));
-            if (!skipZone) {
-                this.zone.run(function () {
-                    _this.togglePopup(show);
-                });
-            }
-            else {
-                this.togglePopup(show);
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @hidden
-     * Used by the TextBoxContainer to determine if the component is empty.
-     */
-    DatePickerComponent.prototype.isEmpty = function () {
-        return !this.value && this.input.isEmpty();
-    };
-    /**
-     * @hidden
-     */
-    DatePickerComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        this.localizationChangeSubscription = this.localization
-            .changes
-            .subscribe(function () { return _this.cdr.markForCheck(); });
-        this.control = this.injector.get(NgControl, null);
-        if (this.wrapper) {
-            this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
-            this.zone.runOutsideAngular(function () {
-                _this.bindEvents();
-            });
-        }
-    };
-    DatePickerComponent.prototype.ngAfterViewInit = function () {
-        this.setComponentClasses();
-    };
-    /**
-     * @hidden
-     */
-    DatePickerComponent.prototype.ngOnChanges = function (changes) {
-        this.verifySettings();
-        if (changes.min || changes.max || changes.rangeValidation || changes.disabledDatesValidation || changes.disabledDates || changes.incompleteDateValidation) {
-            this.minValidateFn = this.rangeValidation ? minValidator(this.min) : noop;
-            this.maxValidateFn = this.rangeValidation ? maxValidator(this.max) : noop;
-            this.disabledDatesValidateFn = this.disabledDatesValidation ? disabledDatesValidator(this.disabledDatesService.isDateDisabled) : noop;
-            this.incompleteValidator = this.incompleteDateValidation ? incompleteDateValidator() : noop;
-            this.onValidatorChange();
-        }
-    };
-    /**
-     * @hidden
-     */
-    DatePickerComponent.prototype.ngOnDestroy = function () {
-        this.isActive = false;
-        this.show = false;
-        if (this.localizationChangeSubscription) {
-            this.localizationChangeSubscription.unsubscribe();
-        }
-        if (this.windowBlurSubscription) {
-            this.windowBlurSubscription.unsubscribe();
-        }
-        this.domEvents.forEach(function (unbindCallback) { return unbindCallback(); });
-        this.pickerSubscriptions.unsubscribe();
-    };
-    Object.defineProperty(DatePickerComponent.prototype, "isOpen", {
-        /**
-         * Returns the current open state of the popup.
-         */
-        get: function () {
-            return this.show;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    DatePickerComponent.prototype.writeValue = function (value) {
-        this.verifyValue(value);
-        this.value = cloneDate(value);
-        this.cdr.markForCheck();
-        if (!value && this.input) {
-            this.input.placeholder = this.placeholder;
-            this.input.writeValue(value);
-        }
-    };
-    /**
-     * @hidden
-     */
-    DatePickerComponent.prototype.registerOnChange = function (fn) {
-        this.onControlChange = fn;
-    };
-    /**
-     * @hidden
-     */
-    DatePickerComponent.prototype.registerOnTouched = function (fn) {
-        this.onControlTouched = fn;
-    };
-    /**
-     * @hidden
-     */
-    DatePickerComponent.prototype.setDisabledState = function (isDisabled) {
-        this.disabled = isDisabled;
-        this.cdr.markForCheck();
-    };
-    /**
-     * @hidden
-     */
-    DatePickerComponent.prototype.validate = function (control) {
-        return this.minValidateFn(control) || this.maxValidateFn(control) || this.disabledDatesValidateFn(control) || this.incompleteValidator(control, this.input && this.input.isDateIncomplete);
-    };
-    /**
-     * @hidden
-     */
-    DatePickerComponent.prototype.registerOnValidatorChange = function (fn) {
-        this.onValidatorChange = fn;
-    };
-    /**
-     * Focuses the DatePicker component.
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <button (click)="datepicker.focus()">Focus date picker</button>
-     *  <kendo-datepicker #datepicker></kendo-datepicker>
-     * `
-     * })
-     * export class AppComponent { }
-     * ```
-     */
-    DatePickerComponent.prototype.focus = function () {
-        this.input.focus();
-    };
-    /**
-     * Blurs the DatePicker component.
-     */
-    DatePickerComponent.prototype.blur = function () {
-        (this.calendar || this.input)['blur'](); //tslint:disable-line:no-string-literal
-    };
-    /**
-     * Toggles the visibility of the popup. If you use the `toggle` method to show or hide the popup,
-     * the `open` and `close` events do not fire.
-     *
-     * @param show - The state of the popup.
-     */
-    DatePickerComponent.prototype.toggle = function (show) {
-        var _this = this;
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        this.resolvedPromise.then(function () {
-            _this._toggle((show === undefined) ? !_this.show : show);
-        });
-    };
-    /**
-     * @hidden
-     */
-    DatePickerComponent.prototype.handleIconClick = function (event) {
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        event.preventDefault();
-        this.focusInput();
-        //XXX: explicitly call the handleFocus handler here
-        //due to async IE focus event
-        this.handleFocus();
-        this.show = !this.show;
-        this.cdr.markForCheck();
-    };
-    /**
-     * @hidden
-     */
-    DatePickerComponent.prototype.handleMousedown = function (args) {
-        args.preventDefault();
-    };
-    /**
-     * @hidden
-     */
-    DatePickerComponent.prototype.handleChange = function (value) {
-        this.cdr.markForCheck();
-        this.focusInput();
-        this.value = value;
-        this.show = false;
-        this.onControlChange(cloneDate(value));
-        this.valueChange.emit(cloneDate(value));
-    };
-    /**
-     * @hidden
-     */
-    DatePickerComponent.prototype.handleInputChange = function (value) {
-        this.handleChange(this.input.formatSections.time ? value : this.mergeTime(value));
-    };
-    Object.defineProperty(DatePickerComponent.prototype, "popupClasses", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return [
-                'k-calendar-container',
-                'k-group',
-                'k-reset'
-            ].concat(this.popupSettings.popupClass || []);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DatePickerComponent.prototype, "appendTo", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            var appendTo = this.popupSettings.appendTo;
-            if (!appendTo || appendTo === 'root') {
-                return undefined;
-            }
-            return appendTo === 'component' ? this.container : appendTo;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DatePickerComponent.prototype, "input", {
-        get: function () {
-            return this.pickerService.input;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DatePickerComponent.prototype, "calendar", {
-        get: function () {
-            return this.pickerService.calendar;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    DatePickerComponent.prototype.mergeTime = function (value) {
-        return this.value && value ? setTime(value, this.value) : value;
-    };
-    /**
-     * @hidden
-     */
-    DatePickerComponent.prototype.handleKeydown = function (e) {
-        var altKey = e.altKey, shiftKey = e.shiftKey, keyCode = e.keyCode, target = e.target;
-        if (keyCode === Keys.Escape) {
-            this.show = false;
-        }
-        if (altKey) {
-            if (keyCode === Keys.ArrowDown && !this.show) {
-                this.show = true;
-            }
-            if (keyCode === Keys.ArrowUp) {
-                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;
-        }
-    };
-    DatePickerComponent.prototype.togglePopup = function (show) {
-        var event = new PreventableEvent();
-        if (!this._show && show) {
-            this.open.emit(event);
-        }
-        else if (this._show && !show) {
-            this.close.emit(event);
-        }
-        if (event.isDefaultPrevented()) {
-            return;
-        }
-        this._toggle(show);
-        this.toggleFocus();
-    };
-    DatePickerComponent.prototype._toggle = function (show) {
-        var _this = this;
-        if (show === this._show) {
-            return;
-        }
-        this._show = show;
-        if (show) {
-            var direction = this.localization.rtl ? 'right' : 'left';
-            this.popupRef = this.popupService.open({
-                anchor: this.wrapper,
-                anchorAlign: { vertical: 'bottom', horizontal: direction },
-                animate: this.popupSettings.animate,
-                appendTo: this.appendTo,
-                content: this.popupTemplate,
-                popupAlign: { vertical: 'top', horizontal: direction },
-                popupClass: this.popupClasses,
-                positionMode: 'absolute'
-            });
-            this.popupRef.popupElement.setAttribute('id', this.popupUID);
-            this.subscription = this.popupRef.popupAnchorViewportLeave.subscribe(function () { return _this.show = false; });
-        }
-        else {
-            this.popupRef.close();
-            this.popupRef = null;
-            this.subscription.unsubscribe();
-        }
-    };
-    DatePickerComponent.prototype.focusInput = function () {
-        if (this.touchEnabled) {
-            return;
-        }
-        this.input.focus();
-    };
-    DatePickerComponent.prototype.toggleFocus = function () {
-        if (!this.isActive) {
-            return;
-        }
-        if (this.show) {
-            if (!this.calendar) {
-                this.cdr.detectChanges();
-            }
-            if (this.calendar) {
-                this.calendar.focus();
-            }
-        }
-        else if (!this.touchEnabled) {
-            this.input.focus();
-        }
-        else if (!this.input.isActive) {
-            this.handleBlur();
-        }
-    };
-    DatePickerComponent.prototype.verifySettings = function () {
-        if (!isDevMode()) {
-            return;
-        }
-        if (!isValidRange(this.min, this.max)) {
-            throw new Error("The max value should be bigger than the min. See " + MIN_DOC_LINK + " and " + MAX_DOC_LINK + ".");
-        }
-    };
-    DatePickerComponent.prototype.verifyValue = function (value) {
-        if (!isDevMode()) {
-            return;
-        }
-        if (value && !(value instanceof Date)) {
-            throw new Error("The 'value' should be a valid JavaScript Date instance. Check " + VALUE_DOC_LINK + " for possible resolution.");
-        }
-    };
-    DatePickerComponent.prototype.bindEvents = function () {
-        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));
-        }
-    };
-    DatePickerComponent.prototype.handleFocus = function () {
-        var _this = this;
-        if (this.isActive) {
-            return;
-        }
-        this.isActive = true;
-        if (hasObservers(this.onFocus)) {
-            this.zone.run(function () {
-                _this.onFocus.emit();
-            });
-        }
-    };
-    DatePickerComponent.prototype.handleWindowBlur = function () {
-        if (!this.isOpen) {
-            return;
-        }
-        this.show = false;
-    };
-    DatePickerComponent.prototype.handleBlur = function (args) {
-        var _this = this;
-        var currentTarget = args && currentFocusTarget(args);
-        if (currentTarget && (this.input.containsElement(currentTarget) ||
-            (this.calendar && this.calendar.containsElement(currentTarget)))) {
-            return;
-        }
-        if (hasObservers(this.onBlur) || (this.show && hasObservers(this.close)) || requiresZoneOnBlur(this.control)) {
-            this.zone.run(function () {
-                _this.blurComponent();
-                _this.cdr.markForCheck();
-            });
-        }
-        else {
-            this.blurComponent();
-        }
-    };
-    DatePickerComponent.prototype.blurComponent = function () {
-        this.isActive = false; // order is important ¯\_(ツ)_/¯
-        this.show = false;
-        this.cdr.detectChanges();
-        this.onControlTouched();
-        this.onBlur.emit();
-    };
-    DatePickerComponent.prototype.handleSameSelection = function () {
-        if (this.show) {
-            this.focusInput();
-            this.show = false;
-        }
-    };
-    DatePickerComponent.prototype.handleDateCompletenessChange = function () {
-        var _this = this;
-        this.cdr.markForCheck();
-        this.zone.run(function () { return _this.onValidatorChange(); });
-    };
-    DatePickerComponent.prototype.setComponentClasses = function () {
-        if (this.size) {
-            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
-            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('button', this.size));
-        }
-        if (this.rounded) {
-            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-        }
-        if (this.fillMode) {
-            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
-            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
-            this.renderer.addClass(this.toggleButton.nativeElement, "k-button-" + this.fillMode + "-base");
-        }
-    };
-    var DatePickerComponent_1;
-    tslib_1.__decorate([
-        ViewChild('container', { read: ViewContainerRef, static: true }),
-        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(function () { return DatePickerComponent_1; }), multi: true },
-                { provide: NG_VALIDATORS, useExisting: forwardRef(function () { return DatePickerComponent_1; }), multi: true },
-                { provide: KendoInput, useExisting: forwardRef(function () { return DatePickerComponent_1; }) },
-                LocalizationService,
-                PickerService,
-                DisabledDatesService,
-                {
-                    provide: L10N_PREFIX,
-                    useValue: 'kendo.datepicker'
-                }
-            ],
-            selector: 'kendo-datepicker',
-            template: "\n        <ng-container kendoDatePickerLocalizedMessages\n            i18n-today=\"kendo.datepicker.today|The label for the today button in the calendar header\"\n            today=\"Today\"\n\n            i18n-toggle=\"kendo.datepicker.toggle|The title of the toggle button in the datepicker component\"\n            toggle=\"Toggle calendar\"\n\n            i18n-prevButtonTitle=\"kendo.datepicker.prevButtonTitle|The title of the previous button in the Classic calendar\"\n            prevButtonTitle=\"Navigate to previous view\"\n\n            i18n-nextButtonTitle=\"kendo.datepicker.nextButtonTitle|The title of the next button in the Classic calendar\"\n            nextButtonTitle=\"Navigate to next view\"\n        >\n        </ng-container>\n        <kendo-dateinput\n            #input\n            [role]=\"inputRole\"\n            [focusableId]=\"focusableId\"\n            [hasPopup]=\"true\"\n            [isPopupOpen]=\"show\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly || readOnlyInput\"\n            [ariaReadOnly]=\"readonly\"\n            [tabindex]=\"tabindex\"\n            [title]=\"title\"\n            [format]=\"format\"\n            [twoDigitYearMax]=\"twoDigitYearMax\"\n            [formatPlaceholder]=\"formatPlaceholder\"\n            [placeholder]=\"placeholder\"\n            [min]=\"min\"\n            [max]=\"max\"\n            [incompleteDateValidation]=\"incompleteDateValidation\"\n            [fillMode]=\"null\"\n            [rounded]=\"null\"\n            [size]=\"null\"\n            [value]=\"value\"\n            (valueChange)=\"handleInputChange($event)\"\n        ></kendo-dateinput>\n        <button\n            #toggleButton\n            type=\"button\"\n            class=\"k-input-button k-button k-icon-button\"\n            [tabindex]=\"-1\"\n            [attr.title]=\"localization.get('toggle')\"\n            [attr.aria-label]=\"localization.get('toggle')\"\n            [kendoEventsOutsideAngular]=\"{\n                click: handleIconClick,\n                mousedown: handleMousedown\n            }\"\n            [scope]=\"this\"\n        >\n            <span class=\"k-button-icon k-icon k-i-calendar\"></span>\n        </button>\n        <ng-container #container></ng-container>\n        <ng-template #popupTemplate>\n            <kendo-calendar\n                #calendar\n                [type]=\"calendarType\"\n                [min]=\"min\"\n                [max]=\"max\"\n                [navigation]=\"navigation\"\n                [animateNavigation]=\"animateCalendarNavigation\"\n                [activeView]=\"activeView\"\n                [bottomView]=\"bottomView\"\n                [topView]=\"topView\"\n                [weekNumber]=\"weekNumber\"\n                [cellTemplate]=\"cellTemplate\"\n                [monthCellTemplate]=\"monthCellTemplate\"\n                [yearCellTemplate]=\"yearCellTemplate\"\n                [decadeCellTemplate]=\"decadeCellTemplate\"\n                [centuryCellTemplate]=\"centuryCellTemplate\"\n                [weekNumberTemplate]=\"weekNumberTemplate\"\n                [headerTitleTemplate]=\"headerTitleTemplate\"\n                [navigationItemTemplate]=\"navigationItemTemplate\"\n                [focusedDate]=\"focusedDate\"\n                [value]=\"value\"\n                (valueChange)=\"handleChange(mergeTime($event))\"\n                [kendoEventsOutsideAngular]=\"{\n                    keydown: handleKeydown\n                }\"\n                [scope]=\"this\"\n                [disabledDates]=\"disabledDates\"\n            >\n                <kendo-calendar-messages\n                    [today]=\"localization.get('today')\"\n                    [prevButtonTitle]=\"localization.get('prevButtonTitle')\"\n                    [nextButtonTitle]=\"localization.get('nextButtonTitle')\"\n                >\n                </kendo-calendar-messages>\n            </kendo-calendar>\n        <ng-template>\n    "
-        }),
-        tslib_1.__param(9, Optional()), tslib_1.__param(9, Inject(TOUCH_ENABLED)),
-        tslib_1.__metadata("design:paramtypes", [NgZone,
-            LocalizationService,
-            ChangeDetectorRef,
-            PopupService,
-            ElementRef,
-            Renderer2,
-            Injector,
-            PickerService,
-            DisabledDatesService, Boolean])
-    ], DatePickerComponent);
-    return DatePickerComponent;
-}());
-export { DatePickerComponent };