@progress/kendo-angular-dateinputs 25.1.0-develop.2 → 25.1.0-develop.20

package/fesm2022/progress-kendo-angular-dateinputs.mjs

@@ -3,8 +3,8 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Input, Directive, isDevMode, Output, Component, HostBinding, HostListener, ChangeDetectionStrategy, forwardRef, ElementRef, ViewChild, ContentChild, InjectionToken, Inject, NgZone, Optional, ViewContainerRef, ViewChildren, signal, TemplateRef, ContentChildren, NgModule } from '@angular/core';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
+import { Injectable, EventEmitter, Input, Directive, isDevMode, Output, Component, HostBinding, HostListener, ChangeDetectionStrategy, signal, forwardRef, ElementRef, ViewChild, ContentChild, InjectionToken, Inject, NgZone, Optional, ViewContainerRef, ViewChildren, TemplateRef, ContentChildren, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl, TouchedChangeEvent } from '@angular/forms';
 import * as i1$1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
 import { cloneDate, MS_PER_HOUR, MS_PER_MINUTE, addDays, getDate, isEqual, lastDecadeOfCentury, firstDecadeOfCentury, addCenturies, addDecades, lastYearOfDecade, firstYearOfDecade, createDate, lastMonthOfYear, lastDayOfMonth, durationInCenturies, addYears, durationInDecades, firstDayOfMonth, addMonths, addWeeks, dayOfWeek, durationInMonths, firstMonthOfYear, durationInYears, weekInYear } from '@progress/kendo-date-math';
@@ -36,8 +36,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1786694181,
-    version: '25.1.0-develop.2',
+    publishDate: 1787938405,
+    version: '25.1.0-develop.20',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -3581,25 +3581,56 @@ class Messages extends ComponentMessages {
     /**
      * The **Today** button text in the header of the MultiViewCalendar.
      */
-    today;
+    set today(value) {
+        this._today.set(value);
+    }
+    get today() {
+        return this._today();
+    }
     /**
      * The title of the **Prev** button in the header of the MultiViewCalendar.
      */
-    prevButtonTitle;
+    set prevButtonTitle(value) {
+        this._prevButtonTitle.set(value);
+    }
+    get prevButtonTitle() {
+        return this._prevButtonTitle();
+    }
     /**
      * The title of the **Next** button in the header of the MultiViewCalendar.
      */
-    nextButtonTitle;
+    set nextButtonTitle(value) {
+        this._nextButtonTitle.set(value);
+    }
+    get nextButtonTitle() {
+        return this._nextButtonTitle();
+    }
     /**
-     * The title of the **Parent View** button in the header of the MultiViewCalendar.
+     * The label of the week number column in the Calendar.
      */
-    parentViewButtonTitle;
+    set weekNumberLabel(value) {
+        this._weekNumberLabel.set(value);
+    }
+    ;
+    get weekNumberLabel() {
+        return this._weekNumberLabel();
+    }
     /**
-     * The label of the week number column in the Calendar.
+     * The title of the **Parent View** button in the header of the MultiViewCalendar.
      */
-    weekNumberLabel;
+    set parentViewButtonTitle(value) {
+        this._parentViewButtonTitle.set(value);
+    }
+    get parentViewButtonTitle() {
+        return this._parentViewButtonTitle();
+    }
+    _today = signal(undefined, ...(ngDevMode ? [{ debugName: "_today" }] : []));
+    _prevButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_prevButtonTitle" }] : []));
+    _nextButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_nextButtonTitle" }] : []));
+    _parentViewButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_parentViewButtonTitle" }] : []));
+    _weekNumberLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_weekNumberLabel" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: Messages, isStandalone: true, selector: "kendo-multiview-calendar-messages-base", inputs: { today: "today", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle", weekNumberLabel: "weekNumberLabel" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: Messages, isStandalone: true, selector: "kendo-multiview-calendar-messages-base", inputs: { today: "today", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", weekNumberLabel: "weekNumberLabel", parentViewButtonTitle: "parentViewButtonTitle" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
@@ -3612,10 +3643,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                 type: Input
             }], nextButtonTitle: [{
                 type: Input
-            }], parentViewButtonTitle: [{
-                type: Input
             }], weekNumberLabel: [{
                 type: Input
+            }], parentViewButtonTitle: [{
+                type: Input
             }] } });
 
 /**
@@ -6759,25 +6790,57 @@ class CalendarMessages extends ComponentMessages {
     /**
      * The **Today** button text in the header of the Calendar.
      */
-    today;
+    set today(value) {
+        this._today.set(value);
+    }
+    get today() {
+        return this._today();
+    }
     /**
      * The title of the **Prev** button in the header of the Classic Calendar.
      */
-    prevButtonTitle;
+    set prevButtonTitle(value) {
+        this._prevButtonTitle.set(value);
+    }
+    get prevButtonTitle() {
+        return this._prevButtonTitle();
+    }
     /**
      * The title of the **Next** button in the header of the Classic Calendar.
      */
-    nextButtonTitle;
+    set nextButtonTitle(value) {
+        this._nextButtonTitle.set(value);
+    }
+    ;
+    get nextButtonTitle() {
+        return this._nextButtonTitle();
+    }
     /**
-     * The title of the **Parent View** button in the header of the Calendar.
+     * The label of the week number column in the Calendar.
      */
-    parentViewButtonTitle;
+    set weekNumberLabel(value) {
+        this._weekNumberLabel.set(value);
+    }
+    ;
+    get weekNumberLabel() {
+        return this._weekNumberLabel();
+    }
     /**
-     * The label of the week number column in the Calendar.
+     * The title of the **Parent View** button in the header of the Calendar.
      */
