@progress/kendo-angular-dateinputs 17.0.0-develop.4 → 17.0.0-develop.40

package/{esm2020 → esm2022}/datepicker/datepicker.component.mjs

@@ -57,332 +57,211 @@ const TWO_DIGIT_YEAR_MAX = 68;
  * Represents the [Kendo UI DatePicker component for Angular](slug:overview_datepicker).
  */
 export class DatePickerComponent extends MultiTabStop {
-    constructor(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, disabledDatesService) {
-        super();
-        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;
-        /**
-         * @hidden
-         */
-        this.calendarIcon = calendarIcon;
-        /**
-         * If set to `true`, renders a clear button after the input text or DatePicker value has been changed.
-         * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
-         * @default false
-         */
-        this.clearButton = false;
-        /**
-         * Toggles the visibility of the Calendar footer.
-         * @default false
-         */
-        this.footer = false;
-        /**
-         * Sets the format of the displayed Calendar week days' names.
-         * @default 'short'
-         */
-        this.weekDaysFormat = "short";
-        /**
-         * Defines the active view that the Calendar initially renders
-         * ([see example]({% slug viewoptions_calendar %}#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:datepicker_calendar_options#toc-view-selection-depth)).
-         */
-        this.bottomView = CalendarViewEnum[CalendarViewEnum.month];
-        /**
-         * Defines the topmost Calendar view to which the user can navigate
-         * ([see example](slug:datepicker_calendar_options#toc-view-selection-depth)).
-         */
-        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 %})).
-         * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_datepicker#toc-managing-the-datepicker-disabled-state-in-reactive-forms).
-         */
-        this.disabled = false;
-        /**
-         * Sets the read-only state of the DatePicker
-         * ([see example]({% slug readonly_datepicker %}#toc-read-only-datepicker)).
-         *
-         * @default false
-         */
-        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;
-        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;
-        /**
-         * Determines whether to autocorrect invalid segments automatically.
-         *
-         * @default true
-         */
-        this.autoCorrectParts = true;
-        /**
-         * Determines whether to automatically move to the next segment after the user completes the current one.
-         *
-         * @default true
-         */
-        this.autoSwitchParts = true;
-        /**
-         * A string array representing custom keys, which will move the focus to the next date format segment.
-         */
-        this.autoSwitchKeys = [];
-        /**
-         * Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
-         *
-         * @default true
-         */
-        this.enableMouseWheel = true;
-        /**
-         * Determines if the users should see a blinking caret inside the Date Input when possible.
-         *
-         * @default false
-         */
-        this.allowCaretMode = false;
-        /**
-         * When enabled, the DatePicker will autofill the rest of the date to the current date when the component loses focus.
-         *
-         * @default false
-         */
-        this.autoFill = false;
-        /**
-         * Specifies the focused date of the Calendar component
-         * ([see example](slug:datepicker_calendar_options#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 and the title text rendered
-         * in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
-         */
-        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-using-a-function)).
-         */
-        this.disabledDatesValidation = true;
-        /**
-         * Determines whether to display a week number column in the `month` view of the Calendar
-         * ([see example](slug:datepicker_calendar_options#toc-week-number-column)).
-         */
-        this.weekNumber = false;
-        /**
-         * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
-         */
-        this.adaptiveMode = 'none';
-        /**
-         * Fires each time the user selects a new value
-         * ([see example](slug:events_datepicker)).
-         */
-        this.valueChange = new EventEmitter();
-        /**
-         * Fires each time the user focuses the input element
-         * ([see example](slug:events_datepicker)).
-         */
-        this.onFocus = new EventEmitter();
-        /**
-         * Fires each time the input element gets blurred
-         * ([see example](slug:events_datepicker)).
-         */
-        this.onBlur = new EventEmitter();
-        /**
-         * Fires each time the popup is about to open
-         * ([see example](slug:events_datepicker)).
-         * This event is preventable. If you cancel the event, the popup will remain closed.
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires each time the popup is about to close
-         * ([see example](slug:events_datepicker)).
-         * This event is preventable. If you cancel the event, the popup will remain open.
-         */
-        this.close = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.escape = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.wrapperClasses = true;
-        /**
-         * @hidden
-         */
-        this.xIcon = xIcon;
-        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 = 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)));
-        this.pickerSubscriptions.add(this.pickerService.sameDateSelected.subscribe(this.handleSameSelection.bind(this)));
-        this.pickerSubscriptions.add(this.pickerService.dateCompletenessChange.subscribe(this.handleDateCompletenessChange.bind(this)));
-    }
+    zone;
+    localization;
+    cdr;
+    popupService;
+    wrapper;
+    renderer;
+    injector;
+    pickerService;
+    disabledDatesService;
+    /**
+     * @hidden
+     */
+    calendarIcon = calendarIcon;
+    container;
+    popupTemplate;
+    toggleButton;
+    actionSheet;
+    /**
+     * @hidden
+     */
+    focusableId;
+    /**
+     * @hidden
+     */
+    cellTemplate;
     /**
      * @hidden
      */
     set cellTemplateRef(template) {
         this.cellTemplate = template;
     }
