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

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

@@ -67,261 +67,38 @@ const TIME_TAB_BUTTON_SELECTOR = '.k-button.k-group-end';
  * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
  */
 export class DateTimePickerComponent extends MultiTabStop {
-    constructor(popupService, intl, cdr, pickerService, ngZone, wrapper, localization, disabledDatesService, renderer, injector) {
-        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;
-        /**
-         * @hidden
-         */
-        this.calendarIcon = calendarIcon;
-        /**
-         * @hidden
-         */
-        this.clockIcon = clockIcon;
-        /**
-         * @hidden
-         */
-        this.hostClasses = true;
-        /**
-         * Sets the format of the displayed Calendar week days' names.
-         * @default 'short'
-         */
-        this.weekDaysFormat = "short";
-        /**
-         * 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.
-         */
-        this.twoDigitYearMax = TWO_DIGIT_YEAR_MAX;
-        /**
-         * Sets 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).
-         */
-        this.title = '';
-        /**
-         * Sets or gets 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).
-         */
-        this.disabled = false;
-        /**
-         * Sets the read-only state of the DateTimePicker
-         * ([see example]({% slug readonly_datetimepicker %}#toc-read-only-datetimepicker)).
-         *
-         * @default false
-         */
-        this.readonly = false;
-        /**
-         * Sets the read-only state of the DateTimePicker input field
-         * ([see example]({% slug readonly_datetimepicker %}#toc-read-only-input)).
-         *
-         * > Note that 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.
-         */
-        this.readOnlyInput = false;
-        /**
-         * Determines whether to display the **Cancel** button in the popup
-         * ([see example]({% slug datetimepicker_popup_options %}#toc-toggling-the-cancel-button)).
-         */
-        this.cancelButton = true;
-        /**
-         * Configures the incremental steps of the DateInput and the popup component of the TimePicker
-         * ([see example]({% slug incrementalsteps_datetimepicker %})).
-         */
-        this.steps = {};
-        /**
-         * Specifies the Calendar type.
-         *
-         * The possible values are:
-         * - `infinite` (default)
-         * - `classic`
-         *
-         */
-        this.calendarType = 'infinite';
-        /**
-         * Determines whether to enable animation when navigating to previous/next Calendar view.
-         * Applies to the [`classic`]({% slug api_dateinputs_datetimepickercomponent %}#toc-calendartype) Calendar only.
-         *
-         * > This feature uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). In order to run the animation in browsers that do not support it, you need the `web-animations-js` polyfill.
-         *
-         * @default false
-         */
-        this.animateCalendarNavigation = false;
-        /**
-         * 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)).
-         */
-        this.weekNumber = false;
-        /**
-         * Determines whether the built-in min or max validators are enforced when validating a form
-         * ([see example](slug:dateranges_datetimepicker)).
-         */
-        this.rangeValidation = true;
-        /**
-         * Determines whether the built-in validator for disabled
-         * date ranges is enforced when validating a form
-         * ([see example](slug:disabled_dates_datetimepicker)).
-         */
-        this.disabledDatesValidation = true;
-        /**
-         * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
-         */
-        this.incompleteDateValidation = false;
-        /**
-         * Determines whether to autocorrect invalid segments automatically.
-         *
-         * @default true
-         */
-        this.autoCorrectParts = true;
-        /**
-         * Determines whether to automatically move to the next segment after the user completes the current one.
-         *
-         * @default true
-         */
-        this.autoSwitchParts = true;
-        /**
-         * A string array representing custom keys, which will move the focus to the next date format segment.
-         */
-        this.autoSwitchKeys = [];
-        /**
-         * Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
-         *
-         * @default true
-         */
-        this.enableMouseWheel = true;
-        /**
-         * Determines if the users should see a blinking caret inside the Date Input when possible.
-         *
-         * @default false
-         */
-        this.allowCaretMode = false;
-        /**
-         * If set to `true`, renders a clear button 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
-         */
-        this.clearButton = false;
-        /**
-         * When enabled, the DateTimePicker will autofill the rest of the date to the current date when the component loses focus.
-         *
-         * @default false
-         */
-        this.autoFill = false;
-        /**
-         * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
-         */
-        this.adaptiveMode = 'none';
-        /**
-         * Fires each time the user selects a new value
-         * ([see example](slug:events_datetimepicker)).
-         */
-        this.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.
-         */
-        this.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.
-         */
-        this.close = new EventEmitter();
-        /**
-         * Fires each time the user focuses the component
-         * ([see example](slug:events_datetimepicker)).
-         */
-        this.onFocus = new EventEmitter();
-        /**
-         * Fires each time the user blurs the component
-         * ([see example](slug:events_datetimepicker)).
-         */
-        this.onBlur = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.escape = new EventEmitter();
-        /**
-         * @hidden
-         *
-         * Controls whether the Calendar or the TimeSelector will be displayed.
-         */
-        this.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.
-         */
-        this.timeSelectorFormat = DEFAULT_TIMESELECTOR_FORMAT;
-        /**
-         * @hidden
-         */
-        this.timeSelectorMin = cloneDate(MIN_TIME);
-        /**
-         * @hidden
-         */
-        this.timeSelectorMax = cloneDate(MAX_TIME);
-        /**
-         * @hidden
-         */
-        this.calendarValue = null;
-        /**
-         * @hidden
-         */
-        this.calendarMin = cloneDate(MIN_DATE);
-        /**
-         * @hidden
-         */
-        this.calendarMax = lastMillisecondOfDate(MAX_DATE);
-        /**
-         * @hidden
-         */
-        this.xIcon = xIcon;
-        /**
-         * Toggles the visibility of the Calendar footer.
-         * @default false
-         */
-        this.footer = false;
-        this._popupSettings = { animate: true };
-        this._value = null;
-        this._format = DEFAULT_DATEINPUT_FORMAT;
-        this._tabindex = 0;
-        this._defaultTab = DEFAULT_ACTIVE_TAB;
-        this._min = mergeDateAndTime(MIN_DATE, MIN_TIME);
-        this._max = mergeDateAndTime(MAX_DATE, MAX_TIME);
-        this._isActive = false;
-        this.onControlTouched = noop;
-        this.onControlChange = noop;
-        this.onValidatorChange = noop;
-        this.minValidateFn = noop;
-        this.maxValidateFn = noop;
-        this.disabledDatesValidateFn = noop;
-        this.incompleteValidator = noop;
-        this.subscriptions = new Subscription();
-        this._size = DEFAULT_SIZE;
-        this._rounded = DEFAULT_ROUNDED;
-        this._fillMode = DEFAULT_FILL_MODE;
-        validatePackage(packageMetadata);
-    }
+    popupService;
+    intl;
+    cdr;
+    pickerService;
+    ngZone;
+    wrapper;
+    localization;
+    disabledDatesService;
+    renderer;
+    injector;
+    /**
+     * @hidden
+     */
+    calendarIcon = calendarIcon;
+    /**
+     * @hidden
+     */
+    clockIcon = clockIcon;
+    /**
+     * @hidden
+     */
+    hostClasses = true;
     /**
      * @hidden
      */
     get disabledClass() {
         return this.disabled;
     }
+    /**
+     * @hidden
+     */
+    toggleButton;
     /**
      * @hidden
      */
@@ -340,6 +117,22 @@ export class DateTimePickerComponent extends MultiTabStop {
     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)).