-    weekNumberLabel;
+    set parentViewButtonTitle(value) {
+        this._parentViewButtonTitle.set(value);
+    }
+    get parentViewButtonTitle() {
+        return this._parentViewButtonTitle();
+    }
+    _today = signal(undefined, ...(ngDevMode ? [{ debugName: "_today" }] : []));
+    _prevButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_prevButtonTitle" }] : []));
+    _nextButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_nextButtonTitle" }] : []));
+    _parentViewButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_parentViewButtonTitle" }] : []));
+    _weekNumberLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_weekNumberLabel" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CalendarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: CalendarMessages, isStandalone: true, selector: "kendo-calendar-messages-base", inputs: { today: "today", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle", weekNumberLabel: "weekNumberLabel" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: CalendarMessages, isStandalone: true, selector: "kendo-calendar-messages-base", inputs: { today: "today", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", weekNumberLabel: "weekNumberLabel", parentViewButtonTitle: "parentViewButtonTitle" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CalendarMessages, decorators: [{
             type: Directive,
@@ -6790,10 +6853,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                 type: Input
             }], nextButtonTitle: [{
                 type: Input
-            }], parentViewButtonTitle: [{
-                type: Input
             }], weekNumberLabel: [{
                 type: Input
+            }], parentViewButtonTitle: [{
+                type: Input
             }] } });
 
 /**
@@ -6884,19 +6947,23 @@ class CalendarComponent {
      * Shows days that fall outside the current month and the default values per Calendar type are false for infinite and true for classic ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/view-options#displaying-other-month-days)).
      */
     set showOtherMonthDays(_showOtherMonthDays) {
-        this._showOtherMonthDays = _showOtherMonthDays;
+        this._showOtherMonthDays.set(_showOtherMonthDays);
     }
     get showOtherMonthDays() {
-        if (this._showOtherMonthDays === undefined) {
+        if (this._showOtherMonthDays() === undefined) {
             return this.type === 'classic';
         }
-        return this._showOtherMonthDays;
+        return this._showOtherMonthDays();
     }
-    _showOtherMonthDays;
     /**
      * @hidden
      */
-    id;
+    set id(id) {
+        this._id.set(id);
+    }
+    get id() {
+        return this._id();
+    }
     /**
      * @hidden
      */
@@ -6910,25 +6977,25 @@ class CalendarComponent {
      * If the Calendar is outside the `min` or `max` range, the component normalizes the defined `focusedDate`.
      */
     set focusedDate(focusedDate) {
-        if (this.activeViewDate && !isEqual(this._focusedDate, focusedDate)) {
+        if (this.activeViewDate() && !isEqual(this._focusedDate(), focusedDate)) {
             const service = this.bus.service(this.activeViewEnum);
-            const lastDayInPeriod = service.lastDayOfPeriod(this.activeViewDate);
-            const isFocusedDateInRange = service.isInRange(focusedDate, this.activeViewDate, lastDayInPeriod);
+            const lastDayInPeriod = service.lastDayOfPeriod(this.activeViewDate());
+            const isFocusedDateInRange = service.isInRange(focusedDate, this.activeViewDate(), lastDayInPeriod);
             if (!isFocusedDateInRange) {
                 this.emitNavigate(focusedDate);
             }
         }
-        this._focusedDate = focusedDate || getToday();
+        this._focusedDate.set(focusedDate || getToday());
         this.setAriaActivedescendant();
     }
     get focusedDate() {
-        if (this._focusedDate > this.max) {
+        if (this._focusedDate() > this.max) {
             return this.max;
         }
-        if (this._focusedDate < this.min) {
+        if (this._focusedDate() < this.min) {
             return this.min;
         }
-        return this._focusedDate;
+        return this._focusedDate();
     }
     /**
      * @hidden
@@ -6943,10 +7010,10 @@ class CalendarComponent {
      * @default 1900-1-1
      */
     set min(min) {
-        this._min = min || new Date(MIN_DATE);
+        this._min.set(min || new Date(MIN_DATE));
     }
     get min() {
-        return this._min;
+        return this._min();
     }
     /**
      * Specifies the maximum allowed date value
@@ -6955,49 +7022,68 @@ class CalendarComponent {
      * @default 2099-12-31
      */
     set max(max) {
-        this._max = max || new Date(MAX_DATE);
+        this._max.set(max || new Date(MAX_DATE));
     }
     get max() {
-        return this._max;
+        return this._max();
     }
     /**
      * Determines whether the built-in `min` or `max` validators are enforced when validating a form.
      *
      * @default false
      */
-    rangeValidation = false;
+    set rangeValidation(value) {
+        this._rangeValidation.set(value);
+    }
+    get rangeValidation() {
+        return this._rangeValidation();
+    }
     /**
      * Specifies the format of the displayed week day names.
      *
      * @default 'short'
      */
-    weekDaysFormat = "short";
+    set weekDaysFormat(value) {
+        this._weekDaysFormat.set(value);
+    }
+    get weekDaysFormat() {
+        return this._weekDaysFormat();
+    }
     /**
      * Toggles the visibility of the footer.
      *
      * @default false
      */
-    footer = false;
+    set footer(value) {
+        this._footer.set(value);
+    }
+    get footer() {
+        return this._footer();
+    }
     /**
      * Sets the Calendar selection mode
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/selection-modes)).
      * @default 'single'
      */
     set selection(_selection) {
-        this._selection = _selection;
+        this._selection.set(_selection);
         this.selectionSetter = true;
     }
     get selection() {
-        return this._selection;
+        return this._selection();
     }
-    _selection = 'single';
     /**
      * Allows reverse selection when using `range` selection.
      * If `allowReverse` is set to `true`, the component skips the validation of whether the start date is after the end date.
      *
      * @default false
      */
-    allowReverse = false;
+    set allowReverse(value) {
+        this._allowReverse.set(value);
+    }
+    get allowReverse() {
+        return this._allowReverse();
+    }
     /**
      * Sets or gets the `value` property of the Calendar and defines the selected value of the component.
      *
@@ -7005,10 +7091,10 @@ class CalendarComponent {
      */
     set value(candidate) {
         this.valueSetter = true;
-        this._value = candidate;
+        this._value.set(candidate);
     }
     get value() {
-        return this._value;
+        return this._value();
     }
     /**
      * Sets or gets the `disabled` property of the Calendar and
@@ -7016,7 +7102,12 @@ class CalendarComponent {
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/disabled-state)).
      * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/forms#managing-the-calendar-disabled-state-in-reactive-forms).
      */
-    disabled = false;
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
     /**
      * Specifies the `tabindex` property of the Calendar. Based on the
      * [HTML `tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) behavior,
@@ -7024,15 +7115,20 @@ class CalendarComponent {
      *
      * @default 0
      */
-    tabindex = 0;
+    set tabindex(value) {
+        this._tabindex.set(value);
+    }
+    get tabindex() {
+        return this._tabindex();
+    }
     /**
      * @hidden
      */
     set tabIndex(tabIndex) {
-        this.tabindex = tabIndex;
+        this._tabindex.set(tabIndex);
     }
     get tabIndex() {
-        return this.tabindex;
+        return this._tabindex();
     }
     /**
      * Specifies the dates of the Calendar that will be disabled
@@ -7040,10 +7136,10 @@ class CalendarComponent {
      */
     set disabledDates(value) {
         this.disabledDatesService.initialize(value);
-        this._disabledDates = value;
+        this._disabledDates.set(value);
     }
     get disabledDates() {
-        return this._disabledDates;
+        return this._disabledDates();
     }
     /**
      * Determines whether the navigation side-bar will be displayed
@@ -7052,7 +7148,12 @@ class CalendarComponent {
      *
      * @default true
      */
-    navigation = true;
+    set navigation(value) {
+        this._navigation.set(value);
+    }
+    get navigation() {
+        return this._navigation();
+    }
     /**
      * Defines the active view that the Calendar initially renders
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/view-options)).
@@ -7060,21 +7161,36 @@ class CalendarComponent {
      *
      * @default 'month'
      */
-    activeView = CalendarViewEnum[CalendarViewEnum.month];
+    set activeView(value) {
+        this._activeView.set(value);
+    }
+    get activeView() {
+        return this._activeView();
+    }
     /**
      * Defines the bottommost view to which the user can navigate
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/view-depth)).
      *
      * @default 'month'
      */
-    bottomView = CalendarViewEnum[CalendarViewEnum.month];
+    set bottomView(value) {
+        this._bottomView.set(value);
+    }
+    get bottomView() {
+        return this._bottomView();
+    }
     /**
      * Defines the topmost view to which the user can navigate
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/view-depth)).
      *
      * @default 'century'
      */
-    topView = CalendarViewEnum[CalendarViewEnum.century];
+    set topView(value) {
+        this._topView.set(value);
+    }
+    get topView() {
+        return this._topView();
+    }
     /**
      * Specifies the Calendar type.
      *
@@ -7085,10 +7201,10 @@ class CalendarComponent {
         if (type === 'infinite') {
             this.renderer.addClass(this.element.nativeElement, `k-calendar-${type}`);
         }
-        this._type = type;
+        this._type.set(type);
     }
     get type() {
-        return this._type;
+        return this._type();
     }
     /**
      * Determines whether to enable animation when navigating to previous/next view.
@@ -7098,14 +7214,24 @@ class CalendarComponent {
      *
      * @default false
      */
-    animateNavigation = false;
+    set animateNavigation(value) {
+        this._animateNavigation.set(value);
+    }
+    get animateNavigation() {
+        return this._animateNavigation();
+    }
     /**
      * Determines whether to display a week number column in the `month` view
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/week-num-column)).
      *
      * @default false
      */
-    weekNumber = false;
+    set weekNumber(value) {
+        this._weekNumber.set(value);
+    }
+    get weekNumber() {
+        return this._weekNumber();
+    }
     /**
      * @hidden
      */
@@ -7161,10 +7287,10 @@ class CalendarComponent {
      * Takes precedence over nested templates in the KendoCalendar tag.
      */
     set cellTemplateRef(template) {
-        this._cellTemplateRef = template;
+        this._cellTemplateRef.set(template);
     }
     get cellTemplateRef() {
-        return this._cellTemplateRef || this.cellTemplate;
+        return this._cellTemplateRef() || this.cellTemplate;
     }
     /**
      * @hidden
@@ -7180,10 +7306,10 @@ class CalendarComponent {
      * Takes precedence over nested templates in the KendoCalendar tag.
      */
     set monthCellTemplateRef(template) {
-        this._monthCellTemplateRef = template;
+        this._monthCellTemplateRef.set(template);
     }
     get monthCellTemplateRef() {
-        return this._monthCellTemplateRef || this.monthCellTemplate;
+        return this._monthCellTemplateRef() || this.monthCellTemplate;
     }
     /**
      * @hidden
@@ -7199,10 +7325,10 @@ class CalendarComponent {
      * Takes precedence over nested templates in the KendoCalendar tag.
      */
     set yearCellTemplateRef(template) {
-        this._yearCellTemplateRef = template;
+        this._yearCellTemplateRef.set(template);
     }
     get yearCellTemplateRef() {
-        return this._yearCellTemplateRef || this.yearCellTemplate;
+        return this._yearCellTemplateRef() || this.yearCellTemplate;
     }
     /**
      * @hidden
@@ -7218,10 +7344,10 @@ class CalendarComponent {
      * Takes precedence over nested templates in the KendoCalendar tag.
      */
     set decadeCellTemplateRef(template) {
-        this._decadeCellTemplateRef = template;
+        this._decadeCellTemplateRef.set(template);
     }
     get decadeCellTemplateRef() {
-        return this._decadeCellTemplateRef || this.decadeCellTemplate;
+        return this._decadeCellTemplateRef() || this.decadeCellTemplate;
     }
     /**
      * @hidden
@@ -7237,10 +7363,10 @@ class CalendarComponent {
      * Takes precedence over nested templates in the KendoCalendar tag.
      */
     set centuryCellTemplateRef(template) {
-        this._centuryCellTemplateRef = template;
+        this._centuryCellTemplateRef.set(template);
     }
     get centuryCellTemplateRef() {
-        return this._centuryCellTemplateRef || this.centuryCellTemplate;
+        return this._centuryCellTemplateRef() || this.centuryCellTemplate;
     }
     /**
      * @hidden
@@ -7256,10 +7382,10 @@ class CalendarComponent {
      * Takes precedence over nested templates in the KendoCalendar tag.
      */
     set weekNumberTemplateRef(template) {
-        this._weekNumberTemplateRef = template;
+        this._weekNumberTemplateRef.set(template);
     }
     get weekNumberTemplateRef() {
-        return this._weekNumberTemplateRef || this.weekNumberTemplate;
+        return this._weekNumberTemplateRef() || this.weekNumberTemplate;
     }
     /**
      * @hidden
@@ -7289,10 +7415,10 @@ class CalendarComponent {
      * Takes precedence over nested templates in the KendoCalendar tag.
      */
     set headerTitleTemplateRef(template) {
-        this._headerTitleTemplateRef = template;
+        this._headerTitleTemplateRef.set(template);
     }
     get headerTitleTemplateRef() {
-        return this._headerTitleTemplateRef || this.headerTitleTemplate;
+        return this._headerTitleTemplateRef() || this.headerTitleTemplate;
     }
     /**
      * @hidden
@@ -7301,10 +7427,10 @@ class CalendarComponent {
      * Takes precedence over nested templates in the KendoCalendar tag.
      */
     set headerTemplateRef(template) {
-        this._headerTemplateRef = template;
+        this._headerTemplateRef.set(template);
     }
     get headerTemplateRef() {
-        return this._headerTemplateRef || this.headerTemplate;
+        return this._headerTemplateRef() || this.headerTemplate;
     }
     /**
      * @hidden
@@ -7312,10 +7438,10 @@ class CalendarComponent {
      * Defines the template for the footer.
      */
     set footerTemplateRef(template) {
-        this._footerTemplateRef = template;
+        this._footerTemplateRef.set(template);
     }
     get footerTemplateRef() {
-        return this._footerTemplateRef || this.footerTemplate;
+        return this._footerTemplateRef() || this.footerTemplate;
     }
     /**
      * @hidden
@@ -7331,10 +7457,10 @@ class CalendarComponent {
      * Takes precedence over nested templates in the KendoCalendar tag.
      */
     set navigationItemTemplateRef(template) {
-        this._navigationItemTemplateRef = template;
+        this._navigationItemTemplateRef.set(template);
     }
     get navigationItemTemplateRef() {
-        return this._navigationItemTemplateRef || this.navigationItemTemplate;
+        return this._navigationItemTemplateRef() || this.navigationItemTemplate;
     }
     /**
      * @hidden
@@ -7350,12 +7476,11 @@ class CalendarComponent {
      * @default undefined
      */
     set size(size) {
-        this._size = size;
+        this._size.set(size);
     }
     get size() {
-        return this._size;
+        return this._size();
     }
-    _size = undefined;
     /**
      * Specifies which end of the defined selection range should be marked as active.
      * Value will be ignored if the selection range is undefined. If range selection is used then the default value is 'start'.
@@ -7363,25 +7488,28 @@ class CalendarComponent {
      * @default 'start'
      */
     set activeRangeEnd(_activeRangeEnd) {
-        this._activeRangeEnd = _activeRangeEnd;
+        this._activeRangeEnd.set(_activeRangeEnd);
     }
     get activeRangeEnd() {
-        return this._activeRangeEnd;
+        return this._activeRangeEnd();
     }
-    _activeRangeEnd = 'start';
     navigationView;
     monthView;
     multiViewCalendar;
-    isActive = false;
+    get isActive() { return this._isActive(); }
     cellUID = guid();
-    selectionRange = { start: null, end: null };
-    selectedDates = [];
-    rangePivot;
-    _disabledDates;
-    _min = new Date(MIN_DATE);
-    _max = new Date(MAX_DATE);
-    _focusedDate = getToday();
-    _value;
+    get selectionRange() { return this._selectionRange(); }
+    get selectedDates() { return this._selectedDates(); }
+    get rangePivot() { return this._rangePivot(); }
+    _disabledDates = signal(undefined, ...(ngDevMode ? [{ debugName: "_disabledDates" }] : []));
+    _min = signal(new Date(MIN_DATE), ...(ngDevMode ? [{ debugName: "_min" }] : []));
+    _max = signal(new Date(MAX_DATE), ...(ngDevMode ? [{ debugName: "_max" }] : []));
+    _focusedDate = signal(getToday(), ...(ngDevMode ? [{ debugName: "_focusedDate" }] : []));
+    _value = signal(undefined, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _showOtherMonthDays = signal(undefined, ...(ngDevMode ? [{ debugName: "_showOtherMonthDays" }] : []));
+    _selection = signal('single', ...(ngDevMode ? [{ debugName: "_selection" }] : []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _activeRangeEnd = signal('start', ...(ngDevMode ? [{ debugName: "_activeRangeEnd" }] : []));
     onControlChange = noop$2;
     onControlTouched = noop$2;
     onValidatorChange = noop$2;
@@ -7392,17 +7520,35 @@ class CalendarComponent {
     selectionSetter = false;
     syncNavigation = true;
     viewChangeSubscription;
-    _type = 'infinite';
-    _cellTemplateRef;
-    _monthCellTemplateRef;
-    _yearCellTemplateRef;
-    _decadeCellTemplateRef;
-    _centuryCellTemplateRef;
-    _weekNumberTemplateRef;
-    _headerTitleTemplateRef;
-    _headerTemplateRef;
-    _footerTemplateRef;
-    _navigationItemTemplateRef;
+    _type = signal('infinite', ...(ngDevMode ? [{ debugName: "_type" }] : []));
+    _cellTemplateRef = signal(undefined, ...(ngDevMode ? [{ debugName: "_cellTemplateRef" }] : []));
+    _monthCellTemplateRef = signal(undefined, ...(ngDevMode ? [{ debugName: "_monthCellTemplateRef" }] : []));
+    _yearCellTemplateRef = signal(undefined, ...(ngDevMode ? [{ debugName: "_yearCellTemplateRef" }] : []));
+    _decadeCellTemplateRef = signal(undefined, ...(ngDevMode ? [{ debugName: "_decadeCellTemplateRef" }] : []));
+    _centuryCellTemplateRef = signal(undefined, ...(ngDevMode ? [{ debugName: "_centuryCellTemplateRef" }] : []));
+    _weekNumberTemplateRef = signal(undefined, ...(ngDevMode ? [{ debugName: "_weekNumberTemplateRef" }] : []));
+    _headerTitleTemplateRef = signal(undefined, ...(ngDevMode ? [{ debugName: "_headerTitleTemplateRef" }] : []));
+    _headerTemplateRef = signal(undefined, ...(ngDevMode ? [{ debugName: "_headerTemplateRef" }] : []));
+    _footerTemplateRef = signal(undefined, ...(ngDevMode ? [{ debugName: "_footerTemplateRef" }] : []));
+    _navigationItemTemplateRef = signal(undefined, ...(ngDevMode ? [{ debugName: "_navigationItemTemplateRef" }] : []));
+    _id = signal('', ...(ngDevMode ? [{ debugName: "_id" }] : []));
+    _rangeValidation = signal(false, ...(ngDevMode ? [{ debugName: "_rangeValidation" }] : []));
+    _weekDaysFormat = signal('short', ...(ngDevMode ? [{ debugName: "_weekDaysFormat" }] : []));
+    _footer = signal(false, ...(ngDevMode ? [{ debugName: "_footer" }] : []));
+    _allowReverse = signal(false, ...(ngDevMode ? [{ debugName: "_allowReverse" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _tabindex = signal(0, ...(ngDevMode ? [{ debugName: "_tabindex" }] : []));
+    _navigation = signal(true, ...(ngDevMode ? [{ debugName: "_navigation" }] : []));
+    _activeView = signal(CalendarViewEnum[CalendarViewEnum.month], ...(ngDevMode ? [{ debugName: "_activeView" }] : []));
+    _bottomView = signal(CalendarViewEnum[CalendarViewEnum.month], ...(ngDevMode ? [{ debugName: "_bottomView" }] : []));
+    _topView = signal(CalendarViewEnum[CalendarViewEnum.century], ...(ngDevMode ? [{ debugName: "_topView" }] : []));
+    _animateNavigation = signal(false, ...(ngDevMode ? [{ debugName: "_animateNavigation" }] : []));
+    _weekNumber = signal(false, ...(ngDevMode ? [{ debugName: "_weekNumber" }] : []));
+    _isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
+    _selectionRange = signal({ start: null, end: null }, ...(ngDevMode ? [{ debugName: "_selectionRange" }] : []));
+    _selectedDates = signal([], ...(ngDevMode ? [{ debugName: "_selectedDates" }] : []));
+    _rangePivot = signal(undefined, ...(ngDevMode ? [{ debugName: "_rangePivot" }] : []));
+    activeViewDate = signal(undefined, ...(ngDevMode ? [{ debugName: "activeViewDate" }] : []));
     get activeViewEnum() {
         const activeView = CalendarViewEnum[this.activeView];
         return activeView < this.bottomViewEnum ? this.bottomViewEnum : activeView;
@@ -7427,7 +7573,7 @@ class CalendarComponent {
     resolvedPromise = Promise.resolve(null);
     destroyed = false;
     localizationChangeSubscription;
-    activeViewDate;
+    controlEventsSubscription;
     currentlyFocusedElement;
     canHover = false;
     constructor(bus, dom, element, navigator, renderer, cdr, ngZone, injector, scrollSyncService, disabledDatesService, localization, selectionService, pickerService) {
@@ -7504,6 +7650,14 @@ class CalendarComponent {
             this.renderer.removeClass(element.nativeElement, getSizeClass('calendar', this.size));
             this.renderer.addClass(element.nativeElement, getSizeClass('calendar', this.size));
         }
+        const control = this.control?.control;
+        if (control && control.events) {
+            this.controlEventsSubscription = control.events.subscribe(e => {
+                if (e instanceof TouchedChangeEvent) {
+                    this.cdr.markForCheck();
+                }
+            });
+        }
     }
     ngAfterViewChecked() {
         if (!this.syncNavigation) {
@@ -7527,6 +7681,9 @@ class CalendarComponent {
         if (this.localizationChangeSubscription) {
             this.localizationChangeSubscription.unsubscribe();
         }
+        if (this.controlEventsSubscription) {
+            this.controlEventsSubscription.unsubscribe();
+        }
         this.destroyed = true;
     }
     /**
@@ -7537,18 +7694,18 @@ class CalendarComponent {
             this.ngZone.run(() => {
                 if (this.allowReverse) {
                     if (this.activeRangeEnd === 'end' && this.selectionRange.start) {
-                        this.selectionRange = { start: this.selectionRange.start, end: date };
+                        this._selectionRange.set({ start: this.selectionRange.start, end: date });
                     }
                     if (this.activeRangeEnd === 'start' && this.selectionRange.end) {
-                        this.selectionRange = { start: date, end: this.selectionRange.end };
+                        this._selectionRange.set({ start: date, end: this.selectionRange.end });
                     }
                 }
                 else {
                     if (this.activeRangeEnd === 'end' && this.selectionRange.start && date >= this.selectionRange.start) {
-                        this.selectionRange = { start: this.selectionRange.start, end: date };
+                        this._selectionRange.set({ start: this.selectionRange.start, end: date });
                     }
                     if (this.selectionRange.start && date < this.selectionRange.start) {
-                        this.selectionRange = { start: this.selectionRange.start, end: null };
+                        this._selectionRange.set({ start: this.selectionRange.start, end: null });
                     }
                 }
             });
@@ -7559,7 +7716,7 @@ class CalendarComponent {
      */
     onResize() {
         this.focusedDate = new Date(this.focusedDate);
-        this.cdr.detectChanges();
+        this.detectChanges();
     }
     /**
      * Focuses the Calendar by making the table.k-calendar-table element active.
@@ -7650,11 +7807,10 @@ class CalendarComponent {
             return;
         }
         this.ngZone.run(() => {
-            this.selectedDates = availableDates.map(date => cloneDate(date));
+            this._selectedDates.set(availableDates.map(date => cloneDate(date)));
             this.value = this.parseSelectionToValue(availableDates);
             this.onControlChange(this.parseSelectionToValue(availableDates));
             this.valueChange.emit(this.parseSelectionToValue(availableDates));
-            this.cdr.markForCheck();
         });
     }
     /**
@@ -7663,7 +7819,6 @@ class CalendarComponent {
     writeValue(candidate) {
         this.verifyValue(candidate);
         this.value = candidate;
-        this.cdr.markForCheck();
     }
     /**
      * @hidden
@@ -7681,8 +7836,7 @@ class CalendarComponent {
      * @hidden
      */
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.cdr.markForCheck();
+        this._disabled.set(isDisabled);
     }
     /**
      * @hidden
@@ -7718,7 +7872,7 @@ class CalendarComponent {
      */
     handleNavigate(event) {
         this.focusedDate = event.focusedDate;
-        this.activeView = event.activeView;
+        this._activeView.set(event.activeView);
         this.emitNavigate(this.focusedDate);
     }
     /**
@@ -7742,14 +7896,14 @@ class CalendarComponent {
      * @hidden
      */
     handleActiveDateChange(date) {
-        this.activeViewDate = date;
+        this.activeViewDate.set(date);
         this.emitEvent(this.activeViewDateChange, date);
     }
     /**
      * @hidden
      */
     handleActiveViewChange(view) {
-        this.activeView = view;
+        this._activeView.set(view);
         this.emitEvent(this.activeViewChange, view);
         if (this.type === 'infinite') {
             this.scrollSyncService.configure(this.activeViewEnum);
@@ -7785,7 +7939,7 @@ class CalendarComponent {
             }
             if (this.selection === 'range') {
                 this.canHover = false;
-                this.activeRangeEnd = 'start';
+                this._activeRangeEnd.set('start');
                 const shouldEmitValueChange = this.selectionRange.start?.getTime() !== dates[0].getTime() ||
                     this.selectionRange.end?.getTime() !== last(dates).getTime();
                 this.value = { start: dates[0], end: last(dates) };
@@ -7802,14 +7956,13 @@ class CalendarComponent {
         if (this.element.nativeElement.contains(args.relatedTarget)) {
             return;
         }
-        this.isActive = false;
+        this._isActive.set(false);
         // the injector can get the NgControl instance of the parent component (for example, the DateTimePicker)
         // and enters the zone for no reason because the parent component is still untouched
         if (!this.pickerService && requiresZoneOnBlur(this.control)) {
             this.ngZone.run(() => {
                 this.onControlTouched();
                 this.emitBlur(args);
-                this.cdr.markForCheck();
             });
         }
         else {
@@ -7821,7 +7974,7 @@ class CalendarComponent {
      * @hidden
      */
     handleFocus() {
-        this.isActive = true;
+        this._isActive.set(true);
         if (!NgZone.isInAngularZone()) {
             this.detectChanges();
         }
@@ -7883,8 +8036,7 @@ class CalendarComponent {
     setRangeSelectionToValue() {
         if (this.selection === 'range' && this.type === 'infinite' && this.value) {
             this.ngZone.run(() => {
-                this.selectionRange = this.value;
-                this.cdr.markForCheck();
+                this._selectionRange.set(this.value);
             });
         }
     }
@@ -7954,7 +8106,7 @@ class CalendarComponent {
     focusToday() {
         this.focusedDate = getToday();
         this.bus.moveToBottom(this.activeViewEnum);
-        this.cdr.detectChanges();
+        this.detectChanges();
     }
     detectChanges() {
         if (!this.destroyed) {
@@ -7987,44 +8139,45 @@ class CalendarComponent {
     setValue(candidate) {
         this.verifyValue(candidate);
         if (candidate === null) {
-            this._value = null;
-            this.selectedDates = [];
-            this.selectionRange = { start: null, end: null };
+            this._value.set(null);
+            this._selectedDates.set([]);
+            this._selectionRange.set({ start: null, end: null });
         }
         else if (Array.isArray(candidate)) {
-            this.selectionRange = { start: null, end: null };
-            this._value = candidate.filter(date => isPresent(date)).map(element => cloneDate(element));
+            this._selectionRange.set({ start: null, end: null });
+            this._value.set(candidate.filter(date => isPresent(date)).map(element => cloneDate(element)));
         }
         else if (isObject(candidate) && Object.keys(candidate).find(k => k === 'start') && Object.keys(candidate).find(k => k === 'end')) {
-            this.selectedDates = [];
-            this.selectionRange = { start: null, end: null };
-            this._value = { start: null, end: null };
-            this._value.start = candidate.start instanceof Date ? cloneDate(candidate.start) : null;
-            this._value.end = candidate.end instanceof Date ? cloneDate(candidate.end) : null;
-            this.selectionRange = Object.assign({}, this._value);
-            if (this._value?.start && !this._value?.end) {
-                this.activeRangeEnd = 'end';
+            this._selectedDates.set([]);
+            this._selectionRange.set({ start: null, end: null });
+            const rangeValue = { start: null, end: null };
+            rangeValue.start = candidate.start instanceof Date ? cloneDate(candidate.start) : null;
+            rangeValue.end = candidate.end instanceof Date ? cloneDate(candidate.end) : null;
+            this._value.set(rangeValue);
+            this._selectionRange.set(Object.assign({}, rangeValue));
+            if (rangeValue.start && !rangeValue.end) {
+                this._activeRangeEnd.set('end');
                 this.canHover = true;
             }
-            if (this._value?.end && !this._value?.start) {
-                this.activeRangeEnd = 'start';
+            if (rangeValue.end && !rangeValue.start) {
+                this._activeRangeEnd.set('start');
                 this.canHover = true;
             }
-            if (this._value?.end && this._value?.start) {
+            if (rangeValue.end && rangeValue.start) {
                 this.canHover = false;
             }
         }
         else {
-            this.selectionRange = { start: null, end: null };
-            this._value = cloneDate(candidate);
+            this._selectionRange.set({ start: null, end: null });
+            this._value.set(cloneDate(candidate));
         }
         if (this.selection !== 'range') {
             const selection = [].concat(candidate).filter(date => isPresent(date)).map(date => cloneDate(date));
             if (!areDatesEqual(selection, this.selectedDates)) {
                 const lastSelected = last(selection);
-                this.rangePivot = cloneDate(lastSelected);
+                this._rangePivot.set(cloneDate(lastSelected));
                 this.focusedDate = cloneDate(lastSelected) || this.focusedDate;
-                this.selectedDates = selection;
+                this._selectedDates.set(selection);
             }
         }
     }
@@ -8035,9 +8188,9 @@ class CalendarComponent {
             (this.activeRangeEnd === 'end' && this.value?.end?.getTime() !== date?.getTime());
         this.ngZone.run(() => {
             const rangeSelection = handleRangeSelection(date, clonedRangeSelection, this.activeRangeEnd, this.allowReverse);
-            this.activeRangeEnd = rangeSelection.activeRangeEnd;
+            this._activeRangeEnd.set(rangeSelection.activeRangeEnd);
             if (this.canHover && rangeSelection.activeRangeEnd === 'end' && rangeSelection.selectionRange.end?.getTime() === date.getTime()) {
-                this.activeRangeEnd = 'start';
+                this._activeRangeEnd.set('start');
                 rangeSelection.activeRangeEnd = 'start';
             }
             this.canHover = this.activeRangeEnd === 'end' && rangeSelection.selectionRange.start && !rangeSelection.selectionRange.end;
@@ -8046,7 +8199,6 @@ class CalendarComponent {
                 this.value = rangeSelection.selectionRange;
                 this.valueChange.emit(this.value);
             }
-            this.cdr.markForCheck();
         });
     }
     performSelection(date, selectionModifiers) {
@@ -8058,7 +8210,7 @@ class CalendarComponent {
             rangePivot: this.rangePivot,
             selectedDates: this.selectedDates
         });
-        this.rangePivot = selection.rangePivot;
+        this._rangePivot.set(selection.rangePivot);
         this.handleDateChange({
             selectedDates: selection.selectedDates,
             focusedDate: date
@@ -8402,6 +8554,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                 type: Input
             }], weekNumber: [{
                 type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.k-week-number']
             }], hostWeekNumberClass: [{
                 type: HostBinding,
                 args: ['class.k-week-number']
@@ -8536,15 +8691,33 @@ class DateInputMessages extends ComponentMessages {
     /**
      * The title of the **Decrement** button of the DateInput.
      */
-    decrement;
+    set decrement(value) {
+        this._decrement.set(value);
+    }
+    get decrement() {
+        return this._decrement();
+    }
     /**
      * The title of the **Increment** button of the DateInput.
      */
-    increment;
+    set increment(value) {
+        this._increment.set(value);
+    }
+    get increment() {
+        return this._increment();
+    }
     /**
      * The title of the **Clear** button of the DateInput.
      */
-    clearTitle;
+    set clearTitle(value) {
+        this._clearTitle.set(value);
+    }
+    get clearTitle() {
+        return this._clearTitle();
+    }
+    _decrement = signal(undefined, ...(ngDevMode ? [{ debugName: "_decrement" }] : []));
+    _increment = signal(undefined, ...(ngDevMode ? [{ debugName: "_increment" }] : []));
+    _clearTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_clearTitle" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DateInputMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: DateInputMessages, isStandalone: true, selector: "kendo-dateinput-messages-base", inputs: { decrement: "decrement", increment: "increment", clearTitle: "clearTitle" }, usesInheritance: true, ngImport: i0 });
 }
@@ -8679,11 +8852,11 @@ class DateInputComponent {
      */
     set focusableId(_focusableId) {
         if (_focusableId) {
-            this._focusableId = _focusableId;
+            this._focusableId.set(_focusableId);
         }
     }
     get focusableId() {
-        return this._focusableId;
+        return this._focusableId();
     }
     /**
      * @hidden
@@ -8698,7 +8871,12 @@ class DateInputComponent {
      * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
      * @default false
      */
-    clearButton = false;
+    set clearButton(value) {
+        this._clearButton.set(value);
+    }
+    get clearButton() {
+        return this._clearButton();
+    }
     /**
      * Specifies whether the component is disabled
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/disabled-state)).
@@ -8706,47 +8884,82 @@ class DateInputComponent {
      *
      * @default false
      */
-    disabled = false;
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
     /**
      * Specifies the read-only state of the DateInput
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/readonly-state)).
      *
      * @default false
      */
-    readonly = false;
+    set readonly(value) {
+        this._readonly.set(value);
+    }
+    get readonly() {
+        return this._readonly();
+    }
     /**
      * Specifies the title of the input element of the DateInput.
      *
      * @default ""
      */
-    title = "";
+    set title(value) {
+        this._title.set(value);
+    }
+    get title() {
+        return this._title();
+    }
     /**
      * Specifies the `tabIndex` property of the DateInput.
      *
      * @default 0
      */
-    tabindex = 0;
+    set tabindex(value) {
+        this._tabindex.set(value);
+    }
+    get tabindex() {
+        return this._tabindex();
+    }
     /**
      * @hidden
      */
-    role = null;
+    set role(value) {
+        this._role.set(value);
+    }
+    get role() {
+        return this._role();
+    }
     /**
      * @hidden
      */
-    ariaReadOnly = false;
+    set ariaReadOnly(value) {
+        this._ariaReadOnly.set(value);
+    }
+    get ariaReadOnly() {
+        return this._ariaReadOnly();
+    }
     /**
      * @hidden
      */
     set tabIndex(tabIndex) {
-        this.tabindex = tabIndex;
+        this._tabindex.set(tabIndex);
     }
     get tabIndex() {
-        return this.tabindex;
+        return this._tabindex();
     }
     /**
      * @hidden
      */
-    isRequired = false;
+    set isRequired(value) {
+        this._isRequired.set(value);
+    }
+    get isRequired() {
+        return this._isRequired();
+    }
     /**
      * Specifies the date format that is used to display the input value
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/formats)).
@@ -8754,89 +8967,149 @@ class DateInputComponent {
      * You can provide a string if a single format is going to be used regardless whether the input is focused or blurred.
      * Alternatively, you can provide a FormatSettings object to display different formats when the component is focused or blurred by specifying inputFormat and displayFormat values.
      */
-    format = DEFAULT_FORMAT$1;
+    set format(value) {
+        this._format.set(value);
+    }
+    get format() {
+        return this._format();
+    }
     /**
      * Defines the descriptions of the format sections in the input field.
      * For more information, refer to the article on
      * [placeholders](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/placeholders).
      */
     set formatPlaceholder(format) {
-        this._formatPlaceholder = format || DEFAULT_FORMAT_PLACEHOLDER;
+        this._formatPlaceholder.set(format || DEFAULT_FORMAT_PLACEHOLDER);
     }
     get formatPlaceholder() {
-        return this._formatPlaceholder;
+        return this._formatPlaceholder();
     }
     /**
      * Specifies the hint the DateInput displays when its value is `null`.
      * For more information, refer to the article on
      * [placeholders](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/placeholders).
      */
-    placeholder;
+    set placeholder(value) {
+        this._placeholder.set(value);
+    }
+    get placeholder() {
+        return this._placeholder();
+    }
     /**
      * Configures the incremental steps of the DateInput.
      * For more information, refer to the article on
      * [incremental steps](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/incremental-steps).
      */
-    steps = {};
+    set steps(value) {
+        this._steps.set(value);
+    }
+    get steps() {
+        return this._steps();
+    }
     /**
      * Specifies the biggest date that is valid
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/date-ranges)).
      *
      * @default 2099-12-31
      */
-    max = cloneDate(MAX_DATE);
+    set max(value) {
+        this._max.set(value);
+    }
+    get max() {
+        return this._max();
+    }
     /**
      * Specifies the smallest date that is valid
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/date-ranges)).
      *
      * @default 1900-1-1
      */
-    min = cloneDate(MIN_DATE);
+    set min(value) {
+        this._min.set(value);
+    }
+    get min() {
+        return this._min();
+    }
     /**
      * Specifies whether to enforce the built-in min and max validators when validating a form.
      * Set to `true` to enable validation for the `min` and `max` values.
      *
      * @default true
      */
-    rangeValidation = true;
+    set rangeValidation(value) {
+        this._rangeValidation.set(value);
+    }
+    get rangeValidation() {
+        return this._rangeValidation();
+    }
     /**
      * Specifies if the component automatically corrects invalid date segments.
      * When set to `true`, the component fixes invalid segments as you type.
      *
      * @default true
      */
-    autoCorrectParts = true;
+    set autoCorrectParts(value) {
+        this._autoCorrectParts.set(value);
+    }
+    get autoCorrectParts() {
+        return this._autoCorrectParts();
+    }
     /**
      * Specifies if the component automatically moves to the next segment after you complete the current one.
      * When set to `true`, focus moves to the next segment as soon as you finish typing the current segment.
      *
      * @default true
      */
-    autoSwitchParts = true;
+    set autoSwitchParts(value) {
+        this._autoSwitchParts.set(value);
+    }
+    get autoSwitchParts() {
+        return this._autoSwitchParts();
+    }
     /**
      * Specifies custom keys that move focus to the next date format segment.
      * Provide an array of strings to define which keys trigger the focus change.
      */
-    autoSwitchKeys = [];
+    set autoSwitchKeys(value) {
+        this._autoSwitchKeys.set(value);
+    }
+    get autoSwitchKeys() {
+        return this._autoSwitchKeys();
+    }
     /**
      * Specifies if the component displays a blinking caret inside the DateInput when possible.
      * Set to `true` to show a blinking caret for better visual feedback.
      *
      * @default false
      */
-    allowCaretMode = false;
+    set allowCaretMode(value) {
+        this._allowCaretMode.set(value);
+    }
+    get allowCaretMode() {
+        return this._allowCaretMode();
+    }
     /**
      * Specifies whether to autofill the rest of the date to the current date when the component loses focus.
      *
      * @default false
      */
-    autoFill = false;
+    set autoFill(value) {
+        this._autoFill.set(value);
+    }
+    get autoFill() {
+        return this._autoFill();
+    }
     /**
      * Specifies whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
      *
      * @default false
      */
-    incompleteDateValidation = false;
+    set incompleteDateValidation(value) {
+        this._incompleteDateValidation.set(value);
+    }
+    get incompleteDateValidation() {
+        return this._incompleteDateValidation();
+    }
     /**
      * The maximum year to assume to be from the current century when typing two-digit year value
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/formats#two-digit-year-format)).
@@ -8845,13 +9118,23 @@ class DateInputComponent {
      * will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
      * @default 68
      */
-    twoDigitYearMax = TWO_DIGIT_YEAR_MAX$2;
+    set twoDigitYearMax(value) {
+        this._twoDigitYearMax.set(value);
+    }
+    get twoDigitYearMax() {
+        return this._twoDigitYearMax();
+    }
     /**
      * Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
      *
      * @default true
      */
-    enableMouseWheel = true;
+    set enableMouseWheel(value) {
+        this._enableMouseWheel.set(value);
+    }
+    get enableMouseWheel() {
+        return this._enableMouseWheel();
+    }
     /**
      * Specifies the value of the DateInput component.
      *
@@ -8860,11 +9143,11 @@ class DateInputComponent {
     set value(value) {
         this.verifyValue(value);
         this.showClearButton = value || (!value && this.isDateIncomplete) ? true : false;
-        this._value = cloneDate(value);
+        this._value.set(cloneDate(value));
         this.valueUpdate.emit(cloneDate(value));
     }
     get value() {
-        return this._value;
+        return this._value();
     }
     /**
      * Specifies whether the **Up** and **Down** spin buttons will be rendered.
@@ -8873,26 +9156,41 @@ class DateInputComponent {
      *
      * @default false
      */
-    spinners = false;
+    set spinners(value) {
+        this._spinners.set(value);
+    }
+    get spinners() {
+        return this._spinners();
+    }
     /**
      * @hidden
      */
-    isPopupOpen;
+    set isPopupOpen(value) {
+        this._isPopupOpen.set(value);
+    }
+    get isPopupOpen() {
+        return this._isPopupOpen();
+    }
     /**
      * @hidden
      */
-    hasPopup;
+    set hasPopup(value) {
+        this._hasPopup.set(value);
+    }
+    get hasPopup() {
+        return this._hasPopup();
+    }
     /**
      * @hidden
      */
     set ariaInvalidState(value) {
-        this._ariaInvalidState = value;
+        this._ariaInvalidState.set(value);
         if (value !== null && this.inputElement) {
             this.setAriaInvalid();
         }
     }
     get ariaInvalidState() {
-        return this._ariaInvalidState;
+        return this._ariaInvalidState();
     }
     /**
      * Specifies the size of the component. The default value is set by the Kendo theme.
@@ -8903,10 +9201,10 @@ class DateInputComponent {
         if (size) {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
         }
-        this._size = size;
+        this._size.set(size);
     }
     get size() {
-        return this._size;
+        return this._size();
     }
     /**
      * Specifies the border radius of the component. The default value is set by the Kendo theme.
@@ -8916,10 +9214,10 @@ class DateInputComponent {
         if (rounded) {
             this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
         }
-        this._rounded = rounded;
+        this._rounded.set(rounded);
     }
     get rounded() {
-        return this._rounded;
+        return this._rounded();
     }
     /**
      * Specifies the fillMode of the component. The default value is set by the Kendo theme.
@@ -8933,10 +9231,10 @@ class DateInputComponent {
                 this.setSpinnerFill(this.spindown.nativeElement, fillMode, this.fillMode);
             }
         }
-        this._fillMode = fillMode;
+        this._fillMode.set(fillMode);
     }
     get fillMode() {
-        return this._fillMode;
+        return this._fillMode();
     }
     /**
      * Specifies the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
@@ -8948,14 +9246,14 @@ class DateInputComponent {
         if (isObjectPresent(this.parsedAttributes)) {
             removeHTMLAttributes(this.parsedAttributes, this.renderer, this.dateInput.nativeElement);
         }
-        this._inputAttributes = attributes;
+        this._inputAttributes.set(attributes);
         this.parsedAttributes = this.inputAttributes ?
             parseAttributes(this.inputAttributes, this.defaultAttributes) :
             this.inputAttributes;
         this.setInputAttributes();
     }
     get inputAttributes() {
-        return this._inputAttributes;
+        return this._inputAttributes();
     }
     /**
      * Fires each time the user selects a new value
@@ -9037,25 +9335,27 @@ class DateInputComponent {
         };
     }
     arrow = Arrow;
-    arrowDirection = Arrow.None;
-    formatSections = { date: false, time: false };
+    get arrowDirection() { return this._arrowDirection(); }
+    set arrowDirection(v) { this._arrowDirection.set(v); }
+    get formatSections() { return this._formatSections(); }
     hasMousedown = false;
     focusedPriorToMousedown = false;
-    showClearButton = false;
+    get showClearButton() { return this._showClearButton(); }
+    set showClearButton(value) { this._showClearButton.set(value); }
     /**
      * @hidden
      */
-    isDateIncomplete = false;
+    get isDateIncomplete() { return this._isDateIncomplete(); }
     currentFormat = "";
     spinup;
     spindown;
     minValidator = noop$2;
     maxValidator = noop$2;
     incompleteValidator = noop$2;
-    _value = null;
+    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
     _active = false;
-    _focusableId = `dateinput-${nextId++}`;
-    _formatPlaceholder = DEFAULT_FORMAT_PLACEHOLDER;
+    _focusableId = signal(`dateinput-${nextId++}`, ...(ngDevMode ? [{ debugName: "_focusableId" }] : []));
+    _formatPlaceholder = signal(DEFAULT_FORMAT_PLACEHOLDER, ...(ngDevMode ? [{ debugName: "_formatPlaceholder" }] : []));
     kendoDate = null;
     kendoDateObject = null;
     domEvents = [];
@@ -9063,14 +9363,43 @@ class DateInputComponent {
     onControlChange = noop$2;
     onControlTouched = noop$2;
     onValidatorChange = noop$2;
-    _size;
-    _rounded;
-    _fillMode;
-    _ariaInvalidState = null;
+    _ariaInvalidState = signal(null, ...(ngDevMode ? [{ debugName: "_ariaInvalidState" }] : []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _rounded = signal(undefined, ...(ngDevMode ? [{ debugName: "_rounded" }] : []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : []));
     control;
     subs = new Subscription();
-    _inputAttributes;
+    _inputAttributes = signal(undefined, ...(ngDevMode ? [{ debugName: "_inputAttributes" }] : []));
     parsedAttributes = {};
+    _clearButton = signal(false, ...(ngDevMode ? [{ debugName: "_clearButton" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _readonly = signal(false, ...(ngDevMode ? [{ debugName: "_readonly" }] : []));
+    _title = signal('', ...(ngDevMode ? [{ debugName: "_title" }] : []));
+    _tabindex = signal(0, ...(ngDevMode ? [{ debugName: "_tabindex" }] : []));
+    _role = signal(null, ...(ngDevMode ? [{ debugName: "_role" }] : []));
+    _ariaReadOnly = signal(false, ...(ngDevMode ? [{ debugName: "_ariaReadOnly" }] : []));
+    _isRequired = signal(false, ...(ngDevMode ? [{ debugName: "_isRequired" }] : []));
+    _format = signal(DEFAULT_FORMAT$1, ...(ngDevMode ? [{ debugName: "_format" }] : []));
+    _placeholder = signal(undefined, ...(ngDevMode ? [{ debugName: "_placeholder" }] : []));
+    _steps = signal({}, ...(ngDevMode ? [{ debugName: "_steps" }] : []));
+    _max = signal(cloneDate(MAX_DATE), ...(ngDevMode ? [{ debugName: "_max" }] : []));
+    _min = signal(cloneDate(MIN_DATE), ...(ngDevMode ? [{ debugName: "_min" }] : []));
+    _rangeValidation = signal(true, ...(ngDevMode ? [{ debugName: "_rangeValidation" }] : []));
+    _autoCorrectParts = signal(true, ...(ngDevMode ? [{ debugName: "_autoCorrectParts" }] : []));
+    _autoSwitchParts = signal(true, ...(ngDevMode ? [{ debugName: "_autoSwitchParts" }] : []));
+    _autoSwitchKeys = signal([], ...(ngDevMode ? [{ debugName: "_autoSwitchKeys" }] : []));
+    _allowCaretMode = signal(false, ...(ngDevMode ? [{ debugName: "_allowCaretMode" }] : []));
+    _autoFill = signal(false, ...(ngDevMode ? [{ debugName: "_autoFill" }] : []));
+    _incompleteDateValidation = signal(false, ...(ngDevMode ? [{ debugName: "_incompleteDateValidation" }] : []));
+    _twoDigitYearMax = signal(TWO_DIGIT_YEAR_MAX$2, ...(ngDevMode ? [{ debugName: "_twoDigitYearMax" }] : []));
+    _enableMouseWheel = signal(true, ...(ngDevMode ? [{ debugName: "_enableMouseWheel" }] : []));
+    _spinners = signal(false, ...(ngDevMode ? [{ debugName: "_spinners" }] : []));
+    _isPopupOpen = signal(undefined, ...(ngDevMode ? [{ debugName: "_isPopupOpen" }] : []));
+    _hasPopup = signal(undefined, ...(ngDevMode ? [{ debugName: "_hasPopup" }] : []));
+    _arrowDirection = signal(Arrow.None, ...(ngDevMode ? [{ debugName: "_arrowDirection" }] : []));
+    _showClearButton = signal(false, ...(ngDevMode ? [{ debugName: "_showClearButton" }] : []));
+    _formatSections = signal({ date: false, time: false }, ...(ngDevMode ? [{ debugName: "_formatSections" }] : []));
+    _isDateIncomplete = signal(false, ...(ngDevMode ? [{ debugName: "_isDateIncomplete" }] : []));
     get defaultAttributes() {
         return {
             'aria-readonly': this.ariaReadOnly,
@@ -9108,7 +9437,7 @@ class DateInputComponent {
             this.pickerService.input = this;
         }
         else {
-            this.ariaReadOnly = null;
+            this._ariaReadOnly.set(null);
         }
         this.renderer.addClass(this.wrapper.nativeElement, 'k-input');
         this.renderer.addClass(this.wrapper.nativeElement, 'k-dateinput');
@@ -9187,22 +9516,21 @@ class DateInputComponent {
         }
     }
     updateFormatSections() {
-        this.formatSections = this.intl.splitDateFormat(this.kendoDate.inputFormat)
+        this._formatSections.set(this.intl.splitDateFormat(this.kendoDate.inputFormat)
             .reduce(({ date, time }, p) => {
             return {
                 date: date || DATE_PART_REGEXP.test(p.type),
                 time: time || TIME_PART_REGEXP.test(p.type)
             };
-        }, { date: false, time: false });
+        }, { date: false, time: false }));
     }
     updateIncompleteValidationStatus() {
         const previousValue = this.isDateIncomplete;
-        this.isDateIncomplete = Boolean(this.kendoDateObject?.hasValue() && this.value === null);
+        this._isDateIncomplete.set(Boolean(this.kendoDateObject?.hasValue() && this.value === null));
         if (previousValue === this.isDateIncomplete || !this.incompleteDateValidation) {
             return;
         }
         if (isPresent(this.ngControl) && !isPresent(this.pickerService)) {
-            this.cdr.markForCheck();
             this.ngZone.run(() => this.onValidatorChange());
         }
         else if (isPresent(this.pickerService)) {
@@ -9215,6 +9543,13 @@ class DateInputComponent {
         this.control = formControl;
         this.subs.add(this.formControl?.statusChanges.subscribe(() => this.setAriaInvalid()));
         this.setAriaInvalid();
+        if (formControl && formControl.events) {
+            this.subs.add(formControl.events.subscribe(e => {
+                if (e instanceof TouchedChangeEvent) {
+                    this.cdr.markForCheck();
+                }
+            }));
+        }
         this.subs.add(this.renderer.listen(this.dateInput?.nativeElement, 'keydown', this.handleKeyDown));
     }
     ngOnDestroy() {
@@ -9228,11 +9563,11 @@ class DateInputComponent {
      * @hidden
      */
     setAriaInvalid() {
-        if (this._ariaInvalidState === null && !this.control) {
+        if (this.ariaInvalidState === null && !this.control) {
             return;
         }
-        const isInvalid = this._ariaInvalidState !== null
-            ? this._ariaInvalidState
+        const isInvalid = this.ariaInvalidState !== null
+            ? this.ariaInvalidState
             : !!(this.control.invalid && (this.control.touched || this.control.dirty));
         this.renderer.setAttribute(this.inputElement, attributeNames.ariaInvalid, `${isInvalid}`);
     }
@@ -9258,8 +9593,7 @@ class DateInputComponent {
      * @hidden
      */
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.cdr.markForCheck();
+        this._disabled.set(isDisabled);
     }
     //ngModel binding
     /**
@@ -9272,13 +9606,12 @@ class DateInputComponent {
         this.kendoDateObject?.setValue(this.value);
         this.kendoDate?.refreshElementValue();
         this.updateIncompleteValidationStatus();
-        this.cdr.markForCheck();
     }
     /**
      * Resets the value of the DateInput component to `null` and triggers the `valueChange` event.
      */
     resetInput() {
-        this.isDateIncomplete = false;
+        this._isDateIncomplete.set(false);
         this.writeValue(null);
         // Notify datepicker that a change has happened and emit `valueChange`
         this.notify();
@@ -9367,7 +9700,6 @@ class DateInputComponent {
         this.updateIncompleteValidationStatus();
         if (this.clearButton) {
             this.showClearButton = this.value || this.isDateIncomplete ? true : false;
-            this.cdr.markForCheck();
         }
     }
     onWidgetFocus(args) {
@@ -9910,31 +10242,73 @@ class DatePickerMessages extends ComponentMessages {
     /**
      * The **Today** button text in the header of the Calendar.
      */
-    today;
+    set today(value) {
+        this._today.set(value);
+    }
+    get today() {
+        return this._today();
+    }
     /**
      * The title of the **Toggle** button of the DatePicker.
      */
-    toggle;
+    set toggle(value) {
+        this._toggle.set(value);
+    }
+    get toggle() {
+        return this._toggle();
+    }
     /**
      * The title of the **Prev** button in the header of the Classic Calendar.
      */
-    prevButtonTitle;
+    set prevButtonTitle(value) {
+        this._prevButtonTitle.set(value);
+    }
+    get prevButtonTitle() {
+        return this._prevButtonTitle();
+    }
     /**
      * The title of the **Next** button in the header of the Classic Calendar.
      */
-    nextButtonTitle;
+    set nextButtonTitle(value) {
+        this._nextButtonTitle.set(value);
+    }
+    get nextButtonTitle() {
+        return this._nextButtonTitle();
+    }
     /**
      * The title of the **Parent View** button in the header of the Calendar.
      */
-    parentViewButtonTitle;
+    set parentViewButtonTitle(value) {
+        this._parentViewButtonTitle.set(value);
+    }
+    get parentViewButtonTitle() {
+        return this._parentViewButtonTitle();
+    }
     /**
      * The title of the **Clear** button of the DatePicker.
      */
-    clearTitle;
+    set clearTitle(value) {
+        this._clearTitle.set(value);
+    }
+    get clearTitle() {
+        return this._clearTitle();
+    }
     /**
      * 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;
+    set adaptiveCloseButtonTitle(value) {
+        this._adaptiveCloseButtonTitle.set(value);
+    }
+    get adaptiveCloseButtonTitle() {
+        return this._adaptiveCloseButtonTitle();
+    }
+    _today = signal(undefined, ...(ngDevMode ? [{ debugName: "_today" }] : []));
+    _toggle = signal(undefined, ...(ngDevMode ? [{ debugName: "_toggle" }] : []));
+    _prevButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_prevButtonTitle" }] : []));
+    _nextButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_nextButtonTitle" }] : []));
+    _parentViewButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_parentViewButtonTitle" }] : []));
+    _clearTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_clearTitle" }] : []));
+    _adaptiveCloseButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_adaptiveCloseButtonTitle" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DatePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: DatePickerMessages, isStandalone: true, selector: "kendo-datepicker-messages-base", inputs: { today: "today", toggle: "toggle", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle", clearTitle: "clearTitle", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle" }, usesInheritance: true, ngImport: i0 });
 }
@@ -10039,7 +10413,12 @@ class DatePickerComponent extends MultiTabStop {
     /**
      * @hidden
      */
-    focusableId;
+    set focusableId(value) {
+        this._focusableId.set(value);
+    }
+    get focusableId() {
+        return this._focusableId();
+    }
     /**
      * @hidden
      */
@@ -10055,7 +10434,12 @@ class DatePickerComponent extends MultiTabStop {
      * Click this button to reset the component value to `null` and trigger the `valueChange` event.
      * @default false
      */
-    clearButton = false;
+    set clearButton(value) {
+        this._clearButton.set(value);
+    }
+    get clearButton() {
+        return this._clearButton();
+    }
     /**
      * Specifies the HTML attributes of the inner focusable input element.
      * You cannot change attributes that are essential for certain component functionalities.
@@ -10063,7 +10447,12 @@ class DatePickerComponent extends MultiTabStop {
      * @remarks
      * This property is related to accessibility.
      */
-    inputAttributes;
+    set inputAttributes(value) {
+        this._inputAttributes.set(value);
+    }
+    get inputAttributes() {
+        return this._inputAttributes();
+    }
     /**
      * @hidden
      */
@@ -10148,7 +10537,12 @@ class DatePickerComponent extends MultiTabStop {
      * Controls the visibility of the Calendar footer.
      * @default false
      */
-    footer = false;
+    set footer(value) {
+        this._footer.set(value);
+    }
+    get footer() {
+        return this._footer();
+    }
     /**
      * @hidden
      */
@@ -10163,34 +10557,64 @@ class DatePickerComponent extends MultiTabStop {
      * Specifies the format of the displayed Calendar week days' names.
      * @default 'short'
      */
-    weekDaysFormat = "short";
+    set weekDaysFormat(value) {
+        this._weekDaysFormat.set(value);
+    }
+    get weekDaysFormat() {
+        return this._weekDaysFormat();
+    }
     /**
      * Shows the days that fall outside the current month in the Calendar ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/view-options#displaying-other-month-days)).
      * The default value is `false` for infinite Calendar type and `true` for classic Calendar type.
      */
-    showOtherMonthDays;
+    set showOtherMonthDays(value) {
+        this._showOtherMonthDays.set(value);
+    }
+    get showOtherMonthDays() {
+        return this._showOtherMonthDays();
+    }
     /**
      * Specifies the active view that the Calendar initially renders ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/view-options#active-view)).
      *
      * You have to set `activeView` within the `topView`-`bottomView` range.
      * @default 'month'
      */
-    activeView = CalendarViewEnum[CalendarViewEnum.month];
+    set activeView(value) {
+        this._activeView.set(value);
+    }
+    get activeView() {
+        return this._activeView();
+    }
     /**
      * Specifies the bottommost Calendar view to which you can navigate ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/calendar-options#view-selection-depth)).
      * @default 'month'
      */
-    bottomView = CalendarViewEnum[CalendarViewEnum.month];
+    set bottomView(value) {
+        this._bottomView.set(value);
+    }
+    get bottomView() {
+        return this._bottomView();
+    }
     /**
      * Specifies the topmost Calendar view to which you can navigate ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/calendar-options#view-selection-depth)).
      * @default 'century'
      */
-    topView = CalendarViewEnum[CalendarViewEnum.century];
+    set topView(value) {
+        this._topView.set(value);
+    }
+    get topView() {
+        return this._topView();
+    }
     /**
      * Specifies the Calendar type.
      * @default 'infinite'
      */
-    calendarType = 'infinite';
+    set calendarType(value) {
+        this._calendarType.set(value);
+    }
+    get calendarType() {
+        return this._calendarType();
+    }
     /**
      * Determines whether to enable animation when navigating to previous/next Calendar view.
      * Applies to the [`classic`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/datepickercomponent#calendartype) Calendar only.
@@ -10199,18 +10623,33 @@ class DatePickerComponent extends MultiTabStop {
      *
      * @default false
      */
-    animateCalendarNavigation = false;
+    set animateCalendarNavigation(value) {
+        this._animateCalendarNavigation.set(value);
+    }
+    get animateCalendarNavigation() {
+        return this._animateCalendarNavigation();
+    }
     /**
      * Specifies or gets the `disabled` property of the DatePicker and determines whether the component is active ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/disabled-state)).
      * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/forms#managing-the-datepicker-disabled-state-in-reactive-forms).
      */
-    disabled = false;
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
     /**
      * Specifies the read-only state of the DatePicker ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/readonly-state#read-only-datepicker)).
      *
      * @default false
      */
-    readonly = false;
+    set readonly(value) {
+        this._readonly.set(value);
+    }
+    get readonly() {
+        return this._readonly();
+    }
     /**
      * Sets the read-only state of the DatePicker input field
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/readonly-state#read-only-input)).
@@ -10218,7 +10657,12 @@ class DatePickerComponent extends MultiTabStop {
      * If you set the [`readonly`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/datepickercomponent#readonly) property value to `true`,
      * the input will be rendered in a read-only state regardless of the `readOnlyInput` value.
      */
-    readOnlyInput = false;
+    set readOnlyInput(value) {
+        this._readOnlyInput.set(value);
+    }
+    get readOnlyInput() {
+        return this._readOnlyInput();
+    }
     /**
      * Configures the popup options of the DatePicker.
      *
@@ -10227,10 +10671,10 @@ class DatePickerComponent extends MultiTabStop {
      * The popupClass option specifies a list of CSS classes that are used to style the popup.
      */
     set popupSettings(settings) {
-        this._popupSettings = { animate: true, ...settings };
+        this._popupSettings.set({ animate: true, ...settings });
     }
     get popupSettings() {
-        return this._popupSettings;
+        return this._popupSettings();
     }
     /**
      * Sets or gets the `navigation` property of the Calendar
@@ -10238,72 +10682,122 @@ class DatePickerComponent extends MultiTabStop {
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/sidebar)).
      */
     set navigation(state) {
-        this._navigation = state;
+        this._navigation.set(state);
     }
     get navigation() {
         if (this.isAdaptive) {
             return;
         }
-        return this._navigation;
+        return this._navigation();
     }
-    _navigation = true;
+    _navigation = signal(true, ...(ngDevMode ? [{ debugName: "_navigation" }] : []));
     /**
      * Specifies the smallest valid date
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/date-ranges)).
      * @default 1900-1-1
      */
-    min = cloneDate(MIN_DATE);
+    set min(value) {
+        this._min.set(value);
+    }
+    get min() {
+        return this._min();
+    }
     /**
      * Specifies the biggest valid date
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/date-ranges)).
      * @default 2099-12-31
      */
-    max = cloneDate(MAX_DATE);
+    set max(value) {
+        this._max.set(value);
+    }
+    get max() {
+        return this._max();
+    }
     /**
      * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
      * @default false
      */
-    incompleteDateValidation = false;
+    set incompleteDateValidation(value) {
+        this._incompleteDateValidation.set(value);
+    }
+    get incompleteDateValidation() {
+        return this._incompleteDateValidation();
+    }
     /**
      * Determines whether to autocorrect invalid segments automatically.
      *
      * @default true
      */
-    autoCorrectParts = true;
+    set autoCorrectParts(value) {
+        this._autoCorrectParts.set(value);
+    }
+    get autoCorrectParts() {
+        return this._autoCorrectParts();
+    }
     /**
      * Determines whether to automatically move to the next segment after the user completes the current one.
      *
      * @default true
      */
-    autoSwitchParts = true;
+    set autoSwitchParts(value) {
+        this._autoSwitchParts.set(value);
+    }
+    get autoSwitchParts() {
+        return this._autoSwitchParts();
+    }
     /**
      * A string array representing custom keys, which will move the focus to the next date format segment.
      */
-    autoSwitchKeys = [];
+    set autoSwitchKeys(value) {
+        this._autoSwitchKeys.set(value);
+    }
+    get autoSwitchKeys() {
+        return this._autoSwitchKeys();
+    }
     /**
      * Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
      *
      * @default true
      */
-    enableMouseWheel = true;
+    set enableMouseWheel(value) {
+        this._enableMouseWheel.set(value);
+    }
+    get enableMouseWheel() {
+        return this._enableMouseWheel();
+    }
     /**
      * Determines if the users should see a blinking caret inside the Date Input when possible.
      *
      * @default false
      */
-    allowCaretMode = false;
+    set allowCaretMode(value) {
+        this._allowCaretMode.set(value);
+    }
+    get allowCaretMode() {
+        return this._allowCaretMode();
+    }
     /**
      * When enabled, the DatePicker will autofill the rest of the date to the current date when the component loses focus.
      *
      * @default false
      */
-    autoFill = false;
+    set autoFill(value) {
+        this._autoFill.set(value);
+    }
+    get autoFill() {
+        return this._autoFill();
+    }
     /**
      * Specifies the focused date of the Calendar component
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/calendar-options#focused-dates)).
      * @default null
      */
-    focusedDate = null;
+    set focusedDate(value) {
+        this._focusedDate.set(value);
+    }
+    get focusedDate() {
+        return this._focusedDate();
+    }
     /**
      * Specifies the value of the DatePicker component.
      *
@@ -10311,10 +10805,10 @@ class DatePickerComponent extends MultiTabStop {
      */
     set value(value) {
         this.verifyValue(value);
-        this._value = cloneDate(value);
+        this._value.set(cloneDate(value));
     }
     get value() {
-        return this._value;
+        return this._value();
     }
     /**
      * Specifies the date format that is used to display the input value
@@ -10323,7 +10817,12 @@ class DatePickerComponent extends MultiTabStop {
      * Format value options include string to provide a single format that is used regardless whether the input is focused or blurred.
      * FormatSettings can be used to display different formats when the component is focused or blurred by providing a settings object with specified inputFormat and displayFormat values.
      */
-    format = DEFAULT_FORMAT;
+    set format(value) {
+        this._format.set(value);
+    }
+    get format() {
+        return this._format();
+    }
     /**
      * The maximum year to assume to be from the current century when typing two-digit year value
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/formats#two-digit-year-format)).
@@ -10332,75 +10831,120 @@ class DatePickerComponent extends MultiTabStop {
      * will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
      * @default 68
      */
-    twoDigitYearMax = TWO_DIGIT_YEAR_MAX$1;
+    set twoDigitYearMax(value) {
+        this._twoDigitYearMax.set(value);
+    }
+    get twoDigitYearMax() {
+        return this._twoDigitYearMax();
+    }
     /**
      * Defines the descriptions of the format sections in the input field.
      * ([more information and examples](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/placeholders)).
      *
      */
-    formatPlaceholder;
+    set formatPlaceholder(value) {
+        this._formatPlaceholder.set(value);
+    }
+    get formatPlaceholder() {
+        return this._formatPlaceholder();
+    }
     /**
      * Specifies the hint the DatePicker displays when its value is `null`.
      * ([more information and exaples](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/placeholders)).
      */
-    placeholder;
+    set placeholder(value) {
+        this._placeholder.set(value);
+    }
+    get placeholder() {
+        return this._placeholder();
+    }
     /**
      * Sets the `tabindex` of the DatePicker.
      * This property is used to set the order in which the DatePicker will receive focus when navigating through the page using the Tab key.
      * @default 0
      */
-    tabindex = 0;
+    set tabindex(value) {
+        this._tabindex.set(value);
+    }
+    get tabindex() {
+        return this._tabindex();
+    }
     /**
      * @hidden
      */
     set tabIndex(tabIndex) {
-        this.tabindex = tabIndex;
+        this._tabindex.set(tabIndex);
     }
     get tabIndex() {
-        return this.tabindex;
+        return this._tabindex();
     }
     /**
      * Sets the dates of the DatePicker that will be disabled
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/disabled-dates)).
      */
     set disabledDates(value) {
-        this._disabledDates = value;
+        this._disabledDates.set(value);
         this.disabledDatesService.initialize(value);
     }
     get disabledDates() {
-        return this._disabledDates;
+        return this._disabledDates();
     }
     /**
      * Sets the title of the input element of the DatePicker and the title text rendered
      * in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/adaptivemode).
      * @default ""
      */
-    adaptiveTitle = "";
+    set adaptiveTitle(value) {
+        this._adaptiveTitle.set(value);
+    }
+    get adaptiveTitle() {
+        return this._adaptiveTitle();
+    }
     /**
      * Sets the subtitle text rendered in the header of the popup(action sheet).
      * Applicable only when [`AdaptiveMode` is set to `auto`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/adaptivemode).
      * @default ""
      */
-    adaptiveSubtitle = "";
+    set adaptiveSubtitle(value) {
+        this._adaptiveSubtitle.set(value);
+    }
+    get adaptiveSubtitle() {
+        return this._adaptiveSubtitle();
+    }
     /**
      * Determines whether the built-in min or max validators are enforced when validating a form.
      *
      * @default true
      */
-    rangeValidation = true;
+    set rangeValidation(value) {
+        this._rangeValidation.set(value);
+    }
+    get rangeValidation() {
+        return this._rangeValidation();
+    }
     /**
      * Determines whether the built-in validator for disabled
      * date ranges is enforced when validating a form
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/disabled-dates#using-a-function)).
      * @default true
      */
-    disabledDatesValidation = true;
+    set disabledDatesValidation(value) {
+        this._disabledDatesValidation.set(value);
+    }
+    get disabledDatesValidation() {
+        return this._disabledDatesValidation();
+    }
     /**
      * Determines whether to display a week number column in the `month` view of the Calendar
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/calendar-options#week-number-column)).
      * @default false
      */
-    weekNumber = false;
+    set weekNumber(value) {
+        this._weekNumber.set(value);
+    }
+    get weekNumber() {
+        return this._weekNumber();
+    }
     /**
      * Sets the size of the component. The default value is set by the Kendo theme.
      */
@@ -10411,10 +10955,10 @@ class DatePickerComponent extends MultiTabStop {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
             this.toggleButton && this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('button', size));
         }
-        this._size = size;
+        this._size.set(size);
     }
     get size() {
-        return this._size;
+        return this._size();
     }
     /**
      * Specifies the border radius of the component. The default value is set by the Kendo theme.
@@ -10424,10 +10968,10 @@ class DatePickerComponent extends MultiTabStop {
         if (rounded) {
             this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
         }
-        this._rounded = rounded;
+        this._rounded.set(rounded);
     }
     get rounded() {
-        return this._rounded;
+        return this._rounded();
     }
     /**
      * Specifies the fillMode of the component. The default value is set by the Kendo theme.
@@ -10439,17 +10983,22 @@ class DatePickerComponent extends MultiTabStop {
             this.toggleButton && this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', fillMode));
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
         }
-        this._fillMode = fillMode;
+        this._fillMode.set(fillMode);
     }
     get fillMode() {
-        return this._fillMode;
+        return this._fillMode();
     }
     /**
      * Specifies whether to enable adaptive rendering. When enabled, the DatePicker automatically switches between a calendar popup on larger screens and an ActionSheet on mobile devices.
      *
      * @default 'none'
      */
-    adaptiveMode = 'none';
+    set adaptiveMode(value) {
+        this._adaptiveMode.set(value);
+    }
+    get adaptiveMode() {
+        return this._adaptiveMode();
+    }
     /**
      * Fires each time the user selects a new value
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/events)).
@@ -10508,20 +11057,20 @@ class DatePickerComponent extends MultiTabStop {
         }
     }
     get show() {
-        return this._show;
+        return this._show();
     }
     set show(show) {
         if (show && (this.disabled || this.readonly)) {
             return;
         }
-        const skipZone = !show && (!this._show || (!hasObservers(this.close) && !hasObservers(this.open)));
+        const skipZone = !show && (!this._show() || (!hasObservers(this.close) && !hasObservers(this.open)));
         if (!skipZone) {
             this.zone.run(() => {
                 const event = new PreventableEvent();
-                if (!this._show && show) {
+                if (!this._show() && show) {
                     this.open.emit(event);
                 }
-                else if (this._show && !show) {
+                else if (this._show() && !show) {
                     this.close.emit(event);
                 }
                 if (event.isDefaultPrevented()) {
@@ -10558,11 +11107,11 @@ class DatePickerComponent extends MultiTabStop {
         }
         return control.invalid && (control.touched || control.dirty);
     }
-    _popupSettings = { animate: true };
-    _show = false;
-    _value = null;
+    _popupSettings = signal({ animate: true }, ...(ngDevMode ? [{ debugName: "_popupSettings" }] : []));
+    _show = signal(false, ...(ngDevMode ? [{ debugName: "_show" }] : []));
+    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
     _active = false;
-    _disabledDates;
+    _disabledDates = signal(undefined, ...(ngDevMode ? [{ debugName: "_disabledDates" }] : []));
     onControlChange = noop$2;
     onControlTouched = noop$2;
     onValidatorChange = noop$2;
@@ -10578,9 +11127,44 @@ class DatePickerComponent extends MultiTabStop {
     ariaActiveDescendantSubscription;
     control;
     domEvents = [];
-    _size;
-    _rounded;
-    _fillMode;
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _rounded = signal(undefined, ...(ngDevMode ? [{ debugName: "_rounded" }] : []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : []));
+    _focusableId = signal(undefined, ...(ngDevMode ? [{ debugName: "_focusableId" }] : []));
+    _clearButton = signal(false, ...(ngDevMode ? [{ debugName: "_clearButton" }] : []));
+    _inputAttributes = signal(undefined, ...(ngDevMode ? [{ debugName: "_inputAttributes" }] : []));
+    _footer = signal(false, ...(ngDevMode ? [{ debugName: "_footer" }] : []));
+    _weekDaysFormat = signal('short', ...(ngDevMode ? [{ debugName: "_weekDaysFormat" }] : []));
+    _showOtherMonthDays = signal(undefined, ...(ngDevMode ? [{ debugName: "_showOtherMonthDays" }] : []));
+    _activeView = signal(CalendarViewEnum[CalendarViewEnum.month], ...(ngDevMode ? [{ debugName: "_activeView" }] : []));
+    _bottomView = signal(CalendarViewEnum[CalendarViewEnum.month], ...(ngDevMode ? [{ debugName: "_bottomView" }] : []));
+    _topView = signal(CalendarViewEnum[CalendarViewEnum.century], ...(ngDevMode ? [{ debugName: "_topView" }] : []));
+    _calendarType = signal('infinite', ...(ngDevMode ? [{ debugName: "_calendarType" }] : []));
+    _animateCalendarNavigation = signal(false, ...(ngDevMode ? [{ debugName: "_animateCalendarNavigation" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _readonly = signal(false, ...(ngDevMode ? [{ debugName: "_readonly" }] : []));
+    _readOnlyInput = signal(false, ...(ngDevMode ? [{ debugName: "_readOnlyInput" }] : []));
+    _min = signal(cloneDate(MIN_DATE), ...(ngDevMode ? [{ debugName: "_min" }] : []));
+    _max = signal(cloneDate(MAX_DATE), ...(ngDevMode ? [{ debugName: "_max" }] : []));
+    _incompleteDateValidation = signal(false, ...(ngDevMode ? [{ debugName: "_incompleteDateValidation" }] : []));
+    _autoCorrectParts = signal(true, ...(ngDevMode ? [{ debugName: "_autoCorrectParts" }] : []));
+    _autoSwitchParts = signal(true, ...(ngDevMode ? [{ debugName: "_autoSwitchParts" }] : []));
+    _autoSwitchKeys = signal([], ...(ngDevMode ? [{ debugName: "_autoSwitchKeys" }] : []));
+    _enableMouseWheel = signal(true, ...(ngDevMode ? [{ debugName: "_enableMouseWheel" }] : []));
+    _allowCaretMode = signal(false, ...(ngDevMode ? [{ debugName: "_allowCaretMode" }] : []));
+    _autoFill = signal(false, ...(ngDevMode ? [{ debugName: "_autoFill" }] : []));
+    _focusedDate = signal(null, ...(ngDevMode ? [{ debugName: "_focusedDate" }] : []));
+    _format = signal(DEFAULT_FORMAT, ...(ngDevMode ? [{ debugName: "_format" }] : []));
+    _twoDigitYearMax = signal(TWO_DIGIT_YEAR_MAX$1, ...(ngDevMode ? [{ debugName: "_twoDigitYearMax" }] : []));
+    _formatPlaceholder = signal(undefined, ...(ngDevMode ? [{ debugName: "_formatPlaceholder" }] : []));
+    _placeholder = signal(undefined, ...(ngDevMode ? [{ debugName: "_placeholder" }] : []));
+    _tabindex = signal(0, ...(ngDevMode ? [{ debugName: "_tabindex" }] : []));
+    _adaptiveTitle = signal('', ...(ngDevMode ? [{ debugName: "_adaptiveTitle" }] : []));
+    _adaptiveSubtitle = signal('', ...(ngDevMode ? [{ debugName: "_adaptiveSubtitle" }] : []));
+    _rangeValidation = signal(true, ...(ngDevMode ? [{ debugName: "_rangeValidation" }] : []));
+    _disabledDatesValidation = signal(true, ...(ngDevMode ? [{ debugName: "_disabledDatesValidation" }] : []));
+    _weekNumber = signal(false, ...(ngDevMode ? [{ debugName: "_weekNumber" }] : []));
+    _adaptiveMode = signal('none', ...(ngDevMode ? [{ debugName: "_adaptiveMode" }] : []));
     constructor(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, disabledDatesService, adaptiveService) {
         super();
         this.zone = zone;
@@ -10630,6 +11214,14 @@ class DatePickerComponent extends MultiTabStop {
         this.setComponentClasses();
         this.windowSize = this.adaptiveService.size;
         this.pickerSubscriptions.add(this.control?.control?.statusChanges?.subscribe(() => this.cdr.markForCheck()));
+        const control = this.control?.control;
+        if (control && control.events) {
+            this.pickerSubscriptions.add(control.events.subscribe(e => {
+                if (e instanceof TouchedChangeEvent) {
+                    this.cdr.markForCheck();
+                }
+            }));
+        }
     }
     /**
      * @hidden
@@ -10677,7 +11269,6 @@ class DatePickerComponent extends MultiTabStop {
     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);
@@ -10699,8 +11290,7 @@ class DatePickerComponent extends MultiTabStop {
      * @hidden
      */
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.cdr.markForCheck();
+        this._disabled.set(isDisabled);
     }
     /**
      * @hidden
@@ -10718,7 +11308,7 @@ class DatePickerComponent extends MultiTabStop {
      * @hidden
      */
     handleActionSheetCollapse() {
-        // If not handled, the actionsheet expanded state does not get updated when overlay is clicked
+        // markForCheck() retained - ActionSheet expanded state does not get updated when overlay is clicked without it
         this.cdr.markForCheck();
     }
     /**
@@ -10751,7 +11341,11 @@ class DatePickerComponent extends MultiTabStop {
             return;
         }
         this.resolvedPromise.then(() => {
-            this.toggleCalendar((show === undefined) ? !this.show : show);
+            const next = (show === undefined) ? !this.show : show;
+            if (next) {
+                this.handleFocus();
+            }
+            this.toggleCalendar(next);
         });
     }
     /**
@@ -10769,7 +11363,6 @@ class DatePickerComponent extends MultiTabStop {
         //due to async IE focus event
         this.handleFocus();
         this.show = !this.show;
-        this.cdr.markForCheck();
     }
     /**
      * @hidden
@@ -10920,10 +11513,10 @@ class DatePickerComponent extends MultiTabStop {
         this.toggleFocus();
     }
     togglePopup(show) {
-        if (show === this._show) {
+        if (show === this._show()) {
             return;
         }
-        this._show = show;
+        this._show.set(show);
         if (show) {
             const direction = this.localization.rtl ? 'right' : 'left';
             const appendToComponent = typeof this.popupSettings.appendTo === 'string' && this.popupSettings.appendTo === 'component';
@@ -10955,7 +11548,7 @@ class DatePickerComponent extends MultiTabStop {
         }
     }
     toggleActionSheet(show) {
-        if (show === this._show) {
+        if (show === this._show()) {
             return;
         }
         if (show && !this.isOpen) {
@@ -10973,7 +11566,7 @@ class DatePickerComponent extends MultiTabStop {
                 this.dateInput.focus();
             }
         }
-        this._show = show;
+        this._show.set(show);
     }
     setAriaActiveDescendant() {
         const focusedCellChangeEvent = this.calendar.type === 'infinite' ?
@@ -11057,6 +11650,7 @@ class DatePickerComponent extends MultiTabStop {
         if (hasObservers(this.onBlur) || (this.show && hasObservers(this.close)) || requiresZoneOnBlur(this.control)) {
             this.zone.run(() => {
                 this.blurComponent();
+                // markForCheck() retained - needed after onControlTouched() in zoneless mode
                 this.cdr.markForCheck();
             });
         }
@@ -11078,6 +11672,7 @@ class DatePickerComponent extends MultiTabStop {
         }
     }
     handleDateCompletenessChange() {
+        // markForCheck() retained - form validation state needs to re-render in zoneless mode
         this.cdr.markForCheck();
         this.zone.run(() => this.onValidatorChange());
     }
@@ -12875,65 +13470,156 @@ class TimePickerMessages extends ComponentMessages {
     /**
      * Specifies the text of the **Accept** button in the popup footer of the TimeList.
      */
-    accept;
+    set accept(value) {
+        this._accept.set(value);
+    }
+    get accept() {
+        return this._accept();
+    }
     /**
      * Specifies the label of the **Accept** button in the popup footer of the TimeList.
      */
-    acceptLabel;
+    set acceptLabel(value) {
+        this._acceptLabel.set(value);
+    }
+    get acceptLabel() {
+        return this._acceptLabel();
+    }
     /**
      * Specifies the text of the **Cancel** button in the popup footer of the TimeList.
      */
-    cancel;
+    set cancel(value) {
+        this._cancel.set(value);
+    }
+    get cancel() {
+        return this._cancel();
+    }
     /**
      * Specifies the label of the **Cancel** button in the popup footer of the TimeList.
      */
-    cancelLabel;
+    set cancelLabel(value) {
+        this._cancelLabel.set(value);
+    }
+    get cancelLabel() {
+        return this._cancelLabel();
+    }
     /**
      * Specifies the text of the **Now** button in the popup header of the TimeList.
      */
-    now;
+    set now(value) {
+        this._now.set(value);
+    }
+    get now() {
+        return this._now();
+    }
     /**
      * Specifies the label of the **Now** button in the popup header of the TimeList.
      */
-    nowLabel;
+    set nowLabel(value) {
+        this._nowLabel.set(value);
+    }
+    get nowLabel() {
+        return this._nowLabel();
+    }
     /**
      * Specifies the title of the **Toggle** button of the TimePicker.
      */
-    toggle;
+    set toggle(value) {
+        this._toggle.set(value);
+    }
+    get toggle() {
+        return this._toggle();
+    }
     /**
      * Specifies the label of the **Hour** part in the TimePicker.
      */
-    hour;
+    set hour(value) {
+        this._hour.set(value);
+    }
+    get hour() {
+        return this._hour();
+    }
     /**
      * Specifies the label of the **Minute** part in the TimePicker.
      */
-    minute;
+    set minute(value) {
+        this._minute.set(value);
+    }
+    get minute() {
+        return this._minute();
+    }
     /**
      * Specifies the label of the **Second** part in the TimePicker.
      */
-    second;
+    set second(value) {
+        this._second.set(value);
+    }
+    get second() {
+        return this._second();
+    }
     /**
      * Specifies the label of the **Millisecond** part in the TimePicker.
      */
-    millisecond;
+    set millisecond(value) {
+        this._millisecond.set(value);
+    }
+    get millisecond() {
+        return this._millisecond();
+    }
     /**
      * Specifies the label of the **Dayperiod** part in the TimePicker.
      */
-    dayperiod;
+    set dayperiod(value) {
+        this._dayperiod.set(value);
+    }
+    get dayperiod() {
+        return this._dayperiod();
+    }
     /**
      * Specifies the title of the **Clear** button of the TimePicker.
      */
-    clearTitle;
+    set clearTitle(value) {
+        this._clearTitle.set(value);
+    }
+    get clearTitle() {
+        return this._clearTitle();
+    }
     /**
-     * Specifies the title of the **Close** button of the ActionSheet that renders instead of the popup when using small screen devices in adaptive mode.
+     * Specifies the accessible label of the TimeSelector.
      */
-    adaptiveCloseButtonTitle;
+    set timeSelectorLabel(value) {
+        this._timeSelectorLabel.set(value);
+    }
+    ;
+    get timeSelectorLabel() {
+        return this._timeSelectorLabel();
+    }
     /**
-     * Specifies the accessible label of the TimeSelector.
+     * Specifies the title of the **Close** button of the ActionSheet that renders instead of the popup when using small screen devices in adaptive mode.
      */
-    timeSelectorLabel;
+    set adaptiveCloseButtonTitle(value) {
+        this._adaptiveCloseButtonTitle.set(value);
+    }
+    get adaptiveCloseButtonTitle() {
+        return this._adaptiveCloseButtonTitle();
+    }
+    _accept = signal(undefined, ...(ngDevMode ? [{ debugName: "_accept" }] : []));
+    _acceptLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_acceptLabel" }] : []));
+    _cancel = signal(undefined, ...(ngDevMode ? [{ debugName: "_cancel" }] : []));
+    _cancelLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_cancelLabel" }] : []));
+    _now = signal(undefined, ...(ngDevMode ? [{ debugName: "_now" }] : []));
+    _nowLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_nowLabel" }] : []));
+    _toggle = signal(undefined, ...(ngDevMode ? [{ debugName: "_toggle" }] : []));
+    _hour = signal(undefined, ...(ngDevMode ? [{ debugName: "_hour" }] : []));
+    _minute = signal(undefined, ...(ngDevMode ? [{ debugName: "_minute" }] : []));
+    _second = signal(undefined, ...(ngDevMode ? [{ debugName: "_second" }] : []));
+    _millisecond = signal(undefined, ...(ngDevMode ? [{ debugName: "_millisecond" }] : []));
+    _dayperiod = signal(undefined, ...(ngDevMode ? [{ debugName: "_dayperiod" }] : []));
+    _clearTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_clearTitle" }] : []));
+    _adaptiveCloseButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_adaptiveCloseButtonTitle" }] : []));
+    _timeSelectorLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_timeSelectorLabel" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TimePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: TimePickerMessages, isStandalone: true, selector: "kendo-timepicker-messages-base", inputs: { accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", now: "now", nowLabel: "nowLabel", toggle: "toggle", hour: "hour", minute: "minute", second: "second", millisecond: "millisecond", dayperiod: "dayperiod", clearTitle: "clearTitle", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", timeSelectorLabel: "timeSelectorLabel" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: TimePickerMessages, isStandalone: true, selector: "kendo-timepicker-messages-base", inputs: { accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", now: "now", nowLabel: "nowLabel", toggle: "toggle", hour: "hour", minute: "minute", second: "second", millisecond: "millisecond", dayperiod: "dayperiod", clearTitle: "clearTitle", timeSelectorLabel: "timeSelectorLabel", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TimePickerMessages, decorators: [{
             type: Directive,
@@ -12966,10 +13652,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                 type: Input
             }], clearTitle: [{
                 type: Input
-            }], adaptiveCloseButtonTitle: [{
-                type: Input
             }], timeSelectorLabel: [{
                 type: Input
+            }], adaptiveCloseButtonTitle: [{
+                type: Input
             }] } });
 
 /**
@@ -13129,7 +13815,7 @@ class TimeSelectorComponent {
     set current(value) {
         this._current = timeInRange(this.snapTime(cloneDate(value || MIDNIGHT_DATE), this.min), this.min, this.max);
         if (!NgZone.isInAngularZone()) {
-            this.cdr.detectChanges();
+            this.cdr.markForCheck();
         }
     }
     get current() {
@@ -13891,7 +14577,12 @@ class TimePickerComponent extends MultiTabStop {
     /**
      * @hidden
      */
-    focusableId;
+    set focusableId(value) {
+        this._focusableId.set(value);
+    }
+    get focusableId() {
+        return this._focusableId();
+    }
     /**
      * Determines whether the TimePicker is disabled
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/disabled-state)).
@@ -13899,14 +14590,24 @@ class TimePickerComponent extends MultiTabStop {
      *
      * @default false
      */
-    disabled = false;
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
     /**
      * Determines the read-only state of the TimePicker
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/readonly-state#read-only-timepicker)).
      *
      * @default false
      */
-    readonly = false;
+    set readonly(value) {
+        this._readonly.set(value);
+    }
+    get readonly() {
+        return this._readonly();
+    }
     /**
      * Sets the read-only state of the TimePicker input field
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/readonly-state#read-only-input)).
@@ -13915,42 +14616,67 @@ class TimePickerComponent extends MultiTabStop {
      * the input will be rendered in a read-only state regardless of the `readOnlyInput` value.
      * @default false
      */
-    readOnlyInput = false;
+    set readOnlyInput(value) {
+        this._readOnlyInput.set(value);
+    }
+    get readOnlyInput() {
+        return this._readOnlyInput();
+    }
     /**
      * If set to `true`, renders a clear button after the input text or TimePicker value has been changed.
      * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
      * @default false
      */
-    clearButton = false;
+    set clearButton(value) {
+        this._clearButton.set(value);
+    }
+    get clearButton() {
+        return this._clearButton();
+    }
     /**
      * Specifies the time format that is used to display the input value
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/formats)).
      * @default 't'
      */
-    format = 't';
+    set format(value) {
+        this._format.set(value);
+    }
+    get format() {
+        return this._format();
+    }
     /**
      * Defines the descriptions of the format sections in the input field.
      * For more information, refer to the article on
      * [placeholders](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/placeholders).
      */
-    formatPlaceholder;
+    set formatPlaceholder(value) {
+        this._formatPlaceholder.set(value);
+    }
+    get formatPlaceholder() {
+        return this._formatPlaceholder();
+    }
     /**
      * Specifies the hint the TimePicker displays when its value is `null`.
      * For more information, refer to the article on
      * [placeholders](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/placeholders).
      * @default null
      */
-    placeholder;
+    set placeholder(value) {
+        this._placeholder.set(value);
+    }
+    get placeholder() {
+        return this._placeholder();
+    }
     /**
      * Specifies the smallest valid time value
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/time-ranges)).
      * @default `00:00:00`
      */
     set min(min) {
-        this._min = cloneDate(min || MIN_TIME);
+        this._min.set(cloneDate(min || MIN_TIME));
     }
     get min() {
-        return this._min;
+        return this._min();
     }
     /**
      * Specifies the biggest valid time value
@@ -13958,45 +14684,75 @@ class TimePickerComponent extends MultiTabStop {
      * @default `23:59:59`
      */
     set max(max) {
-        this._max = cloneDate(max || MAX_TIME);
+        this._max.set(cloneDate(max || MAX_TIME));
     }
     get max() {
-        return this._max;
+        return this._max();
     }
     /**
      * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
      *
      * @default false
      */
-    incompleteDateValidation = false;
+    set incompleteDateValidation(value) {
+        this._incompleteDateValidation.set(value);
+    }
+    get incompleteDateValidation() {
+        return this._incompleteDateValidation();
+    }
     /**
      * Determines whether to automatically move to the next segment after the user completes the current one.
      *
      * @default true
      */
-    autoSwitchParts = true;
+    set autoSwitchParts(value) {
+        this._autoSwitchParts.set(value);
+    }
+    get autoSwitchParts() {
+        return this._autoSwitchParts();
+    }
     /**
      * A string array representing custom keys, which will move the focus to the next date format segment.
      */
-    autoSwitchKeys = [];
+    set autoSwitchKeys(value) {
+        this._autoSwitchKeys.set(value);
+    }
+    get autoSwitchKeys() {
+        return this._autoSwitchKeys();
+    }
     /**
      * Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
      *
      * @default true
      */
-    enableMouseWheel = true;
+    set enableMouseWheel(value) {
+        this._enableMouseWheel.set(value);
+    }
+    get enableMouseWheel() {
+        return this._enableMouseWheel();
+    }
     /**
      * Determines if the users should see a blinking caret inside the Date Input when possible.
      *
      * @default false
      */
-    allowCaretMode = false;
+    set allowCaretMode(value) {
+        this._allowCaretMode.set(value);
+    }
+    get allowCaretMode() {
+        return this._allowCaretMode();
+    }
     /**
      * Determines whether to display the **Cancel** button in the popup.
      *
      * @default true
      */
-    cancelButton = true;
+    set cancelButton(value) {
+        this._cancelButton.set(value);
+    }
+    get cancelButton() {
+        return this._cancelButton();
+    }
     /**
      * Determines whether to display the **Now** button in the popup.
      *
@@ -14004,7 +14760,12 @@ class TimePickerComponent extends MultiTabStop {
      *
      * @default true
      */
-    nowButton = true;
+    set nowButton(value) {
+        this._nowButton.set(value);
+    }
+    get nowButton() {
+        return this._nowButton();
+    }
     /**
      * Configures the incremental steps of the TimePicker.
      * For more information, refer to the article on
@@ -14013,10 +14774,10 @@ class TimePickerComponent extends MultiTabStop {
      * If the incremental step is greater than `1`, the **Now** button will be hidden.
      */
     set steps(steps) {
-        this._steps = steps || {};
+        this._steps.set(steps || {});
     }
     get steps() {
-        return this._steps;
+        return this._steps();
     }
     /**
      * Configures the popup of the TimePicker.
@@ -14026,47 +14787,72 @@ class TimePickerComponent extends MultiTabStop {
      * 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);
+        this._popupSettings.set(Object.assign({}, { animate: true }, settings));
     }
     get popupSettings() {
-        return this._popupSettings;
+        return this._popupSettings();
     }
     /**
      * Sets the tabindex of the TimePicker component.
      * @default 0
      */
-    tabindex = 0;
+    set tabindex(value) {
+        this._tabindex.set(value);
+    }
+    get tabindex() {
+        return this._tabindex();
+    }
     /**
      * @hidden
      */
     set tabIndex(tabIndex) {
-        this.tabindex = tabIndex;
+        this._tabindex.set(tabIndex);
     }
     get tabIndex() {
-        return this.tabindex;
+        return this._tabindex();
     }
     /**
      * Sets the title of the input element of the TimePicker and the title text rendered
      * in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/adaptivemode).
      */
-    adaptiveTitle = '';
+    set adaptiveTitle(value) {
+        this._adaptiveTitle.set(value);
+    }
+    get adaptiveTitle() {
+        return this._adaptiveTitle();
+    }
     /**
      * Sets the subtitle text rendered in the header of the popup(action sheet).
      * Applicable only when [`AdaptiveMode` is set to `auto`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/adaptivemode).
      * By default, subtitle is not rendered.
      */
-    adaptiveSubtitle;
+    set adaptiveSubtitle(value) {
+        this._adaptiveSubtitle.set(value);
+    }
+    get adaptiveSubtitle() {
+        return this._adaptiveSubtitle();
+    }
     /**
      * Determines whether the built-in min or max validators are enforced when a form is being validated.
      *
      * @default true
      */
-    rangeValidation = true;
+    set rangeValidation(value) {
+        this._rangeValidation.set(value);
+    }
+    get rangeValidation() {
+        return this._rangeValidation();
+    }
     /**
      * Determines whether the TimePicker is in adaptive mode.
      * @default 'none'
      */
-    adaptiveMode = 'none';
+    set adaptiveMode(value) {
+        this._adaptiveMode.set(value);
+    }
+    get adaptiveMode() {
+        return this._adaptiveMode();
+    }
     /**
      * Determines whether the TimePicker is in adaptive mode.
      *
@@ -14074,10 +14860,10 @@ class TimePickerComponent extends MultiTabStop {
      */
     set value(value) {
         this.verifyValue(value);
-        this._value = cloneDate(value);
+        this._value.set(cloneDate(value));
     }
     get value() {
-        return this._value;
+        return this._value();
     }
     /**
      * Sets the size of the component. The default value is set by the Kendo theme.
@@ -14089,10 +14875,10 @@ class TimePickerComponent extends MultiTabStop {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
             this.toggleButton && this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('button', size));
         }
-        this._size = size;
+        this._size.set(size);
     }
     get size() {
-        return this._size;
+        return this._size();
     }
     /**
      * Sets the rounded styling of the component. The default value is set by the Kendo theme.
@@ -14103,10 +14889,10 @@ class TimePickerComponent extends MultiTabStop {
         if (rounded) {
             this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
         }
-        this._rounded = rounded;
+        this._rounded.set(rounded);
     }
     get rounded() {
-        return this._rounded;
+        return this._rounded();
     }
     /**
      * Sets the fillMode of the component. The default value is set by the Kendo theme.
@@ -14118,10 +14904,10 @@ class TimePickerComponent extends MultiTabStop {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
             this.toggleButton && this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', fillMode));
         }
-        this._fillMode = fillMode;
+        this._fillMode.set(fillMode);
     }
     get fillMode() {
-        return this._fillMode;
+        return this._fillMode();
     }
     /**
      * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
@@ -14129,7 +14915,12 @@ class TimePickerComponent extends MultiTabStop {
      * @remarks
      * This property is related to accessibility.
      */
-    inputAttributes;
+    set inputAttributes(value) {
+        this._inputAttributes.set(value);
+    }
+    get inputAttributes() {
+        return this._inputAttributes();
+    }
     /**
      * Fires each time the user selects a new value
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/events)).
@@ -14192,20 +14983,20 @@ class TimePickerComponent extends MultiTabStop {
         }
     }
     get show() {
-        return this._show;
+        return this._show();
     }
     set show(show) {
         if (show && (this.disabled || this.readonly)) {
             return;
         }
-        const skipZone = !show && (!this._show || (!hasObservers(this.close) && !hasObservers(this.open)));
+        const skipZone = !show && (!this._show() || (!hasObservers(this.close) && !hasObservers(this.open)));
         if (!skipZone) {
             this.zone.run(() => {
                 const event = new PreventableEvent();
-                if (!this._show && show) {
+                if (!this._show() && show) {
                     this.open.emit(event);
                 }
-                else if (this._show && !show) {
+                else if (this._show() && !show) {
                     this.close.emit(event);
                 }
                 if (event.isDefaultPrevented()) {
@@ -14261,21 +15052,42 @@ class TimePickerComponent extends MultiTabStop {
     resolvedPromise = Promise.resolve(null);
     timeRangeValidateFn = noop$2;
     incompleteValidator = noop$2;
-    _min = cloneDate(MIN_TIME);
-    _max = cloneDate(MAX_TIME);
-    _popupSettings = { animate: true };
-    _show = false;
-    _steps = {};
-    _value = null;
+    _min = signal(cloneDate(MIN_TIME), ...(ngDevMode ? [{ debugName: "_min" }] : []));
+    _max = signal(cloneDate(MAX_TIME), ...(ngDevMode ? [{ debugName: "_max" }] : []));
+    _popupSettings = signal({ animate: true }, ...(ngDevMode ? [{ debugName: "_popupSettings" }] : []));
+    _show = signal(false, ...(ngDevMode ? [{ debugName: "_show" }] : []));
+    _steps = signal({}, ...(ngDevMode ? [{ debugName: "_steps" }] : []));
+    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
     _active = false;
     localizationChangeSubscription;
     pickerSubscriptions;
     windowBlurSubscription;
     control;
     domEvents = [];
-    _size;
-    _rounded;
-    _fillMode;
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _rounded = signal(undefined, ...(ngDevMode ? [{ debugName: "_rounded" }] : []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : []));
+    _focusableId = signal(undefined, ...(ngDevMode ? [{ debugName: "_focusableId" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _readonly = signal(false, ...(ngDevMode ? [{ debugName: "_readonly" }] : []));
+    _readOnlyInput = signal(false, ...(ngDevMode ? [{ debugName: "_readOnlyInput" }] : []));
+    _clearButton = signal(false, ...(ngDevMode ? [{ debugName: "_clearButton" }] : []));
+    _format = signal('t', ...(ngDevMode ? [{ debugName: "_format" }] : []));
+    _formatPlaceholder = signal(undefined, ...(ngDevMode ? [{ debugName: "_formatPlaceholder" }] : []));
+    _placeholder = signal(undefined, ...(ngDevMode ? [{ debugName: "_placeholder" }] : []));
+    _incompleteDateValidation = signal(false, ...(ngDevMode ? [{ debugName: "_incompleteDateValidation" }] : []));
+    _autoSwitchParts = signal(true, ...(ngDevMode ? [{ debugName: "_autoSwitchParts" }] : []));
+    _autoSwitchKeys = signal([], ...(ngDevMode ? [{ debugName: "_autoSwitchKeys" }] : []));
+    _enableMouseWheel = signal(true, ...(ngDevMode ? [{ debugName: "_enableMouseWheel" }] : []));
+    _allowCaretMode = signal(false, ...(ngDevMode ? [{ debugName: "_allowCaretMode" }] : []));
+    _cancelButton = signal(true, ...(ngDevMode ? [{ debugName: "_cancelButton" }] : []));
+    _nowButton = signal(true, ...(ngDevMode ? [{ debugName: "_nowButton" }] : []));
+    _tabindex = signal(0, ...(ngDevMode ? [{ debugName: "_tabindex" }] : []));
+    _adaptiveTitle = signal('', ...(ngDevMode ? [{ debugName: "_adaptiveTitle" }] : []));
+    _adaptiveSubtitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_adaptiveSubtitle" }] : []));
+    _rangeValidation = signal(true, ...(ngDevMode ? [{ debugName: "_rangeValidation" }] : []));
+    _adaptiveMode = signal('none', ...(ngDevMode ? [{ debugName: "_adaptiveMode" }] : []));
+    _inputAttributes = signal(undefined, ...(ngDevMode ? [{ debugName: "_inputAttributes" }] : []));
     constructor(bus, zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, intl, adaptiveService) {
         super();
         this.bus = bus;
@@ -14325,6 +15137,14 @@ class TimePickerComponent extends MultiTabStop {
         this.setComponentClasses();
         this.windowSize = this.adaptiveService.size;
         this.pickerSubscriptions.add(this.control?.control?.statusChanges?.subscribe(() => this.cdr.markForCheck()));
+        const control = this.control?.control;
+        if (control && control.events) {
+            this.pickerSubscriptions.add(control.events.subscribe(e => {
+                if (e instanceof TouchedChangeEvent) {
+                    this.cdr.markForCheck();
+                }
+            }));
+        }
     }
     /**
      * @hidden
@@ -14389,7 +15209,6 @@ class TimePickerComponent extends MultiTabStop {
     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);
@@ -14411,8 +15230,7 @@ class TimePickerComponent extends MultiTabStop {
      * @hidden
      */
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.cdr.markForCheck();
+        this._disabled.set(isDisabled);
     }
     /**
      * @hidden
@@ -14506,7 +15324,7 @@ class TimePickerComponent extends MultiTabStop {
      * @hidden
      */
     handleActionSheetCollapse() {
-        // If not handled, the actionsheet expanded state does not get updated when overlay is clicked
+        // markForCheck() retained - ActionSheet expanded state does not get updated when overlay is clicked without it
         this.cdr.markForCheck();
     }
     /**
@@ -14666,7 +15484,7 @@ class TimePickerComponent extends MultiTabStop {
         this.toggleFocus();
     }
     toggleActionSheet(show) {
-        if (show === this._show) {
+        if (show === this._show()) {
             return;
         }
         if (show && !this.isOpen) {
@@ -14683,14 +15501,13 @@ class TimePickerComponent extends MultiTabStop {
             this.actionSheet.toggle();
             this.dateInput.focus();
         }
-        this._show = show;
+        this._show.set(show);
     }
     togglePopup(show) {
         if (show === this.isOpen) {
             return;
         }
-        this._show = show;
-        this.cdr.markForCheck();
+        this._show.set(show);
         if (show) {
             const direction = this.localization.rtl ? 'right' : 'left';
             const appendToComponent = typeof this.popupSettings.appendTo === 'string' && this.popupSettings.appendTo === 'component';
@@ -14793,6 +15610,7 @@ class TimePickerComponent extends MultiTabStop {
         if (hasObservers(this.onBlur) || (this.show && hasObservers(this.close)) || requiresZoneOnBlur(this.control)) {
             this.zone.run(() => {
                 this.blurComponent();
+                // markForCheck() retained - needed after onControlTouched() in zoneless mode
                 this.cdr.markForCheck();
             });
         }
@@ -14808,6 +15626,7 @@ class TimePickerComponent extends MultiTabStop {
         this.onBlur.emit();
     }
     handleDateCompletenessChange() {
+        // markForCheck() retained - form validation state needs to re-render in zoneless mode
         this.cdr.markForCheck();
         this.zone.run(() => this.onValidatorChange());
     }
@@ -15427,101 +16246,247 @@ class DateTimePickerMessages extends ComponentMessages {
     /**
      * The title of the **Toggle** button of the DateTimePicker.
      */
-    toggle;
+    set toggle(value) {
+        this._toggle.set(value);
+    }
+    get toggle() {
+        return this._toggle();
+    }
     /**
      * The text of the **Date** tab in the popup header of the DateTimePicker.
      */
-    dateTab;
+    set dateTab(value) {
+        this._dateTab.set(value);
+    }
+    get dateTab() {
+        return this._dateTab();
+    }
     /**
      * The label of the **Date** tab in the popup header of the DateTimePicker.
      */
-    dateTabLabel;
+    set dateTabLabel(value) {
+        this._dateTabLabel.set(value);
+    }
+    get dateTabLabel() {
+        return this._dateTabLabel();
+    }
     /**
      * The text of the **Time** tab in the popup header of the DateTimePicker.
      */
-    timeTab;
+    set timeTab(value) {
+        this._timeTab.set(value);
+    }
+    get timeTab() {
+        return this._timeTab();
+    }
     /**
      * The label of the **Time** tab in the popup header of the DateTimePicker.
      */
-    timeTabLabel;
+    set timeTabLabel(value) {
+        this._timeTabLabel.set(value);
+    }
+    get timeTabLabel() {
+        return this._timeTabLabel();
+    }
     /**
      * The text of the **Accept** button in the popup footer of the DateTimePicker.
      */
-    accept;
+    set accept(value) {
+        this._accept.set(value);
+    }
+    get accept() {
+        return this._accept();
+    }
     /**
      * The label of the **Accept** button in the popup footer of the DateTimePicker.
      */
-    acceptLabel;
+    set acceptLabel(value) {
+        this._acceptLabel.set(value);
+    }
+    get acceptLabel() {
+        return this._acceptLabel();
+    }
     /**
      * The text of the **Cancel** button in the popup footer of the DateTimePicker.
      */
-    cancel;
+    set cancel(value) {
+        this._cancel.set(value);
+    }
+    get cancel() {
+        return this._cancel();
+    }
     /**
      * The label of the **Cancel** button in the popup footer of the DateTimePicker.
      */
-    cancelLabel;
+    set cancelLabel(value) {
+        this._cancelLabel.set(value);
+    }
+    get cancelLabel() {
+        return this._cancelLabel();
+    }
     /**
      * The **Today** button text in the header of the Calendar.
      */
-    today;
+    set today(value) {
+        this._today.set(value);
+    }
+    get today() {
+        return this._today();
+    }
     /**
      * The text of the **Now** button in the popup header of the TimePicker.
      */
-    now;
+    set now(value) {
+        this._now.set(value);
+    }
+    get now() {
+        return this._now();
+    }
     /**
      * The label of the **Now** button in the popup header of the TimePicker.
      */
-    nowLabel;
+    set nowLabel(value) {
+        this._nowLabel.set(value);
+    }
+    get nowLabel() {
+        return this._nowLabel();
+    }
     /**
      * The title of the **Prev** button in the header of the Classic Calendar.
      */
-    prevButtonTitle;
+    set prevButtonTitle(value) {
+        this._prevButtonTitle.set(value);
+    }
+    get prevButtonTitle() {
+        return this._prevButtonTitle();
+    }
     /**
      * The title of the **Next** button in the header of the Classic Calendar.
      */
-    nextButtonTitle;
+    set nextButtonTitle(value) {
+        this._nextButtonTitle.set(value);
+    }
+    get nextButtonTitle() {
+        return this._nextButtonTitle();
+    }
     /**
      * The title of the **Parent View** button in the header of the Calendar.
      */
-    parentViewButtonTitle;
+    set parentViewButtonTitle(value) {
+        this._parentViewButtonTitle.set(value);
+    }
+    get parentViewButtonTitle() {
+        return this._parentViewButtonTitle();
+    }
     /**
      * The label of the **Hour** part in the TimePicker.
      */
-    hour;
+    set hour(value) {
+        this._hour.set(value);
+    }
+    get hour() {
+        return this._hour();
+    }
     /**
      * The label of the **Minute** part in the TimePicker.
      */
-    minute;
+    set minute(value) {
+        this._minute.set(value);
+    }
+    get minute() {
+        return this._minute();
+    }
     /**
      * The label of the **Second** part in the TimePicker.
      */
-    second;
+    set second(value) {
+        this._second.set(value);
+    }
+    get second() {
+        return this._second();
+    }
     /**
      * The label of the **Millisecond** part in the TimePicker.
      */
-    millisecond;
+    set millisecond(value) {
+        this._millisecond.set(value);
+    }
+    get millisecond() {
+        return this._millisecond();
+    }
     /**
      * The label of the **Dayperiod** part in the TimePicker.
      */
-    dayperiod;
+    set dayperiod(value) {
+        this._dayperiod.set(value);
+    }
+    get dayperiod() {
+        return this._dayperiod();
+    }
     /**
      * The title of the **Clear** button of the DateTimePicker.
      */
-    clearTitle;
-    /**
-     * 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;
+    set clearTitle(value) {
+        this._clearTitle.set(value);
+    }
+    get clearTitle() {
+        return this._clearTitle();
+    }
     /**
      * The accessible label of the date and time selector container.
      */
-    dateTimeSelectorLabel;
+    set dateTimeSelectorLabel(value) {
+        this._dateTimeSelectorLabel.set(value);
+    }
+    ;
+    get dateTimeSelectorLabel() {
+        return this._dateTimeSelectorLabel();
+    }
     /**
      * The accessible label of the time selector element.
      */
-    timeSelectorLabel;
+    set timeSelectorLabel(value) {
+        this._timeSelectorLabel.set(value);
+    }
+    ;
+    get timeSelectorLabel() {
+        return this._timeSelectorLabel();
+    }
+    /**
+     * The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode.
+     */
+    set adaptiveCloseButtonTitle(value) {
+        this._adaptiveCloseButtonTitle.set(value);
+    }
+    get adaptiveCloseButtonTitle() {
+        return this._adaptiveCloseButtonTitle();
+    }
+    _toggle = signal(undefined, ...(ngDevMode ? [{ debugName: "_toggle" }] : []));
+    _dateTab = signal(undefined, ...(ngDevMode ? [{ debugName: "_dateTab" }] : []));
+    _dateTabLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_dateTabLabel" }] : []));
+    _timeTab = signal(undefined, ...(ngDevMode ? [{ debugName: "_timeTab" }] : []));
+    _timeTabLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_timeTabLabel" }] : []));
+    _accept = signal(undefined, ...(ngDevMode ? [{ debugName: "_accept" }] : []));
+    _acceptLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_acceptLabel" }] : []));
+    _cancel = signal(undefined, ...(ngDevMode ? [{ debugName: "_cancel" }] : []));
+    _cancelLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_cancelLabel" }] : []));
+    _today = signal(undefined, ...(ngDevMode ? [{ debugName: "_today" }] : []));
+    _now = signal(undefined, ...(ngDevMode ? [{ debugName: "_now" }] : []));
+    _nowLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_nowLabel" }] : []));
+    _prevButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_prevButtonTitle" }] : []));
+    _nextButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_nextButtonTitle" }] : []));
+    _parentViewButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_parentViewButtonTitle" }] : []));
+    _hour = signal(undefined, ...(ngDevMode ? [{ debugName: "_hour" }] : []));
+    _minute = signal(undefined, ...(ngDevMode ? [{ debugName: "_minute" }] : []));
+    _second = signal(undefined, ...(ngDevMode ? [{ debugName: "_second" }] : []));
+    _millisecond = signal(undefined, ...(ngDevMode ? [{ debugName: "_millisecond" }] : []));
+    _dayperiod = signal(undefined, ...(ngDevMode ? [{ debugName: "_dayperiod" }] : []));
+    _clearTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_clearTitle" }] : []));
+    _adaptiveCloseButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_adaptiveCloseButtonTitle" }] : []));
+    _dateTimeSelectorLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_dateTimeSelectorLabel" }] : []));
+    _timeSelectorLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_timeSelectorLabel" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DateTimePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: DateTimePickerMessages, isStandalone: true, selector: "kendo-datetimepicker-messages-base", inputs: { toggle: "toggle", dateTab: "dateTab", dateTabLabel: "dateTabLabel", timeTab: "timeTab", timeTabLabel: "timeTabLabel", accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", today: "today", now: "now", nowLabel: "nowLabel", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle", hour: "hour", minute: "minute", second: "second", millisecond: "millisecond", dayperiod: "dayperiod", clearTitle: "clearTitle", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", dateTimeSelectorLabel: "dateTimeSelectorLabel", timeSelectorLabel: "timeSelectorLabel" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: DateTimePickerMessages, isStandalone: true, selector: "kendo-datetimepicker-messages-base", inputs: { toggle: "toggle", dateTab: "dateTab", dateTabLabel: "dateTabLabel", timeTab: "timeTab", timeTabLabel: "timeTabLabel", accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", today: "today", now: "now", nowLabel: "nowLabel", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle", hour: "hour", minute: "minute", second: "second", millisecond: "millisecond", dayperiod: "dayperiod", clearTitle: "clearTitle", dateTimeSelectorLabel: "dateTimeSelectorLabel", timeSelectorLabel: "timeSelectorLabel", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DateTimePickerMessages, decorators: [{
             type: Directive,
@@ -15570,12 +16535,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                 type: Input
             }], clearTitle: [{
                 type: Input
-            }], adaptiveCloseButtonTitle: [{
-                type: Input
             }], dateTimeSelectorLabel: [{
                 type: Input
             }], timeSelectorLabel: [{
                 type: Input
+            }], adaptiveCloseButtonTitle: [{
+                type: Input
             }] } });
 
 /**
@@ -15699,19 +16664,22 @@ class DateTimePickerComponent extends MultiTabStop {
     /**
      * @hidden
      */
-    focusableId;
+    set focusableId(value) { this._focusableId.set(value); }
+    get focusableId() { return this._focusableId(); }
     /**
      * Sets the format of the displayed Calendar week days' names.
      * @default 'short'
      */
-    weekDaysFormat = "short";
+    set weekDaysFormat(value) { this._weekDaysFormat.set(value); }
+    get weekDaysFormat() { return this._weekDaysFormat(); }
     /**
      * Displays the days that fall out of the current month in the Calendar ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/calendar-options#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;
+    set showOtherMonthDays(value) { this._showOtherMonthDays.set(value); }
+    get showOtherMonthDays() { return this._showOtherMonthDays(); }
     /**
      * Sets the value of the DateTimePicker component.
      * You can set a specific date and time for the picker to display and use.
@@ -15720,12 +16688,11 @@ class DateTimePickerComponent extends MultiTabStop {
      */
     set value(value) {
         this.verifyValue(value);
-        this._value = cloneDate(value);
+        this._value.set(cloneDate(value));
         this.setCalendarValue(value);
-        this.cdr.markForCheck();
     }
     get value() {
-        return this._value;
+        return this._value();
     }
     /**
      * Specifies the date format for displaying the input value
@@ -15737,12 +16704,12 @@ class DateTimePickerComponent extends MultiTabStop {
      * If a FormatSettings object is provided, the displayFormat value will be used for the popup TimePicker.
      */
     set format(format) {
-        this._format = format;
+        this._format.set(format);
         const displayFormat = this.getDisplayFormat(format);
         this.timeSelectorFormat = this.getTimeSelectorFormat(displayFormat);
     }
     get format() {
-        return this._format;
+        return this._format();
     }
     /**
      * The maximum year to assume to be from the current century when typing two-digit year value
@@ -15752,7 +16719,8 @@ class DateTimePickerComponent extends MultiTabStop {
      * will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
      * @default 68
      */
-    twoDigitYearMax = TWO_DIGIT_YEAR_MAX;
+    set twoDigitYearMax(value) { this._twoDigitYearMax.set(value); }
+    get twoDigitYearMax() { return this._twoDigitYearMax(); }
     /**
      * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the DateTimePicker.
      *
@@ -15761,21 +16729,21 @@ class DateTimePickerComponent extends MultiTabStop {
     set tabindex(value) {
         const tabindex = Number(value);
         const defaultValue = 0;
-        this._tabindex = !isNaN(tabindex) ? tabindex : defaultValue;
+        this._tabindex.set(!isNaN(tabindex) ? tabindex : defaultValue);
     }
     get tabindex() {
-        return this.disabled ? -1 : this._tabindex;
+        return this.disabled ? -1 : this._tabindex();
     }
     /**
      * Sets the dates of the DateTimePicker that will be disabled
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/disabled-dates)).
      */
     set disabledDates(value) {
-        this._disabledDates = value;
+        this._disabledDates.set(value);
         this.disabledDatesService.initialize(value);
     }
     get disabledDates() {
-        return this._disabledDates;
+        return this._disabledDates();
     }
     /**
      * Configures the popup settings of the DateTimePicker
@@ -15786,30 +16754,33 @@ class DateTimePickerComponent extends MultiTabStop {
      * 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);
+        this._popupSettings.set(Object.assign({}, { animate: true }, settings));
     }
     get popupSettings() {
-        return this._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`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/adaptivemode).
      * @default ''
      */
-    adaptiveTitle = '';
+    set adaptiveTitle(value) { this._adaptiveTitle.set(value); }
+    get adaptiveTitle() { return this._adaptiveTitle(); }
     /**
      * Specifies the subtitle text rendered in the header of the popup (action sheet).
      * Applicable only when [`AdaptiveMode` is set to `auto`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/adaptivemode).
      * @default ''
      */
-    adaptiveSubtitle = '';
+    set adaptiveSubtitle(value) { this._adaptiveSubtitle.set(value); }
+    get adaptiveSubtitle() { return this._adaptiveSubtitle(); }
     /**
      * Specifies the `disabled` property of the DateTimePicker and determines whether the component is active
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/disabled-state)).
      * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/forms#managing-the-datetimepicker-disabled-state-in-reactive-forms).
      * @default false
      */
-    disabled = false;
+    set disabled(value) { this._disabled.set(value); }
+    get disabled() { return this._disabled(); }
     /**
      * Specifies the read-only state of the DateTimePicker
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/readonly-state#read-only-datetimepicker)).
@@ -15817,7 +16788,8 @@ class DateTimePickerComponent extends MultiTabStop {
      *
      * @default false
      */
-    readonly = false;
+    set readonly(value) { this._readonly.set(value); }
+    get readonly() { return this._readonly(); }
     /**
      * Determines whether the input field of the DateTimePicker is read-only
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/readonly-state#read-only-input)).
@@ -15827,39 +16799,46 @@ class DateTimePickerComponent extends MultiTabStop {
      *
      * @default false
      */
-    readOnlyInput = false;
+    set readOnlyInput(value) { this._readOnlyInput.set(value); }
+    get readOnlyInput() { return this._readOnlyInput(); }
     /**
      * Determines whether to display the **Cancel** button in the popup
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/popup-options#toggling-the-cancel-button)).
      * @default true
      */
-    cancelButton = true;
+    set cancelButton(value) { this._cancelButton.set(value); }
+    get cancelButton() { return this._cancelButton(); }
     /**
      * Defines the descriptions of the format sections in the input field
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/placeholders#format-sections-description)).
      */
-    formatPlaceholder;
+    set formatPlaceholder(value) { this._formatPlaceholder.set(value); }
+    get formatPlaceholder() { return this._formatPlaceholder(); }
     /**
      * Specifies the hint which is displayed by the DateTimePicker when its value is `null`
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/placeholders#text-hints)).
      */
-    placeholder;
+    set placeholder(value) { this._placeholder.set(value); }
+    get placeholder() { return this._placeholder(); }
     /**
      * Configures the incremental steps of the DateInput and the popup component of the TimePicker
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/incremental-steps)).
      */
-    steps = {};
+    set steps(value) { this._steps.set(value); }
+    get steps() { return this._steps(); }
     /**
      * Specifies the focused date of the popup Calendar
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/calendar-options#focused-dates)).
      */
-    focusedDate;
+    set focusedDate(value) { this._focusedDate.set(value); }
+    get focusedDate() { return this._focusedDate(); }
     /**
      * Specifies the Calendar type.
      *
      * @default 'infinite'
      */
-    calendarType = 'infinite';
+    set calendarType(value) { this._calendarType.set(value); }
+    get calendarType() { return this._calendarType(); }
     /**
      * Determines whether to enable animation when navigating to previous/next Calendar view.
      * Applies to the [`classic`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/datetimepickercomponent#calendartype) Calendar only.
@@ -15868,13 +16847,15 @@ class DateTimePickerComponent extends MultiTabStop {
      *
      * @default false
      */
-    animateCalendarNavigation = false;
+    set animateCalendarNavigation(value) { this._animateCalendarNavigation.set(value); }
+    get animateCalendarNavigation() { return this._animateCalendarNavigation(); }
     /**
      * Determines whether to display a week number column in the `month` view of the popup Calendar
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/calendar-options#week-number-column)).
      * @default false
      */
-    weekNumber = false;
+    set weekNumber(value) { this._weekNumber.set(value); }
+    get weekNumber() { return this._weekNumber(); }
     /**
      * Specifies the smallest valid date.
      * The Calendar will not display dates before this value.
@@ -15909,70 +16890,82 @@ class DateTimePickerComponent extends MultiTabStop {
      *
      * @default true
      */
-    rangeValidation = true;
+    set rangeValidation(value) { this._rangeValidation.set(value); }
+    get rangeValidation() { return this._rangeValidation(); }
     /**
      * Determines whether the built-in validator for disabled date ranges is enforced when validating a form
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/disabled-dates)).
      * @default true
      */
-    disabledDatesValidation = true;
+    set disabledDatesValidation(value) { this._disabledDatesValidation.set(value); }
+    get disabledDatesValidation() { return this._disabledDatesValidation(); }
     /**
      * Determines whether the built-in validation for incomplete dates is enforced when validating a form.
      * @default false
      */
-    incompleteDateValidation = false;
+    set incompleteDateValidation(value) { this._incompleteDateValidation.set(value); }
+    get incompleteDateValidation() { return this._incompleteDateValidation(); }
     /**
      * Determines whether to auto correct invalid segments automatically.
      *
      * @default true
      */
-    autoCorrectParts = true;
+    set autoCorrectParts(value) { this._autoCorrectParts.set(value); }
+    get autoCorrectParts() { return this._autoCorrectParts(); }
     /**
      * Determines whether to automatically move to the next segment after the user completes the current one.
      *
      * @default true
      */
-    autoSwitchParts = true;
+    set autoSwitchParts(value) { this._autoSwitchParts.set(value); }
+    get autoSwitchParts() { return this._autoSwitchParts(); }
     /**
      * Specifies custom keys that move the focus to the next date format segment.
      */
-    autoSwitchKeys = [];
+    set autoSwitchKeys(value) { this._autoSwitchKeys.set(value); }
+    get autoSwitchKeys() { return this._autoSwitchKeys(); }
     /**
      * Determines whether you can use the mouse scroll to increase or decrease the time segment values.
      *
      * @default true
      */
-    enableMouseWheel = true;
+    set enableMouseWheel(value) { this._enableMouseWheel.set(value); }
+    get enableMouseWheel() { return this._enableMouseWheel(); }
     /**
      * Determines whether you can see a blinking caret inside the DateInput when possible.
      *
      * @default false
      */
-    allowCaretMode = false;
+    set allowCaretMode(value) { this._allowCaretMode.set(value); }
+    get allowCaretMode() { return this._allowCaretMode(); }
     /**
      * 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;
+    set clearButton(value) { this._clearButton.set(value); }
+    get clearButton() { return this._clearButton(); }
     /**
      * Auto fills the rest of the date to the current date when the component loses focus.
      *
      * @default false
      */
-    autoFill = false;
+    set autoFill(value) { this._autoFill.set(value); }
+    get autoFill() { return this._autoFill(); }
     /**
      * Enables or disables the adaptive mode. The adaptive rendering is disabled by default.
      * @default 'none'
      */
-    adaptiveMode = 'none';
+    set adaptiveMode(value) { this._adaptiveMode.set(value); }
+    get adaptiveMode() { return this._adaptiveMode(); }
     /**
      * Specifies the HTML attributes of the inner focusable input element. You cannot change attributes that are essential for certain component functionalities.
      *
      * @remarks
      * This property is related to accessibility.
      */
-    inputAttributes;
+    set inputAttributes(value) { this._inputAttributes.set(value); }
+    get inputAttributes() { return this._inputAttributes(); }
     /**
      * Fires each time the user selects a new value
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/events)).
@@ -16030,11 +17023,11 @@ class DateTimePickerComponent extends MultiTabStop {
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/popup-options#setting-the-default-tab)).
      */
     set defaultTab(tab) {
-        this._defaultTab = tab || DEFAULT_ACTIVE_TAB;
+        this._defaultTab.set(tab || DEFAULT_ACTIVE_TAB);
         this.activeTab = this.defaultTab;
     }
     get defaultTab() {
-        return this._defaultTab;
+        return this._defaultTab();
     }
     /**
      * Specifies the size of the component. The default value is set by the Kendo theme.
@@ -16046,10 +17039,10 @@ class DateTimePickerComponent extends MultiTabStop {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
             this.toggleButton && this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('button', size));
         }
-        this._size = size;
+        this._size.set(size);
     }
     get size() {
-        return this._size;
+        return this._size();
     }
     /**
      * Specifies the border radius of the component. The default value is set by the Kendo theme.
@@ -16060,10 +17053,10 @@ class DateTimePickerComponent extends MultiTabStop {
         if (rounded) {
             this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
         }
-        this._rounded = rounded;
+        this._rounded.set(rounded);
     }
     get rounded() {
-        return this._rounded;
+        return this._rounded();
     }
     /**
      * Specifies the fill mode of the component. The default value is set by the Kendo theme.
@@ -16076,10 +17069,10 @@ class DateTimePickerComponent extends MultiTabStop {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
             this.toggleButton && this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', fillMode));
         }
-        this._fillMode = fillMode;
+        this._fillMode.set(fillMode);
     }
     get fillMode() {
-        return this._fillMode;
+        return this._fillMode();
     }
     /**
      * @hidden
@@ -16237,7 +17230,8 @@ class DateTimePickerComponent extends MultiTabStop {
      * Toggles the visibility of the Calendar footer.
      * @default false
      */
-    footer = false;
+    set footer(value) { this._footer.set(value); }
+    get footer() { return this._footer(); }
     get activeTabComponent() {
         if (!this.isOpen) {
             return;
@@ -16292,6 +17286,9 @@ class DateTimePickerComponent extends MultiTabStop {
             return this.popupRef?.popup.instance.container.nativeElement.querySelector(TIME_TAB_BUTTON_SELECTOR);
         }
     }
+    get activeTabButton() {
+        return this.activeTab === 'date' ? this.dateTabButton : this.timeTabButton;
+    }
     get todayButton() {
         if (this.isAdaptive) {
             return this.actionSheet.element.nativeElement.querySelector(TODAY_BUTTON_SELECTOR);
@@ -16335,16 +17332,46 @@ class DateTimePickerComponent extends MultiTabStop {
         return control.invalid && (control.touched || control.dirty);
     }
     popupRef;
-    _popupSettings = { animate: true };
-    _value = null;
-    _format = DEFAULT_DATEINPUT_FORMAT;
-    _tabindex = 0;
-    _defaultTab = DEFAULT_ACTIVE_TAB;
+    _popupSettings = signal({ animate: true }, ...(ngDevMode ? [{ debugName: "_popupSettings" }] : []));
+    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _format = signal(DEFAULT_DATEINPUT_FORMAT, ...(ngDevMode ? [{ debugName: "_format" }] : []));
+    _tabindex = signal(0, ...(ngDevMode ? [{ debugName: "_tabindex" }] : []));
+    _defaultTab = signal(DEFAULT_ACTIVE_TAB, ...(ngDevMode ? [{ debugName: "_defaultTab" }] : []));
     _min = signal(mergeDateAndTime(MIN_DATE, MIN_TIME), ...(ngDevMode ? [{ debugName: "_min" }] : []));
     _max = signal(mergeDateAndTime(MAX_DATE, MAX_TIME), ...(ngDevMode ? [{ debugName: "_max" }] : []));
-    _disabledDates;
+    _disabledDates = signal(undefined, ...(ngDevMode ? [{ debugName: "_disabledDates" }] : []));
     _isActive = false;
     _activeTab = signal(DEFAULT_ACTIVE_TAB, ...(ngDevMode ? [{ debugName: "_activeTab" }] : []));
+    _focusableId = signal(undefined, ...(ngDevMode ? [{ debugName: "_focusableId" }] : []));
+    _weekDaysFormat = signal('short', ...(ngDevMode ? [{ debugName: "_weekDaysFormat" }] : []));
+    _showOtherMonthDays = signal(undefined, ...(ngDevMode ? [{ debugName: "_showOtherMonthDays" }] : []));
+    _twoDigitYearMax = signal(TWO_DIGIT_YEAR_MAX, ...(ngDevMode ? [{ debugName: "_twoDigitYearMax" }] : []));
+    _readOnlyInput = signal(false, ...(ngDevMode ? [{ debugName: "_readOnlyInput" }] : []));
+    _cancelButton = signal(true, ...(ngDevMode ? [{ debugName: "_cancelButton" }] : []));
+    _formatPlaceholder = signal(undefined, ...(ngDevMode ? [{ debugName: "_formatPlaceholder" }] : []));
+    _placeholder = signal(undefined, ...(ngDevMode ? [{ debugName: "_placeholder" }] : []));
+    _steps = signal({}, ...(ngDevMode ? [{ debugName: "_steps" }] : []));
+    _focusedDate = signal(undefined, ...(ngDevMode ? [{ debugName: "_focusedDate" }] : []));
+    _calendarType = signal('infinite', ...(ngDevMode ? [{ debugName: "_calendarType" }] : []));
+    _animateCalendarNavigation = signal(false, ...(ngDevMode ? [{ debugName: "_animateCalendarNavigation" }] : []));
+    _weekNumber = signal(false, ...(ngDevMode ? [{ debugName: "_weekNumber" }] : []));
+    _rangeValidation = signal(true, ...(ngDevMode ? [{ debugName: "_rangeValidation" }] : []));
+    _disabledDatesValidation = signal(true, ...(ngDevMode ? [{ debugName: "_disabledDatesValidation" }] : []));
+    _incompleteDateValidation = signal(false, ...(ngDevMode ? [{ debugName: "_incompleteDateValidation" }] : []));
+    _autoCorrectParts = signal(true, ...(ngDevMode ? [{ debugName: "_autoCorrectParts" }] : []));
+    _autoSwitchParts = signal(true, ...(ngDevMode ? [{ debugName: "_autoSwitchParts" }] : []));
+    _autoSwitchKeys = signal([], ...(ngDevMode ? [{ debugName: "_autoSwitchKeys" }] : []));
+    _enableMouseWheel = signal(true, ...(ngDevMode ? [{ debugName: "_enableMouseWheel" }] : []));
+    _allowCaretMode = signal(false, ...(ngDevMode ? [{ debugName: "_allowCaretMode" }] : []));
+    _clearButton = signal(false, ...(ngDevMode ? [{ debugName: "_clearButton" }] : []));
+    _autoFill = signal(false, ...(ngDevMode ? [{ debugName: "_autoFill" }] : []));
+    _adaptiveMode = signal('none', ...(ngDevMode ? [{ debugName: "_adaptiveMode" }] : []));
+    _inputAttributes = signal(undefined, ...(ngDevMode ? [{ debugName: "_inputAttributes" }] : []));
+    _adaptiveTitle = signal('', ...(ngDevMode ? [{ debugName: "_adaptiveTitle" }] : []));
+    _adaptiveSubtitle = signal('', ...(ngDevMode ? [{ debugName: "_adaptiveSubtitle" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _footer = signal(false, ...(ngDevMode ? [{ debugName: "_footer" }] : []));
+    _readonly = signal(false, ...(ngDevMode ? [{ debugName: "_readonly" }] : []));
     onControlTouched = noop$2;
     onControlChange = noop$2;
     onValidatorChange = noop$2;
@@ -16354,9 +17381,9 @@ class DateTimePickerComponent extends MultiTabStop {
     incompleteValidator = noop$2;
     subscriptions = new Subscription();
     ariaActiveDescendantSubscription;
-    _size;
-    _rounded;
-    _fillMode;
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _rounded = signal(undefined, ...(ngDevMode ? [{ debugName: "_rounded" }] : []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : []));
     constructor(popupService, intl, cdr, pickerService, ngZone, wrapper, localization, disabledDatesService, renderer, injector, adaptiveService) {
         super();
         this.popupService = popupService;
@@ -16398,6 +17425,14 @@ class DateTimePickerComponent extends MultiTabStop {
         this.setComponentClasses();
         this.windowSize = this.adaptiveService.size;
         this.subscriptions.add(this.formControl?.statusChanges?.subscribe(() => this.cdr.markForCheck()));
+        const control = this.formControl;
+        if (control && control.events) {
+            this.subscriptions.add(control.events.subscribe(e => {
+                if (e instanceof TouchedChangeEvent) {
+                    this.cdr.markForCheck();
+                }
+            }));
+        }
     }
     ngOnChanges(changes) {
         if (isPresent(changes['min']) || isPresent(changes['max'])) {
@@ -16482,7 +17517,6 @@ class DateTimePickerComponent extends MultiTabStop {
     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);
@@ -16505,7 +17539,6 @@ class DateTimePickerComponent extends MultiTabStop {
      */
     setDisabledState(disabled) {
         this.disabled = disabled;
-        this.cdr.markForCheck();
     }
     /**
      * @hidden
@@ -16605,8 +17638,7 @@ class DateTimePickerComponent extends MultiTabStop {
         if (event.key !== Keys.Tab) {
             return;
         }
-        if ((event.shiftKey && event.target === this.dateTabButton) ||
-            (!event.shiftKey && event.target === this.timeTabButton)) {
+        if (event.target === this.dateTabButton || event.target === this.timeTabButton) {
             this.handleTab(event);
         }
     }
@@ -16649,7 +17681,7 @@ class DateTimePickerComponent extends MultiTabStop {
             this.cancelButtonElement.focus();
         }
         else {
-            this.dateTabButton.focus();
+            this.activeTabButton.focus();
         }
     }
     /**
@@ -16761,7 +17793,7 @@ class DateTimePickerComponent extends MultiTabStop {
         switch (event.target) {
             case this.acceptButton:
                 if (!shiftKey) {
-                    this.cancelButton ? this.cancelButtonElement.focus() : this.dateTabButton.focus();
+                    this.cancelButton ? this.cancelButtonElement.focus() : this.activeTabButton.focus();
                 }
                 else {
                     if (this.activeTab === 'date') {
@@ -16774,7 +17806,7 @@ class DateTimePickerComponent extends MultiTabStop {
                 break;
             case this.cancelButtonElement:
                 if (this.calendarValue) {
-                    shiftKey ? this.acceptButton.focus() : this.dateTabButton.focus();
+                    shiftKey ? this.acceptButton.focus() : this.activeTabButton.focus();
                 }
                 else {
                     if (shiftKey) {
@@ -16786,34 +17818,37 @@ class DateTimePickerComponent extends MultiTabStop {
                         }
                     }
                     else {
-                        this.dateTabButton.focus();
+                        this.activeTabButton.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') {
+            case this.timeTabButton:
+                if (shiftKey) {
+                    if (this.cancelButton) {
+                        this.cancelButtonElement.focus();
+                    }
+                    else if (this.calendarValue) {
+                        this.acceptButton.focus();
+                    }
+                    else 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();
+                    if (this.activeTab === 'time') {
+                        this.timeSelector.showNowButton ?
+                            this.timeSelector.now.nativeElement.focus() :
+                            this.timeSelector.timeLists.first.focus();
+                    }
+                    else {
+                        (!this.todayButton || this.todayButton.disabled) ?
+                            this.calendar.monthView.list.nativeElement.focus() :
+                            this.todayButton.focus();
+                    }
                 }
                 break;
             default:
@@ -18550,23 +19585,53 @@ class DateRangePopupMessages extends ComponentMessages {
     /**
      * The text of the **Accept** button in the popup footer of the DateRange Popup.
      */
-    accept;
+    set accept(value) {
+        this._accept.set(value);
+    }
+    get accept() {
+        return this._accept();
+    }
     /**
      * The label of the **Accept** button in the popup footer of the DateRange Popup.
      */
-    acceptLabel;
+    set acceptLabel(value) {
+        this._acceptLabel.set(value);
+    }
+    get acceptLabel() {
+        return this._acceptLabel();
+    }
     /**
      * The text of the **Cancel** button in the popup footer of the DateRange Popup.
      */
-    cancel;
+    set cancel(value) {
+        this._cancel.set(value);
+    }
+    get cancel() {
+        return this._cancel();
+    }
     /**
      * The label of the **Cancel** button in the popup footer of the DateRange Popup.
      */
-    cancelLabel;
+    set cancelLabel(value) {
+        this._cancelLabel.set(value);
+    }
+    get cancelLabel() {
+        return this._cancelLabel();
+    }
     /**
      * 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;
+    set adaptiveCloseButtonTitle(value) {
+        this._adaptiveCloseButtonTitle.set(value);
+    }
+    get adaptiveCloseButtonTitle() {
+        return this._adaptiveCloseButtonTitle();
+    }
+    _accept = signal(undefined, ...(ngDevMode ? [{ debugName: "_accept" }] : []));
+    _acceptLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_acceptLabel" }] : []));
+    _cancel = signal(undefined, ...(ngDevMode ? [{ debugName: "_cancel" }] : []));
+    _cancelLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_cancelLabel" }] : []));
+    _adaptiveCloseButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_adaptiveCloseButtonTitle" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DateRangePopupMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: DateRangePopupMessages, isStandalone: true, selector: "kendo-daterangepopup-messages-base", inputs: { accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle" }, usesInheritance: true, ngImport: i0 });
 }
@@ -18658,18 +19723,21 @@ class DateRangePopupComponent {
      *
      * Determines whether to display the MultiViewCalendar header.
      */
-    showCalendarHeader = true;
+    set showCalendarHeader(value) { this._showCalendarHeader.set(value); }
+    get showCalendarHeader() { return this._showCalendarHeader(); }
     /**
      * Specifies the focused date of the MultiViewCalendar component.
      * Defines which date receives focus when the component loads ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/dates#focused-dates)).
      *
      * If the MultiViewCalendar is out of the min or max range, it normalizes the defined `focusedDate`.
      */
-    focusedDate;
+    set focusedDate(value) { this._focusedDate.set(value); }
+    get focusedDate() { return this._focusedDate(); }
     /**
      * Specifies the dates in the MultiViewCalendar that you want to disable ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/disabled-dates)).
      */
-    disabledDates;
+    set disabledDates(value) { this._disabledDates.set(value); }
+    get disabledDates() { return this._disabledDates(); }
     /**
      * Specifies the initial view that the MultiViewCalendar displays when it loads ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/view-options)).
      * By default, the active view is `month`.
@@ -18678,63 +19746,73 @@ class DateRangePopupComponent {
      *
      * @default 'month
      */
-    activeView = CalendarViewEnum[CalendarViewEnum.month];
+    set activeView(value) { this._activeView.set(value); }
+    get activeView() { return this._activeView(); }
     /**
      * Specifies the lowest view level that users can navigate to ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/view-depth)).
      *
      * @default 'month'
      */
-    bottomView = CalendarViewEnum[CalendarViewEnum.month];
+    set bottomView(value) { this._bottomView.set(value); }
+    get bottomView() { return this._bottomView(); }
     /**
      * Specifies the highest view level that users can navigate to ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/view-depth)).
      *
      * @default 'century'
      */
-    topView = CalendarViewEnum[CalendarViewEnum.century];
+    set topView(value) { this._topView.set(value); }
+    get topView() { return this._topView(); }
     /**
      * Specifies the minimum date that users can select ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/dates#focused-dates)).
      *
      * @default '1900-01-01'
      */
-    min;
+    set min(value) { this._min.set(value); }
+    get min() { return this._min(); }
     /**
      * Specifies the maximum date that users can select ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/dates#focused-dates)).
      *
      * @default '2099-12-31'
      */
-    max;
+    set max(value) { this._max.set(value); }
+    get max() { return this._max(); }
     /**
      * Determines whether users can select dates in reverse order.
      * When you set `allowReverse` to `true`, the component does not validate if the start date comes after the end date.
      *
      * @default false
      */
-    allowReverse = false;
+    set allowReverse(value) { this._allowReverse.set(value); }
+    get allowReverse() { return this._allowReverse(); }
     /**
      * Determines whether to animate transitions when users navigate between views.
      *
      * @default false
      */
-    animateNavigation = false;
+    set animateNavigation(value) { this._animateNavigation.set(value); }
+    get animateNavigation() { return this._animateNavigation(); }
     /**
      * Determines whether the MultiViewCalendar is interactive ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/disabled-state)).
      * When you set `disabled` to `true`, users cannot interact with the component.
      *
      * @default false
      */
-    disabled = false;
+    set disabled(value) { this._disabled.set(value); }
+    get disabled() { return this._disabled(); }
     /**
      * Specifies the number of calendar views to display side by side.
      *
      * @default 2
      */
-    views = 2;
+    set views(value) { this._views.set(value); }
+    get views() { return this._views(); }
     /**
      * Determines whether to display week numbers in the `month` view ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/week-num-column)).
      *
      * @default false
      */
-    weekNumber = false;
+    set weekNumber(value) { this._weekNumber.set(value); }
+    get weekNumber() { return this._weekNumber(); }
     /**
      * Controls the popup animations.
      * When you set `animate` to `true`, the popup displays opening and closing animations.
@@ -18743,40 +19821,46 @@ class DateRangePopupComponent {
      *
      * @default true
      */
-    animate = true;
+    set animate(value) { this._animate.set(value); }
+    get animate() { return this._animate(); }
     /**
      * Specifies the element that serves as an anchor for the popup.
      * The popup opens next to this element.
      * For more information, refer to the section on
      * [aligning to specific components](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#aligning-to-components).
      */
-    anchor;
+    set anchor(value) { this._anchor.set(value); }
+    get anchor() { return this._anchor(); }
     /**
      * Specifies the alignment point for the anchor element.
      * For more information, refer to the section on
      * [positioning](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning).
      */
-    anchorAlign;
+    set anchorAlign(value) { this._anchorAlign.set(value); }
+    get anchorAlign() { return this._anchorAlign(); }
     /**
      * Determines whether to display a header for each view ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/view-header)).
      * For example, displays the month name in the month view.
      *
      * @default false
      */
-    showViewHeader = false;
+    set showViewHeader(value) { this._showViewHeader.set(value); }
+    get showViewHeader() { return this._showViewHeader(); }
     /**
      * Determines whether to display days from adjacent months in the current month view ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/view-options#displaying-other-month-days)).
      *
      * @default false
      */
-    showOtherMonthDays = false;
+    set showOtherMonthDays(value) { this._showOtherMonthDays.set(value); }
+    get showOtherMonthDays() { return this._showOtherMonthDays(); }
     /**
      * Specifies where to render the popup container.
      * By default, the popup renders in the root component.
      *
      * @default 'root'
      */
-    appendTo;
+    set appendTo(value) { this._appendToValue.set(value); }
+    get appendTo() { return this._appendToValue(); }
     /**
      * Configures how the popup behaves when it encounters viewport boundaries.
      * For more information, refer to the article on
@@ -18784,39 +19868,45 @@ class DateRangePopupComponent {
      *
      * @default { horizontal: 'fit', vertical: 'flip' }
      */
-    collision = { horizontal: 'fit', vertical: 'flip' };
+    set collision(value) { this._collision.set(value); }
+    get collision() { return this._collision(); }
     /**
      * Specifies the alignment point for the popup element.
      * For more information, refer to the section on
      * [positioning](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning).
      */
-    popupAlign;
+    set popupAlign(value) { this._popupAlign.set(value); }
+    get popupAlign() { return this._popupAlign(); }
     /**
      * Specifies the margin around the popup in pixels.
      * Creates empty space between the popup and its anchor element.
      */
-    margin;
+    set margin(value) { this._margin.set(value); }
+    get margin() { return this._margin(); }
     /**
      * Determines whether the component uses adaptive rendering for different screen sizes.
      * By default, adaptive rendering is disabled.
      *
      * @default 'none'
      */
-    adaptiveMode = 'none';
+    set adaptiveMode(value) { this._adaptiveMode.set(value); }
+    get adaptiveMode() { return this._adaptiveMode(); }
     /**
      * Specifies the title text for the input element and the header of the action sheet.
      * Applies only when [`AdaptiveMode` is set to `auto`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/adaptivemode).
      *
      * @default ""
      */
-    adaptiveTitle = "";
+    set adaptiveTitle(value) { this._adaptiveTitle.set(value); }
+    get adaptiveTitle() { return this._adaptiveTitle(); }
     /**
      * Specifies the subtitle text displayed in the header of the action sheet.
      * Applies only when [`AdaptiveMode` is set to `auto`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/adaptivemode).
      *
      * @default ""
      */
-    adaptiveSubtitle = "";
+    set adaptiveSubtitle(value) { this._adaptiveSubtitle.set(value); }
+    get adaptiveSubtitle() { return this._adaptiveSubtitle(); }
     /**
      * @hidden
      *
@@ -18824,7 +19914,8 @@ class DateRangePopupComponent {
      * Sets the size of the component.
      * @default undefined
      */
-    size;
+    set size(value) { this._size.set(value); }
+    get size() { return this._size(); }
     /**
      * Fires when the popup is about to open ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/daterange/popup#events)).
      * You can prevent this event to keep the popup closed.
@@ -18897,7 +19988,8 @@ class DateRangePopupComponent {
     /**
      * @hidden
      */
-    windowSize;
+    get windowSize() { return this._windowSize(); }
+    set windowSize(value) { this._windowSize.set(value); }
     /**
      * @hidden
      */
@@ -18906,7 +19998,7 @@ class DateRangePopupComponent {
      * Gets or sets the visibility state of the component.
      */
     set show(show) {
-        if (this._show === show) {
+        if (this._show() === show) {
             return;
         }
         const event = new PreventableEvent();
@@ -18922,7 +20014,7 @@ class DateRangePopupComponent {
         this.toggleDateRange(show);
     }
     get show() {
-        return this._show;
+        return this._show();
     }
     /**
      * @hidden
@@ -18940,7 +20032,34 @@ class DateRangePopupComponent {
     localizationSubscriptions = new Subscription();
     resolvedPromise = Promise.resolve();
     _calendar;
-    _show;
+    _show = signal(undefined, ...(ngDevMode ? [{ debugName: "_show" }] : []));
+    _showCalendarHeader = signal(true, ...(ngDevMode ? [{ debugName: "_showCalendarHeader" }] : []));
+    _focusedDate = signal(undefined, ...(ngDevMode ? [{ debugName: "_focusedDate" }] : []));
+    _disabledDates = signal(undefined, ...(ngDevMode ? [{ debugName: "_disabledDates" }] : []));
+    _activeView = signal(CalendarViewEnum[CalendarViewEnum.month], ...(ngDevMode ? [{ debugName: "_activeView" }] : []));
+    _bottomView = signal(CalendarViewEnum[CalendarViewEnum.month], ...(ngDevMode ? [{ debugName: "_bottomView" }] : []));
+    _topView = signal(CalendarViewEnum[CalendarViewEnum.century], ...(ngDevMode ? [{ debugName: "_topView" }] : []));
+    _min = signal(undefined, ...(ngDevMode ? [{ debugName: "_min" }] : []));
+    _max = signal(undefined, ...(ngDevMode ? [{ debugName: "_max" }] : []));
+    _allowReverse = signal(false, ...(ngDevMode ? [{ debugName: "_allowReverse" }] : []));
+    _animateNavigation = signal(false, ...(ngDevMode ? [{ debugName: "_animateNavigation" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _views = signal(2, ...(ngDevMode ? [{ debugName: "_views" }] : []));
+    _weekNumber = signal(false, ...(ngDevMode ? [{ debugName: "_weekNumber" }] : []));
+    _animate = signal(true, ...(ngDevMode ? [{ debugName: "_animate" }] : []));
+    _anchor = signal(undefined, ...(ngDevMode ? [{ debugName: "_anchor" }] : []));
+    _anchorAlign = signal(undefined, ...(ngDevMode ? [{ debugName: "_anchorAlign" }] : []));
+    _showViewHeader = signal(false, ...(ngDevMode ? [{ debugName: "_showViewHeader" }] : []));
+    _showOtherMonthDays = signal(false, ...(ngDevMode ? [{ debugName: "_showOtherMonthDays" }] : []));
+    _appendToValue = signal(undefined, ...(ngDevMode ? [{ debugName: "_appendToValue" }] : []));
+    _collision = signal({ horizontal: 'fit', vertical: 'flip' }, ...(ngDevMode ? [{ debugName: "_collision" }] : []));
+    _popupAlign = signal(undefined, ...(ngDevMode ? [{ debugName: "_popupAlign" }] : []));
+    _margin = signal(undefined, ...(ngDevMode ? [{ debugName: "_margin" }] : []));
+    _adaptiveMode = signal('none', ...(ngDevMode ? [{ debugName: "_adaptiveMode" }] : []));
+    _adaptiveTitle = signal('', ...(ngDevMode ? [{ debugName: "_adaptiveTitle" }] : []));
+    _adaptiveSubtitle = signal('', ...(ngDevMode ? [{ debugName: "_adaptiveSubtitle" }] : []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _windowSize = signal(undefined, ...(ngDevMode ? [{ debugName: "_windowSize" }] : []));
     constructor(popupService, dateRangeService, zone, renderer, localization, cdr, rtl, adaptiveService) {
         this.popupService = popupService;
         this.dateRangeService = dateRangeService;
@@ -19022,7 +20141,6 @@ class DateRangePopupComponent {
             this.activateSubscription.unsubscribe();
         }
         this.show = true;
-        this.cdr.markForCheck();
         this.zone.runOutsideAngular(() => {
             this.activateSubscription = merge(this.contentCalendar.changes, this.viewCalendar.changes).pipe(filter(changes => changes && changes.first), map(changes => changes.first)).subscribe((calendar) => setTimeout(() => {
                 calendar.focus();
@@ -19173,11 +20291,11 @@ class DateRangePopupComponent {
         return appendTo === 'component' ? this.container : appendTo;
     }
     togglePopup(show) {
-        this._show = show;
+        this._show.set(show);
         if (this.popupRef) {
             this.destroyPopup();
         }
-        if (this._show) {
+        if (this._show()) {
             const direction = this.rtl ? 'right' : 'left';
             this.popupRef = this.popupService.open({
                 anchor: this.anchor,
@@ -19215,7 +20333,7 @@ class DateRangePopupComponent {
         }
     }
     toggleActionSheet(show) {
-        if (show === this._show) {
+        if (show === this._show()) {
             return;
         }
         if (show && !this.actionSheet.expanded) {
@@ -19226,7 +20344,7 @@ class DateRangePopupComponent {
         else if (!show && this.actionSheet.expanded) {
             this.actionSheet.toggle();
         }
-        this._show = show;
+        this._show.set(show);
     }
     addCalendarSubscription = (calendar) => {
         this.calendarSubscriptions.add(calendar.viewList.focusedCellChange.subscribe((id) => {
@@ -19389,11 +20507,13 @@ class DateRangePopupComponent {
             </div>
           </ng-template>
         </kendo-actionsheet>
-        `, isInline: true, dependencies: [{ kind: "directive", type: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }, { kind: "component", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "size", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { 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: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }, { kind: "component", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "size", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { 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: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DateRangePopupComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'kendo-daterange-popup',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     exportAs: 'kendo-daterange-popup',
                     providers: [
                         LocalizationService,
@@ -19402,7 +20522,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                             useValue: 'kendo.daterangepopup'
                         }
                     ],
-                    selector: 'kendo-daterange-popup',
                     template: `
         <ng-container kendoDateRangePopupLocalizedMessages
           i18n-accept="kendo.daterangepopup.accept|The Accept button text in the timepicker component"
@@ -19680,7 +20799,8 @@ class DateRangeComponent {
      *
      * @default undefined
      */
-    size;
+    set size(value) { this._size.set(value); }
+    get size() { return this._size(); }
     /**
     * @hidden
     */
@@ -19699,20 +20819,22 @@ class DateRangeComponent {
     /**
      * @hidden
      */
-    showDefault = false;
+    get showDefault() { return this._showDefault(); }
     contentPopup;
     get hasContentPopup() {
         return this.contentPopup.length > 0;
     }
     subscription;
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _showDefault = signal(false, ...(ngDevMode ? [{ debugName: "_showDefault" }] : []));
     constructor(dateRangeService) {
         this.dateRangeService = dateRangeService;
         validatePackage(packageMetadata);
     }
     ngAfterContentInit() {
-        this.showDefault = !this.hasContentPopup;
+        this._showDefault.set(!this.hasContentPopup);
         this.subscription = this.contentPopup.changes.subscribe(() => {
-            this.showDefault = !this.hasContentPopup;
+            this._showDefault.set(!this.hasContentPopup);
         });
     }
     ngOnDestroy() {
@@ -19728,17 +20850,18 @@ class DateRangeComponent {
         @if (showDefault) {
           <kendo-daterange-popup [size]="size"></kendo-daterange-popup>
         }
-        `, isInline: true, dependencies: [{ kind: "component", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["showCalendarHeader", "focusedDate", "disabledDates", "activeView", "bottomView", "topView", "min", "max", "allowReverse", "animateNavigation", "disabled", "views", "weekNumber", "animate", "anchor", "anchorAlign", "showViewHeader", "showOtherMonthDays", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "size"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["showCalendarHeader", "focusedDate", "disabledDates", "activeView", "bottomView", "topView", "min", "max", "allowReverse", "animateNavigation", "disabled", "views", "weekNumber", "animate", "anchor", "anchorAlign", "showViewHeader", "showOtherMonthDays", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "size"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'kendo-daterange',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         DateRangeService,
                         { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => DateRangeComponent) },
                         provideComponentName('daterange')
                     ],
-                    selector: 'kendo-daterange',
                     template: `
         <ng-content></ng-content>
         @if (showDefault) {