+    /**
+     * If set to `true`, renders a clear button after the input text or DatePicker value has been changed.
+     * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
+     * @default false
+     */
+    clearButton = false;
+    /**
+     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     */
+    inputAttributes;
+    /**
+     * @hidden
+     */
+    monthCellTemplate;
     /**
      * @hidden
      */
     set monthCellTemplateRef(template) {
         this.monthCellTemplate = template;
     }
+    /**
+     * @hidden
+     */
+    yearCellTemplate;
     /**
      * @hidden
      */
     set yearCellTemplateRef(template) {
         this.yearCellTemplate = template;
     }
+    /**
+     * @hidden
+     */
+    decadeCellTemplate;
     /**
      * @hidden
      */
     set decadeCellTemplateRef(template) {
         this.decadeCellTemplate = template;
     }
+    /**
+     * @hidden
+     */
+    centuryCellTemplate;
     /**
      * @hidden
      */
     set centuryCellTemplateRef(template) {
         this.centuryCellTemplate = template;
     }
+    /**
+     * @hidden
+     */
+    weekNumberTemplate;
     /**
      * @hidden
      */
     set weekNumberTemplateRef(template) {
         this.weekNumberTemplate = template;
     }
+    /**
+     * @hidden
+     */
+    headerTitleTemplate;
     /**
      * @hidden
      */
     set headerTitleTemplateRef(template) {
         this.headerTitleTemplate = template;
     }
+    /**
+     * @hidden
+     */
+    headerTemplate;
     /**
      * @hidden
      */
     set headerTemplateRef(template) {
         this.headerTemplate = template;
     }
+    /**
+     * @hidden
+     */
+    footerTemplate;
     /**
      * @hidden
      */
     set footerTemplateRef(template) {
         this.footerTemplate = template;
     }
+    /**
+     * Toggles the visibility of the Calendar footer.
+     * @default false
+     */
+    footer = false;
+    /**
+     * @hidden
+     */
+    navigationItemTemplate;
     /**
      * @hidden
      */
     set navigationItemTemplateRef(template) {
         this.navigationItemTemplate = template;
     }
