@progress/kendo-angular-dateinputs 21.4.1 → 22.0.0

package/esm2022/datetimepicker/datetimepicker.component.mjs

@@ -1,2505 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, HostBinding, ViewChild, ElementRef, Input, isDevMode, TemplateRef, ChangeDetectorRef, Output, EventEmitter, NgZone, ViewContainerRef, forwardRef, ContentChild, ChangeDetectionStrategy, Renderer2, Injector, } from '@angular/core';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
-import { Subscription, fromEvent } from 'rxjs';
-import { tap } from 'rxjs/operators';
-import { cloneDate, isEqual, getDate } from '@progress/kendo-date-math';
-import { PopupService } from '@progress/kendo-angular-popup';
-import { IntlService } from '@progress/kendo-angular-intl';
-import { hasObservers, isControlRequired, KendoInput, Keys, MultiTabStop, ResizeSensorComponent, EventsOutsideAngularDirective, normalizeKeys, parseCSSClassNames } from '@progress/kendo-angular-common';
-import { AdaptiveService } from '@progress/kendo-angular-utils';
-import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { validatePackage } from '@progress/kendo-licensing';
-import { packageMetadata } from '../package-metadata';
-import { PickerService } from '../common/picker.service';
-import { DisabledDatesService } from '../calendar/services/disabled-dates.service';
-import { attributeNames, isPresent } from '../common/utils';
-import { mergeDateAndTime, noop, lastMillisecondOfDate, isInRange, isValidRange, isWindowAvailable, getFillModeClass, getRoundedClass, getSizeClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE } from '../util';
-import { CalendarComponent } from '../calendar/calendar.component';
-import { TimeSelectorComponent } from '../timepicker/timeselector.component';
-import { DateInputComponent } from '../dateinput/dateinput.component';
-import { PreventableEvent } from '../preventable-event';
-import { minValidator } from '../validators/min.validator';
-import { maxValidator } from '../validators/max.validator';
-import { disabledDatesValidator } from '../validators/disabled-date.validator';
-import { TIME_PART } from '../timepicker/models/time-part.default';
-import { MIN_DATE, MAX_DATE, MIN_TIME, MAX_TIME } from '../defaults';
-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 { incompleteDateValidator } from '../validators/incomplete-date.validator';
-import { calendarIcon, clockIcon, checkIcon } from '@progress/kendo-svg-icons';
-import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/kendo-angular-navigation';
-import { HeaderTemplateDirective } from '../calendar/templates/header-template.directive';
-import { FooterTemplateDirective } from '../calendar/templates/footer-template.directive';
-import { TimeSelectorCustomMessagesComponent } from '../timepicker/localization/timeselector-custom-messages.component';
-import { CalendarCustomMessagesComponent } from '../calendar/localization/calendar-custom-messages.component';
-import { ButtonComponent } from '@progress/kendo-angular-buttons';
-import { IconWrapperComponent } from '@progress/kendo-angular-icons';
-import { NgTemplateOutlet, NgClass } from '@angular/common';
-import { DateInputCustomMessagesComponent } from '../dateinput/localization/dateinput-custom-messages.component';
-import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
-import { touchEnabled } from '@progress/kendo-common';
-import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-popup";
-import * as i2 from "@progress/kendo-angular-intl";
-import * as i3 from "../common/picker.service";
-import * as i4 from "@progress/kendo-angular-l10n";
-import * as i5 from "../calendar/services/disabled-dates.service";
-import * as i6 from "@progress/kendo-angular-utils";
-const timeFormatRegExp = new RegExp(`${TIME_PART.hour}|${TIME_PART.minute}|${TIME_PART.second}|${TIME_PART.dayperiod}|literal`);
-const VALUE_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/integration-with-json/';
-const MIN_MAX_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/date-time-limits/';
-const DEFAULT_ACTIVE_TAB = 'date';
-const DEFAULT_DATEINPUT_FORMAT = 'g';
-const DEFAULT_TIMESELECTOR_FORMAT = 't';
-const TWO_DIGIT_YEAR_MAX = 68;
-const ACCEPT_BUTTON_SELECTOR = '.k-button.k-time-accept';
-const CANCEL_BUTTON_SELECOTR = '.k-button.k-time-cancel';
-const DATE_TAB_BUTTON_SELECTOR = '.k-button.k-group-start';
-const TIME_TAB_BUTTON_SELECTOR = '.k-button.k-group-end';
-const TODAY_BUTTON_SELECTOR = '.k-button.k-calendar-nav-today';
-/**
- * Represents the Kendo UI DateTimePicker component for Angular.
- * Allows users to select both date and time values from an interactive calendar and time selector.
- *
- * @example
- * ```typescript
- * @Component({
- *   selector: 'my-app',
- *   template: `
- *     <kendo-datetimepicker
- *       [(value)]="dateTimeValue"
- *       [format]="'g'"
- *       [min]="minDate"
- *       [max]="maxDate">
- *     </kendo-datetimepicker>
- *   `
- * })
- * export class AppComponent {
- *   public dateTimeValue: Date = new Date();
- *   public minDate: Date = new Date(2000, 0, 1);
- *   public maxDate: Date = new Date(2030, 11, 31);
- * }
- * ```
- *
- * @remarks
- * Supported children components are: {@link DateTimePickerCustomMessagesComponent}.
- */
-export class DateTimePickerComponent extends MultiTabStop {
-    popupService;
-    intl;
-    cdr;
-    pickerService;
-    ngZone;
-    wrapper;
-    localization;
-    disabledDatesService;
-    renderer;
-    injector;
-    adaptiveService;
-    /**
-     * @hidden
-     */
-    calendarIcon = calendarIcon;
-    /**
-     * @hidden
-     */
-    clockIcon = clockIcon;
-    /**
-     * @hidden
-     */
-    hostClasses = true;
-    /**
-     * @hidden
-     */
-    get disabledClass() {
-        return this.disabled;
-    }
-    /**
-     * @hidden
-     */
-    toggleButton;
-    /**
-     * @hidden
-     */
-    get dateInput() {
-        return this.pickerService.input;
-    }
-    /**
-     * @hidden
-     */
-    get calendar() {
-        return this.pickerService.calendar;
-    }
-    /**
-     * @hidden
-     */
-    get timeSelector() {
-        return this.pickerService.timeSelector;
-    }
-    /**
-     * @hidden
-     */
-    focusableId;
-    /**
-     * 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 datetimepicker_calendar_options %}#toc-displaying-other-month-days)).
-     * You can set this to show or hide days from other months.
-     *
-     * For infinite Calendar the default value is `false`, while for classic Calendar it is `true`.
-     */
-    showOtherMonthDays;
-    /**
-     * Sets the value of the DateTimePicker component.
-     * You can set a specific date and time for the picker to display and use.
-     *
-     * The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance or `null`.
-     */
-    set value(value) {
-        this.verifyValue(value);
-        this._value = cloneDate(value);
-        this.setCalendarValue(value);
-        this.cdr.markForCheck();
-    }
-    get value() {
-        return this._value;
-    }
-    /**
-     * Specifies the date format for displaying the input value
-     * ([see example]({% slug formats_datetimepicker %})).
-     *
-     * When using a string format, the same format is applied regardless of whether the input is focused or blurred.
-     * When using a FormatSettings object, you can specify different inputFormat and displayFormat values for focused and blurred states.
-     *
-     * If a FormatSettings object is provided, the displayFormat value will be used for the popup TimePicker.
-     */
-    set format(format) {
-        this._format = format;
-        const displayFormat = this.getDisplayFormat(format);
-        this.timeSelectorFormat = this.getTimeSelectorFormat(displayFormat);
-    }
-    get format() {
-        return this._format;
-    }
-    /**
-     * The maximum year to assume to be from the current century when typing two-digit year value
-     * ([see example]({% slug formats_datetimepicker %}#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.
-     * @default 68
-     */
-    twoDigitYearMax = TWO_DIGIT_YEAR_MAX;
-    /**
-     * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the DateTimePicker.
-     */
-    set tabindex(value) {
-        const tabindex = Number(value);
-        const defaultValue = 0;
-        this._tabindex = !isNaN(tabindex) ? tabindex : defaultValue;
-    }
-    get tabindex() {
-        return this.disabled ? -1 : this._tabindex;
-    }
-    /**
-     * Sets the dates of the DateTimePicker that will be disabled
-     * ([see example]({% slug disabled_dates_datetimepicker %})).
-     */
-    set disabledDates(value) {
-        this._disabledDates = value;
-        this.disabledDatesService.initialize(value);
-    }
-    get disabledDates() {
-        return this._disabledDates;
-    }
-    /**
-     * Configures the popup settings of the DateTimePicker
-     * ([see example]({% slug datetimepicker_popup_options %}#toc-customizing-the-popup)).
-     *
-     * The available options are animate which controls the popup animation and by default, the open and close animations are enabled.
-     * The `appendTo` option controls the popup container and by default, the popup will be appended to the root component.
-     * The `popupClass` option specifies a list of CSS classes that are used to style the popup.
-     */
-    set popupSettings(settings) {
-        this._popupSettings = Object.assign({}, { animate: true }, settings);
-    }
-    get popupSettings() {
-        return this._popupSettings;
-    }
-    /**
-     * Specifies the title of the input element of the DateTimePicker 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).
-     * @default ''
-     */
-    adaptiveTitle = '';
-    /**
-     * Specifies the subtitle text rendered in the header of the popup (action sheet).
-     * Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
-     * @default ''
-     */
-    adaptiveSubtitle = '';
-    /**
-     * Specifies the `disabled` property of the DateTimePicker and determines whether the component is active
-     * ([see example]({% slug disabled_datetimepicker %})).
-     * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_datetimepicker#toc-managing-the-datetimepicker-disabled-state-in-reactive-forms).
-     * @default false
-     */
-    disabled = false;
-    /**
-     * Specifies the read-only state of the DateTimePicker
-     * ([see example]({% slug readonly_datetimepicker %}#toc-read-only-datetimepicker)).
-     * @default false
-     *
-     * @default false
-     */
-    readonly = false;
-    /**
-     * Determines whether the input field of the DateTimePicker is read-only
-     * ([see example]({% slug readonly_datetimepicker %}#toc-read-only-input)).
-     *
-     * If you set the [`readonly`]({% slug api_dateinputs_datetimepickercomponent %}#toc-readonly) property value to `true`,
-     * the input will be rendered in a read-only state regardless of the `readOnlyInput` value.
-     *
-     * @default false
-     */
-    readOnlyInput = false;
-    /**
-     * Determines whether to display the **Cancel** button in the popup
-     * ([see example]({% slug datetimepicker_popup_options %}#toc-toggling-the-cancel-button)).
-     * @default true
-     */
-    cancelButton = true;
-    /**
-     * Defines the descriptions of the format sections in the input field
-     * ([see example]({% slug placeholders_datetimepicker %}#toc-format-sections-description)).
-     */
-    formatPlaceholder;
-    /**
-     * Specifies the hint which is displayed by the DateTimePicker when its value is `null`
-     * ([see example]({% slug placeholders_datetimepicker %}#toc-text-hints)).
-     */
-    placeholder;
-    /**
-     * Configures the incremental steps of the DateInput and the popup component of the TimePicker
-     * ([see example]({% slug incrementalsteps_datetimepicker %})).
-     */
-    steps = {};
-    /**
-     * Specifies the focused date of the popup Calendar
-     * ([see example]({% slug datetimepicker_calendar_options %}#toc-focused-dates)).
-     */
-    focusedDate;
-    /**
-     * Specifies the Calendar type.
-     *
-     * @default 'infinite'
-     */
-    calendarType = 'infinite';
-    /**
-     * Determines whether to enable animation when navigating to previous/next Calendar view.
-     * Applies to the [`classic`]({% slug api_dateinputs_datetimepickercomponent %}#toc-calendartype) Calendar only.
-     *
-     * The 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;
-    /**
-     * Determines whether to display a week number column in the `month` view of the popup Calendar
-     * ([see example]({% slug datetimepicker_calendar_options %}#toc-week-number-column)).
-     * @default false
-     */
-    weekNumber = false;
-    /**
-     * Specifies the smallest valid date.
-     * The Calendar will not display dates before this value.
-     * If the `min` value of the Calendar is selected, the TimePicker will not display
-     * time entries before the specified time portion of this value
-     * ([see example]({% slug dateranges_datetimepicker %})).
-     */
-    set min(value) {
-        this._min = cloneDate(value);
-        this.calendarMin = getDate(value || MIN_DATE);
-    }
-    get min() {
-        return this._min;
-    }
-    /**
-     * Specifies the biggest valid date.
-     * The Calendar will not display dates after this value.
-     * If the `max` value of the Calendar is selected, the TimePicker will not display
-     * time entries after the specified time portion of this value
-     * ([see example]({% slug dateranges_datetimepicker %})).
-     */
-    set max(value) {
-        this._max = cloneDate(value);
-        this.calendarMax = lastMillisecondOfDate(value || MAX_DATE);
-    }
-    get max() {
-        return this._max;
-    }
-    /**
-     * Determines whether the built-in `min` or `max` validators are enforced when validating a form
-     * ([see example](slug:dateranges_datetimepicker)).
-     *
-     * @default true
-     */
-    rangeValidation = true;
-    /**
-     * Determines whether the built-in validator for disabled date ranges is enforced when validating a form
-     * ([see example](slug:disabled_dates_datetimepicker)).
-     * @default true
-     */
-    disabledDatesValidation = true;
-    /**
-     * Determines whether the built-in validation for incomplete dates is enforced when validating a form.
-     * @default false
-     */
-    incompleteDateValidation = false;
-    /**
-     * Determines whether to auto correct 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;
-    /**
-     * Specifies custom keys that move the focus to the next date format segment.
-     */
-    autoSwitchKeys = [];
-    /**
-     * Determines whether you can use the mouse scroll to increase or decrease the time segment values.
-     *
-     * @default true
-     */
-    enableMouseWheel = true;
-    /**
-     * Determines whether you can see a blinking caret inside the DateInput when possible.
-     *
-     * @default false
-     */
-    allowCaretMode = false;
-    /**
-     * Renders a clear button when set to `true` after the input text or DateTimePicker value has been changed.
-     * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
-     * @default false
-     */
-    clearButton = false;
-    /**
-     * Auto fills the rest of the date to the current date when the component loses focus.
-     *
-     * @default false
-     */
-    autoFill = false;
-    /**
-     * Enables or disables the adaptive mode. The adaptive rendering is disabled by default.
-     * @default 'none'
-     */
-    adaptiveMode = 'none';
-    /**
-     * Specifies the HTML attributes of the inner focusable input element. You cannot change attributes that are essential for certain component functionalities.
-     */
-    inputAttributes;
-    /**
-     * Fires each time the user selects a new value
-     * ([see example](slug:events_datetimepicker)).
-     */
-    valueChange = new EventEmitter();
-    /**
-     * Fires each time the popup is about to open
-     * ([see example](slug:events_datetimepicker)).
-     * This event is preventable. If you cancel the event by setting `event.preventDefault()`, the popup will remain closed.
-     */
-    open = new EventEmitter();
-    /**
-     * Fires each time the popup is about to close
-     * ([see example](slug:events_datetimepicker)).
-     * This event is preventable. If you cancel the event by setting `event.preventDefault()`, the popup will remain open.
-     */
-    close = new EventEmitter();
-    /**
-     * Fires each time the user focuses the component
-     * ([see example](slug:events_datetimepicker)).
-     */
-    onFocus = new EventEmitter();
-    /**
-     * Fires each time the user blurs the component
-     * ([see example](slug:events_datetimepicker)).
-     */
-    onBlur = new EventEmitter();
-    /**
-     * @hidden
-     */
-    escape = new EventEmitter();
-    /**
-     * Indicates whether the component is currently open. This is when the popup or action sheet is open.
-     */
-    get isOpen() {
-        return this.actionSheet?.expanded || isPresent(this.popupRef);
-    }
-    /**
-     * Indicates whether the component or its popup content is focused.
-     */
-    get isActive() {
-        return this._isActive;
-    }
-    set isActive(value) {
-        if (value) {
-            this.renderer.addClass(this.wrapper.nativeElement, 'k-focus');
-        }
-        else {
-            this.renderer.removeClass(this.wrapper.nativeElement, 'k-focus');
-        }
-        this._isActive = value;
-    }
-    /**
-     * Specifies the active tab when opening the popup
-     * ([see example]({% slug datetimepicker_popup_options %}#toc-setting-the-default-tab)).
-     */
-    set defaultTab(tab) {
-        this._defaultTab = tab || DEFAULT_ACTIVE_TAB;
-        this.activeTab = this.defaultTab;
-    }
-    get defaultTab() {
-        return this._defaultTab;
-    }
-    /**
-     * Specifies the size of the component.
-     *
-     */
-    set size(size) {
-        this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
-        this.renderer.removeClass(this.toggleButton.nativeElement, getSizeClass('button', this.size));
-        const newSize = size || DEFAULT_SIZE;
-        if (newSize !== 'none') {
-            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', newSize));
-            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('button', newSize));
-        }
-        this._size = newSize;
-    }
-    get size() {
-        return this._size;
-    }
-    /**
-     * Specifies the border radius of the component.
-     *
-     */
-    set rounded(rounded) {
-        this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-        const newRounded = rounded || DEFAULT_ROUNDED;
-        if (newRounded !== 'none') {
-            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(newRounded));
-        }
-        this._rounded = newRounded;
-    }
-    get rounded() {
-        return this._rounded;
-    }
-    /**
-     * Specifies the fill mode of the component.
-     *
-     */
-    set fillMode(fillMode) {
-        this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
-        this.renderer.removeClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
-        this.renderer.removeClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
-        const newFillMode = fillMode || DEFAULT_FILL_MODE;
-        if (newFillMode !== 'none') {
-            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', newFillMode));
-            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', newFillMode));
-            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${newFillMode}-base`);
-        }
-        this._fillMode = newFillMode;
-    }
-    get fillMode() {
-        return this._fillMode;
-    }
-    /**
-     * @hidden
-     */
-    get tabSwitchTransition() {
-        /*
-         When the popup is opening, disables the set transition in the themes. When `defaultTab` is set to `time`,
-         the popup opens with an active **Time** tab and the animation of the initial transition is undesired.
-         Setting the inline transition style to `none` overrides the set animation in the themes.
-         Setting the inline transition style to `null` does not apply any inline styles or override the themes CSS.
-        */
-        return this.isOpen ? null : 'none';
-    }
-    /**
-     * @hidden
-     *
-     * Indicates whether the Calendar will be disabled.
-     * The inactive tab component gets disabled and becomes inaccessible on tab click.
-     */
-    get disableCalendar() {
-        return this.activeTab !== 'date' && !this.calendar.isActive;
-    }
-    /**
-     * @hidden
-     *
-     * Indicates whether the TimeSelector will be disabled.
-     * The inactive tab component gets disabled and becomes inaccessible on tab click.
-     */
-    get disableTimeSelector() {
-        return this.activeTab !== 'time' && !this.timeSelector.isActive;
-    }
-    /**
-     * @hidden
-     */
-    get isAdaptiveModeEnabled() {
-        return this.adaptiveMode === 'auto';
-    }
-    /**
-     * @hidden
-     */
-    get isAdaptive() {
-        return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
-    }
-    /**
-     * @hidden
-     */
-    onResize() {
-        const currentWindowSize = this.adaptiveService.size;
-        if (!this.isOpen || this.windowSize === currentWindowSize) {
-            return;
-        }
-        if (this.actionSheet.expanded) {
-            this.toggleActionSheet(false);
-        }
-        else {
-            this._togglePopup(false);
-        }
-        this.windowSize = currentWindowSize;
-    }
-    /**
-     * @hidden
-     *
-     * Controls whether the Calendar or the TimeSelector will be displayed.
-     */
-    activeTab = DEFAULT_ACTIVE_TAB;
-    /**
-     * @hidden
-     *
-     * Specifies the stripped time-related format that is used in the TimeSelector.
-     * Updates each time the `format` property value changes.
-     */
-    timeSelectorFormat = DEFAULT_TIMESELECTOR_FORMAT;
-    /**
-     * @hidden
-     */
-    timeSelectorMin = cloneDate(MIN_TIME);
-    /**
-     * @hidden
-     */
-    timeSelectorMax = cloneDate(MAX_TIME);
-    /**
-     * @hidden
-     */
-    calendarValue = null;
-    /**
-     * @hidden
-     */
-    calendarMin = cloneDate(MIN_DATE);
-    /**
-     * @hidden
-     */
-    calendarMax = lastMillisecondOfDate(MAX_DATE);
-    /**
-     * @hidden
-     */
-    checkIcon = checkIcon;
-    /**
-     * @hidden
-     */
-    windowSize;
-    /**
-     * @hidden
-     */
-    cellTemplate;
-    /**
-     * @hidden
-     */
-    monthCellTemplate;
-    /**
-     * @hidden
-     */
-    yearCellTemplate;
-    /**
-     * @hidden
-     */
-    decadeCellTemplate;
-    /**
-     * @hidden
-     */
-    centuryCellTemplate;
-    /**
-     * @hidden
-     */
-    weekNumberTemplate;
-    /**
-     * @hidden
-     */
-    headerTitleTemplate;
-    /**
-     * @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;
-    get activeTabComponent() {
-        if (!this.isOpen) {
-            return;
-        }
-        if (!(isPresent(this.calendar) || isPresent(this.timeSelector))) {
-            this.cdr.detectChanges();
-        }
-        return this.activeTab === 'date' ? this.calendar : this.timeSelector;
-    }
-    get appendTo() {
-        const { appendTo } = this.popupSettings;
-        if (!isPresent(appendTo) || appendTo === 'root') {
-            return undefined;
-        }
-        return appendTo === 'component' ? this.container : appendTo;
-    }
-    container;
-    popupTemplate;
-    actionSheet;
-    get popupUID() {
-        return this.calendar?.popupId;
-    }
-    get acceptButton() {
-        if (this.isAdaptive) {
-            return this.actionSheet.element.nativeElement.querySelector(ACCEPT_BUTTON_SELECTOR);
-        }
-        else {
-            return this.popupRef?.popup.instance.container.nativeElement.querySelector(ACCEPT_BUTTON_SELECTOR);
-        }
-    }
-    get cancelButtonElement() {
-        if (this.isAdaptive) {
-            return this.actionSheet.element.nativeElement.querySelector(CANCEL_BUTTON_SELECOTR);
-        }
-        else {
-            return this.popupRef?.popup.instance.container.nativeElement.querySelector(CANCEL_BUTTON_SELECOTR);
-        }
-    }
-    get dateTabButton() {
-        if (this.isAdaptive) {
-            return this.actionSheet.element.nativeElement.querySelector(DATE_TAB_BUTTON_SELECTOR);
-        }
-        else {
-            return this.popupRef?.popup.instance.container.nativeElement.querySelector(DATE_TAB_BUTTON_SELECTOR);
-        }
-    }
-    get timeTabButton() {
-        if (this.isAdaptive) {
-            return this.actionSheet.element.nativeElement.querySelector(TIME_TAB_BUTTON_SELECTOR);
-        }
-        else {
-            return this.popupRef?.popup.instance.container.nativeElement.querySelector(TIME_TAB_BUTTON_SELECTOR);
-        }
-    }
-    get todayButton() {
-        if (this.isAdaptive) {
-            return this.actionSheet.element.nativeElement.querySelector(TODAY_BUTTON_SELECTOR);
-        }
-        else {
-            return this.popupRef?.popup.instance.container.nativeElement.querySelector(TODAY_BUTTON_SELECTOR);
-        }
-    }
-    get popupClasses() {
-        const classes = ['k-datetime-container', 'k-datetimepicker-popup'];
-        if (!this.popupSettings.popupClass) {
-            return classes;
-        }
-        const parsedPopupClasses = parseCSSClassNames(this.popupSettings.popupClass);
-        if (parsedPopupClasses?.length) {
-            classes.push(...parsedPopupClasses);
-        }
-        return classes;
-    }
-    /**
-     * @hidden
-     */
-    get formControl() {
-        const ngControl = this.injector.get(NgControl, null);
-        return ngControl?.control || null;
-    }
-    /**
-     * @hidden
-     */
-    get isControlRequired() {
-        return isControlRequired(this.formControl);
-    }
-    popupRef;
-    _popupSettings = { animate: true };
-    _value = null;
-    _format = DEFAULT_DATEINPUT_FORMAT;
-    _tabindex = 0;
-    _defaultTab = DEFAULT_ACTIVE_TAB;
-    _min = mergeDateAndTime(MIN_DATE, MIN_TIME);
-    _max = mergeDateAndTime(MAX_DATE, MAX_TIME);
-    _disabledDates;
-    _isActive = false;
-    onControlTouched = noop;
-    onControlChange = noop;
-    onValidatorChange = noop;
-    minValidateFn = noop;
-    maxValidateFn = noop;
-    disabledDatesValidateFn = noop;
-    incompleteValidator = noop;
-    subscriptions = new Subscription();
-    ariaActiveDescendantSubscription;
-    _size = DEFAULT_SIZE;
-    _rounded = DEFAULT_ROUNDED;
-    _fillMode = DEFAULT_FILL_MODE;
-    constructor(popupService, intl, cdr, pickerService, ngZone, wrapper, localization, disabledDatesService, renderer, injector, adaptiveService) {
-        super();
-        this.popupService = popupService;
-        this.intl = intl;
-        this.cdr = cdr;
-        this.pickerService = pickerService;
-        this.ngZone = ngZone;
-        this.wrapper = wrapper;
-        this.localization = localization;
-        this.disabledDatesService = disabledDatesService;
-        this.renderer = renderer;
-        this.injector = injector;
-        this.adaptiveService = adaptiveService;
-        validatePackage(packageMetadata);
-    }
-    ngOnInit() {
-        this.subscriptions.add(this.pickerService.onFocus
-            // detect popup changes to disable the inactive view mark-up when the popup is open
-            .pipe(tap(this.detectPopupChanges.bind(this)))
-            .subscribe(this.handleFocus.bind(this)));
-        this.subscriptions.add(this.pickerService.onBlur.subscribe(this.handleBlur.bind(this)));
-        this.subscriptions.add(this.pickerService.sameDateSelected.subscribe(this.handleCalendarValueChange.bind(this)));
-        this.subscriptions.add(this.localization.changes.subscribe(() => this.cdr.markForCheck()));
-        this.subscriptions.add(this.pickerService.dateCompletenessChange.subscribe(this.handleDateCompletenessChange.bind(this)));
-        if (isWindowAvailable()) {
-            this.subscriptions.add(this.ngZone.runOutsideAngular(() => fromEvent(window, 'blur').subscribe(() => {
-                if (!this.isAdaptive) {
-                    this.handleCancel();
-                }
-            })));
-        }
-        this.focusableId = this.dateInput?.focusableId;
-        this.minValidateFn = this.rangeValidation ? minValidator(this.min) : noop;
-        this.maxValidateFn = this.rangeValidation ? maxValidator(this.max) : noop;
-    }
-    ngAfterViewInit() {
-        this.setComponentClasses();
-        this.windowSize = this.adaptiveService.size;
-    }
-    ngOnChanges(changes) {
-        if (isPresent(changes['min']) || isPresent(changes['max'])) {
-            this.verifyMinMaxRange();
-        }
-        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();
-        }
-        if (!this.focusableId || changes['focusableId']) {
-            this.focusableId = this.dateInput?.focusableId;
-        }
-    }
-    ngOnDestroy() {
-        if (this.isOpen && !this.isAdaptive) {
-            this.closePopup();
-        }
-        this.subscriptions.unsubscribe();
-    }
-    /**
-     * Focuses the DateTimePicker input if the popup is closed.
-     * Moves the focus to the popup content if the popup is open.
-     */
-    focus() {
-        if (this.disabled) {
-            return;
-        }
-        if (this.isOpen) {
-            this.activeTabComponent.focus();
-        }
-        else {
-            this.dateInput.focus();
-        }
-    }
-    /**
-     * Blurs the DateTimePicker component.
-     */
-    blur() {
-        if (this.isOpen && this.activeTabComponent.isActive) {
-            this.activeTabComponent.blur();
-        }
-        else {
-            this.dateInput.blur();
-        }
-    }
-    /**
-     * Toggles the visibility of the popup or action sheet.
-     * If you use the `toggle` method to show or hide the popup or action sheet,
-     * the `open` and `close` events do not fire.
-     *
-     * @param show - The state of the popup.
-     */
-    toggle(show) {
-        if (this.disabled || this.readonly || show === this.isOpen) {
-            return;
-        }
-        const previousWindowSize = this.windowSize;
-        this.windowSize = this.adaptiveService.size;
-        if (previousWindowSize !== this.windowSize && !show) {
-            if (previousWindowSize !== 'large') {
-                this.toggleActionSheet(show);
-            }
-            else {
-                this._togglePopup(show);
-            }
-        }
-        else {
-            if (this.isAdaptive) {
-                this.toggleActionSheet(show);
-            }
-            else {
-                this._togglePopup(show);
-            }
-        }
-    }
-    /**
-     * @hidden
-     */
-    writeValue(value) {
-        this.verifyValue(value);
-        this.value = cloneDate(value);
-        this.cdr.markForCheck();
-        if (!value && this.dateInput) {
-            this.dateInput.placeholder = this.placeholder;
-            this.dateInput.writeValue(value);
-        }
-    }
-    /**
-     * @hidden
-     */
-    registerOnChange(fn) {
-        this.onControlChange = fn;
-    }
-    /**
-     * @hidden
-     */
-    registerOnTouched(fn) {
-        this.onControlTouched = fn;
-    }
-    /**
-     * @hidden
-     */
-    setDisabledState(disabled) {
-        this.disabled = disabled;
-        this.cdr.markForCheck();
-    }
-    /**
-     * @hidden
-     */
-    validate(control) {
-        return this.minValidateFn(control) || this.maxValidateFn(control) || this.disabledDatesValidateFn(control) || this.incompleteValidator(control, this.dateInput && this.dateInput.isDateIncomplete);
-    }
-    /**
-     * @hidden
-     */
-    registerOnValidatorChange(fn) {
-        this.onValidatorChange = fn;
-    }
-    /**
-     * @hidden
-     *
-     * Used by the TextBoxContainer to determine if the floating label will render in the input.
-     */
-    isEmpty() {
-        return !isPresent(this.value) && this.dateInput.isEmpty();
-    }
-    /**
-     * @hidden
-     */
-    handleIconClick(event) {
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        // prevents the event default to evade focusing the DateInput input when placed inside a label (FF/IE/Edge)
-        event.preventDefault();
-        const runInZone = !this.isOpen || hasObservers(this.close);
-        this.run(runInZone, () => {
-            const shouldOpen = !this.isOpen;
-            // handle focus first to maintain correct event order `focus` => `open`
-            this.handleFocus();
-            if (!shouldOpen) {
-                this.dateInput.focus();
-            }
-            this.toggleDateTime(shouldOpen);
-            this.switchFocus();
-        });
-    }
-    /**
-     * @hidden
-     */
-    handleFocus() {
-        if (this.isActive) {
-            return;
-        }
-        this.isActive = true;
-        if (hasObservers(this.onFocus)) {
-            this.ngZone.run(() => this.onFocus.emit());
-        }
-    }
-    /**
-     * @hidden
-     */
-    handleBlur(event) {
-        if (!this.isActive || this.focusTargetInComponent(event)) {
-            return;
-        }
-        this.isActive = false;
-        const isNgControlUntouched = this.wrapper.nativeElement.classList.contains('ng-untouched');
-        const runInZone = isNgControlUntouched || hasObservers(this.onBlur) || (this.isOpen && hasObservers(this.close));
-        this.run(runInZone, () => {
-            this.onBlur.emit();
-            this.onControlTouched();
-            this.toggleDateTime(false);
-            this.cdr.markForCheck();
-        });
-    }
-    /**
-     * @hidden
-     */
-    changeActiveTab(tab) {
-        if (!this.isOpen || this.activeTab === tab) {
-            return;
-        }
-        // persists the Tcurrent value of the TimeSelector when switching between tabs
-        if (!isEqual(this.timeSelector.value, this.timeSelector.current)) {
-            this.timeSelector.handleAccept();
-        }
-        this.activeTab = tab;
-        this.cdr.detectChanges();
-        this.detectPopupChanges();
-    }
-    /**
-     * @hidden
-     */
-    handleTabChangeTransitionEnd(dateTimeSelector, event) {
-        // handle only the .k-datetime-selector element transition, ignore any child element transitions
-        if (event.target !== dateTimeSelector) {
-            return;
-        }
-        if (this.activeTab === 'time') {
-            this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaActiveDescendant);
-        }
-        this.activeTabComponent.focus();
-    }
-    /**
-     * @hidden
-     */
-    onTabOutLastPart() {
-        if (this.calendarValue) {
-            this.acceptButton.focus();
-        }
-        else if (!this.calendarValue && this.cancelButton) {
-            this.cancelButtonElement.focus();
-        }
-        else {
-            this.dateTabButton.focus();
-        }
-    }
-    /**
-     * @hidden
-     */
-    onTabOutFirstPart() {
-        if (this.activeTab === 'time') {
-            this.renderer.removeClass(this.timeSelector.timeListWrappers.first.nativeElement, 'k-focus');
-            this.timeSelector.showNowButton ? this.timeSelector.now.nativeElement.focus() : this.timeTabButton.focus();
-        }
-    }
-    /**
-     * @hidden
-     */
-    onTabOutNow() {
-        this.timeTabButton.focus();
-    }
-    /**
-     * @hidden
-     */
-    handleAccept() {
-        if (!this.isOpen) {
-            return;
-        }
-        const candidate = mergeDateAndTime(this.calendar.value, this.timeSelector.current);
-        const valueChangePresent = !isEqual(this.value, candidate);
-        const runInZone = valueChangePresent || hasObservers(this.close);
-        this.run(runInZone, () => {
-            this.handleValueChange(candidate);
-            this.dateInput.focus();
-            this.toggleDateTime(false);
-        });
-    }
-    /**
-     * @hidden
-     */
-    handleCancel() {
-        if (!this.isOpen) {
-            return;
-        }
-        const runInZone = hasObservers(this.close);
-        this.dateInput.focus();
-        this.run(runInZone, () => this.toggleDateTime(false));
-        hasObservers(this.escape) && this.escape.emit();
-    }
-    /**
-     * @hidden
-     */
-    handleInputValueChange(value) {
-        this.handleValueChange(value);
-        if (this.isOpen) {
-            this.toggleDateTime(false);
-        }
-    }
-    /**
-     * @hidden
-     */
-    handleDateInputClick() {
-        this.windowSize = this.adaptiveService.size;
-        if (this.isAdaptive) {
-            this.toggleDateTime(true);
-        }
-        else if (this.isOpen) {
-            this.toggleDateTime(false);
-        }
-    }
-    /**
-     * @hidden
-     */
-    handleCalendarValueChange() {
-        this.setTimeSelectorMinMax(this.calendar.value);
-        this.changeActiveTab('time');
-    }
-    /**
-     * @hidden
-     */
-    handleKeyDown(event) {
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        const { altKey } = event;
-        const code = normalizeKeys(event);
-        switch (code) {
-            case altKey && Keys.ArrowUp:
-            case Keys.Escape:
-                this.handleCancel();
-                break;
-            case !this.isOpen && altKey && Keys.ArrowDown:
-                this.ngZone.run(() => this.toggleDateTime(true));
-                break;
-            case altKey && Keys.ArrowRight:
-                this.changeActiveTab('time');
-                break;
-            case altKey && Keys.ArrowLeft:
-                this.changeActiveTab('date');
-                break;
-            case this.isOpen && this.timeSelector.isActive && isPresent(this.calendarValue) && Keys.Enter:
-                this.handleAccept();
-                break;
-            default: return;
-        }
-    }
-    /**
-     * @hidden
-     */
-    handleTab(event) {
-        event.preventDefault();
-        const { shiftKey } = event;
-        switch (event.target) {
-            case this.acceptButton:
-                if (!shiftKey) {
-                    this.cancelButton ? this.cancelButtonElement.focus() : this.dateTabButton.focus();
-                }
-                else {
-                    if (this.activeTab === 'date') {
-                        this.calendar.monthView.list.nativeElement.focus();
-                    }
-                    else {
-                        this.timeSelector.timeLists.last.focus();
-                    }
-                }
-                break;
-            case this.cancelButtonElement:
-                if (this.calendarValue) {
-                    shiftKey ? this.acceptButton.focus() : this.dateTabButton.focus();
-                }
-                else {
-                    if (shiftKey) {
-                        if (this.activeTab === 'date') {
-                            this.calendar.monthView.list.nativeElement.focus();
-                        }
-                        else {
-                            this.timeSelector.timeLists.last.focus();
-                        }
-                    }
-                    else {
-                        this.dateTabButton.focus();
-                    }
-                }
-                break;
-            case this.dateTabButton:
-                if (this.cancelButton) {
-                    this.cancelButtonElement.focus();
-                }
-                if (!this.cancelButton && this.calendarValue) {
-                    this.acceptButton.focus();
-                }
-                if (!this.cancelButton && !this.calendarValue) {
-                    if (this.activeTab === 'date') {
-                        this.calendar.monthView.list.nativeElement.focus();
-                    }
-                    else {
-                        this.timeSelector.timeLists.last.focus();
-                    }
-                }
-                break;
-            case this.timeTabButton:
-                if (this.activeTab === 'time') {
-                    this.timeSelector.showNowButton ?
-                        this.timeSelector.now.nativeElement.focus() :
-                        this.timeSelector.timeLists.first.focus();
-                }
-                else {
-                    this.todayButton.focus();
-                }
-                break;
-            default:
-                break;
-        }
-    }
-    /**
-     * @hidden
-     */
-    handleActionSheetCollapse() {
-        // If not handled, the actionsheet expanded state does not get updated when overlay is clicked
-        this.cdr.markForCheck();
-        // Reset tabs after actionsheet is collapsed, otherwise the tab change can be seen during the animation
-        this.resetActiveTab();
-    }
-    /**
-     * @hidden
-     *
-     * Prevents the diversion of the focus from the currently active element in the component.
-     */
-    preventMouseDown(event) {
-        event.preventDefault();
-    }
-    /**
-     * @hidden
-     */
-    toggleActionSheet(show) {
-        if (isPresent(show) && show && !this.isOpen) {
-            this.actionSheet.toggle();
-            this.renderer.setAttribute(this.actionSheet.element.nativeElement, 'id', this.popupUID);
-            this.renderer.setAttribute(this.dateInput?.inputElement, attributeNames.ariaControls, this.popupUID);
-            this.setAriaActiveDescendant();
-        }
-        else if (isPresent(show) && !show && this.isOpen) {
-            this.handleBlur();
-            this.actionSheet.toggle();
-            this.ariaActiveDescendantSubscription.unsubscribe();
-            if (this.dateInput) {
-                this.renderer.removeAttribute(this.dateInput.inputElement, attributeNames.ariaActiveDescendant);
-                this.renderer.removeAttribute(this.dateInput.inputElement, attributeNames.ariaControls);
-                this.dateInput.focus();
-            }
-        }
-    }
-    _togglePopup(show) {
-        const shouldOpen = isPresent(show) ? show : !this.isOpen;
-        if (shouldOpen) {
-            this.openPopup();
-            return;
-        }
-        this.closePopup();
-        this.resetActiveTab();
-    }
-    /**
-     * Changes the tab and the calendar or clock icon to the designated default.
-     */
-    resetActiveTab() {
-        if (this.activeTab !== this.defaultTab) {
-            this.activeTab = this.defaultTab;
-            this.cdr.detectChanges();
-        }
-    }
-    verifyValue(value) {
-        if (!isDevMode()) {
-            return;
-        }
-        if (isPresent(value) && !(value instanceof Date)) {
-            throw new Error(`The 'value' should be a valid JavaScript Date instance or null. Check ${VALUE_DOC_LINK} for possible resolution.`);
-        }
-    }
-    verifyMinMaxRange() {
-        if (!isDevMode()) {
-            return;
-        }
-        if (!isValidRange(this.min, this.max)) {
-            throw new Error(`The max value should be bigger than the min. See ${MIN_MAX_DOC_LINK}.`);
-        }
-    }
-    /**
-     * Extracts the time slots and literals that are not preceded by date parts
-     * and combines the resulting parts into a string.
-     * If the provided `format` value does not contain any time parts,
-     * returns the designated format of the default popup component of the `TimePicker`.
-     */
-    getTimeSelectorFormat(format) {
-        const timeSelectorFormat = this.intl
-            .splitDateFormat(format)
-            .filter(this.timeFormatPartFilter)
-            .reduce((format, part) => format += part.pattern, '');
-        return timeSelectorFormat || DEFAULT_TIMESELECTOR_FORMAT;
-    }
-    /**
-     * Extracts the `displayFormat` from the provided `string | FormatSettings` value.
-     * Falls back to the default input value if a falsy value parameter is passed.
-     */
-    getDisplayFormat(format) {
-        if (!format) {
-            return DEFAULT_DATEINPUT_FORMAT;
-        }
-        if (typeof format === 'string') {
-            return format;
-        }
-        else {
-            return format.displayFormat;
-        }
-    }
-    /**
-     * The filter expression that filters out all format parts
-     * except for `hour`, `minute`, `second`, `dayperiod`, and specific literals.
-     * Literals remain only if they are not preceded by date parts.
-     */
-    timeFormatPartFilter(part, index, parts) {
-        const previousPart = index >= 1 && parts[index - 1];
-        if (previousPart && part.type === 'literal') {
-            return timeFormatRegExp.test(previousPart.type);
-        }
-        return timeFormatRegExp.test(part.type);
-    }
-    /**
-     * @hidden
-     */
-    toggleDateTime(open) {
-        if (open === this.isOpen) {
-            return;
-        }
-        const event = new PreventableEvent();
-        if (open) {
-            this.open.emit(event);
-        }
-        else {
-            this.close.emit(event);
-        }
-        if (event.isDefaultPrevented()) {
-            return;
-        }
-        this.toggle(open);
-        this.switchFocus();
-    }
-    switchFocus() {
-        if (!this.isActive) {
-            return;
-        }
-        if (this.isOpen) {
-            this.activeTabComponent.focus();
-        }
-        else if (!touchEnabled) {
-            this.dateInput.focus();
-        }
-        else if (!this.dateInput.isActive) {
-            this.handleBlur();
-        }
-    }
-    openPopup() {
-        this.setCalendarValue(this.value);
-        this.setTimeSelectorMinMax(this.value);
-        const direction = this.localization.rtl ? 'right' : 'left';
-        const appendToComponent = typeof this.popupSettings.appendTo === 'string' && this.popupSettings.appendTo === 'component';
-        this.popupRef = this.popupService.open({
-            anchor: this.wrapper,
-            content: this.popupTemplate,
-            positionMode: appendToComponent ? 'fixed' : 'absolute',
-            animate: this.popupSettings.animate,
-            appendTo: this.appendTo,
-            popupClass: this.popupClasses,
-            anchorAlign: { vertical: 'bottom', horizontal: direction },
-            popupAlign: { vertical: 'top', horizontal: direction }
-        });
-        this.popupRef.popupElement.setAttribute('id', this.popupUID);
-        this.renderer.setAttribute(this.dateInput?.inputElement, attributeNames.ariaControls, this.popupUID);
-        this.setAriaActiveDescendant();
-        this.popupRef.popupAnchorViewportLeave.subscribe(() => this.handleCancel());
-        if (this.calendar.type === 'infinite') {
-            this.subscriptions.add(fromEvent(this.calendar.monthView.list.nativeElement, 'keydown').subscribe((event) => {
-                const { code, shiftKey } = event;
-                if (code === Keys.Tab && !shiftKey) {
-                    event.preventDefault();
-                    if (!this.calendarValue && !this.cancelButton) {
-                        this.dateTabButton.focus();
-                    }
-                    else if (this.calendarValue) {
-                        this.acceptButton.focus();
-                    }
-                    else if (this.cancelButton) {
-                        this.cancelButtonElement.focus();
-                    }
-                }
-            }));
-        }
-    }
-    setAriaActiveDescendant() {
-        const focusedCellChangeEvent = this.calendar.type === 'infinite' ?
-            this.calendar.monthView.focusedCellChange :
-            this.calendar.multiViewCalendar.viewList.focusedCellChange;
-        this.ariaActiveDescendantSubscription = focusedCellChangeEvent.subscribe((id) => this.renderer.setAttribute(this.dateInput?.inputElement, attributeNames.ariaActiveDescendant, id));
-    }
-    closePopup() {
-        if (!this.isOpen) {
-            return;
-        }
-        this.ariaActiveDescendantSubscription.unsubscribe();
-        if (this.dateInput) {
-            this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaControls);
-            this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaActiveDescendant);
-        }
-        this.popupRef.close();
-        this.popupRef = null;
-    }
-    handleValueChange(value) {
-        if (isEqual(this.value, value)) {
-            if (this.incompleteDateValidation) {
-                this.onControlChange(cloneDate(value));
-            }
-            return;
-        }
-        this.value = cloneDate(value);
-        this.onControlChange(cloneDate(value));
-        this.valueChange.emit(cloneDate(value));
-    }
-    /**
-     * Indicates whether the focus target is part of this component.
-     * Checks whether the focus target is inside the component or in the popup.
-     */
-    focusTargetInComponent(event) {
-        if (!isPresent(event)) {
-            return false;
-        }
-        const relatedTarget = event.relatedTarget || document.activeElement;
-        const focusInPopup = isPresent(this.popupRef) && this.popupRef.popupElement.contains(relatedTarget);
-        const focusInWrapper = this.wrapper.nativeElement.contains(relatedTarget);
-        const isInsideActionSheet = this.actionSheet && (this.actionSheet.element.nativeElement.contains(event.target) || this.actionSheet.element.nativeElement.contains(relatedTarget));
-        return focusInPopup || focusInWrapper || isInsideActionSheet;
-    }
-    setTimeSelectorMinMax(selectedDate) {
-        const minDateSelected = isPresent(selectedDate) && isPresent(this.min) && isEqual(getDate(selectedDate), getDate(this.min));
-        this.timeSelectorMin = cloneDate(minDateSelected ? this.min : MIN_TIME);
-        const maxDateSelected = isPresent(selectedDate) && isPresent(this.max) && isEqual(getDate(selectedDate), getDate(this.max));
-        this.timeSelectorMax = cloneDate(maxDateSelected ? this.max : MAX_TIME);
-    }
-    setCalendarValue(value) {
-        const isInCalendarRange = isPresent(value) && isInRange(value, this.calendarMin, this.calendarMax);
-        this.calendarValue = isInCalendarRange ? getDate(value) : null;
-    }
-    /**
-     * Runs a popup change detection if the popup is available.
-     */
-    detectPopupChanges() {
-        if (!this.isOpen || this.isAdaptive) {
-            return;
-        }
-        this.popupRef.popup.changeDetectorRef.detectChanges();
-    }
-    /**
-     * Runs the provided function either in the Angular zone or in the current zone.
-     * The execution zone depends on the predicate `runInZone` value that is passed.
-     */
-    run(runInZone, fn) {
-        if (runInZone) {
-            this.ngZone.run(() => fn());
-        }
-        else {
-            fn();
-        }
-    }
-    handleDateCompletenessChange() {
-        this.cdr.markForCheck();
-        this.ngZone.run(() => this.onValidatorChange());
-    }
-    setComponentClasses() {
-        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`);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i1.PopupService }, { token: i2.IntlService }, { token: i0.ChangeDetectorRef }, { token: i3.PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i4.LocalizationService }, { token: i5.DisabledDatesService }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i6.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DateTimePickerComponent, isStandalone: true, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", clearButton: "clearButton", autoFill: "autoFill", adaptiveMode: "adaptiveMode", inputAttributes: "inputAttributes", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode", headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", escape: "escape" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass", "class.k-readonly": "this.readonly" } }, providers: [
-            PickerService,
-            LocalizationService,
-            DisabledDatesService,
-            { provide: L10N_PREFIX, useValue: 'kendo.datetimepicker' },
-            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
-            { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
-            { provide: KendoInput, useExisting: forwardRef(() => DateTimePickerComponent) },
-            { provide: MultiTabStop, useExisting: forwardRef(() => DateTimePickerComponent) }
-        ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datetimepicker"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-        <ng-container
-          kendoDateTimePickerLocalizedMessages
-        
-          i18n-dateTab="kendo.datetimepicker.dateTab|The Date tab text in the datetimepicker popup header"
-          dateTab="Date"
-        
-          i18n-dateTabLabel="kendo.datetimepicker.dateTabLabel|The label for the Date tab in the datetimepicker popup header"
-          dateTabLabel="Date tab"
-        
-          i18n-timeTab="kendo.datetimepicker.timeTab|The Time tab text in the datetimepicker popup header"
-          timeTab="Time"
-        
-          i18n-timeTabLabel="kendo.datetimepicker.timeTabLabel|The label for the Time tab in the datetimepicker popup header"
-          timeTabLabel="Time tab"
-        
-          i18n-toggle="kendo.datetimepicker.toggle|The title of the toggle button in the datetimepicker component"
-          toggle="Toggle popup"
-        
-          i18n-accept="kendo.datetimepicker.accept|The Accept button text in the datetimepicker component"
-          accept="Set"
-        
-          i18n-acceptLabel="kendo.datetimepicker.acceptLabel|The label for the Accept button in the datetimepicker component"
-          acceptLabel="Set"
-        
-          i18n-cancel="kendo.datetimepicker.cancel|The Cancel button text in the datetimepicker component"
-          cancel="Cancel"
-        
-          i18n-cancelLabel="kendo.datetimepicker.cancelLabel|The label for the Cancel button in the datetimepicker component"
-          cancelLabel="Cancel"
-        
-          i18n-now="kendo.datetimepicker.now|The Now button text in the timepicker component"
-          now="NOW"
-        
-          i18n-nowLabel="kendo.datetimepicker.nowLabel|The label for the Now button in the timepicker component"
-          nowLabel="Select now"
-        
-          i18n-today="kendo.datetimepicker.today|The label for the today button in the calendar header"
-          today="Today"
-        
-          i18n-prevButtonTitle="kendo.datetimepicker.prevButtonTitle|The title of the previous button in the Classic calendar"
-          prevButtonTitle="Navigate to previous view"
-        
-          i18n-nextButtonTitle="kendo.datetimepicker.nextButtonTitle|The title of the next button in the Classic calendar"
-          nextButtonTitle="Navigate to next view"
-        
-          i18n-parentViewButtonTitle="kendo.datetimepicker.parentViewButtonTitle|The title of the parent view button in the calendar header"
-          parentViewButtonTitle="Navigate to parent view"
-        
-          i18n-hour="kendo.datetimepicker.hour|The label for the hour part in the timepicker component"
-          hour="Hour"
-        
-          i18n-minute="kendo.datetimepicker.minute|The label for the minute part in the timepicker component"
-          minute="Minute"
-        
-          i18n-second="kendo.datetimepicker.second|The label for the second part in the timepicker component"
-          second="Second"
-        
-          i18n-millisecond="kendo.datetimepicker.millisecond|The label for the millisecond part in the timepicker component"
-          millisecond="Millisecond"
-        
-          i18n-dayperiod="kendo.datetimepicker.dayperiod|The label for the dayperiod part in the timepicker component"
-          dayperiod="Dayperiod"
-        
-          i18n-clearTitle="kendo.datetimepicker.clearTitle|The title of the clear button"
-          clearTitle="clear"
-        
-          i18n-adaptiveCloseButtonTitle="kendo.datetimepicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
-          adaptiveCloseButtonTitle="Close"
-          >
-        </ng-container>
-        
-        <kendo-dateinput
-          [value]="value"
-          [format]="format"
-          [clearButton]="clearButton"
-          [twoDigitYearMax]="twoDigitYearMax"
-          [min]="min"
-          [max]="max"
-          [incompleteDateValidation]="incompleteDateValidation"
-          [autoCorrectParts]="autoCorrectParts"
-          [autoSwitchParts]="autoSwitchParts"
-          [autoSwitchKeys]="autoSwitchKeys"
-          [enableMouseWheel]="enableMouseWheel"
-          [allowCaretMode]="allowCaretMode"
-          [autoFill]="autoFill"
-          [formatPlaceholder]="formatPlaceholder"
-          [placeholder]="placeholder"
-          [disabled]="disabled"
-          [focusableId]="focusableId"
-          [readonly]="readonly || readOnlyInput"
-          [role]="'combobox'"
-          [ariaReadOnly]="readonly"
-          [steps]="steps"
-          [tabindex]="tabindex"
-          [isRequired]="isControlRequired"
-          [title]="adaptiveTitle"
-          pickerType="datetimepicker"
-          hasPopup="dialog"
-          [inputAttributes]="inputAttributes"
-          [isPopupOpen]="isOpen"
-          (valueChange)="handleInputValueChange($event)"
-            [kendoEventsOutsideAngular]="{
-                keydown: handleKeyDown
-            }"
-          [scope]="this"
-          fillMode="none"
-          rounded="none"
-          size="none"
-          (click)="handleDateInputClick()"
-          >
-          <kendo-dateinput-messages
-            [clearTitle]="localization.get('clearTitle')"
-            >
-          </kendo-dateinput-messages>
-        </kendo-dateinput>
-        <button
-          #toggleButton
-          type="button"
-          class="k-input-button k-button k-icon-button"
-          [tabindex]="-1"
-          [attr.title]="localization.get('toggle')"
-          [attr.aria-label]="localization.get('toggle')"
-          [attr.disabled]="disabled ? '' : null"
-            [kendoEventsOutsideAngular]="{
-                mousedown: preventMouseDown,
-                click: handleIconClick
-            }"
-          [scope]="this"
-          >
-          @if (activeTab === 'date') {
-            <kendo-icon-wrapper
-              name="calendar"
-              [svgIcon]="calendarIcon"
-              innerCssClass="k-button-icon"
-              >
-            </kendo-icon-wrapper>
-          }
-          @if (activeTab === 'time') {
-            <kendo-icon-wrapper
-              name="clock"
-              [svgIcon]="clockIcon"
-              innerCssClass="k-button-icon"
-              >
-            </kendo-icon-wrapper>
-          }
-        </button>
-        
-        <ng-container #container></ng-container>
-        
-        <ng-template #popupTemplate>
-          <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
-        </ng-template>
-        
-        @if (isAdaptiveModeEnabled) {
-          <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        }
-        
-        <kendo-actionsheet
-          #actionSheet
-          (overlayClick)="toggleActionSheet(false)"
-          (collapse)="handleActionSheetCollapse()"
-          [titleId]="calendar?.headerId"
-            [cssClass]="{
-                'k-adaptive-actionsheet': true,
-                'k-actionsheet-fullscreen': windowSize === 'small',
-                'k-actionsheet-bottom': windowSize === 'medium'
-            }"
-            [cssStyle]="{
-                height: windowSize === 'small' ? '100vh' : '60vh'
-            }"
-          >
-          <ng-template kendoActionSheetTemplate>
-            <div class="k-actionsheet-titlebar">
-              <div class="k-actionsheet-titlebar-group">
-                <div class="k-actionsheet-title">
-                  @if (adaptiveTitle) {
-                    <div class="k-text-center">{{ adaptiveTitle }}</div>
-                  }
-                  @if (adaptiveSubtitle) {
-                    <div class="k-actionsheet-subtitle k-text-center">{{ adaptiveSubtitle }}</div>
-                  }
-                </div>
-                <div class="k-actionsheet-actions">
-                  <button
-                    kendoButton
-                    type="button"
-                    icon="check"
-                    [attr.title]="localization.get('adaptiveCloseButtonTitle')"
-                    [svgIcon]="checkIcon"
-                    fillMode="flat"
-                    themeColor="primary"
-                    [tabIndex]="-1"
-                    size="large"
-                    innerCssClass="k-button-icon"
-                    (click)="toggleActionSheet(false)">
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div class="k-actionsheet-content">
-              <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
-            </div>
-            <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
-              @if (cancelButton) {
-                <button kendoButton
-                  class="k-time-cancel"
-                  type="button"
-                  (click)="handleCancel()"
-                  size="large"
-                  [attr.title]="localization.get('cancelLabel')"
-                  [attr.aria-label]="localization.get('cancelLabel')"
-                  >
-                  {{localization.get('cancel')}}
-                </button>
-              }
-        
-              <button kendoButton
-                type="button"
-                class="k-time-accept"
-                (click)="handleAccept()"
-                [disabled]="!calendarValue"
-                size="large"
-                themeColor="primary"
-                [attr.title]="localization.get('acceptLabel')"
-                [attr.aria-label]="localization.get('acceptLabel')"
-                >
-                {{localization.get('accept')}}
-              </button>
-            </div>
-          </ng-template>
-        </kendo-actionsheet>
-        
-        <ng-template #dateTimeTemplate>
-          <div
-            class="k-datetime-wrap k-{{activeTab}}-tab"
-                [ngClass]="{
-                    'k-datetime-wrap-md': !isAdaptive,
-                    'k-datetime-wrap-lg': isAdaptive
-                }"
-                [kendoEventsOutsideAngular]="{
-                    mousedown: preventMouseDown,
-                    keydown: handleKeyDown
-                }"
-            [scope]="this"
-            >
-            <div class="k-datetime-buttongroup"
-                    [kendoEventsOutsideAngular]="{
-                        focusin: handleFocus,
-                        focusout: handleBlur
-                    }"
-              [scope]="this"
-              >
-              <div class="k-button-group k-button-group-solid k-button-group-stretched" role="group">
-                <button kendoButton
-                  type="button"
-                  class="k-group-start"
-                  [size]="isAdaptive ? 'large' : size"
-                  [class.k-selected]="activeTab === 'date'"
-                  [attr.aria-pressed]="activeTab === 'date' ? 'true' : 'false'"
-                  [attr.title]="localization.get('dateTabLabel')"
-                  [attr.aria-label]="localization.get('dateTabLabel')"
-                            [kendoEventsOutsideAngular]="{
-                                click: changeActiveTab.bind(this, 'date'),
-                                'keydown.shift.tab': handleTab
-                            }"
-                  [scope]="this"
-                  >
-                  {{localization.get('dateTab')}}
-                </button>
-                <button kendoButton
-                  type="button"
-                  class="k-group-end"
-                  [size]="isAdaptive ? 'large' : size"
-                  [class.k-selected]="activeTab === 'time'"
-                  [attr.aria-pressed]="activeTab === 'time' ? 'true' : 'false'"
-                  [attr.title]="localization.get('timeTabLabel')"
-                  [attr.aria-label]="localization.get('timeTabLabel')"
-                            [kendoEventsOutsideAngular]="{
-                                click: changeActiveTab.bind(this, 'time'),
-                                'keydown.tab': handleTab
-                            }"
-                  [scope]="this"
-                  >
-                  {{localization.get('timeTab')}}
-                </button>
-              </div>
-            </div>
-            <div
-              #dateTimeSelector
-              class="k-datetime-selector"
-              [style.transition]="tabSwitchTransition"
-                    [kendoEventsOutsideAngular]="{
-                        transitionend: handleTabChangeTransitionEnd.bind(this, dateTimeSelector)
-                    }"
-              >
-              <div class="k-datetime-calendar-wrap">
-                <kendo-calendar
-                  #calendar
-                  [focusedDate]="focusedDate"
-                  [size]="isAdaptive ? 'large' : size"
-                  [(value)]="calendarValue"
-                  [type]="calendarType"
-                  [min]="calendarMin"
-                  [max]="calendarMax"
-                  [weekDaysFormat]="weekDaysFormat"
-                  [weekNumber]="weekNumber"
-                  [navigation]="false"
-                  [animateNavigation]="animateCalendarNavigation"
-                  [showOtherMonthDays]="showOtherMonthDays"
-                  [cellTemplate]="cellTemplate"
-                  [monthCellTemplate]="monthCellTemplate"
-                  [yearCellTemplate]="yearCellTemplate"
-                  [decadeCellTemplate]="decadeCellTemplate"
-                  [centuryCellTemplate]="centuryCellTemplate"
-                  [weekNumberTemplate]="weekNumberTemplate"
-                  [headerTitleTemplate]="headerTitleTemplate"
-                  [headerTemplate]="headerTemplate"
-                  [footerTemplate]="footerTemplate"
-                  [footer]="footer"
-                  [disabled]="disableCalendar"
-                  [disabledDates]="disabledDates"
-                  (valueChange)="handleCalendarValueChange()"
-                  >
-                  <kendo-calendar-messages
-                    [today]="localization.get('today')"
-                    [prevButtonTitle]="localization.get('prevButtonTitle')"
-                    [nextButtonTitle]="localization.get('nextButtonTitle')"
-                    [parentViewButtonTitle]="localization.get('parentViewButtonTitle')"
-                    >
-                  </kendo-calendar-messages>
-                </kendo-calendar>
-              </div>
-              <div class="k-datetime-time-wrap">
-                <kendo-timeselector
-                  [ngClass]="{'k-timeselector-lg': isAdaptive}"
-                  [value]="value"
-                  [format]="timeSelectorFormat"
-                  [min]="timeSelectorMin"
-                  [max]="timeSelectorMax"
-                  [setButton]="false"
-                  [cancelButton]="false"
-                  [steps]="steps"
-                  [disabled]="disableTimeSelector"
-                  [isAdaptiveEnabled]="isAdaptiveModeEnabled"
-                  [isDateTimePicker]="true"
-                  (tabOutLastPart)="onTabOutLastPart()"
-                  (tabOutFirstPart)="onTabOutFirstPart()"
-                  (tabOutNow)="onTabOutNow()"
-                  >
-                  <kendo-timeselector-messages
-                    [acceptLabel]="localization.get('acceptLabel')"
-                    [accept]="localization.get('accept')"
-                    [cancelLabel]="localization.get('cancelLabel')"
-                    [cancel]="localization.get('cancel')"
-                    [nowLabel]="localization.get('nowLabel')"
-                    [now]="localization.get('now')"
-                    [hour]="localization.get('hour')"
-                    [minute]="localization.get('minute')"
-                    [second]="localization.get('second')"
-                    [millisecond]="localization.get('millisecond')"
-                    [dayperiod]="localization.get('dayperiod')"
-                    >
-                  </kendo-timeselector-messages>
-                </kendo-timeselector>
-              </div>
-            </div>
-            @if (!isAdaptive) {
-              <div
-                class="k-datetime-footer k-actions k-actions-stretched k-actions-horizontal"
-                    [kendoEventsOutsideAngular]="{
-                        focusin: handleFocus,
-                        focusout: handleBlur
-                    }"
-                [scope]="this"
-                >
-                <button kendoButton
-                  type="button"
-                  class="k-time-accept"
-                  themeColor="primary"
-                  [attr.title]="localization.get('acceptLabel')"
-                  [attr.aria-label]="localization.get('acceptLabel')"
-                  [disabled]="!calendarValue"
-                        [kendoEventsOutsideAngular]="{
-                            click: handleAccept,
-                            'keydown.tab': handleTab,
-                            'keydown.shift.tab': handleTab
-                        }"
-                  [scope]="this"
-                  >
-                  {{localization.get('accept')}}
-                </button>
-                @if (cancelButton) {
-                  <button kendoButton
-                    type="button"
-                    class="k-time-cancel"
-                    [attr.title]="localization.get('cancelLabel')"
-                    [attr.aria-label]="localization.get('cancelLabel')"
-                        [kendoEventsOutsideAngular]="{
-                            click: handleCancel,
-                            'keydown.tab': handleTab,
-                            'keydown.shift.tab': handleTab
-                        }"
-                    [scope]="this"
-                    >
-                    {{localization.get('cancel')}}
-                  </button>
-                }
-              </div>
-            }
-          </div>
-        </ng-template>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { 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: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { 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: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ["closePopup", "activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutFirstPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateTimePickerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-datetimepicker',
-                    exportAs: 'kendo-datetimepicker',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [
-                        PickerService,
-                        LocalizationService,
-                        DisabledDatesService,
-                        { provide: L10N_PREFIX, useValue: 'kendo.datetimepicker' },
-                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
-                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
-                        { provide: KendoInput, useExisting: forwardRef(() => DateTimePickerComponent) },
-                        { provide: MultiTabStop, useExisting: forwardRef(() => DateTimePickerComponent) }
-                    ],
-                    template: `
-        <ng-container
-          kendoDateTimePickerLocalizedMessages
-        
-          i18n-dateTab="kendo.datetimepicker.dateTab|The Date tab text in the datetimepicker popup header"
-          dateTab="Date"
-        
-          i18n-dateTabLabel="kendo.datetimepicker.dateTabLabel|The label for the Date tab in the datetimepicker popup header"
-          dateTabLabel="Date tab"
-        
-          i18n-timeTab="kendo.datetimepicker.timeTab|The Time tab text in the datetimepicker popup header"
-          timeTab="Time"
-        
-          i18n-timeTabLabel="kendo.datetimepicker.timeTabLabel|The label for the Time tab in the datetimepicker popup header"
-          timeTabLabel="Time tab"
-        
-          i18n-toggle="kendo.datetimepicker.toggle|The title of the toggle button in the datetimepicker component"
-          toggle="Toggle popup"
-        
-          i18n-accept="kendo.datetimepicker.accept|The Accept button text in the datetimepicker component"
-          accept="Set"
-        
-          i18n-acceptLabel="kendo.datetimepicker.acceptLabel|The label for the Accept button in the datetimepicker component"
-          acceptLabel="Set"
-        
-          i18n-cancel="kendo.datetimepicker.cancel|The Cancel button text in the datetimepicker component"
-          cancel="Cancel"
-        
-          i18n-cancelLabel="kendo.datetimepicker.cancelLabel|The label for the Cancel button in the datetimepicker component"
-          cancelLabel="Cancel"
-        
-          i18n-now="kendo.datetimepicker.now|The Now button text in the timepicker component"
-          now="NOW"
-        
-          i18n-nowLabel="kendo.datetimepicker.nowLabel|The label for the Now button in the timepicker component"
-          nowLabel="Select now"
-        
-          i18n-today="kendo.datetimepicker.today|The label for the today button in the calendar header"
-          today="Today"
-        
-          i18n-prevButtonTitle="kendo.datetimepicker.prevButtonTitle|The title of the previous button in the Classic calendar"
-          prevButtonTitle="Navigate to previous view"
-        
-          i18n-nextButtonTitle="kendo.datetimepicker.nextButtonTitle|The title of the next button in the Classic calendar"
-          nextButtonTitle="Navigate to next view"
-        
-          i18n-parentViewButtonTitle="kendo.datetimepicker.parentViewButtonTitle|The title of the parent view button in the calendar header"
-          parentViewButtonTitle="Navigate to parent view"
-        
-          i18n-hour="kendo.datetimepicker.hour|The label for the hour part in the timepicker component"
-          hour="Hour"
-        
-          i18n-minute="kendo.datetimepicker.minute|The label for the minute part in the timepicker component"
-          minute="Minute"
-        
-          i18n-second="kendo.datetimepicker.second|The label for the second part in the timepicker component"
-          second="Second"
-        
-          i18n-millisecond="kendo.datetimepicker.millisecond|The label for the millisecond part in the timepicker component"
-          millisecond="Millisecond"
-        
-          i18n-dayperiod="kendo.datetimepicker.dayperiod|The label for the dayperiod part in the timepicker component"
-          dayperiod="Dayperiod"
-        
-          i18n-clearTitle="kendo.datetimepicker.clearTitle|The title of the clear button"
-          clearTitle="clear"
-        
-          i18n-adaptiveCloseButtonTitle="kendo.datetimepicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
-          adaptiveCloseButtonTitle="Close"
-          >
-        </ng-container>
-        
-        <kendo-dateinput
-          [value]="value"
-          [format]="format"
-          [clearButton]="clearButton"
-          [twoDigitYearMax]="twoDigitYearMax"
-          [min]="min"
-          [max]="max"
-          [incompleteDateValidation]="incompleteDateValidation"
-          [autoCorrectParts]="autoCorrectParts"
-          [autoSwitchParts]="autoSwitchParts"
-          [autoSwitchKeys]="autoSwitchKeys"
-          [enableMouseWheel]="enableMouseWheel"
-          [allowCaretMode]="allowCaretMode"
-          [autoFill]="autoFill"
-          [formatPlaceholder]="formatPlaceholder"
-          [placeholder]="placeholder"
-          [disabled]="disabled"
-          [focusableId]="focusableId"
-          [readonly]="readonly || readOnlyInput"
-          [role]="'combobox'"
-          [ariaReadOnly]="readonly"
-          [steps]="steps"
-          [tabindex]="tabindex"
-          [isRequired]="isControlRequired"
-          [title]="adaptiveTitle"
-          pickerType="datetimepicker"
-          hasPopup="dialog"
-          [inputAttributes]="inputAttributes"
-          [isPopupOpen]="isOpen"
-          (valueChange)="handleInputValueChange($event)"
-            [kendoEventsOutsideAngular]="{
-                keydown: handleKeyDown
-            }"
-          [scope]="this"
-          fillMode="none"
-          rounded="none"
-          size="none"
-          (click)="handleDateInputClick()"
-          >
-          <kendo-dateinput-messages
-            [clearTitle]="localization.get('clearTitle')"
-            >
-          </kendo-dateinput-messages>
-        </kendo-dateinput>
-        <button
-          #toggleButton
-          type="button"
-          class="k-input-button k-button k-icon-button"
-          [tabindex]="-1"
-          [attr.title]="localization.get('toggle')"
-          [attr.aria-label]="localization.get('toggle')"
-          [attr.disabled]="disabled ? '' : null"
-            [kendoEventsOutsideAngular]="{
-                mousedown: preventMouseDown,
-                click: handleIconClick
-            }"
-          [scope]="this"
-          >
-          @if (activeTab === 'date') {
-            <kendo-icon-wrapper
-              name="calendar"
-              [svgIcon]="calendarIcon"
-              innerCssClass="k-button-icon"
-              >
-            </kendo-icon-wrapper>
-          }
-          @if (activeTab === 'time') {
-            <kendo-icon-wrapper
-              name="clock"
-              [svgIcon]="clockIcon"
-              innerCssClass="k-button-icon"
-              >
-            </kendo-icon-wrapper>
-          }
-        </button>
-        
-        <ng-container #container></ng-container>
-        
-        <ng-template #popupTemplate>
-          <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
-        </ng-template>
-        
-        @if (isAdaptiveModeEnabled) {
-          <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        }
-        
-        <kendo-actionsheet
-          #actionSheet
-          (overlayClick)="toggleActionSheet(false)"
-          (collapse)="handleActionSheetCollapse()"
-          [titleId]="calendar?.headerId"
-            [cssClass]="{
-                'k-adaptive-actionsheet': true,
-                'k-actionsheet-fullscreen': windowSize === 'small',
-                'k-actionsheet-bottom': windowSize === 'medium'
-            }"
-            [cssStyle]="{
-                height: windowSize === 'small' ? '100vh' : '60vh'
-            }"
-          >
-          <ng-template kendoActionSheetTemplate>
-            <div class="k-actionsheet-titlebar">
-              <div class="k-actionsheet-titlebar-group">
-                <div class="k-actionsheet-title">
-                  @if (adaptiveTitle) {
-                    <div class="k-text-center">{{ adaptiveTitle }}</div>
-                  }
-                  @if (adaptiveSubtitle) {
-                    <div class="k-actionsheet-subtitle k-text-center">{{ adaptiveSubtitle }}</div>
-                  }
-                </div>
-                <div class="k-actionsheet-actions">
-                  <button
-                    kendoButton
-                    type="button"
-                    icon="check"
-                    [attr.title]="localization.get('adaptiveCloseButtonTitle')"
-                    [svgIcon]="checkIcon"
-                    fillMode="flat"
-                    themeColor="primary"
-                    [tabIndex]="-1"
-                    size="large"
-                    innerCssClass="k-button-icon"
-                    (click)="toggleActionSheet(false)">
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div class="k-actionsheet-content">
-              <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
-            </div>
-            <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
-              @if (cancelButton) {
-                <button kendoButton
-                  class="k-time-cancel"
-                  type="button"
-                  (click)="handleCancel()"
-                  size="large"
-                  [attr.title]="localization.get('cancelLabel')"
-                  [attr.aria-label]="localization.get('cancelLabel')"
-                  >
-                  {{localization.get('cancel')}}
-                </button>
-              }
-        
-              <button kendoButton
-                type="button"
-                class="k-time-accept"
-                (click)="handleAccept()"
-                [disabled]="!calendarValue"
-                size="large"
-                themeColor="primary"
-                [attr.title]="localization.get('acceptLabel')"
-                [attr.aria-label]="localization.get('acceptLabel')"
-                >
-                {{localization.get('accept')}}
-              </button>
-            </div>
-          </ng-template>
-        </kendo-actionsheet>
-        
-        <ng-template #dateTimeTemplate>
-          <div
-            class="k-datetime-wrap k-{{activeTab}}-tab"
-                [ngClass]="{
-                    'k-datetime-wrap-md': !isAdaptive,
-                    'k-datetime-wrap-lg': isAdaptive
-                }"
-                [kendoEventsOutsideAngular]="{
-                    mousedown: preventMouseDown,
-                    keydown: handleKeyDown
-                }"
-            [scope]="this"
-            >
-            <div class="k-datetime-buttongroup"
-                    [kendoEventsOutsideAngular]="{
-                        focusin: handleFocus,
-                        focusout: handleBlur
-                    }"
-              [scope]="this"
-              >
-              <div class="k-button-group k-button-group-solid k-button-group-stretched" role="group">
-                <button kendoButton
-                  type="button"
-                  class="k-group-start"
-                  [size]="isAdaptive ? 'large' : size"
-                  [class.k-selected]="activeTab === 'date'"
-                  [attr.aria-pressed]="activeTab === 'date' ? 'true' : 'false'"
-                  [attr.title]="localization.get('dateTabLabel')"
-                  [attr.aria-label]="localization.get('dateTabLabel')"
-                            [kendoEventsOutsideAngular]="{
-                                click: changeActiveTab.bind(this, 'date'),
-                                'keydown.shift.tab': handleTab
-                            }"
-                  [scope]="this"
-                  >
-                  {{localization.get('dateTab')}}
-                </button>
-                <button kendoButton
-                  type="button"
-                  class="k-group-end"
-                  [size]="isAdaptive ? 'large' : size"
-                  [class.k-selected]="activeTab === 'time'"
-                  [attr.aria-pressed]="activeTab === 'time' ? 'true' : 'false'"
-                  [attr.title]="localization.get('timeTabLabel')"
-                  [attr.aria-label]="localization.get('timeTabLabel')"
-                            [kendoEventsOutsideAngular]="{
-                                click: changeActiveTab.bind(this, 'time'),
-                                'keydown.tab': handleTab
-                            }"
-                  [scope]="this"
-                  >
-                  {{localization.get('timeTab')}}
-                </button>
-              </div>
-            </div>
-            <div
-              #dateTimeSelector
-              class="k-datetime-selector"
-              [style.transition]="tabSwitchTransition"
-                    [kendoEventsOutsideAngular]="{
-                        transitionend: handleTabChangeTransitionEnd.bind(this, dateTimeSelector)
-                    }"
-              >
-              <div class="k-datetime-calendar-wrap">
-                <kendo-calendar
-                  #calendar
-                  [focusedDate]="focusedDate"
-                  [size]="isAdaptive ? 'large' : size"
-                  [(value)]="calendarValue"
-                  [type]="calendarType"
-                  [min]="calendarMin"
-                  [max]="calendarMax"
-                  [weekDaysFormat]="weekDaysFormat"
-                  [weekNumber]="weekNumber"
-                  [navigation]="false"
-                  [animateNavigation]="animateCalendarNavigation"
-                  [showOtherMonthDays]="showOtherMonthDays"
-                  [cellTemplate]="cellTemplate"
-                  [monthCellTemplate]="monthCellTemplate"
-                  [yearCellTemplate]="yearCellTemplate"
-                  [decadeCellTemplate]="decadeCellTemplate"
-                  [centuryCellTemplate]="centuryCellTemplate"
-                  [weekNumberTemplate]="weekNumberTemplate"
-                  [headerTitleTemplate]="headerTitleTemplate"
-                  [headerTemplate]="headerTemplate"
-                  [footerTemplate]="footerTemplate"
-                  [footer]="footer"
-                  [disabled]="disableCalendar"
-                  [disabledDates]="disabledDates"
-                  (valueChange)="handleCalendarValueChange()"
-                  >
-                  <kendo-calendar-messages
-                    [today]="localization.get('today')"
-                    [prevButtonTitle]="localization.get('prevButtonTitle')"
-                    [nextButtonTitle]="localization.get('nextButtonTitle')"
-                    [parentViewButtonTitle]="localization.get('parentViewButtonTitle')"
-                    >
-                  </kendo-calendar-messages>
-                </kendo-calendar>
-              </div>
-              <div class="k-datetime-time-wrap">
-                <kendo-timeselector
-                  [ngClass]="{'k-timeselector-lg': isAdaptive}"
-                  [value]="value"
-                  [format]="timeSelectorFormat"
-                  [min]="timeSelectorMin"
-                  [max]="timeSelectorMax"
-                  [setButton]="false"
-                  [cancelButton]="false"
-                  [steps]="steps"
-                  [disabled]="disableTimeSelector"
-                  [isAdaptiveEnabled]="isAdaptiveModeEnabled"
-                  [isDateTimePicker]="true"
-                  (tabOutLastPart)="onTabOutLastPart()"
-                  (tabOutFirstPart)="onTabOutFirstPart()"
-                  (tabOutNow)="onTabOutNow()"
-                  >
-                  <kendo-timeselector-messages
-                    [acceptLabel]="localization.get('acceptLabel')"
-                    [accept]="localization.get('accept')"
-                    [cancelLabel]="localization.get('cancelLabel')"
-                    [cancel]="localization.get('cancel')"
-                    [nowLabel]="localization.get('nowLabel')"
-                    [now]="localization.get('now')"
-                    [hour]="localization.get('hour')"
-                    [minute]="localization.get('minute')"
-                    [second]="localization.get('second')"
-                    [millisecond]="localization.get('millisecond')"
-                    [dayperiod]="localization.get('dayperiod')"
-                    >
-                  </kendo-timeselector-messages>
-                </kendo-timeselector>
-              </div>
-            </div>
-            @if (!isAdaptive) {
-              <div
-                class="k-datetime-footer k-actions k-actions-stretched k-actions-horizontal"
-                    [kendoEventsOutsideAngular]="{
-                        focusin: handleFocus,
-                        focusout: handleBlur
-                    }"
-                [scope]="this"
-                >
-                <button kendoButton
-                  type="button"
-                  class="k-time-accept"
-                  themeColor="primary"
-                  [attr.title]="localization.get('acceptLabel')"
-                  [attr.aria-label]="localization.get('acceptLabel')"
-                  [disabled]="!calendarValue"
-                        [kendoEventsOutsideAngular]="{
-                            click: handleAccept,
-                            'keydown.tab': handleTab,
-                            'keydown.shift.tab': handleTab
-                        }"
-                  [scope]="this"
-                  >
-                  {{localization.get('accept')}}
-                </button>
-                @if (cancelButton) {
-                  <button kendoButton
-                    type="button"
-                    class="k-time-cancel"
-                    [attr.title]="localization.get('cancelLabel')"
-                    [attr.aria-label]="localization.get('cancelLabel')"
-                        [kendoEventsOutsideAngular]="{
-                            click: handleCancel,
-                            'keydown.tab': handleTab,
-                            'keydown.shift.tab': handleTab
-                        }"
-                    [scope]="this"
-                    >
-                    {{localization.get('cancel')}}
-                  </button>
-                }
-              </div>
-            }
-          </div>
-        </ng-template>
-        `,
-                    standalone: true,
-                    imports: [LocalizedMessagesDirective, DateInputComponent, EventsOutsideAngularDirective, DateInputCustomMessagesComponent, IconWrapperComponent, NgTemplateOutlet, ResizeSensorComponent, ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, NgClass, CalendarComponent, CalendarCustomMessagesComponent, TimeSelectorComponent, TimeSelectorCustomMessagesComponent]
-                }]
-        }], ctorParameters: () => [{ type: i1.PopupService }, { type: i2.IntlService }, { type: i0.ChangeDetectorRef }, { type: i3.PickerService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i4.LocalizationService }, { type: i5.DisabledDatesService }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i6.AdaptiveService }], propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-datetimepicker']
-            }, {
-                type: HostBinding,
-                args: ['class.k-input']
-            }], disabledClass: [{
-                type: HostBinding,
-                args: ['class.k-disabled']
-            }], toggleButton: [{
-                type: ViewChild,
-                args: ['toggleButton', { static: true }]
-            }], focusableId: [{
-                type: Input
-            }], weekDaysFormat: [{
-                type: Input
-            }], showOtherMonthDays: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], format: [{
-                type: Input
-            }], twoDigitYearMax: [{
-                type: Input
-            }], tabindex: [{
-                type: Input
-            }], disabledDates: [{
-                type: Input
-            }], popupSettings: [{
-                type: Input
-            }], adaptiveTitle: [{
-                type: Input
-            }], adaptiveSubtitle: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.k-readonly']
-            }], readOnlyInput: [{
-                type: Input
-            }], cancelButton: [{
-                type: Input
-            }], formatPlaceholder: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], steps: [{
-                type: Input
-            }], focusedDate: [{
-                type: Input
-            }], calendarType: [{
-                type: Input
-            }], animateCalendarNavigation: [{
-                type: Input
-            }], weekNumber: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], rangeValidation: [{
-                type: Input
-            }], disabledDatesValidation: [{
-                type: Input
-            }], incompleteDateValidation: [{
-                type: Input
-            }], autoCorrectParts: [{
-                type: Input
-            }], autoSwitchParts: [{
-                type: Input
-            }], autoSwitchKeys: [{
-                type: Input
-            }], enableMouseWheel: [{
-                type: Input
-            }], allowCaretMode: [{
-                type: Input
-            }], clearButton: [{
-                type: Input
-            }], autoFill: [{
-                type: Input
-            }], adaptiveMode: [{
-                type: Input
-            }], inputAttributes: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], open: [{
-                type: Output
-            }], close: [{
-                type: Output
-            }], onFocus: [{
-                type: Output,
-                args: ['focus']
-            }], onBlur: [{
-                type: Output,
-                args: ['blur']
-            }], escape: [{
-                type: Output
-            }], defaultTab: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], rounded: [{
-                type: Input
-            }], fillMode: [{
-                type: Input
-            }], cellTemplate: [{
-                type: ContentChild,
-                args: [CellTemplateDirective, { static: false }]
-            }], monthCellTemplate: [{
-                type: ContentChild,
-                args: [MonthCellTemplateDirective, { static: false }]
-            }], yearCellTemplate: [{
-                type: ContentChild,
-                args: [YearCellTemplateDirective, { static: false }]
-            }], decadeCellTemplate: [{
-                type: ContentChild,
-                args: [DecadeCellTemplateDirective, { static: false }]
-            }], centuryCellTemplate: [{
-                type: ContentChild,
-                args: [CenturyCellTemplateDirective, { static: false }]
-            }], weekNumberTemplate: [{
-                type: ContentChild,
-                args: [WeekNumberCellTemplateDirective, { static: false }]
-            }], headerTitleTemplate: [{
-                type: ContentChild,
-                args: [HeaderTitleTemplateDirective, { static: false }]
-            }], headerTemplate: [{
-                type: ContentChild,
-                args: [HeaderTemplateDirective]
-            }], headerTemplateRef: [{
-                type: Input,
-                args: ['headerTemplate']
-            }], footerTemplate: [{
-                type: ContentChild,
-                args: [FooterTemplateDirective]
-            }], footerTemplateRef: [{
-                type: Input,
-                args: ['footerTemplate']
-            }], footer: [{
-                type: Input
-            }], container: [{
-                type: ViewChild,
-                args: ['container', { read: ViewContainerRef, static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { read: TemplateRef, static: true }]
-            }], actionSheet: [{
-                type: ViewChild,
-                args: ['actionSheet']
-            }] } });