+     * The default values per Calendar type are:
+     * - `infinite` - false
+     * - `classic` - true
+     */
+    showOtherMonthDays;
     /**
      * Specifies the value of the DateTimePicker component.
      *
@@ -372,6 +165,14 @@ export class DateTimePickerComponent extends MultiTabStop {
     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.
+     */
+    twoDigitYearMax = TWO_DIGIT_YEAR_MAX;
     /**
      * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the DateTimePicker.
      */
@@ -409,6 +210,11 @@ export class DateTimePickerComponent extends MultiTabStop {
     get popupSettings() {
         return this._popupSettings;
     }
+    /**
+     * Sets 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).
+     */
+    title = '';
     /**
      * Sets the subtitle text rendered in the header of the popup(action sheet).
      * Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
@@ -419,6 +225,76 @@ export class DateTimePickerComponent extends MultiTabStop {
     get subtitle() {
         return this._subtitle || this.placeholder;
     }
+    _subtitle;
+    /**
+     * Sets or gets 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).
+     */
+    disabled = false;
+    /**
+     * Sets the read-only state of the DateTimePicker
+     * ([see example]({% slug readonly_datetimepicker %}#toc-read-only-datetimepicker)).
+     *
+     * @default false
+     */
+    readonly = false;
+    /**
+     * Sets the read-only state of the DateTimePicker input field
+     * ([see example]({% slug readonly_datetimepicker %}#toc-read-only-input)).
+     *
+     * > Note that 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.
+     */
+    readOnlyInput = false;
+    /**
+     * Determines whether to display the **Cancel** button in the popup
+     * ([see example]({% slug datetimepicker_popup_options %}#toc-toggling-the-cancel-button)).
+     */
+    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.
+     *
+     * The possible values are:
+     * - `infinite` (default)
+     * - `classic`
+     *
+     */
+    calendarType = 'infinite';
+    /**
+     * Determines whether to enable animation when navigating to previous/next Calendar view.
+     * Applies to the [`classic`]({% slug api_dateinputs_datetimepickercomponent %}#toc-calendartype) Calendar only.
+     *
+     * > This feature uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). In order to run the animation in browsers that do not support it, you need the `web-animations-js` polyfill.
+     *
+     * @default false
+     */
+    animateCalendarNavigation = false;
+    /**
+     * 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)).
+     */
+    weekNumber = false;
     /**
      * Specifies the smallest valid date.
      * The Calendar will not display dates before this value.
@@ -447,6 +323,100 @@ export class DateTimePickerComponent extends MultiTabStop {
     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)).
+     */
+    rangeValidation = true;
+    /**
+     * Determines whether the built-in validator for disabled
+     * date ranges is enforced when validating a form
+     * ([see example](slug:disabled_dates_datetimepicker)).
+     */
+    disabledDatesValidation = true;
+    /**
+     * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
+     */
+    incompleteDateValidation = false;
+    /**
+     * Determines whether to autocorrect invalid segments automatically.
+     *
+     * @default true
+     */
+    autoCorrectParts = true;
+    /**
+     * Determines whether to automatically move to the next segment after the user completes the current one.
+     *
+     * @default true
+     */
+    autoSwitchParts = true;
+    /**
+     * A string array representing custom keys, which will move the focus to the next date format segment.
+     */
+    autoSwitchKeys = [];
+    /**
+     * Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
+     *
+     * @default true
+     */
+    enableMouseWheel = true;
+    /**
+     * Determines if the users should see a blinking caret inside the Date Input when possible.
+     *
+     * @default false
+     */
+    allowCaretMode = false;
+    /**
+     * If set to `true`, renders a clear button 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;
+    /**
+     * When enabled, the DateTimePicker will autofill the rest of the date to the current date when the component loses focus.
+     *
+     * @default false
+     */
+    autoFill = false;
+    /**
+     * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
+     */
+    adaptiveMode = 'none';
+    /**
+     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     */
+    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. That is when the popup or actionSheet is open.
      */
@@ -609,18 +579,96 @@ export class DateTimePickerComponent extends MultiTabStop {
         }
         this.windowSize = windowSize();
     }