+    /**
+     * Sets the format of the displayed Calendar week days' names.
+     * @default 'short'
+     */
+    weekDaysFormat = "short";
+    /**
+     * Displays the days that fall out of the current month in the Calendar ([see example]({% slug viewoptions_calendar %}#toc-displaying-other-month-days)).
+     * The default values per Calendar type are:
+     * - `infinite` - false
+     * - `classic` - true
+     */
+    showOtherMonthDays;
+    /**
+     * Defines the active view that the Calendar initially renders
+     * ([see example]({% slug viewoptions_calendar %}#toc-active-view)).
+     * By default, the active view is `month`.
+     *
+     * > You have to set `activeView` within the `topView`-`bottomView` range.
+     */
+    activeView = CalendarViewEnum[CalendarViewEnum.month];
+    /**
+     * Defines the bottommost Calendar view to which the user can navigate
+     * ([see example](slug:datepicker_calendar_options#toc-view-selection-depth)).
+     */
+    bottomView = CalendarViewEnum[CalendarViewEnum.month];
+    /**
+     * Defines the topmost Calendar view to which the user can navigate
+     * ([see example](slug:datepicker_calendar_options#toc-view-selection-depth)).
+     */
+    topView = CalendarViewEnum[CalendarViewEnum.century];
+    /**
+     * Specifies the Calendar type.
+     *
+     * The possible values are:
+     * - `infinite` (default)
+     * - `classic`
+     *
+     */
+    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
+     */
+    animateCalendarNavigation = false;
+    /**
+     * Sets or gets the `disabled` property of the DatePicker and determines whether the component is active
+     * ([see example]({% slug disabled_datepicker %})).
+     * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_datepicker#toc-managing-the-datepicker-disabled-state-in-reactive-forms).
+     */
+    disabled = false;
+    /**
+     * Sets the read-only state of the DatePicker
+     * ([see example]({% slug readonly_datepicker %}#toc-read-only-datepicker)).
+     *
+     * @default false
+     */
+    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.
+     */
+    readOnlyInput = false;
     /**
      * Configures the popup options of the DatePicker.
      *
@@ -411,6 +290,62 @@ export class DatePickerComponent extends MultiTabStop {
         }
         return this._navigation;
     }
+    _navigation = true;
+    /**
+     * Specifies the smallest valid date
+     * ([see example]({% slug dateranges_datepicker %})).
+     * By default, the `min` value is `1900-1-1`.
+     */
+    min = cloneDate(MIN_DATE);
+    /**
+     * Specifies the biggest valid date
+     * ([see example]({% slug dateranges_datepicker %})).
+     * By default, the `max` value is `2099-12-31`.
+     */
+    max = cloneDate(MAX_DATE);
+    /**
+     * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
+     */
+    incompleteDateValidation = false;
+    /**
+     * Determines whether to autocorrect invalid segments automatically.
+     *
+     * @default true
+     */
+    autoCorrectParts = true;
+    /**
+     * Determines whether to automatically move to the next segment after the user completes the current one.
+     *
+     * @default true
+     */
+    autoSwitchParts = true;
+    /**
+     * A string array representing custom keys, which will move the focus to the next date format segment.
+     */
+    autoSwitchKeys = [];
+    /**
+     * Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
+     *
+     * @default true
+     */
+    enableMouseWheel = true;
+    /**
+     * Determines if the users should see a blinking caret inside the Date Input when possible.
+     *
+     * @default false
+     */
+    allowCaretMode = false;
+    /**
+     * When enabled, the DatePicker will autofill the rest of the date to the current date when the component loses focus.
+     *
+     * @default false
+     */
+    autoFill = false;
+    /**
+     * Specifies the focused date of the Calendar component
+     * ([see example](slug:datepicker_calendar_options#toc-focused-dates)).
+     */
+    focusedDate = null;
     /**
      * Specifies the value of the DatePicker component.
      *
@@ -424,6 +359,86 @@ export class DatePickerComponent extends MultiTabStop {
     get value() {
         return this._value;
     }
+    /**
+     * 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.
+     */
+    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.
+     */
+    twoDigitYearMax = TWO_DIGIT_YEAR_MAX;
+    /**
+     * Defines the descriptions of the format sections in the input field.
+     * ([more information and examples]({% slug placeholders_datepicker %})).
+     *
+     * @example
+     * ```ts
+     * _@Component({
+     * selector: 'my-app',
+     * template: `
+     * <div class="row example-wrapper" [style.min-height.px]="450">
+     *  <div class="col-xs-12 col-md-6 example-col">
+     *    <p>Full-length format description:</p>
+     *    <kendo-datepicker formatPlaceholder="wide"></kendo-datepicker>
+     *  </div>
+     *
+     *  <div class="col-xs-12 col-md-6 example-col">
+     *    <p>Narrow-length format description:</p>
+     *    <kendo-datepicker formatPlaceholder="narrow"></kendo-datepicker>
+     *  </div>
+     *
+     *  <div class="col-xs-12 col-md-6 example-col">
+     *    <p>Short-length format description:</p>
+     *    <kendo-datepicker formatPlaceholder="short"></kendo-datepicker>
+     *  </div>
+     *
+     *  <div class="col-xs-12 col-md-6 example-col">
+     *    <p>Display defined format:</p>
+     *    <kendo-datepicker format="MM/dd/yyyy" formatPlaceholder="formatPattern"></kendo-datepicker>
+     *  </div>
+     *
+     *  <div class="col-xs-12 col-md-6 example-col">
+     *    <p>Custom defined format descriptions</p>
+     *    <kendo-datepicker format="MM/dd/yyyy"
+     *      [formatPlaceholder]="{ year: 'y', month: 'M', day: 'd' }"
+     *    ></kendo-datepicker>
+     *  </div>
+     * </div>
+     * `
+     * })
+     * export class AppComponent { }
+     * ```
+     */
+    formatPlaceholder;
+    /**
+     * 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 { }
+     * ```
+     */
+    placeholder = null;
+    /**
+     * Sets or gets the `tabindex` property of the DatePicker.
+     */
+    tabindex = 0;
     /**
      * @hidden
      */
@@ -444,6 +459,11 @@ export class DatePickerComponent extends MultiTabStop {
     get disabledDates() {
         return this._disabledDates;
     }
+    /**
+     * Sets the title of the input element of the DatePicker and the title text rendered
+     * in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     */
+    title = "";
     /**
      * Sets the subtitle text rendered in the header of the popup(action sheet).
      * Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
@@ -454,6 +474,22 @@ export class DatePickerComponent extends MultiTabStop {
     get subtitle() {
         return this._subtitle || this.placeholder;
     }
+    _subtitle;
+    /**
+     * Determines whether the built-in min or max validators are enforced when validating a form.
+     */
+    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-using-a-function)).
+     */
+    disabledDatesValidation = true;
+    /**
+     * Determines whether to display a week number column in the `month` view of the Calendar
+     * ([see example](slug:datepicker_calendar_options#toc-week-number-column)).
+     */
+    weekNumber = false;
     /**
      * Sets the size of the component.
      *
@@ -524,6 +560,45 @@ export class DatePickerComponent extends MultiTabStop {
     get fillMode() {
         return this._fillMode;
     }
+    /**
+     * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
+     */
+    adaptiveMode = 'none';
+    /**
+     * Fires each time the user selects a new value
+     * ([see example](slug:events_datepicker)).
+     */
+    valueChange = new EventEmitter();
+    /**
+     * Fires each time the user focuses the input element
+     * ([see example](slug:events_datepicker)).
+     */
+    onFocus = new EventEmitter();
+    /**
+     * Fires each time the input element gets blurred
+     * ([see example](slug:events_datepicker)).
+     */
+    onBlur = new EventEmitter();
+    /**
+     * Fires each time the popup is about to open
+     * ([see example](slug:events_datepicker)).
+     * This event is preventable. If you cancel the event, the popup will remain closed.
+     */
+    open = new EventEmitter();
+    /**
+     * Fires each time the popup is about to close
+     * ([see example](slug:events_datepicker)).
+     * This event is preventable. If you cancel the event, the popup will remain open.
+     */
+    close = new EventEmitter();
+    /**
+     * @hidden
+     */
+    escape = new EventEmitter();
+    /**
+     * @hidden
+     */
+    wrapperClasses = true;
     /**
      * @hidden
      */
@@ -533,6 +608,7 @@ export class DatePickerComponent extends MultiTabStop {
     get popupUID() {
         return this.calendar?.popupId;
     }
+    popupRef;
     get isActive() {
         return this._active;
     }
@@ -576,12 +652,57 @@ export class DatePickerComponent extends MultiTabStop {
             this.toggleCalendar(show);
         }
     }
+    /**
+     * @hidden
+     */
+    xIcon = xIcon;
     /**
      * @hidden
      */
     get isControlRequired() {
         return isControlRequired(this.control);
     }
+    _popupSettings = { animate: true };
+    _show = false;
+    _value = null;
+    _active = false;
+    _disabledDates;
+    onControlChange = noop;
+    onControlTouched = noop;
+    onValidatorChange = noop;
+    minValidateFn = noop;
+    maxValidateFn = noop;
+    disabledDatesValidateFn = noop;
+    incompleteValidator = noop;
+    resolvedPromise = Promise.resolve(null);
+    subscription;
+    pickerSubscriptions;
+    localizationChangeSubscription;
+    windowBlurSubscription;
+    ariaActiveDescendantSubscription;
+    control;
+    domEvents = [];
+    _size = DEFAULT_SIZE;
+    _rounded = DEFAULT_ROUNDED;
+    _fillMode = DEFAULT_FILL_MODE;
+    windowSize;
+    constructor(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, disabledDatesService) {
+        super();
+        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;
+        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)));
+    }
     /**
      * @hidden
      * Used by the TextBoxContainer to determine if the component is empty.
@@ -1084,21 +1205,20 @@ export class DatePickerComponent extends MultiTabStop {
             this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
         }
     }
-}
-DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DatePickerComponent, isStandalone: true, selector: "kendo-datepicker", inputs: { focusableId: "focusableId", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], clearButton: "clearButton", inputAttributes: "inputAttributes", monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer", navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", 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", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode", adaptiveMode: "adaptiveMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "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) },
-        { provide: MultiTabStop, 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: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, 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 }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datepicker"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DatePickerComponent, isStandalone: true, selector: "kendo-datepicker", inputs: { focusableId: "focusableId", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], clearButton: "clearButton", inputAttributes: "inputAttributes", monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer", navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", 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", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode", adaptiveMode: "adaptiveMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "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) },
+            { provide: MultiTabStop, 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: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, 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 }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datepicker"], usesInheritance: true, 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"
@@ -1271,8 +1391,9 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                 </kendo-calendar-messages>
             </kendo-calendar>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,