+    /**
+     * @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
+     */
+    xIcon = xIcon;
+    /**
+     * @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;
@@ -637,6 +685,9 @@ export class DateTimePickerComponent extends MultiTabStop {
         }
         return appendTo === 'component' ? this.container : appendTo;
     }
+    container;
+    popupTemplate;
+    actionSheet;
     get popupUID() {
         return this.calendar?.popupId;
     }
@@ -657,10 +708,20 @@ export class DateTimePickerComponent extends MultiTabStop {
         }
     }
     get dateTabButton() {
-        return this.popupRef?.popup.instance.container.nativeElement.querySelector(DATE_TAB_BUTTON_SELECTOR);
+        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() {
-        return this.popupRef?.popup.instance.container.nativeElement.querySelector(TIME_TAB_BUTTON_SELECTOR);
+        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);
+        }
     }
     /**
      * @hidden
@@ -675,6 +736,43 @@ export class DateTimePickerComponent extends MultiTabStop {
     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;
+    windowSize;
+    constructor(popupService, intl, cdr, pickerService, ngZone, wrapper, localization, disabledDatesService, renderer, injector) {
+        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;
+        validatePackage(packageMetadata);
+    }
     ngOnInit() {
         this.subscriptions.add(this.pickerService.onFocus
             // detect popup changes to disable the inactive view mark-up when the popup is open
@@ -1336,18 +1434,17 @@ export class DateTimePickerComponent extends MultiTabStop {
             this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
         }
     }
-}
-DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 }], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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", title: "title", subtitle: "subtitle", 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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", title: "title", subtitle: "subtitle", 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
 
@@ -1531,6 +1628,18 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                     <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
                 </div>
                 <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
+                    <button kendoButton
+                        *ngIf="cancelButton"
+                        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"
@@ -1543,18 +1652,6 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                     >
                         {{localization.get('accept')}}
                     </button>
-
-                    <button kendoButton
-                        *ngIf="cancelButton"
-                        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>
                 </div>
             </ng-template>
         </kendo-actionsheet>
@@ -1584,7 +1681,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                             type="button"
                             class="k-button k-group-start"
                             [ngClass]="popupButtonsClasses()"
-                            [class.k-active]="activeTab === 'date'"
+                            [class.k-selected]="activeTab === 'date'"
                             [attr.aria-pressed]="activeTab === 'date' ? 'true' : 'false'"
                             [attr.title]="localization.get('dateTabLabel')"
                             [attr.aria-label]="localization.get('dateTabLabel')"
@@ -1600,7 +1697,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                             type="button"
                             class="k-button k-group-end"
                             [ngClass]="popupButtonsClasses()"
-                            [class.k-active]="activeTab === 'time'"
+                            [class.k-selected]="activeTab === 'time'"
                             [attr.aria-pressed]="activeTab === 'time' ? 'true' : 'false'"
                             [attr.title]="localization.get('timeTabLabel')"
                             [attr.aria-label]="localization.get('timeTabLabel')"
@@ -1733,8 +1830,9 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                 </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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "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: ["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", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateTimePickerComponent, decorators: [{
+    `, 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "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: ["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", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-datetimepicker',
@@ -1934,6 +2032,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
                 </div>
                 <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
+                    <button kendoButton
+                        *ngIf="cancelButton"
+                        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"
@@ -1946,18 +2056,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     >
                         {{localization.get('accept')}}
                     </button>
-
-                    <button kendoButton
-                        *ngIf="cancelButton"
-                        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>
                 </div>
             </ng-template>
         </kendo-actionsheet>
@@ -1987,7 +2085,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             type="button"
                             class="k-button k-group-start"
                             [ngClass]="popupButtonsClasses()"
-                            [class.k-active]="activeTab === 'date'"
+                            [class.k-selected]="activeTab === 'date'"
                             [attr.aria-pressed]="activeTab === 'date' ? 'true' : 'false'"
                             [attr.title]="localization.get('dateTabLabel')"
                             [attr.aria-label]="localization.get('dateTabLabel')"
@@ -2003,7 +2101,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             type="button"
                             class="k-button k-group-end"
                             [ngClass]="popupButtonsClasses()"
-                            [class.k-active]="activeTab === 'time'"
+                            [class.k-selected]="activeTab === 'time'"
                             [attr.aria-pressed]="activeTab === 'time' ? 'true' : 'false'"
                             [attr.title]="localization.get('timeTabLabel')"
                             [attr.aria-label]="localization.get('timeTabLabel')"