@progress/kendo-angular-dateinputs 19.1.2-develop.3 → 19.1.2-develop.5

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

@@ -36,8 +36,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1750152543,
-    version: '19.1.2-develop.3',
+    publishDate: 1750430884,
+    version: '19.1.2-develop.5',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -59,6 +59,8 @@ var Action;
 })(Action || (Action = {}));
 
 /**
+ * A constant representing an empty selection range with both start and end set to null.
+ *
  * @hidden
  */
 const EMPTY_SELECTIONRANGE = { start: null, end: null };
@@ -2978,30 +2980,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: BusViewService }]; } });
 
 /**
- * Used for rendering the cell content of the Calendar. To define the cell template, nest an `<ng-template>` tag
- * with the `kendoCalendarCellTemplate` directive inside the component tag. The template context is set to the
- * current component. To get a reference to the current date, use the `let-date` directive. To provide more details
- * about the current cell, get a reference to the current `cellContext` by using the `let-cellContext` directive.
+ * A directive for customizing the cells in the Calendar component.
+ *
+ * This directive allows you to define a custom template for rendering the content of calendar cells
+ * in the month view. The template context provides access to the current date and cell context information.
+ *
+ * Template Context Variables:
+ * - `date` - The Date object representing the current cell's date
+ * - `cellContext` - Additional context information about the current cell
  *
  * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
  *
- * > `kendoCalendarCellTemplate` is equivalent to
- * > [`kendoCalendarMonthCellTemplate`]({% slug api_dateinputs_monthcelltemplatedirective %}).
+ * `kendoCalendarCellTemplate` is equivalent to
+ * [`kendoCalendarMonthCellTemplate`]({% slug api_dateinputs_monthcelltemplatedirective %}).
  *
  * @example
- * ```ts
- * _@Component({
- * selector: 'my-app',
- * styles: ['.custom { color: red; }'],
- * template: `
- *  <kendo-calendar>
- *    <ng-template kendoCalendarCellTemplate let-date>
- *      <span class="custom">{{date.getDate()}}</span>
- *    </ng-template>
- *  </kendo-calendar>
- * `
- * })
- * export class AppComponent { }
+ * ```html
+ * <kendo-calendar>
+ *   <ng-template kendoCalendarCellTemplate let-date let-cellContext="cellContext">
+ *     <span class="custom">{{date.getDate()}}</span>
+ *   </ng-template>
+ * </kendo-calendar>
  * ```
  */
 class CellTemplateDirective {
@@ -3021,27 +3020,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /**
- * Used for rendering the month cell content of the Calendar. To define the month cell template, nest an `<ng-template>` tag
- * with the `kendoCalendarMonthCellTemplate` directive inside the component tag. The template context is set to the current
- * component. To get a reference to the current date, use the `let-date` directive. To provide more details about the current
- * month cell, get a reference to the current `cellContext` by using the `let-cellContext` directive.
+ * A directive for customizing the month cells in the Calendar component.
+ *
+ * This directive allows you to define a custom template for rendering the content of month cells
+ * when the Calendar is in year view. The template context provides access to the current date
+ * and cell context information.
+ *
+ * Template Context Variables:
+ * - `date` - The Date object representing the current cell's date
+ * - `cellContext` - Additional context information about the current month cell
  *
  * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
  *
  * @example
- * ```ts
- * _@Component({
- * selector: 'my-app',
- * styles: ['.custom { color: red; }'],
- * template: `
- *  <kendo-calendar>
- *    <ng-template kendoCalendarMonthCellTemplate let-context="cellContext">
- *      <span class="custom">{{context.formattedValue}}</span>
- *    </ng-template>
- *  </kendo-calendar>
- * `
- * })
- * export class AppComponent { }
+ * ```html
+ * <kendo-calendar [activeView]="'year'">
+ *   <ng-template kendoCalendarMonthCellTemplate let-context="cellContext">
+ *     <span class="custom">{{context.formattedValue}}</span>
+ *   </ng-template>
+ * </kendo-calendar>
  * ```
  */
 class MonthCellTemplateDirective {
@@ -3061,30 +3058,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /**
- * Used for rendering the year cell content of the Calendar. To define the year cell template, nest an
- * `<ng-template>` tag with the `kendoCalendarYearCellTemplate` directive inside the component tag.
- * The template context is set to the current component. To get a reference to the current date, use
- * the `let-date` directive. To provide more details about the current year cell, get a reference to the
- * current `cellContext` by using the `let-cellContext` directive.
+ * A directive for customizing the year cells in the Calendar component.
+ *
+ * This directive allows you to define a custom template for rendering the content of year cells
+ * when the Calendar is in year view. The template context provides access to the current date
+ * and cell context information.
+ *
+ * Template Context Variables:
+ * - `date` - The Date object representing the current cell's date
+ * - `cellContext` - Additional context information about the current year cell
  *
  * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
  *
  * @example
- * ```ts
- * _@Component({
- * selector: 'my-app',
- * styles: ['.custom { color: red; }'],
- * template: `
- *  <kendo-calendar [activeView]="activeView">
- *    <ng-template kendoCalendarYearCellTemplate let-context="cellContext">
- *      <span class="custom">{{context.formattedValue}}</span>
- *    </ng-template>
- *  </kendo-calendar>
- * `
- * })
- * export class AppComponent {
- *  public activeView: CalendarView = 'year';
- * }
+ * ```html
+ * <kendo-calendar [activeView]="'year'">
+ *   <ng-template kendoCalendarYearCellTemplate let-context="cellContext">
+ *     <span class="custom">{{context.formattedValue}}</span>
+ *   </ng-template>
+ * </kendo-calendar>
  * ```
  */
 class YearCellTemplateDirective {
@@ -3104,29 +3096,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /**
- * Used for rendering the decade cell content of the Calendar. To define the decade cell template, nest an `<ng-template>`
- * tag with the `kendoCalendarDecadeCellTemplate` directive inside the component tag. The template context is set to the
- * current component. To get a reference to the current date, use the `let-date` directive. To provide more details about
- * the current decade cell, get a reference to the current `cellContext` by using the `let-cellContext` directive.
+ * A directive for customizing the decade cells in the Calendar component.
+ *
+ * This directive allows you to define a custom template for rendering the content of decade cells
+ * when the Calendar is in decade view. The template context provides access to the current date
+ * and cell context information.
+ *
+ * Template Context Variables:
+ * - `date` - The Date object representing the current cell's date
+ * - `cellContext` - Additional context information about the current decade cell
  *
  * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
  *
  * @example
- * ```ts
- * _@Component({
- * selector: 'my-app',
- * styles: ['.custom { color: red; }'],
- * template: `
- *  <kendo-calendar [activeView]="activeView">
- *    <ng-template kendoCalendarDecadeCellTemplate let-context="cellContext">
- *      <span class="custom">{{context.formattedValue}}</span>
- *    </ng-template>
- *  </kendo-calendar>
- * `
- * })
- * export class AppComponent {
- *  public activeView: CalendarView = 'decade';
- * }
+ * ```html
+ * <kendo-calendar [activeView]="activeView">
+ *   <ng-template kendoCalendarDecadeCellTemplate let-context="cellContext">
+ *     <span class="custom">{{context.formattedValue}}</span>
+ *   </ng-template>
+ * </kendo-calendar>
  * ```
  */
 class DecadeCellTemplateDirective {
@@ -3146,29 +3134,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /**
- * Used for rendering the century cell content of the Calendar. To define the century cell template, nest an `<ng-template>`
- * tag with the `kendoCalendarCenturyCellTemplate` directive inside the component tag. The template context is set to the
- * current component. To get a reference to the current date, use the `let-date` directive. To provide more details about
- * the current century cell, get a reference to the current `cellContext` by using the `let-cellContext` directive.
+ * A directive for customizing the century cells in the Calendar component.
+ *
+ * This directive allows you to define a custom template for rendering the content of century cells
+ * when the Calendar is in century view. The template context provides access to the current date
+ * and cell context information.
+ *
+ * Template Context Variables:
+ * - `date` - The Date object representing the current cell's date
+ * - `cellContext` - Additional context information about the current century cell
  *
  * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
  *
  * @example
- * ```ts
- * _@Component({
- * selector: 'my-app',
- * styles: ['.custom { color: red; }'],
- * template: `
- *  <kendo-calendar [activeView]="activeView">
- *    <ng-template kendoCalendarCenturyCellTemplate let-context="cellContext">
- *      <span class="custom">{{context.formattedValue}}</span>
- *    </ng-template>
- *  </kendo-calendar>
- * `
- * })
- * export class AppComponent {
- *  public activeView: CalendarView = 'century';
- * }
+ * ```html
+ * <kendo-calendar [activeView]="activeView">
+ *   <ng-template kendoCalendarCenturyCellTemplate let-context="cellContext">
+ *     <span class="custom">{{context.formattedValue}}</span>
+ *   </ng-template>
+ * </kendo-calendar>
  * ```
  */
 class CenturyCellTemplateDirective {
@@ -3188,27 +3172,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /**
- * Used for rendering the week number cell content in the month view of the Calendar. To define the month week number cell template,
- * nest an `<ng-template>` tag with the `kendoCalendarWeekNumberCellTemplate` directive inside the component tag. The template
- * context is set to the current component. To get a reference to the current date, use the `let-date` directive. To provide more
- * details about the current week number cell, get a reference to the current `cellContext` by using the `let-cellContext` directive.
+ * A directive for customizing the week number cells in the Calendar component.
+ *
+ * This directive allows you to define a custom template for rendering the content of week number cells
+ * in the month view when the weekNumber property is enabled. The template context provides access to
+ * the current date and cell context information.
+ *
+ * Template Context Variables:
+ * - `date` - The Date object representing the current week's date
+ * - `cellContext` - Additional context information about the current week number cell
  *
  * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
  *
  * @example
- * ```ts
- * _@Component({
- * selector: 'my-app',
- * styles: ['.custom { color: red; }'],
- * template: `
- *  <kendo-calendar [weekNumber]="true">
- *    <ng-template kendoCalendarWeekNumberCellTemplate let-context="cellContext">
- *      <span class="custom">{{context.formattedValue}}</span>
- *    </ng-template>
- *  </kendo-calendar>
- * `
- * })
- * export class AppComponent { }
+ * ```html
+ * <kendo-calendar [weekNumber]="true">
+ *   <ng-template kendoCalendarWeekNumberCellTemplate let-context="cellContext">
+ *     <span class="custom">W{{context.formattedValue}}</span>
+ *   </ng-template>
+ * </kendo-calendar>
  * ```
  */
 class WeekNumberCellTemplateDirective {
@@ -3228,28 +3210,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /**
- * Used for rendering the header title of the Calendar. To define the header title template, nest an `<ng-template>` tag
- * with the `kendoCalendarHeaderTitleTemplate` directive inside the component tag. The template context is set to the
- * current component. To get a reference to the current title, use the `let-title` directive. To provide more details about
- * the current title, get a reference to the current `date` by using the `let-date` directive or get a reference to the
- * current active view  by using the `let-activeView` directive.
+ * A directive for customizing the header title in the Calendar component.
+ *
+ * This directive allows you to define a custom template for rendering the header title content.
+ * The template context provides access to the title text, current date, and active view.
+ *
+ * Template Context Variables:
+ * - `title` - The formatted title text for the header
+ * - `date` - The Date object representing the current header context
+ * - `activeView` - The current active view of the Calendar
  *
  * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
  *
  * @example
- * ```ts
- * _@Component({
- * selector: 'my-app',
- * styles: ['.custom { color: red; }'],
- * template: `
- *  <kendo-calendar>
- *    <ng-template kendoCalendarHeaderTitleTemplate let-title>
- *      <span class="custom">{{title}}</span>
- *    </ng-template>
- *  </kendo-calendar>
- * `
- * })
- * export class AppComponent { }
+ * ```html
+ * <kendo-calendar>
+ *   <ng-template kendoCalendarHeaderTitleTemplate let-title let-activeView="activeView">
+ *     <span class="custom">{{title}} ({{activeView}})</span>
+ *   </ng-template>
+ * </kendo-calendar>
  * ```
  */
 class HeaderTitleTemplateDirective {
@@ -3269,6 +3248,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /**
+ * Handles range selection logic for Calendar components.
+ *
+ * This function manages the selection state when the Calendar is in range selection mode,
+ * determining which end of the range is active and updating the selection range accordingly.
+ *
+ * @param date - The date being selected
+ * @param selectionRange - The current selection range object
+ * @param activeRangeEnd - Which end of the range is currently active ('start' or 'end')
+ * @param allowReverse - Whether to allow reverse selection (end date before start date)
+ * @returns An object containing the updated activeRangeEnd and selectionRange
+ *
  * @hidden
  */
 function handleRangeSelection(date, selectionRange, activeRangeEnd, allowReverse = false) {
@@ -3411,28 +3401,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: BusViewService }]; } });
 
 /**
- * Used for rendering the header of the Calendar. To define the header template, nest an `<ng-template>` tag
- * with the `kendoCalendarHeaderTemplate` directive inside the component tag. The template context is set to the
- * current component. To get a reference to the current title, use the `let-title` directive. To provide more details about
- * the current title, get a reference to the current `date` by using the `let-date` directive or get a reference to the
- * current active view  by using the `let-activeView` directive.
+ * A directive for customizing the entire header in the Calendar component.
+ *
+ * This directive allows you to define a custom template for rendering the complete header content,
+ * including navigation controls and title. The template context provides access to the title text,
+ * current date, and active view.
+ *
+ * Template Context Variables:
+ * - `title` - The formatted title text for the header
+ * - `date` - The Date object representing the current header context
+ * - `activeView` - The current active view of the Calendar
  *
  * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
  *
  * @example
- * ```ts
- * _@Component({
- * selector: 'my-app',
- * styles: ['.custom { color: red; }'],
- * template: `
- *  <kendo-calendar>
- *    <ng-template kendoCalendarHeaderTemplate let-title>
- *      <span class="custom">{{title}}</span>
- *    </ng-template>
- *  </kendo-calendar>
- * `
- * })
- * export class AppComponent { }
+ * ```html
+ * <kendo-calendar>
+ *   <ng-template kendoCalendarHeaderTemplate let-title let-date="date">
+ *     <div class="custom">
+ *       <span>{{title}}</span>
+ *       <small>{{date | date:'yyyy-MM-dd'}}</small>
+ *     </div>
+ *   </ng-template>
+ * </kendo-calendar>
  * ```
  */
 class HeaderTemplateDirective {
@@ -3452,27 +3443,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /**
- * Used for rendering the footer of the Calendar. To define the footer template, nest an `<ng-template>` tag
- * with the `kendoCalendarFooterTemplate` directive inside the component tag. The template context is set to the
- * current component. To get a reference to the current `date` use the `let-date` directive. To get a reference to the
- * current active view use the `let-activeView` directive.
+ * A directive for customizing the footer in the Calendar component.
+ *
+ * This directive allows you to define a custom template for rendering the footer content.
+ * The template context provides access to the current date and active view.
+ *
+ * Template Context Variables:
+ * - `date` - The Date object representing the current calendar context
+ * - `activeView` - The current active view of the Calendar
  *
  * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
  *
  * @example
- * ```ts
- * _@Component({
- * selector: 'my-app',
- * styles: ['.custom { color: red; }'],
- * template: `
- *  <kendo-calendar>
- *    <ng-template kendoCalendarFooterTemplate let-date>
- *      <span class="custom">{{date}}</span>
- *    </ng-template>
- *  </kendo-calendar>
- * `
- * })
- * export class AppComponent { }
+ * ```html
+ * <kendo-calendar>
+ *   <ng-template kendoCalendarFooterTemplate let-date let-activeView="activeView">
+ *     <div class="custom">
+ *       Today: {{date | date:'short'}} ({{activeView}} view)
+ *     </div>
+ *   </ng-template>
+ * </kendo-calendar>
  * ```
  */
 class FooterTemplateDirective {
@@ -3649,17 +3639,13 @@ const RANGE_CALENDAR_RANGE_VALIDATORS = {
 };
 /**
  * Represents the Kendo UI MultiViewCalendar component for Angular.
- *
  * @example
- * ```ts
- * _@Component({
- * selector: 'my-app',
- * template: `
- *  <kendo-multiviewcalendar></kendo-multiviewcalendar>
- * `
- * })
- * export class AppComponent { }
+ * ```html
+ * <kendo-multiviewcalendar> </kendo-multiviewcalendar>
  * ```
+ *
+ * @remarks
+ * Supported children components are: {@link MultiViewCalendarCustomMessagesComponent}.
  */
 class MultiViewCalendarComponent {
     bus;
@@ -3671,7 +3657,8 @@ class MultiViewCalendarComponent {
     disabledDatesService;
     selectionService;
     /**
-     * Displays the days that fall out of the current month ([see example]({% slug viewoptions_multiviewcalendar %}#toc-displaying-other-month-days)).
+     * Shows days that fall outside the current month ([see example]({% slug viewoptions_multiviewcalendar %}#toc-displaying-other-month-days)).
+     *
      * @default true
      */
     showOtherMonthDays = true;
@@ -3711,11 +3698,10 @@ class MultiViewCalendarComponent {
      */
     id;
     /**
-     * Sets or gets the `focusedDate` property of the Calendar and
-     * defines the focused date of the component
+     * Specifies the focused date of the Calendar
      * ([see example]({% slug dates_multiviewcalendar %}#toc-focused-dates)).
      *
-     * > If the Calendar is out of the min or max range, it normalizes the defined `focusedDate`.
+     * If the Calendar is outside the `min` or `max` range, the component normalizes the defined `focusedDate`.
      */
     set focusedDate(focusedDate) {
         this._focusedDate = focusedDate || getToday();
@@ -3725,6 +3711,7 @@ class MultiViewCalendarComponent {
     }
     /**
      * Toggles the visibility of the footer.
+     *
      * @default false
      */
     footer = false;
@@ -3747,9 +3734,9 @@ class MultiViewCalendarComponent {
         return this.views === 1 ? this.id + 'header-' : null;
     }
     /**
-     * Sets or gets the `min` property of the Calendar and
-     * defines the minimum allowed date value.
-     * By default, the `min` value is `1900-1-1`.
+     * Specifies the minimum allowed date value
+     *
+     * @default 1970-01-01
      */
     set min(min) {
         this._min = min || new Date(MIN_DATE);
@@ -3758,9 +3745,9 @@ class MultiViewCalendarComponent {
         return this._min;
     }
     /**
-     * Sets or gets the `max` property of the Calendar and
-     * defines the maximum allowed date value.
-     * By default, the `max` value is `2099-12-31`.
+     * Specifies the maximum allowed date value
+     *
+     * @default 2099-12-31
      */
     set max(max) {
         this._max = max || new Date(MAX_DATE);
@@ -3769,7 +3756,7 @@ class MultiViewCalendarComponent {
         return this._max;
     }
     /**
-     * Determines whether the built-in min or max validators are enforced when validating a form.
+     * Determines whether the built-in `min` or `max` validators are enforced when validating a form.
      *
      * @default false
      */
@@ -3778,16 +3765,14 @@ class MultiViewCalendarComponent {
      * Determines whether the built-in validator for disabled
      * date ranges is enforced when validating a form
      * ([see example](slug:disabled_dates_multiviewcalendar)).
+     *
+     * @default false
      */
     disabledDatesRangeValidation = false;
     /**
      * Sets the Calendar selection mode
      * ([see example]({% slug selection_multiviewcalendar %})).
-     *
-     * The available values are:
-     * * `single` (default)
-     * * `multiple`
-     * * `range`
+     * @default 'single'
      */
     set selection(_selection) {
         this.selectionSetter = true;
@@ -3819,16 +3804,19 @@ class MultiViewCalendarComponent {
         return this._value;
     }
     /**
-     * Sets or gets the `disabled` property of the Calendar and
-     * determines whether the component is active
+     * Specifies whether the component is disabled
      * ([see example]({% slug disabled_multiviewcalendar %})).
      * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_multiviewcalendar#toc-managing-the-multiviewcalendar-disabled-state-in-reactive-forms).
+     *
+     * @default false
      */
     disabled = false;
     /**
-     * Sets or gets the `tabindex` property of the Calendar. Based on the
+     * 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,
      * it determines whether the component is focusable.
+     *
+     * @default 0
      */
     tabindex = 0;
     /**
@@ -3841,7 +3829,8 @@ class MultiViewCalendarComponent {
         return this.tabindex;
     }
     /**
-     * Sets the format of the displayed Calendar week days' names.
+     * Specifies the format of the displayed week day names.
+     *
      * @default 'short'
      */
     weekDaysFormat = "short";
@@ -3850,31 +3839,37 @@ class MultiViewCalendarComponent {
      */
     isActive = false;
     /**
-     * Sets the dates of the MultiViewCalendar that will be disabled
+     * Specifies the dates of the MultiViewCalendar that will be disabled
      * ([see example]({% slug disabled_dates_multiviewcalendar %})).
      */
     set disabledDates(value) {
         this.disabledDatesService.initialize(value);
     }
     /**
-     * Defines the active view that the Calendar initially renders
-     * ([see example]({% slug viewoptions_multiviewcalendar %})).
+     * Specifies the active view that the Calendar initially renders.
      * By default, the active view is `month`.
      *
      * > You have to set `activeView` within the `topView`-`bottomView` range.
+     *
+     * @default month
      */
     activeView = CalendarViewEnum[CalendarViewEnum.month];
     /**
-     * Defines the bottommost view, to which the user can navigate
-     * ([see example](slug:viewdepth_multiviewcalendar)).
+     * Specifies the bottommost view to which you can navigate.
+     *
+     * @default month
      */
     bottomView = CalendarViewEnum[CalendarViewEnum.month];
     /**
-     * Defines the topmost view, to which the user can navigate.
+     * Specifies the topmost view to which you can navigate.
+     *
+     * @default century
      */
     topView = CalendarViewEnum[CalendarViewEnum.century];
     /**
-     * Determines whether to display a header for every view (for example the month name).
+     * Determines whether to display a header for every view (for example, the month name).
+     *
+     * @default false
      */
     showViewHeader = false;
     /**
@@ -3886,12 +3881,14 @@ class MultiViewCalendarComponent {
      */
     animateNavigation = false;
     /**
-     * Determines whether to display a week number column in the `month` view
+     * Specifies whether to display a week number column in the `month` view
      * ([see example]({% slug weeknumcolumn_multiviewcalendar %})).
+     *
+     * @default false
      */
     weekNumber = false;
     /**
-     * Specify, which end of the defined selection range should be marked as active.
+     * 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'.
@@ -3903,7 +3900,7 @@ class MultiViewCalendarComponent {
         return (this.selection === 'range' && !this._activeRangeEnd) ? 'start' : this._activeRangeEnd;
     }
     /**
-     * Sets or gets the `selectionRange` property of the Calendar and
+     * Specifies the `selectionRange` property and
      * defines the selection range of the component
      * ([see example](slug:selection_multiviewcalendar#toc-range-selection)).
      * > We recommend using the `value` property as it now supports `range` selection.
@@ -3918,8 +3915,10 @@ class MultiViewCalendarComponent {
         return this._selectionRange;
     }
     /**
-     * Sets or gets the `views` property of the Calendar and
+     * Specifies the `views` property and
      * defines the number of rendered months.
+     *
+     * @default 2
      */
     views = 2;
     /**
@@ -6554,28 +6553,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: CalendarDOMService }, { type: i0.NgZone }]; } });
 
 /**
- * Used for rendering the navigation item of the Calendar. To define the navigation item template, nest an `<ng-template>`
- * tag with the `kendoCalendarNavigationItemTemplate` directive inside the component tag. The template context is set to the
- * current component. To get a reference to the current item value, use the `let-title` directive. To provide more details
- * about the current title, get a reference to the current `date` by using the `let-date='date'` directive or get a reference
- * to the current active view by using the `let-activeView='activeView'` directive.
+ * A directive for customizing the navigation items in the Calendar component.
+ *
+ * This directive allows you to define a custom template for rendering the content of navigation items
+ * in the Calendar header. The template context provides access to the title, current date, and active view.
+ *
+ * Template Context Variables:
+ * - `title` - The formatted title text for the navigation item
+ * - `date` - The Date object representing the current navigation context
+ * - `activeView` - The current active view of the Calendar
  *
  * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
  *
  * @example
- * ```ts
- * _@Component({
- * selector: 'my-app',
- * styles: ['.custom { color: red; }'],
- * template: `
- *  <kendo-calendar>
- *    <ng-template kendoCalendarNavigationItemTemplate let-title>
- *      <span class="custom">{{title}}</span>
- *    </ng-template>
- *  </kendo-calendar>
- * `
- * })
- * export class AppComponent { }
+ * ```html
+ * <kendo-calendar>
+ *   <ng-template kendoCalendarNavigationItemTemplate let-title let-date="date">
+ *     <span class="custom">{{title}} - {{date | date:'yyyy'}}</span>
+ *   </ng-template>
+ * </kendo-calendar>
  * ```
  */
 class NavigationItemTemplateDirective {
@@ -6608,7 +6604,15 @@ class PickerService {
 }
 
 /**
- * Custom component messages override default component messages ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
+ * A component that allows customization of MultiView Calendar localization messages.
+ *
+ * @example
+ * ```html
+ * <kendo-multiviewcalendar-messages prevButtonTitle="Previous">
+ * </kendo-multiviewcalendar-messages>
+ * ```
+ *
+ * For more information, see the [globalization documentation]({% slug globalization_dateinputs %}#toc-custom-messages).
  */
 class MultiViewCalendarCustomMessagesComponent extends Messages {
     service;
@@ -6743,17 +6747,13 @@ const KENDO_INPUT_PROVIDER = {
 };
 /**
  * Represents the [Kendo UI Calendar component for Angular](slug:overview_calendar).
- *
  * @example
- * ```ts
- * _@Component({
- * selector: 'my-app',
- * template: `
- *  <kendo-calendar></kendo-calendar>
- * `
- * })
- * export class AppComponent { }
+ * ```html
+ * <kendo-calendar></kendo-calendar>
  * ```
+ *
+ * @remarks
+ * Supported children components are: {@link CalendarCustomMessagesComponent}.
  */
 class CalendarComponent {
     bus;
@@ -6770,10 +6770,7 @@ class CalendarComponent {
     selectionService;
     pickerService;
     /**
-     * Displays the days that fall out of the current month ([see example]({% slug viewoptions_calendar %}#toc-displaying-other-month-days)).
-     * The default values per Calendar type are:
-     * - `infinite` - false
-     * - `classic` - true
+     * 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]({% slug viewoptions_calendar %}#toc-displaying-other-month-days)).
      */
     set showOtherMonthDays(_showOtherMonthDays) {
         this._showOtherMonthDays = _showOtherMonthDays;
@@ -6796,11 +6793,10 @@ class CalendarComponent {
         return `kendo-popup-${this.bus.calendarId}`;
     }
     /**
-     * Sets or gets the `focusedDate` property of the Calendar and
-     * defines the focused date of the component
+     * Specifies the focused date of the Calendar
      * ([see example]({% slug dates_calendar %}#toc-focused-dates)).
      *
-     * > If the Calendar is out of the min or max range, it normalizes the defined `focusedDate`.
+     * 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)) {
@@ -6830,10 +6826,10 @@ class CalendarComponent {
         return this.id + '-header';
     }
     /**
-     * Sets or gets the `min` property of the Calendar and
-     * defines the minimum allowed date value
+     * Specifies the minimum allowed date value
      * ([see example]({% slug dateranges_calendar %})).
-     * By default, the `min` value is `1900-1-1`.
+     *
+     * @default 1900-1-1
      */
     set min(min) {
         this._min = min || new Date(MIN_DATE);
@@ -6842,10 +6838,10 @@ class CalendarComponent {
         return this._min;
     }
     /**
-     * Sets or gets the `max` property of the Calendar and
-     * defines the maximum allowed date value
+     * Specifies the maximum allowed date value
      * ([see example]({% slug dateranges_calendar %})).
-     * By default, the `max` value is `2099-12-31`.
+     *
+     * @default 2099-12-31
      */
     set max(max) {
         this._max = max || new Date(MAX_DATE);
@@ -6854,29 +6850,27 @@ class CalendarComponent {
         return this._max;
     }
     /**
-     * Determines whether the built-in min or max validators are enforced when validating a form.
+     * Determines whether the built-in `min` or `max` validators are enforced when validating a form.
      *
      * @default false
      */
     rangeValidation = false;
     /**
-     * Sets the format of the displayed Calendar week days' names.
+     * Specifies the format of the displayed week day names.
+     *
      * @default 'short'
      */
     weekDaysFormat = "short";
     /**
      * Toggles the visibility of the footer.
+     *
      * @default false
      */
     footer = false;
     /**
      * Sets the Calendar selection mode
      * ([see example]({% slug selection_calendar %})).
-     *
-     * The available values are:
-     * * `single` (default)
-     * * `multiple`
-     * * `range`
+     * @default 'single'
      */
     set selection(_selection) {
         this._selection = _selection;
@@ -6896,7 +6890,7 @@ class CalendarComponent {
     /**
      * Sets or gets the `value` property of the Calendar and defines the selected value of the component.
      *
-     * > The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or an object of type `SelectionRange` when in `range` selection mode.
+     * The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or an object of type `SelectionRange` when in `range` selection mode.
      */
     set value(candidate) {
         this.valueSetter = true;
@@ -6913,9 +6907,11 @@ class CalendarComponent {
      */
     disabled = false;
     /**
-     * Sets or gets the `tabindex` property of the Calendar. Based on the
+     * 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,
      * it determines whether the component is focusable.
+     *
+     * @default 0
      */
     tabindex = 0;
     /**
@@ -6928,7 +6924,7 @@ class CalendarComponent {
         return this.tabindex;
     }
     /**
-     * Sets the dates of the Calendar that will be disabled
+     * Specifies the dates of the Calendar that will be disabled
      * ([see example]({% slug disabled_dates_calendar %})).
      */
     set disabledDates(value) {
@@ -6939,37 +6935,39 @@ class CalendarComponent {
         return this._disabledDates;
     }
     /**
-     * Sets or gets the `navigation` property of the Calendar
-     * and determines whether the navigation side-bar will be displayed
+     * Determines whether the navigation side-bar will be displayed
      * ([see example]({% slug sidebar_calendar %})).
      * Applies to the [`infinite`]({% slug api_dateinputs_calendarcomponent %}#toc-type) Calendar only.
+     *
+     * @default true
      */
     navigation = true;
     /**
      * Defines the active view that the Calendar initially renders
      * ([see example]({% slug viewoptions_calendar %})).
-     * By default, the active view is `month`.
+     * You have to set `activeView` within the `topView`-`bottomView` range.
      *
-     * > You have to set `activeView` within the `topView`-`bottomView` range.
+     * @default 'month'
      */
     activeView = CalendarViewEnum[CalendarViewEnum.month];
     /**
      * Defines the bottommost view to which the user can navigate
      * ([see example](slug:viewdepth_calendar)).
+     *
+     * @default 'month'
      */
     bottomView = CalendarViewEnum[CalendarViewEnum.month];
     /**
      * Defines the topmost view to which the user can navigate
      * ([see example](slug:viewdepth_calendar)).
+     *
+     * @default 'century'
      */
     topView = CalendarViewEnum[CalendarViewEnum.century];
     /**
      * Specifies the Calendar type.
      *
-     * The possible values are:
-     * - `infinite` (default)
-     * - `classic`
-     *
+     * @default 'infinite'
      */
     set type(type) {
         this.renderer.removeClass(this.element.nativeElement, `k-calendar-${this.type}`);
@@ -6985,7 +6983,7 @@ class CalendarComponent {
      * Determines whether to enable animation when navigating to previous/next view.
      * Applies to the [`classic`]({% slug api_dateinputs_calendarcomponent %}#toc-type) Calendar only.
      *
-     * > This feature uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). In order to run the animation in browsers that do not support it, you need the `web-animations-js` polyfill.
+     * This feature uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). In order to run the animation in browsers that do not support it, you need the `web-animations-js` polyfill.
      *
      * @default false
      */
@@ -6993,6 +6991,8 @@ class CalendarComponent {
     /**
      * Determines whether to display a week number column in the `month` view
      * ([see example]({% slug weeknumcolumn_calendar %})).
+     *
+     * @default false
      */
     weekNumber = false;
     /**
@@ -7240,10 +7240,10 @@ class CalendarComponent {
     }
     _size = DEFAULT_SIZE;
     /**
-     * Specify, which end of the defined selection range should be marked as active.
+     * 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'.
      *
-     * > Value will be ignored if the selection range is undefined.
-     * > If range selection is used then the default value is 'start'.
+     * @default 'start'
      */
     set activeRangeEnd(_activeRangeEnd) {
         this._activeRangeEnd = _activeRangeEnd;
@@ -7445,18 +7445,6 @@ class CalendarComponent {
     }
     /**
      * Focuses the Calendar by making the table.k-calendar-table element active.
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <button (click)="calendar.focus()">Focus calendar</button>
-     *  <kendo-calendar #calendar></kendo-calendar>
-     * `
-     * })
-     * export class AppComponent { }
-     * ```
      */
     focus() {
         this.currentlyFocusedElement = this.type === 'infinite' ?
@@ -8520,13 +8508,20 @@ class DateInputIntl {
         this.dateFieldName = service.dateFieldName;
         this.dateFormatNames = (localeId, options) => this.service.dateFormatNames(options, localeId || this.localeId);
         const _localeData = localeData(this.localeId);
-        // Setting the `cldr` object from here could be avoided if the logic in the common package is revisited to 
+        // Setting the `cldr` object from here could be avoided if the logic in the common package is revisited to
         // directly relies on the `localeId` being set as part of the options => TBD and validated for all suites
         this.cldr[_localeData.name] = _localeData;
     }
 }
 /**
  * Represents the [Kendo UI DateInput component for Angular](slug:overview_dateinput).
+ *
+ * ```html
+ * <kendo-dateinput/>
+ * ```
+ *
+  * @remarks
+ * Supported children components are: {@link DateInputCustomMessagesComponent}.
  */
 class DateInputComponent {
     cdr;
@@ -8569,31 +8564,36 @@ class DateInputComponent {
         }
     }
     /**
-     * If set to `true`, renders a clear button after the input text or DateInput value has been changed.
+     * Specifies whether to render a clear button after the input text or DateInput value has been changed.
      * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
      * @default false
      */
     clearButton = false;
     /**
-     * Sets or gets the `disabled` property of the DateInput and
-     * determines whether the component is active
+     * Specifies whether the component is disabled
      * ([see example]({% slug disabled_dateinput %})).
      * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_dateinput#toc-managing-the-dateinput-disabled-state-in-reactive-forms).
+     *
+     * @default false
      */
     disabled = false;
     /**
-     * Sets or gets the read-only state of the DateInput
+     * Specifies the read-only state of the DateInput
      * ([see example]({% slug readonly_dateinput %})).
      *
      * @default false
      */
     readonly = false;
     /**
-     * Sets the title of the input element of the DateInput.
+     * Specifies the title of the input element of the DateInput.
+     *
+     * @default ""
      */
     title = "";
     /**
-     * Sets or gets the `tabIndex` property of the DateInput.
+     * Specifies the `tabIndex` property of the DateInput.
+     *
+     * @default 0
      */
     tabindex = 0;
     /**
@@ -8621,59 +8621,17 @@ class DateInputComponent {
      * Specifies the date format that is used to display the input value
      * ([see example]({% slug formats_dateinput %})).
      *
-     * Format value options:
-     * - `string` - Provide a `string` if a single format is going to be used regardless whether the input is focused or blurred.
-     * - [`FormatSettings`]({% slug api_dateinputs_formatsettings %}) - To display different formats when the component is focused or blurred, provide a settings object with specified `inputFormat` and `displayFormat` values.
+     * 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;
     /**
      * Defines the descriptions of the format sections in the input field.
      * For more information, refer to the article on
      * [placeholders]({% slug placeholders_dateinput %}).
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     * <div class="row example-wrapper" [style.min-height.px]="450">
-     *  <div class="col-xs-12 col-md-6 example-col">
-     *    <p>Full-length format description:</p>
-     *    <kendo-dateinput formatPlaceholder="wide"></kendo-dateinput>
-     *  </div>
-     *
-     *  <div class="col-xs-12 col-md-6 example-col">
-     *    <p>Narrow-length format description:</p>
-     *    <kendo-dateinput formatPlaceholder="narrow"></kendo-dateinput>
-     *  </div>
-     *
-     *  <div class="col-xs-12 col-md-6 example-col">
-     *    <p>Short-length format description:</p>
-     *    <kendo-dateinput formatPlaceholder="short"></kendo-dateinput>
-     *  </div>
-     *
-     *  <div class="col-xs-12 col-md-6 example-col">
-     *    <p>Display defined format:</p>
-     *    <kendo-dateinput format="MM/dd/yyyy" formatPlaceholder="formatPattern"></kendo-dateinput>
-     *  </div>
-     *
-     *  <div class="col-xs-12 col-md-6 example-col">
-     *    <p>Custom defined format descriptions</p>
-     *    <kendo-dateinput format="G"
-     *      [formatPlaceholder]="{
-     *        year: 'y', month: 'M', day: 'd',
-     *        hour: 'h', minute: 'm', second: 's'
-     *      }"
-     *    ></kendo-dateinput>
-     *  </div>
-     * </div>
-     * `
-     * })
-     * export class AppComponent { }
-     * ```
      */
     set formatPlaceholder(format) {
-        this._formatPlaceholder = format ? format : DEFAULT_FORMAT_PLACEHOLDER;
+        this._formatPlaceholder = format || DEFAULT_FORMAT_PLACEHOLDER;
     }
     get formatPlaceholder() {
         return this._formatPlaceholder;
@@ -8682,86 +8640,72 @@ class DateInputComponent {
      * Specifies the hint the DateInput displays when its value is `null`.
      * For more information, refer to the article on
      * [placeholders]({% slug placeholders_dateinput %}).
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <kendo-dateinput placeholder="Enter birth date..."></kendo-dateinput>
-     * `
-     * })
-     * export class AppComponent { }
-     * ```
+     * @default null
      */
     placeholder = null;
     /**
      * Configures the incremental steps of the DateInput.
      * For more information, refer to the article on
      * [incremental steps]({% slug incrementalsteps_dateinput %}).
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <kendo-dateinput [steps]="steps"></kendo-dateinput>
-     * `
-     * })
-     * export class AppComponent {
-     *   public steps = { year: 10, month: 1, day: 5 };
-     * }
-     * ```
      */
     steps = {};
     /**
      * Specifies the biggest date that is valid
      * ([see example]({% slug dateranges_dateinput %})).
-     * By default, the `max` value is `2099-12-31`.
+     *
+     * @default 2099-12-31
      */
     max = cloneDate(MAX_DATE);
     /**
      * Specifies the smallest date that is valid
      * ([see example]({% slug dateranges_dateinput %})).
-     * By default, the `min` value is `1900-1-1`.
+     *
+     * @default 1900-1-1
      */
     min = cloneDate(MIN_DATE);
     /**
-     * Determines whether the built-in min or max validators are to be enforced when a form is being validated.
+     * 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;
     /**
-     * Determines whether to autocorrect invalid segments automatically.
+     * 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;
     /**
-     * Determines whether to automatically move to the next segment after the user completes the current one.
+     * 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;
     /**
-     * A string array representing custom keys, which will move the focus to the next date format segment.
+     * 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 = [];
     /**
-     * Determines if the users should see a blinking caret inside the Date Input when possible.
+     * 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;
     /**
-     * When enabled, the DateInput will autofill the rest of the date to the current date when the component loses focus.
+     * Specifies whether to autofill the rest of the date to the current date when the component loses focus.
      *
      * @default false
      */
     autoFill = false;
     /**
-     * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
+     * Specifies whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
+     *
+     * @default false
      */
     incompleteDateValidation = false;
     /**
@@ -8770,6 +8714,7 @@ class DateInputComponent {
      *
      * The default value is 68, indicating that typing any value less than 69
      * will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
+     * @default 68
      */
     twoDigitYearMax = TWO_DIGIT_YEAR_MAX$2;
     /**
@@ -8781,7 +8726,7 @@ class DateInputComponent {
     /**
      * Specifies the value of the DateInput component.
      *
-     * > The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance or `null`.
+     * The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance or `null`.
      */
     set value(value) {
         this.verifyValue(value);
@@ -8796,6 +8741,8 @@ class DateInputComponent {
      * Specifies whether the **Up** and **Down** spin buttons will be rendered.
      * For more information, refer to the article on
      * [spinner buttons]({% slug spinbuttons_dateinput %}).
+     *
+     * @default false
      */
     spinners = false;
     /**
@@ -8807,18 +8754,14 @@ class DateInputComponent {
      */
     hasPopup;
     /**
-     * Sets the size of the component.
+     * Specifies the size of the component.
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
-     * * `none`
+     * @default medium
      *
      */
     set size(size) {
         this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
-        const newSize = size ? size : DEFAULT_SIZE;
+        const newSize = size || DEFAULT_SIZE;
         if (newSize !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', newSize));
         }
@@ -8828,19 +8771,12 @@ class DateInputComponent {
         return this._size;
     }
     /**
-     * Sets the border radius of the component.
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
-     * * `full`
-     * * `none`
-     *
+     * Specifies the border radius of the component.
+     * @default 'medium'
      */
     set rounded(rounded) {
         this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        const newRounded = rounded || DEFAULT_ROUNDED;
         if (newRounded !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(newRounded));
         }
@@ -8850,18 +8786,12 @@ class DateInputComponent {
         return this._rounded;
     }
     /**
-     * Sets the fillMode of the component.
-     *
-     * The possible values are:
-     * * `solid` (Default)
-     * * `flat`
-     * * `outline`
-     * * `none`
-     *
+     * Specifies the fillMode of the component.
+     * @default 'solid'
      */
     set fillMode(fillMode) {
         this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
-        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        const newFillMode = fillMode || DEFAULT_FILL_MODE;
         if (newFillMode !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', newFillMode));
             if (this.spinners && this.spinup && this.spindown) {
@@ -8875,7 +8805,7 @@ class DateInputComponent {
         return this._fillMode;
     }
     /**
-     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     * Specifies the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
      */
     set inputAttributes(attributes) {
         if (isObjectPresent(this.parsedAttributes)) {
@@ -9250,20 +9180,9 @@ class DateInputComponent {
     /**
      * Focuses the DateInput component.
      *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <button (click)="dateinput.focus()">Focus date input</button>
-     *  <kendo-dateinput #dateinput></kendo-dateinput>
-     * `
-     * })
-     * export class AppComponent { }
-     * ```
      */
     focus() {
-        this.kendoDate && this.kendoDate.focus();
+        this.kendoDate?.focus();
     }
     /**
      * Blurs the DateInput component.
@@ -9397,7 +9316,7 @@ class DateInputComponent {
         }
     }
     setInputAttributes() {
-        const attributesToRender = Object.assign({}, this.mutableAttributes, this.parsedAttributes);
+        const attributesToRender = { ...this.mutableAttributes, ...this.parsedAttributes };
         setHTMLAttributes(attributesToRender, this.renderer, this.dateInput.nativeElement, this.ngZone);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.IntlService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i1$1.LocalizationService }, { token: PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
@@ -9745,7 +9664,15 @@ const disabledDatesValidator = (isDateDisabled) => {
 };
 
 /**
- * Custom component messages override default component messages ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
+ * A component that allows customization of Calendar localization messages.
+ *
+ * @example
+ * ```html
+ * <kendo-calendar-messages prevButtonTitle="Previous">
+ * </kendo-calendar-messages>
+ * ```
+ *
+ * For more information, see the [globalization documentation]({% slug globalization_dateinputs %}#toc-custom-messages).
  */
 class CalendarCustomMessagesComponent extends CalendarMessages {
     service;
@@ -9780,7 +9707,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
 /**
- * Custom component messages override default component messages ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
+ * Represents the Kendo UI DateInput custom messages component.
+ * Overrides the default component messages with custom messages ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-dateinput>
+ *       <kendo-dateinput-messages
+ *         increment="Increase value"
+ *         decrement="Decrease value">
+ *       </kendo-dateinput-messages>
+ *     </kendo-dateinput>
+ *   `
+ * })
+ * export class AppComponent { }
+ * ```
  */
 class DateInputCustomMessagesComponent extends DateInputMessages {
     service;
@@ -9908,7 +9852,26 @@ const VALUE_DOC_LINK$2 = 'https://www.telerik.com/kendo-angular-ui/components/da
 const DEFAULT_FORMAT = 'd';
 const TWO_DIGIT_YEAR_MAX$1 = 68;
 /**
- * Represents the [Kendo UI DatePicker component for Angular](slug:overview_datepicker).
+ * Represents the Kendo UI DatePicker component for Angular.
+ * Provides a user-friendly way to select dates with a calendar popup ([see example](slug:overview_datepicker)).
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-datepicker
+ *       [value]="selectedDate"
+ *     </kendo-datepicker>
+ *   `
+ * })
+ * export class AppComponent {
+ *   selectedDate = new Date();
+ * }
+ * ```
+ *
+  * @remarks
+ * Supported children components are: {@link DatePickerCustomMessagesComponent}.
  */
 class DatePickerComponent extends MultiTabStop {
     zone;
@@ -9944,13 +9907,14 @@ class DatePickerComponent extends MultiTabStop {
         this.cellTemplate = template;
     }
     /**
-     * If set to `true`, renders a clear button after the input text or DatePicker value has been changed.
-     * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
+     * Renders a clear button when set to `true` after the input text or DatePicker value changes.
+     * Click this button to reset the component value to `null` and trigger the `valueChange` event.
      * @default false
      */
     clearButton = false;
     /**
-     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     * Specifies the HTML attributes of the inner focusable input element.
+     * You cannot change attributes that are essential for certain component functionalities.
      */
     inputAttributes;
     /**
@@ -10034,7 +9998,7 @@ class DatePickerComponent extends MultiTabStop {
         this.footerTemplate = template;
     }
     /**
-     * Toggles the visibility of the Calendar footer.
+     * Controls the visibility of the Calendar footer.
      * @default false
      */
     footer = false;
@@ -10049,62 +10013,53 @@ class DatePickerComponent extends MultiTabStop {
         this.navigationItemTemplate = template;
     }
     /**
-     * Sets the format of the displayed Calendar week days' names.
+     * Specifies the format of the displayed Calendar week days' names.
      * @default 'short'
      */
     weekDaysFormat = "short";
     /**
-     * Displays the days that fall out of the current month in the Calendar ([see example]({% slug viewoptions_calendar %}#toc-displaying-other-month-days)).
-     * The default values per Calendar type are:
-     * - `infinite` - false
-     * - `classic` - true
+     * Shows the days that fall outside the current month in the Calendar ([see example]({% slug viewoptions_calendar %}#toc-displaying-other-month-days)).
+     * The default value is `false` for infinite Calendar type and `true` for classic Calendar type.
      */
     showOtherMonthDays;
     /**
-     * Defines the active view that the Calendar initially renders
-     * ([see example]({% slug viewoptions_calendar %}#toc-active-view)).
-     * By default, the active view is `month`.
+     * Specifies the active view that the Calendar initially renders ([see example]({% slug viewoptions_calendar %}#toc-active-view)).
      *
-     * > You have to set `activeView` within the `topView`-`bottomView` range.
+     * You have to set `activeView` within the `topView`-`bottomView` range.
+     * @default 'month'
      */
     activeView = CalendarViewEnum[CalendarViewEnum.month];
     /**
-     * Defines the bottommost Calendar view to which the user can navigate
-     * ([see example](slug:datepicker_calendar_options#toc-view-selection-depth)).
+     * Specifies the bottommost Calendar view to which you can navigate ([see example](slug:datepicker_calendar_options#toc-view-selection-depth)).
+     * @default 'month'
      */
     bottomView = CalendarViewEnum[CalendarViewEnum.month];
     /**
-     * Defines the topmost Calendar view to which the user can navigate
-     * ([see example](slug:datepicker_calendar_options#toc-view-selection-depth)).
+     * Specifies the topmost Calendar view to which you can navigate ([see example](slug:datepicker_calendar_options#toc-view-selection-depth)).
+     * @default 'century'
      */
     topView = CalendarViewEnum[CalendarViewEnum.century];
     /**
      * Specifies the Calendar type.
-     *
-     * The possible values are:
-     * - `infinite` (default)
-     * - `classic`
-     *
+     * @default 'infinite'
      */
     calendarType = 'infinite';
     /**
      * Determines whether to enable animation when navigating to previous/next Calendar view.
      * Applies to the [`classic`]({% slug api_dateinputs_datepickercomponent %}#toc-calendartype) Calendar only.
      *
-     * > This feature uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). In order to run the animation in browsers that do not support it, you need the `web-animations-js` polyfill.
+     * This feature uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). In order to run the animation in browsers that do not support it, you need the `web-animations-js` polyfill.
      *
      * @default false
      */
     animateCalendarNavigation = false;
     /**
-     * Sets or gets the `disabled` property of the DatePicker and determines whether the component is active
-     * ([see example]({% slug disabled_datepicker %})).
+     * Specifies or gets the `disabled` property of the DatePicker and determines whether the component is active ([see example]({% slug disabled_datepicker %})).
      * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_datepicker#toc-managing-the-datepicker-disabled-state-in-reactive-forms).
      */
     disabled = false;
     /**
-     * Sets the read-only state of the DatePicker
-     * ([see example]({% slug readonly_datepicker %}#toc-read-only-datepicker)).
+     * Specifies the read-only state of the DatePicker ([see example]({% slug readonly_datepicker %}#toc-read-only-datepicker)).
      *
      * @default false
      */
@@ -10113,20 +10068,19 @@ class DatePickerComponent extends MultiTabStop {
      * Sets the read-only state of the DatePicker input field
      * ([see example]({% slug readonly_datepicker %}#toc-read-only-input)).
      *
-     * > Note that if you set the [`readonly`]({% slug api_dateinputs_datepickercomponent %}#toc-readonly) property value to `true`,
+     * If you set the [`readonly`]({% slug api_dateinputs_datepickercomponent %}#toc-readonly) property value to `true`,
      * the input will be rendered in a read-only state regardless of the `readOnlyInput` value.
      */
     readOnlyInput = false;
     /**
      * Configures the popup options of the DatePicker.
      *
-     * The available options are:
-     * - `animate: Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
-     * - `appendTo: 'root' | 'component' | ViewContainerRef`&mdash;Controls the popup container. By default, the popup will be appended to the root component.
-     * - `popupClass: String`&mdash;Specifies a list of CSS classes that are used to style the popup.
+     * The available options are animate which controls the popup animation and by default, the open and close animations are enabled.
+     * The appendTo option controls the popup container and by default, the popup will be appended to the root component.
+     * The popupClass option specifies a list of CSS classes that are used to style the popup.
      */
     set popupSettings(settings) {
-        this._popupSettings = Object.assign({}, { animate: true }, settings);
+        this._popupSettings = { animate: true, ...settings };
     }
     get popupSettings() {
         return this._popupSettings;
@@ -10149,17 +10103,18 @@ class DatePickerComponent extends MultiTabStop {
     /**
      * Specifies the smallest valid date
      * ([see example]({% slug dateranges_datepicker %})).
-     * By default, the `min` value is `1900-1-1`.
+     * @default 1900-1-1
      */
     min = cloneDate(MIN_DATE);
     /**
      * Specifies the biggest valid date
      * ([see example]({% slug dateranges_datepicker %})).
-     * By default, the `max` value is `2099-12-31`.
+     * @default 2099-12-31
      */
     max = cloneDate(MAX_DATE);
     /**
      * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
+     * @default false
      */
     incompleteDateValidation = false;
     /**
@@ -10199,13 +10154,13 @@ class DatePickerComponent extends MultiTabStop {
     /**
      * Specifies the focused date of the Calendar component
      * ([see example](slug:datepicker_calendar_options#toc-focused-dates)).
+     * @default null
      */
     focusedDate = null;
     /**
      * Specifies the value of the DatePicker component.
      *
-     * > The `value` has to be a valid
-     * [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance or `null`.
+     * The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance or `null`.
      */
     set value(value) {
         this.verifyValue(value);
@@ -10218,9 +10173,8 @@ class DatePickerComponent extends MultiTabStop {
      * Specifies the date format that is used to display the input value
      * ([see example]({% slug formats_datepicker %})).
      *
-     * Format value options:
-     * - `string` - Provide a `string` if a single format is going to be used regardless whether the input is focused or blurred.
-     * - [`FormatSettings`]({% slug api_dateinputs_formatsettings %}) - To display different formats when the component is focused or blurred, provide a settings object with specified `inputFormat` and `displayFormat` values.
+     * Format 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;
     /**
@@ -10229,69 +10183,25 @@ class DatePickerComponent extends MultiTabStop {
      *
      * The default value is 68, indicating that typing any value less than 69
      * will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
+     * @default 68
      */
     twoDigitYearMax = TWO_DIGIT_YEAR_MAX$1;
     /**
      * Defines the descriptions of the format sections in the input field.
      * ([more information and examples]({% slug placeholders_datepicker %})).
      *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     * <div class="row example-wrapper" [style.min-height.px]="450">
-     *  <div class="col-xs-12 col-md-6 example-col">
-     *    <p>Full-length format description:</p>
-     *    <kendo-datepicker formatPlaceholder="wide"></kendo-datepicker>
-     *  </div>
-     *
-     *  <div class="col-xs-12 col-md-6 example-col">
-     *    <p>Narrow-length format description:</p>
-     *    <kendo-datepicker formatPlaceholder="narrow"></kendo-datepicker>
-     *  </div>
-     *
-     *  <div class="col-xs-12 col-md-6 example-col">
-     *    <p>Short-length format description:</p>
-     *    <kendo-datepicker formatPlaceholder="short"></kendo-datepicker>
-     *  </div>
-     *
-     *  <div class="col-xs-12 col-md-6 example-col">
-     *    <p>Display defined format:</p>
-     *    <kendo-datepicker format="MM/dd/yyyy" formatPlaceholder="formatPattern"></kendo-datepicker>
-     *  </div>
-     *
-     *  <div class="col-xs-12 col-md-6 example-col">
-     *    <p>Custom defined format descriptions</p>
-     *    <kendo-datepicker format="MM/dd/yyyy"
-     *      [formatPlaceholder]="{ year: 'y', month: 'M', day: 'd' }"
-     *    ></kendo-datepicker>
-     *  </div>
-     * </div>
-     * `
-     * })
-     * export class AppComponent { }
-     * ```
      */
     formatPlaceholder;
     /**
      * Specifies the hint the DatePicker displays when its value is `null`.
      * ([more information and exaples]({% slug placeholders_datepicker %})).
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <kendo-datepicker placeholder="Enter birth date..."></kendo-datepicker>
-     * `
-     * })
-     * export class AppComponent { }
-     * ```
+     * @default null
      */
     placeholder = null;
     /**
-     * Sets or gets the `tabindex` property of the DatePicker.
+     * 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;
     /**
@@ -10317,11 +10227,13 @@ class DatePickerComponent extends MultiTabStop {
     /**
      * Sets the title of the input element of the DatePicker and the title text rendered
      * in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     * @default ""
      */
     adaptiveTitle = "";
     /**
      * Sets the subtitle text rendered in the header of the popup(action sheet).
      * Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     * @default ""
      */
     adaptiveSubtitle = "";
     /**
@@ -10334,27 +10246,23 @@ class DatePickerComponent extends MultiTabStop {
      * Determines whether the built-in validator for disabled
      * date ranges is enforced when validating a form
      * ([see example]( slug:disabled_dates_datepicker#toc-using-a-function)).
+     * @default true
      */
     disabledDatesValidation = true;
     /**
      * Determines whether to display a week number column in the `month` view of the Calendar
      * ([see example](slug:datepicker_calendar_options#toc-week-number-column)).
+     * @default false
      */
     weekNumber = false;
     /**
      * Sets the size of the component.
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
-     * * `none`
-     *
+     * @default 'medium'
      */
     set size(size) {
         this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
         this.renderer.removeClass(this.toggleButton.nativeElement, getSizeClass('button', this.size));
-        const newSize = size ? size : DEFAULT_SIZE;
+        const newSize = size || DEFAULT_SIZE;
         if (newSize !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', newSize));
             this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('button', newSize));
@@ -10365,19 +10273,12 @@ class DatePickerComponent extends MultiTabStop {
         return this._size;
     }
     /**
-     * Sets the border radius of the component.
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
-     * * `full`
-     * * `none`
-     *
+     * Specifies the border radius of the component.
+     * @default 'medium'
      */
     set rounded(rounded) {
         this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        const newRounded = rounded || DEFAULT_ROUNDED;
         if (newRounded !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(newRounded));
         }
@@ -10387,14 +10288,8 @@ class DatePickerComponent extends MultiTabStop {
         return this._rounded;
     }
     /**
-     * Sets the fillMode of the component.
-     *
-     * The possible values are:
-     * * `solid` (Default)
-     * * `flat`
-     * * `outline`
-     * * `none`
-     *
+     * Specifies the fillMode of the component.
+     * @default 'solid'
      */
     set fillMode(fillMode) {
         this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
@@ -10412,7 +10307,9 @@ class DatePickerComponent extends MultiTabStop {
         return this._fillMode;
     }
     /**
-     * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
+     * 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';
     /**
@@ -10685,18 +10582,6 @@ class DatePickerComponent extends MultiTabStop {
     }
     /**
      * Focuses the DatePicker component.
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <button (click)="datepicker.focus()">Focus date picker</button>
-     *  <kendo-datepicker #datepicker></kendo-datepicker>
-     * `
-     * })
-     * export class AppComponent { }
-     * ```
      */
     focus() {
         this.dateInput.focus();
@@ -10712,7 +10597,7 @@ class DatePickerComponent extends MultiTabStop {
      * If you use the `toggle` method to show or hide the popup or actionSheet,
      * the `open` and `close` events do not fire.
      *
-     * @param show - The state of the popup.
+     * @param show The state of the popup.
      */
     toggle(show) {
         if (this.disabled || this.readonly) {
@@ -12778,59 +12663,59 @@ const snapTime = snappers => (candidate, min) => {
  */
 class TimePickerMessages extends ComponentMessages {
     /**
-     * The text of the **Accept** button in the popup footer of the TimeList.
+     * Specifies the text of the **Accept** button in the popup footer of the TimeList.
      */
     accept;
     /**
-     * The label of the **Accept** button in the popup footer of the TimeList.
+     * Specifies the label of the **Accept** button in the popup footer of the TimeList.
      */
     acceptLabel;
     /**
-     * The text of the **Cancel** button in the popup footer of the TimeList.
+     * Specifies the text of the **Cancel** button in the popup footer of the TimeList.
      */
     cancel;
     /**
-     * The label of the **Cancel** button in the popup footer of the TimeList.
+     * Specifies the label of the **Cancel** button in the popup footer of the TimeList.
      */
     cancelLabel;
     /**
-     * The text of the **Now** button in the popup header of the TimeList.
+     * Specifies the text of the **Now** button in the popup header of the TimeList.
      */
     now;
     /**
-     * The label of the **Now** button in the popup header of the TimeList.
+     * Specifies the label of the **Now** button in the popup header of the TimeList.
      */
     nowLabel;
     /**
-     * The title of the **Toggle** button of the TimePicker.
+     * Specifies the title of the **Toggle** button of the TimePicker.
      */
     toggle;
     /**
-     * The label of the **Hour** part in the TimePicker.
+     * Specifies the label of the **Hour** part in the TimePicker.
      */
     hour;
     /**
-     * The label of the **Minute** part in the TimePicker.
+     * Specifies the label of the **Minute** part in the TimePicker.
      */
     minute;
     /**
-     * The label of the **Second** part in the TimePicker.
+     * Specifies the label of the **Second** part in the TimePicker.
      */
     second;
     /**
-     * The label of the **Millisecond** part in the TimePicker.
+     * Specifies the label of the **Millisecond** part in the TimePicker.
      */
     millisecond;
     /**
-     * The label of the **Dayperiod** part in the TimePicker.
+     * Specifies the label of the **Dayperiod** part in the TimePicker.
      */
     dayperiod;
     /**
-     * The title of the **Clear** button of the TimePicker.
+     * Specifies the title of the **Clear** button of the TimePicker.
      */
     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.
+     * Specifies the title of the **Close** button of the ActionSheet that renders instead of the popup when using small screen devices in adaptive mode.
      */
     adaptiveCloseButtonTitle;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
@@ -12943,62 +12828,58 @@ class TimeSelectorComponent {
         return this.disabled;
     }
     /**
-     * Specifies the time format used to display the time list columns.
+     * Specifies the time format that displays the time list columns.
+     *
+     * @default 't'
      */
     format = 't';
     /**
-     * Specifies the smallest valid time value.
+     * Sets the smallest valid time value.
      */
     min = cloneDate(MIN_TIME);
     /**
-     * Specifies the biggest valid time value.
+     * Sets the largest valid time value.
      */
     max = cloneDate(MAX_TIME);
     /**
-     * Determines whether to display the **Cancel** button in the popup.
+     * Controls the display of the **Cancel** button in the popup.
+     *
+     * @default true
      */
     cancelButton = true;
     /**
-     * Determines whether to display the **Set** button in the popup.
+     * Controls the display of the **Set** button in the popup.
+     *
+     * @default true
      */
     setButton = true;
     /**
-     * Determines whether to display the **Now** button in the popup.
+     * Controls the display of the **Now** button in the popup.
+     *
+     * When the current time is out of range or the incremental step is greater than `1`, the **Now** button is hidden.
      *
-     * > If the current time is out of range or the incremental step is greater than `1`, the **Now** button will be hidden.
+     * @default true
      */
     nowButton = true;
     /**
-     * Sets or gets the `disabled` property of the TimeSelector and determines whether the component is active.
+     * Sets the `disabled` property of the `TimeSelector` and controls whether the component is active.
+     *
+     * @default false
      */
     disabled = false;
     /**
-     * Needed in order to set it in the dom service so that timeselector height can be properly calculated
+     * Sets the adaptive mode for the component.
+     * Use this property to enable proper height calculation in the DOM service.
      */
     isAdaptiveEnabled;
+    /**
+     * Specifies whether the component is used as part of a DateTimePicker.
+     */
     isDateTimePicker;
     /**
      * Configures the incremental steps of the TimeSelector.
      *
-     * The available options are:
-     * - `hour: Number`&mdash;Controls the incremental step of the hour value.
-     * - `minute: Number`&mdash;Controls the incremental step of the minute value.
-     * - `second: Number`&mdash;Controls the incremental step of the second value.
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <kendo-timeselector format="HH:mm:ss" [steps]="steps"></kendo-timeselector>
-     * `
-     * })
-     * export class AppComponent {
-     *   public steps = { hour: 2, minute: 15, second: 15 };
-     * }
-     * ```
-     *
-     * > If the incremental step is greater than `1`, the **Now** button will be hidden.
+     * When the incremental step is greater than `1`, the **Now** button is hidden.
      */
     set steps(steps) {
         this._steps = steps || {};
@@ -13106,18 +12987,6 @@ class TimeSelectorComponent {
     }
     /**
      * Focuses the TimeSelector component.
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <button (click)="timeselector.focus()">Focus time picker</button>
-     *  <kendo-timeselector #timeselector></kendo-timeselector>
-     * `
-     * })
-     * export class AppComponent { }
-     * ```
      */
     focus() {
         const list = this.timeLists.first;
@@ -13702,6 +13571,22 @@ const ACCEPT_BUTTON_SELECTOR$1 = '.k-button.k-time-accept';
 const CANCEL_BUTTON_SELECTOR = '.k-button.k-time-cancel';
 /**
  * Represents the [Kendo UI TimePicker component for Angular](slug:overview_timepicker).
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-timepicker [(value)]="selectedTime"></kendo-timepicker>
+ *   `
+ * })
+ * export class AppComponent {
+ *   public selectedTime: Date = new Date();
+ * }
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link TimePickerCustomMessagesComponent}.
  */
 class TimePickerComponent extends MultiTabStop {
     bus;
@@ -13728,14 +13613,15 @@ class TimePickerComponent extends MultiTabStop {
      */
     focusableId;
     /**
-     * Sets or gets the `disabled` property of the TimePicker and
-     * determines whether the component is active
+     * Determines whether the TimePicker is disabled
      * ([see example]({% slug disabled_timepicker %})).
      * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_timepicker#toc-managing-the-timepicker-disabled-state-in-reactive-forms).
+     *
+     * @default false
      */
     disabled = false;
     /**
-     * Sets the read-only state of the TimePicker
+     * Determines the read-only state of the TimePicker
      * ([see example]({% slug readonly_timepicker %}#toc-read-only-timepicker)).
      *
      * @default false
@@ -13745,8 +13631,9 @@ class TimePickerComponent extends MultiTabStop {
      * Sets the read-only state of the TimePicker input field
      * ([see example]({% slug readonly_timepicker %}#toc-read-only-input)).
      *
-     * > Note that if you set the [`readonly`]({% slug api_dateinputs_timepickercomponent %}#toc-readonly) property value to `true`,
+     * If you set the [`readonly`]({% slug api_dateinputs_timepickercomponent %}#toc-readonly) property value to `true`,
      * the input will be rendered in a read-only state regardless of the `readOnlyInput` value.
+     * @default false
      */
     readOnlyInput = false;
     /**
@@ -13758,72 +13645,26 @@ class TimePickerComponent extends MultiTabStop {
     /**
      * Specifies the time format that is used to display the input value
      * ([see example]({% slug formats_timepicker %})).
+     * @default 't'
      */
     format = 't';
     /**
      * Defines the descriptions of the format sections in the input field.
      * For more information, refer to the article on
      * [placeholders]({% slug placeholders_timepicker %}).
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     * <div class="row example-wrapper" [style.min-height.px]="450">
-     *  <div class="col-xs-12 col-md-6 example-col">
-     *    <p>Full-length format description:</p>
-     *    <kendo-timepicker formatPlaceholder="wide"></kendo-timepicker>
-     *  </div>
-     *
-     *  <div class="col-xs-12 col-md-6 example-col">
-     *    <p>Narrow-length format description:</p>
-     *    <kendo-timepicker formatPlaceholder="narrow"></kendo-timepicker>
-     *  </div>
-     *
-     *  <div class="col-xs-12 col-md-6 example-col">
-     *    <p>Short-length format description:</p>
-     *    <kendo-timepicker formatPlaceholder="short"></kendo-timepicker>
-     *  </div>
-     *
-     *  <div class="col-xs-12 col-md-6 example-col">
-     *    <p>Display defined format:</p>
-     *    <kendo-timepicker format="HH:mm:ss" formatPlaceholder="formatPattern"></kendo-timepicker>
-     *  </div>
-     *
-     *  <div class="col-xs-12 col-md-6 example-col">
-     *    <p>Custom defined format descriptions</p>
-     *    <kendo-timepicker format="HH:mm:ss"
-     *      [formatPlaceholder]="{ hour: 'H', minute: 'm', second: 's' }"
-     *    ></kendo-timepicker>
-     *  </div>
-     * </div>
-     * `
-     * })
-     * export class AppComponent { }
-     * ```
      */
     formatPlaceholder;
     /**
      * Specifies the hint the TimePicker displays when its value is `null`.
      * For more information, refer to the article on
      * [placeholders]({% slug placeholders_timepicker %}).
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <kendo-timepicker placeholder="Enter start..."></kendo-timepicker>
-     * `
-     * })
-     * export class AppComponent { }
-     * ```
+     * @default null
      */
     placeholder = null;
     /**
      * Specifies the smallest valid time value
      * ([see example]({% slug timeranges_timepicker %})).
+     * @default `00:00:00`
      */
     set min(min) {
         this._min = cloneDate(min || MIN_TIME);
@@ -13834,6 +13675,7 @@ class TimePickerComponent extends MultiTabStop {
     /**
      * Specifies the biggest valid time value
      * ([see example]({% slug timeranges_timepicker %})).
+     * @default `23:59:59`
      */
     set max(max) {
         this._max = cloneDate(max || MAX_TIME);
@@ -13843,6 +13685,8 @@ class TimePickerComponent extends MultiTabStop {
     }
     /**
      * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
+     *
+     * @default false
      */
     incompleteDateValidation = false;
     /**
@@ -13869,12 +13713,16 @@ class TimePickerComponent extends MultiTabStop {
     allowCaretMode = false;
     /**
      * Determines whether to display the **Cancel** button in the popup.
+     *
+     * @default true
      */
     cancelButton = true;
     /**
      * Determines whether to display the **Now** button in the popup.
      *
-     * > If the current time is out of range or the incremental step is greater than `1`, the **Now** button will be hidden.
+     * If the current time is out of range or the incremental step is greater than `1`, the **Now** button will be hidden.
+     *
+     * @default true
      */
     nowButton = true;
     /**
@@ -13882,21 +13730,7 @@ class TimePickerComponent extends MultiTabStop {
      * For more information, refer to the article on
      * [incremental steps]({% slug incrementalsteps_timepicker %}).
      *
-     * > If the incremental step is greater than `1`, the **Now** button will be hidden.
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <kendo-timepicker format="HH:mm:ss" [steps]="steps"></kendo-timepicker>
-     * `
-     * })
-     * class AppComponent {
-     *   public steps = { hour: 2, minute: 15, second: 15, millisecond: 10 };
-     * }
-     * ```
-     *
+     * If the incremental step is greater than `1`, the **Now** button will be hidden.
      */
     set steps(steps) {
         this._steps = steps || {};
@@ -13907,10 +13741,9 @@ class TimePickerComponent extends MultiTabStop {
     /**
      * Configures the popup of the TimePicker.
      *
-     * The available options are:
-     * - `animate: Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
-     * - `appendTo: 'root' | 'component' | ViewContainerRef`&mdash;Controls the popup container. By default, the popup will be appended to the root component.
-     * - `popupClass: String`&mdash;Specifies a list of CSS classes that are used to style the popup.
+     * The available options are animate which controls the popup animation and by default, the open and close animations are enabled.
+     * The `appendTo` option controls the popup container and by default, the popup will be appended to the root component.
+     * The `popupClass` option specifies a list of CSS classes that are used to style the popup.
      */
     set popupSettings(settings) {
         this._popupSettings = Object.assign({}, { animate: true }, settings);
@@ -13919,7 +13752,8 @@ class TimePickerComponent extends MultiTabStop {
         return this._popupSettings;
     }
     /**
-     * Sets or gets the `tabindex` property of the TimePicker.
+     * Sets the tabindex of the TimePicker component.
+     * @default 0
      */
     tabindex = 0;
     /**
@@ -13949,13 +13783,14 @@ class TimePickerComponent extends MultiTabStop {
      */
     rangeValidation = true;
     /**
-     * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
+     * Determines whether the TimePicker is in adaptive mode.
+     * @default 'none'
      */
     adaptiveMode = 'none';
     /**
-     * Specifies the value of the TimePicker component.
+     * Determines whether the TimePicker is in adaptive mode.
      *
-     * > The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance or `null`.
+     * The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance or `null`.
      */
     set value(value) {
         this.verifyValue(value);
@@ -13966,13 +13801,7 @@ class TimePickerComponent extends MultiTabStop {
     }
     /**
      * Sets the size of the component.
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
-     * * `none`
-     *
+     * @default 'medium'
      */
     set size(size) {
         this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
@@ -13988,14 +13817,8 @@ class TimePickerComponent extends MultiTabStop {
         return this._size;
     }
     /**
-     * Sets the border radius of the component.
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
-     * * `full`
-     * * `none`
+     * Sets the rounded styling of the component.
+     * @default 'medium'
      *
      */
     set rounded(rounded) {
@@ -14011,13 +13834,7 @@ class TimePickerComponent extends MultiTabStop {
     }
     /**
      * Sets the fillMode of the component.
-     *
-     * The possible values are:
-     * * `solid` (Default)
-     * * `flat`
-     * * `outline`
-     * * `none`
-     *
+     * @default 'solid'
      */
     set fillMode(fillMode) {
         this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
@@ -14325,33 +14142,22 @@ class TimePickerComponent extends MultiTabStop {
     /**
      * Focuses the TimePicker component.
      *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <button (click)="timepicker.focus()">Focus time picker</button>
-     *  <kendo-timepicker #timepicker></kendo-timepicker>
-     * `
-     * })
-     * export class AppComponent { }
-     * ```
      */
     focus() {
         this.dateInput.focus();
     }
     /**
      * Blurs the TimePicker component.
+     *
      */
     blur() {
         (this.timeSelector || this.dateInput)['blur']();
     }
     /**
-     * Toggles the visibility of the popup or actionSheet.
-     * If you use the `toggle` method to show or hide the popup or actionSheet,
-     * the `open` and `close` events do not fire.
+     * Toggles the visibility of the popup or ActionSheet.
+     * If you use the `toggle` method to show or hide the popup or ActionSheet, the `open` and `close` events do not fire.
      *
-     * @param show - The state of the popup.
+     * @param {boolean} show The state of the popup.
      */
     toggle(show) {
         if (this.disabled || this.readonly) {
@@ -14362,7 +14168,8 @@ class TimePickerComponent extends MultiTabStop {
         });
     }
     /**
-     * Indicates whether the component is currently open. That is when the popup or actionSheet is open.
+     * Returns whether the component is currently open.
+     * That is when the popup or ActionSheet is open.
      */
     get isOpen() {
         return this.show;
@@ -14845,7 +14652,7 @@ class TimePickerComponent extends MultiTabStop {
         <ng-container #container></ng-container>
 
         <kendo-resize-sensor *ngIf="isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
-        <kendo-actionsheet 
+        <kendo-actionsheet
             #actionSheet
             (overlayClick)="show=false"
             (collapse)="handleActionSheetCollapse()"
@@ -14886,7 +14693,7 @@ class TimePickerComponent extends MultiTabStop {
                     <ng-container *ngTemplateOutlet="timeSelectorTemplate"></ng-container>
                 </div>
                 <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
-                    <button kendoButton 
+                    <button kendoButton
                         type="button"
                         (click)="handleReject()"
                         size="large"
@@ -15083,7 +14890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <ng-container #container></ng-container>
 
         <kendo-resize-sensor *ngIf="isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
-        <kendo-actionsheet 
+        <kendo-actionsheet
             #actionSheet
             (overlayClick)="show=false"
             (collapse)="handleActionSheetCollapse()"
@@ -15124,7 +14931,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     <ng-container *ngTemplateOutlet="timeSelectorTemplate"></ng-container>
                 </div>
                 <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
-                    <button kendoButton 
+                    <button kendoButton
                         type="button"
                         (click)="handleReject()"
                         size="large"
@@ -15485,7 +15292,31 @@ const DATE_TAB_BUTTON_SELECTOR = '.k-button.k-group-start';
 const TIME_TAB_BUTTON_SELECTOR = '.k-button.k-group-end';
 const TODAY_BUTTON_SELECTOR = '.k-button.k-calendar-nav-today';
 /**
- * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
+ * Represents the Kendo UI DateTimePicker component for Angular.
+ * Allows users to select both date and time values from an interactive calendar and time selector.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-datetimepicker
+ *       [(value)]="dateTimeValue"
+ *       [format]="'g'"
+ *       [min]="minDate"
+ *       [max]="maxDate">
+ *     </kendo-datetimepicker>
+ *   `
+ * })
+ * export class AppComponent {
+ *   public dateTimeValue: Date = new Date();
+ *   public minDate: Date = new Date(2000, 0, 1);
+ *   public maxDate: Date = new Date(2030, 11, 31);
+ * }
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link DateTimePickerCustomMessagesComponent}.
  */
 class DateTimePickerComponent extends MultiTabStop {
     popupService;
@@ -15550,15 +15381,16 @@ class DateTimePickerComponent extends MultiTabStop {
     weekDaysFormat = "short";
     /**
      * Displays the days that fall out of the current month in the Calendar ([see example]({% slug datetimepicker_calendar_options %}#toc-displaying-other-month-days)).
-     * The default values per Calendar type are:
-     * - `infinite` - false
-     * - `classic` - true
+     * 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;
     /**
-     * Specifies the value of the DateTimePicker component.
+     * Sets the value of the DateTimePicker component.
+     * You can set a specific date and time for the picker to display and use.
      *
-     * > The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance or `null`.
+     * The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance or `null`.
      */
     set value(value) {
         this.verifyValue(value);
@@ -15571,13 +15403,12 @@ class DateTimePickerComponent extends MultiTabStop {
     }
     /**
      * Specifies the date format for displaying the input value
-     * ([see example]({% slug formats_datetimepicker %}))
+     * ([see example]({% slug formats_datetimepicker %})).
      *
-     * Format value options:
-     * - `string` - Provide a `string` if a single format is going to be used regardless whether the input is focused or blurred.
-     * - [`FormatSettings`]({% slug api_dateinputs_formatsettings %}) - To display different formats when the component is focused or blurred, provide a settings object with specified `inputFormat` and `displayFormat` values.
+     * When using a string format, the same format is applied regardless of whether the input is focused or blurred.
+     * When using a FormatSettings object, you can specify different inputFormat and displayFormat values for focused and blurred states.
      *
-     * > If a [`FormatSettings`]({% slug api_dateinputs_formatsettings %}) object is provided, the `displayFormat` value will be used for the popup TimePicker.
+     * If a FormatSettings object is provided, the displayFormat value will be used for the popup TimePicker.
      */
     set format(format) {
         this._format = format;
@@ -15593,6 +15424,7 @@ class DateTimePickerComponent extends MultiTabStop {
      *
      * The default value is 68, indicating that typing any value less than 69
      * will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
+     * @default 68
      */
     twoDigitYearMax = TWO_DIGIT_YEAR_MAX;
     /**
@@ -15621,10 +15453,9 @@ class DateTimePickerComponent extends MultiTabStop {
      * Configures the popup settings of the DateTimePicker
      * ([see example]({% slug datetimepicker_popup_options %}#toc-customizing-the-popup)).
      *
-     * The available options are:
-     * - `animate: Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
-     * - `appendTo: 'root' | 'component' | ViewContainerRef`&mdash;Controls the popup container. By default, the popup will be appended to the root component.
-     * - `popupClass: String`&mdash;Specifies a list of CSS classes that are used to style the popup.
+     * The available options are animate which controls the popup animation and by default, the open and close animations are enabled.
+     * The `appendTo` option controls the popup container and by default, the popup will be appended to the root component.
+     * The `popupClass` option specifies a list of CSS classes that are used to style the popup.
      */
     set popupSettings(settings) {
         this._popupSettings = Object.assign({}, { animate: true }, settings);
@@ -15633,39 +15464,46 @@ class DateTimePickerComponent extends MultiTabStop {
         return this._popupSettings;
     }
     /**
-     * Sets the title of the input element of the DateTimePicker and the title text rendered
-     * in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     * Specifies the title of the input element of the DateTimePicker and the title text rendered
+     * in the header of the popup (action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     * @default ''
      */
     adaptiveTitle = '';
     /**
-     * Sets the subtitle text rendered in the header of the popup(action sheet).
+     * Specifies the subtitle text rendered in the header of the popup (action sheet).
      * Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     * @default ''
      */
     adaptiveSubtitle = '';
     /**
-     * Sets or gets the `disabled` property of the DateTimePicker and determines whether the component is active
+     * Specifies the `disabled` property of the DateTimePicker and determines whether the component is active
      * ([see example]({% slug disabled_datetimepicker %})).
      * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_datetimepicker#toc-managing-the-datetimepicker-disabled-state-in-reactive-forms).
+     * @default false
      */
     disabled = false;
     /**
-     * Sets the read-only state of the DateTimePicker
+     * Specifies the read-only state of the DateTimePicker
      * ([see example]({% slug readonly_datetimepicker %}#toc-read-only-datetimepicker)).
+     * @default false
      *
      * @default false
      */
     readonly = false;
     /**
-     * Sets the read-only state of the DateTimePicker input field
+     * Determines whether the input field of the DateTimePicker is read-only
      * ([see example]({% slug readonly_datetimepicker %}#toc-read-only-input)).
      *
-     * > Note that if you set the [`readonly`]({% slug api_dateinputs_datetimepickercomponent %}#toc-readonly) property value to `true`,
+     * If you set the [`readonly`]({% slug api_dateinputs_datetimepickercomponent %}#toc-readonly) property value to `true`,
      * the input will be rendered in a read-only state regardless of the `readOnlyInput` value.
+     *
+     * @default false
      */
     readOnlyInput = false;
     /**
      * Determines whether to display the **Cancel** button in the popup
      * ([see example]({% slug datetimepicker_popup_options %}#toc-toggling-the-cancel-button)).
+     * @default true
      */
     cancelButton = true;
     /**
@@ -15691,17 +15529,14 @@ class DateTimePickerComponent extends MultiTabStop {
     /**
      * Specifies the Calendar type.
      *
-     * The possible values are:
-     * - `infinite` (default)
-     * - `classic`
-     *
+     * @default 'infinite'
      */
     calendarType = 'infinite';
     /**
      * Determines whether to enable animation when navigating to previous/next Calendar view.
      * Applies to the [`classic`]({% slug api_dateinputs_datetimepickercomponent %}#toc-calendartype) Calendar only.
      *
-     * > This feature uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). In order to run the animation in browsers that do not support it, you need the `web-animations-js` polyfill.
+     * The feature uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). In order to run the animation in browsers that do not support it, you need the `web-animations-js` polyfill.
      *
      * @default false
      */
@@ -15709,6 +15544,7 @@ class DateTimePickerComponent extends MultiTabStop {
     /**
      * Determines whether to display a week number column in the `month` view of the popup Calendar
      * ([see example]({% slug datetimepicker_calendar_options %}#toc-week-number-column)).
+     * @default false
      */
     weekNumber = false;
     /**
@@ -15740,24 +15576,25 @@ class DateTimePickerComponent extends MultiTabStop {
         return this._max;
     }
     /**
-     * Determines whether the built-in min or max validators are enforced when validating a form
+     * Determines whether the built-in `min` or `max` validators are enforced when validating a form
      * ([see example](slug:dateranges_datetimepicker)).
      *
      * @default true
      */
     rangeValidation = true;
     /**
-     * Determines whether the built-in validator for disabled
-     * date ranges is enforced when validating a form
+     * Determines whether the built-in validator for disabled date ranges is enforced when validating a form
      * ([see example](slug:disabled_dates_datetimepicker)).
+     * @default true
      */
     disabledDatesValidation = true;
     /**
-     * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
+     * Determines whether the built-in validation for incomplete dates is enforced when validating a form.
+     * @default false
      */
     incompleteDateValidation = false;
     /**
-     * Determines whether to autocorrect invalid segments automatically.
+     * Determines whether to auto correct invalid segments automatically.
      *
      * @default true
      */
@@ -15769,39 +15606,40 @@ class DateTimePickerComponent extends MultiTabStop {
      */
     autoSwitchParts = true;
     /**
-     * A string array representing custom keys, which will move the focus to the next date format segment.
+     * Specifies custom keys that move the focus to the next date format segment.
      */
     autoSwitchKeys = [];
     /**
-     * Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
+     * Determines whether you can use the mouse scroll to increase or decrease the time segment values.
      *
      * @default true
      */
     enableMouseWheel = true;
     /**
-     * Determines if the users should see a blinking caret inside the Date Input when possible.
+     * Determines whether you can see a blinking caret inside the DateInput when possible.
      *
      * @default false
      */
     allowCaretMode = false;
     /**
-     * If set to `true`, renders a clear button after the input text or DateTimePicker value has been changed.
+     * 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;
     /**
-     * When enabled, the DateTimePicker will autofill the rest of the date to the current date when the component loses focus.
+     * Auto fills the rest of the date to the current date when the component loses focus.
      *
      * @default false
      */
     autoFill = false;
     /**
-     * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
+     * Enables or disables the adaptive mode. The adaptive rendering is disabled by default.
+     * @default 'none'
      */
     adaptiveMode = 'none';
     /**
-     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     * Specifies the HTML attributes of the inner focusable input element. You cannot change attributes that are essential for certain component functionalities.
      */
     inputAttributes;
     /**
@@ -15836,7 +15674,7 @@ class DateTimePickerComponent extends MultiTabStop {
      */
     escape = new EventEmitter();
     /**
-     * Indicates whether the component is currently open. That is when the popup or actionSheet is open.
+     * Indicates whether the component is currently open. This is when the popup or action sheet is open.
      */
     get isOpen() {
         return this.actionSheet?.expanded || isPresent(this.popupRef);
@@ -15857,7 +15695,7 @@ class DateTimePickerComponent extends MultiTabStop {
         this._isActive = value;
     }
     /**
-     * Sets the active tab on opening the popup
+     * Specifies the active tab when opening the popup
      * ([see example]({% slug datetimepicker_popup_options %}#toc-setting-the-default-tab)).
      */
     set defaultTab(tab) {
@@ -15868,19 +15706,13 @@ class DateTimePickerComponent extends MultiTabStop {
         return this._defaultTab;
     }
     /**
-     * Sets the size of the component.
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
-     * * `none`
+     * Specifies the size of the component.
      *
      */
     set size(size) {
         this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
         this.renderer.removeClass(this.toggleButton.nativeElement, getSizeClass('button', this.size));
-        const newSize = size ? size : DEFAULT_SIZE;
+        const newSize = size || DEFAULT_SIZE;
         if (newSize !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', newSize));
             this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('button', newSize));
@@ -15891,19 +15723,12 @@ class DateTimePickerComponent extends MultiTabStop {
         return this._size;
     }
     /**
-     * Sets the border radius of the component.
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
-     * * `full`
-     * * `none`
+     * Specifies the border radius of the component.
      *
      */
     set rounded(rounded) {
         this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        const newRounded = rounded || DEFAULT_ROUNDED;
         if (newRounded !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(newRounded));
         }
@@ -15913,20 +15738,14 @@ class DateTimePickerComponent extends MultiTabStop {
         return this._rounded;
     }
     /**
-     * Sets the fillMode of the component.
-     *
-     * The possible values are:
-     * * `solid` (Default)
-     * * `flat`
-     * * `outline`
-     * * `none`
+     * Specifies the fill mode of the component.
      *
      */
     set fillMode(fillMode) {
         this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
         this.renderer.removeClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
         this.renderer.removeClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
-        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        const newFillMode = fillMode || DEFAULT_FILL_MODE;
         if (newFillMode !== 'none') {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', newFillMode));
             this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', newFillMode));
@@ -16247,8 +16066,8 @@ class DateTimePickerComponent extends MultiTabStop {
         this.subscriptions.unsubscribe();
     }
     /**
-     * * If the popup is closed, focuses the DateTimePicker input.
-     * * If the popup is open, the focus is moved to its content.
+     * Focuses the DateTimePicker input if the popup is closed.
+     * Moves the focus to the popup content if the popup is open.
      */
     focus() {
         if (this.disabled) {
@@ -16262,7 +16081,7 @@ class DateTimePickerComponent extends MultiTabStop {
         }
     }
     /**
-     * Blurs the DateTimePicker.
+     * Blurs the DateTimePicker component.
      */
     blur() {
         if (this.isOpen && this.activeTabComponent.isActive) {
@@ -16273,8 +16092,8 @@ class DateTimePickerComponent extends MultiTabStop {
         }
     }
     /**
-     * Toggles the visibility of the popup or actionSheet.
-     * If you use the `toggle` method to show or hide the popup or actionSheet,
+     * Toggles the visibility of the popup or action sheet.
+     * If you use the `toggle` method to show or hide the popup or action sheet,
      * the `open` and `close` events do not fire.
      *
      * @param show - The state of the popup.
@@ -16682,10 +16501,10 @@ class DateTimePickerComponent extends MultiTabStop {
         }
     }
     /**
-     * Extracts the time slots and the literals that are not preceded by date parts
-     * and concatenates the resulting parts into a string.
-     * If the provided format value does not contain any time parts,
-     * returns the designated format of the default popup component of the TimePicker.
+     * Extracts the time slots and literals that are not preceded by date parts
+     * and combines the resulting parts into a string.
+     * If the provided `format` value does not contain any time parts,
+     * returns the designated format of the default popup component of the `TimePicker`.
      */
     getTimeSelectorFormat(format) {
         const timeSelectorFormat = this.intl
@@ -16696,7 +16515,7 @@ class DateTimePickerComponent extends MultiTabStop {
     }
     /**
      * Extracts the `displayFormat` from the provided `string | FormatSettings` value.
-     * Fallbacks to the default input value, if a falsy value param is passed.
+     * Falls back to the default input value if a falsy value parameter is passed.
      */
     getDisplayFormat(format) {
         if (!format) {
@@ -16712,7 +16531,7 @@ class DateTimePickerComponent extends MultiTabStop {
     /**
      * The filter expression that filters out all format parts
      * except for `hour`, `minute`, `second`, `dayperiod`, and specific literals.
-     * Literals will be left only if they are not preceded by date parts.
+     * Literals remain only if they are not preceded by date parts.
      */
     timeFormatPartFilter(part, index, parts) {
         const previousPart = index >= 1 && parts[index - 1];
@@ -16822,8 +16641,8 @@ class DateTimePickerComponent extends MultiTabStop {
         this.valueChange.emit(cloneDate(value));
     }
     /**
-     * Indicates whether the focus target is part of this component,
-     * that is, whether the focus target is inside the component or in the popup.
+     * Indicates whether the focus target is part of this component.
+     * Checks whether the focus target is inside the component or in the popup.
      */
     focusTargetInComponent(event) {
         if (!isPresent(event)) {
@@ -16846,7 +16665,7 @@ class DateTimePickerComponent extends MultiTabStop {
         this.calendarValue = isInCalendarRange ? getDate(value) : null;
     }
     /**
-     * If the popup is available, runs a popup change detection.
+     * Runs a popup change detection if the popup is available.
      */
     detectPopupChanges() {
         if (!this.isOpen || this.isAdaptive) {
@@ -16855,8 +16674,8 @@ class DateTimePickerComponent extends MultiTabStop {
         this.popupRef.popup.changeDetectorRef.detectChanges();
     }
     /**
-     * Depending on the predicate `runInZone` value that is passed,
-     * runs the provided function either in the Angular or in the current zone.
+     * Runs the provided function either in the Angular zone or in the current zone.
+     * The execution zone depends on the predicate `runInZone` value that is passed.
      */
     run(runInZone, fn) {
         if (runInZone) {
@@ -17903,8 +17722,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.IntlService }]; } });
 
 /**
- * A directive which renders the content of the DateRange Popup. To define the cell template, nest an
- * `<ng-template>` tag with the `kendoRangePopupTemplate` directive inside the component tag.
+ * Renders the content of the DateRange Popup.
+ * To define the popup template, nest an `<ng-template>` tag with the `kendoDateRangePopupTemplate` directive inside the component tag.
+ *
+ * @example
+ * ```html
+ * <kendo-daterange>
+ *   <ng-template kendoDateRangePopupTemplate>
+ *    <div class="custom-popup-content">
+ *      Custom content for the DateRange Popup
+ *    </div>
+ *   </ng-template>
+ * </kendo-daterange>
+ * ```
  */
 class DateRangePopupTemplateDirective {
     templateRef;
@@ -17925,35 +17755,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 const isActive = (cmp) => (cmp && cmp.isActive) || false;
 const hasActiveContent = (popup) => popup && popup.hasActiveContent();
 /**
- * A service that handles the communication between the components that are placed inside the DateRangeComponent.
- * For example, the start and end `DateInput` and `DateRangePopup` components.
+ * Manages communication between components inside the DateRangeComponent.
+ * For example, handles interactions between the start and end DateInput components and the DateRangePopup component.
  */
 class DateRangeService {
     renderer;
     /**
-     * An Observable instance that notifies when the `activeRangeEnd` state is changed.
+     * Notifies when the `activeRangeEnd` state changes.
      */
     activeRangeEnd$ = new BehaviorSubject(null);
     /**
-     * An Observable instance that notifies when the `focusedDate` is changed.
+     * Notifies when the `focusedDate` changes.
      */
     focusedDate$ = new BehaviorSubject(null);
     /**
-     * An Observable instance that notifies when the end `DateInput` component is changed.
-     * For example, when a new end `DateInput` is attached or when the old one is detached.
+     * Notifies when the end DateInput component changes.
+     * For example, when you attach a new end `DateInput` or detach the old one.
      */
     endInput$ = new BehaviorSubject(null);
     /**
-     * An Observable instance that notifies when the start `DateInput` component is changed.
-     * For example, when a new start `DateInput` is attached or the old one is detached.
+     * Notifies when the start DateInput component changes.
+     * For example, when you attach a new start `DateInput` or detach the old one.
      */
     startInput$ = new BehaviorSubject(null);
     /**
-     * An Observable instance that notifies when the `DateRangePopup` component is changed.
+     * Notifies when the `DateRangePopup` component changes.
      */
     dateRangePopup$ = new BehaviorSubject(null);
     /**
-     * An Observable instance that notifies when the state of the selection range is changed.
+     * Notifies when the selection range state changes.
      */
     range$ = new BehaviorSubject(EMPTY_SELECTIONRANGE);
     /**
@@ -17969,15 +17799,15 @@ class DateRangeService {
         return this.focusedDate$.value;
     }
     /**
-     * Gets the `min` range value.
-     * The `min` value is extracted from the `start` DateInput value or the `min` value of the Calendar.
+     * Gets the minimum range value.
+     * Takes the `min` value from the start DateInput component or the `min` value of the calendar.
      */
     get min() {
         return (this.startInput$.value || {}).min || null;
     }
     /**
-     * Gets the `max` range value.
-     * The `max` value is extracted from the `end` DateInput value or the `max` value of the Calendar.
+     * Gets the maximum range value.
+     * Takes the `max` value from the end DateInput component or the `max` value of the calendar.
      */
     get max() {
         return (this.endInput$.value || {}).max || null;
@@ -18007,8 +17837,8 @@ class DateRangeService {
         this.renderer = renderer;
     }
     /**
-     * Activates the registered `DateRangePopup` component.
-     * The method opens the popup and focuses the calendar.
+     * Opens the registered DateRangePopup component.
+     * Opens the popup and focuses the calendar.
      */
     activatePopup() {
         const dateRangePopup = this.dateRangePopup$.value;
@@ -18063,8 +17893,8 @@ class DateRangeService {
         dateRangePopup.cancelPopup();
     }
     /**
-     * Completes all observables to mitigate possible memory leaks.
-     * Calls the method when a component that uses it is destroyed.
+     * Completes all observables to prevent memory leaks.
+     * Call this method when you destroy a component that uses the service.
      */
     destroy() {
         this.activeRangeEnd$.complete();
@@ -18075,10 +17905,10 @@ class DateRangeService {
         this.range$.complete();
     }
     /**
-     * Returns `true` when an active component that is placed inside the `DateRangeComponent` is detected.
-     * For example, the opened popup or the focused DateInput.
+     * Checks if any component inside the DateRangeComponent is active.
+     * For example, detects an open popup or a focused DateInput component.
      *
-     * @returns `true` if an active component is present.
+     * @returns {boolean} Returns `true` if an active component is present.
      */
     hasActiveComponent() {
         const popup = this.dateRangePopup$.value;
@@ -18088,25 +17918,25 @@ class DateRangeService {
         return isPopup || isStart || isEnd || hasActiveContent(popup) || false;
     }
     /**
-     * Registers a new start `DateInput` component. Notifies all `startInput$` listeners.
+     * Registers a new start DateInput component and notifies all `startInput$` listeners.
      */
     registerStartInput(startInput) {
         this.startInput$.next(startInput);
     }
     /**
-     * Registers a new end `DateInput` component. Notifies all `endInput$` listeners.
+     * Registers a new end `DateInput` component and notifies all `endInput$` listeners.
      */
     registerEndInput(endInput) {
         this.endInput$.next(endInput);
     }
     /**
-     * Registers a new `DateRangePopup` component. Notifies all `dateRangePopup$` listeners.
+     * Registers a new `DateRangePopup` component and notifies all `dateRangePopup$` listeners.
      */
     registerPopup(dateRangePopup) {
         this.dateRangePopup$.next(dateRangePopup);
     }
     /**
-     * Updates the `activeRangeEnd` value. Notifies all `activeRangeEnd$` listeners.
+     * Updates the `activeRangeEnd` value and notifies all `activeRangeEnd$` listeners.
      */
     setActiveRangeEnd(activeRange) {
         if (!activeRange || this.activeRangeEnd === activeRange) {
@@ -18115,7 +17945,7 @@ class DateRangeService {
         this.activeRangeEnd$.next(activeRange);
     }
     /**
-     * Updates the focused date. Notifies all `focusedDate$` listeners.
+     * Updates the focused date and notifies all `focusedDate$` listeners.
      */
     setFocusedDate(value) {
         if (isEqual(this.focusedDate$.value, value)) {
@@ -18124,7 +17954,7 @@ class DateRangeService {
         this.focusedDate$.next(value);
     }
     /**
-     * Updates the selection range. Notifies all `range$` listeners.
+     * Updates the selection range and notifies all `range$` listeners.
      */
     setRange(range = EMPTY_SELECTIONRANGE) {
         this.range$.next(range);
@@ -18139,9 +17969,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 /**
- * A directive which manages the MultiViewCalendar range selection.
+ * Manages the MultiViewCalendar range selection.
  * This directive will be `deprecated` in a future version.
- * We recommend using the MultiViewCalendar [range selection]({% slug selection_multiviewcalendar %}#toc-range-selection).
+ * Use the MultiViewCalendar [range selection]({% slug selection_multiviewcalendar %}#toc-range-selection) instead.
  */
 class DateRangeSelectionDirective {
     calendar;
@@ -18150,15 +17980,17 @@ class DateRangeSelectionDirective {
     dateRangeService;
     /**
      * Specifies the auto-correction behavior. If the start date is greater than the end date,
-     * the directive fixes the date range to a single date either on input change or on blur
+     * the directive corrects the date range to a single date either on input change or on blur
      * ([see example](slug:autocorrect_daterange#toc-calendar-selection-directive)).
      *
-     * By default, the auto-correction is triggered on change.
+     * By default, the auto-correction triggers on change.
      * To disable this behavior, set the `autoCorrectOn` property to `none`.
+     *
+     * @default 'change'
      */
     autoCorrectOn = 'change';
     /**
-     * Gets or sets the selection range of the calendar. When a new range is set,
+     * Gets or sets the selection range of the calendar. When you set a new range,
      * the connected DateRangeService notifies all related parties.
      */
     get selectionRange() {
@@ -18178,8 +18010,7 @@ class DateRangeSelectionDirective {
      * user interaction. When a new active end is set, the connected DateRangeService notifies all related parties.
      */
     /**
-     * Specifies which end of the selection range will be marked as active. The active end gets modified upon user
-     * interaction. When a new active end is set, the wired DateRangeService notifies all related components. For
+     * Specifies which end of the selection range is marked as active. The active end gets modified when you interact with the component. When you set a new active end, the wired DateRangeService notifies all related components. For
      * example, the start and end DateInput components.
      *
      * > If the selection range is undefined, the value is ignored.
@@ -18200,12 +18031,12 @@ class DateRangeSelectionDirective {
      */
     shouldSetRange = true;
     /**
-     * Fires when the active range end is changed. For more information, refer to
+     * Fires when the active range end changes. For more information, refer to
      * the section on [events](slug:events_multiviewcalendar).
      */
     activeRangeEndChange = new EventEmitter();
     /**
-     * Fires when the selection range is changed. For more information, refer to
+     * Fires when the selection range changes. For more information, refer to
      * the section on [events](slug:events_multiviewcalendar).
      */
     selectionRangeChange = new EventEmitter();
@@ -18465,140 +18296,161 @@ class DateRangePopupComponent {
      */
     showCalendarHeader = true;
     /**
-     * Sets or gets the `focusedDate` property of the MultiViewCalendar and
-     * defines the focused date of the component
-     * ([see example]({% slug dates_multiviewcalendar %}#toc-focused-dates)).
+     * Specifies the focused date of the MultiViewCalendar component.
+     * Defines which date receives focus when the component loads ([see example]({% slug dates_multiviewcalendar %}#toc-focused-dates)).
      *
-     * > If the MultiViewCalendar is out of the min or max range, it normalizes the defined `focusedDate`.
+     * If the MultiViewCalendar is out of the min or max range, it normalizes the defined `focusedDate`.
      */
     focusedDate;
     /**
-     * Sets the dates of the MultiViewCalendar that will be disabled
-     * ([see example]({% slug disabled_dates_multiviewcalendar %})).
+     * Specifies the dates in the MultiViewCalendar that you want to disable ([see example]({% slug disabled_dates_multiviewcalendar %})).
      */
     disabledDates;
     /**
-     * Defines the active view that the MultiViewCalendar initially renders
-     * ([see example]({% slug viewoptions_multiviewcalendar %})).
+     * Specifies the initial view that the MultiViewCalendar displays when it loads ([see example]({% slug viewoptions_multiviewcalendar %})).
      * By default, the active view is `month`.
      *
-     * > You have to set `activeView` within the `topView`-`bottomView` range.
+     * You have to set `activeView` within the `topView`-`bottomView` range.
+     *
+     * @default 'month
      */
     activeView = CalendarViewEnum[CalendarViewEnum.month];
     /**
-     * Defines the bottommost view, to which the user can navigate
-     * ([see example](slug:viewdepth_multiviewcalendar)).
+     * Specifies the lowest view level that users can navigate to ([see example](slug:viewdepth_multiviewcalendar)).
+     *
+     * @default 'month'
      */
     bottomView = CalendarViewEnum[CalendarViewEnum.month];
     /**
-     * Defines the topmost view, to which the user can navigate.
+     * Specifies the highest view level that users can navigate to ([see example](slug:viewdepth_multiviewcalendar)).
+     *
+     * @default 'century'
      */
     topView = CalendarViewEnum[CalendarViewEnum.century];
     /**
-     * Sets or gets the `min` property of the MultiViewCalendar and
-     * defines the minimum allowed date value.
-     * By default, the `min` value is `1900-1-1`.
+     * Specifies the minimum date that users can select ([see example]({% slug dates_multiviewcalendar %}#toc-focused-dates)).
+     *
+     * @default '1900-01-01'
      */
     min;
     /**
-     * Sets or gets the `max` property of the MultiViewCalendar and
-     * defines the maximum allowed date value.
-     * By default, the `max` value is `2099-12-31`.
+     * Specifies the maximum date that users can select ([see example]({% slug dates_multiviewcalendar %}#toc-focused-dates)).
+     *
+     * @default '2099-12-31'
      */
     max;
     /**
-     * Allows reverse selection.
-     * If `allowReverse` is set to `true`, the component skips the validation of whether the start date is after the end date.
+     * 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;
     /**
-     * Determines whether to enable animation when navigating to previous/next view.
+     * Determines whether to animate transitions when users navigate between views.
+     *
      * @default false
      */
     animateNavigation = false;
     /**
-     * Sets or gets the `disabled` property of the MultiViewCalendar and
-     * determines whether the component is active
-     * ([see example]({% slug disabled_multiviewcalendar %})).
+     * Determines whether the MultiViewCalendar is interactive ([see example]({% slug disabled_multiviewcalendar %})).
+     * When you set `disabled` to `true`, users cannot interact with the component.
+     *
+     * @default false
      */
     disabled = false;
     /**
-     * Sets or gets the `views` property of the MultiViewCalendar and
-     * defines the number of rendered months.
+     * Specifies the number of calendar views to display side by side.
      *
      * @default 2
      */
     views = 2;
     /**
-     * Determines whether to display a week number column in the `month` view
-     * ([see example]({% slug weeknumcolumn_multiviewcalendar %})).
+     * Determines whether to display week numbers in the `month` view ([see example]({% slug weeknumcolumn_multiviewcalendar %})).
+     *
+     * @default false
      */
     weekNumber = false;
     /**
-     * Controls the popup animation.
-     * By default, the opening and closing animations are enabled.
+     * Controls the popup animations.
+     * When you set `animate` to `true`, the popup displays opening and closing animations.
      * For more information about controlling the popup animations,
      * refer to the article on [animations]({% slug animations_popup %}).
+     *
+     * @default true
      */
     animate = true;
     /**
-     * Specifies the element that will be used as an anchor. The popup opens next to that element.
+     * 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]({% slug alignmentpositioning_popup %}#toc-aligning-to-components).
      */
     anchor;
     /**
-     * Specifies the anchor pivot point.
+     * Specifies the alignment point for the anchor element.
      * For more information, refer to the section on
      * [positioning]({% slug alignmentpositioning_popup %}#toc-positioning).
      */
     anchorAlign;
     /**
-     * Determines whether to display a header for every view (for example the month name).
+     * Determines whether to display a header for each view ([see example]({% slug viewheader_multiviewcalendar %})).
+     * For example, displays the month name in the month view.
      *
      * @default false
      */
     showViewHeader = false;
     /**
-     * Displays the days that fall out of the current month ([see example]({% slug viewoptions_multiviewcalendar %}#toc-displaying-other-month-days)).
+     * Determines whether to display days from adjacent months in the current month view ([see example]({% slug viewoptions_multiviewcalendar %}#toc-displaying-other-month-days)).
+     *
      * @default false
      */
     showOtherMonthDays = false;
     /**
-     * Controls the popup container. By default, the popup is appended to the root component.
+     * Specifies where to render the popup container.
+     * By default, the popup renders in the root component.
+     *
+     * @default 'root'
      */
     appendTo;
     /**
-     * Configures the collision behavior of the popup.
+     * Configures how the popup behaves when it encounters viewport boundaries.
      * For more information, refer to the article on
      * [viewport boundary detection]({% slug viewportboundarydetection_popup %}).
+     *
+     * @default { horizontal: 'fit', vertical: 'flip' }
      */
     collision = { horizontal: 'fit', vertical: 'flip' };
     /**
-     * Specifies the pivot point of the popup.
+     * Specifies the alignment point for the popup element.
      * For more information, refer to the section on
      * [positioning]({% slug alignmentpositioning_popup %}#toc-positioning).
      */
     popupAlign;
     /**
-     * Specifies the margin value that will be added to the popup dimensions in pixels
-     * and leaves a blank space between the popup and the anchor.
+     * Specifies the margin around the popup in pixels.
+     * Creates empty space between the popup and its anchor element.
      */
     margin;
     /**
-     * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
+     * Determines whether the component uses adaptive rendering for different screen sizes.
+     * By default, adaptive rendering is disabled.
+     *
+     * @default 'none'
      */
     adaptiveMode = 'none';
     /**
-     * Sets the title of the input element of the DateRangePopup and the title text rendered
-     * in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     * Specifies the title text for the input element and the header of the action sheet.
+     * Applies only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     *
+     * @default ""
      */
     adaptiveTitle = "";
     /**
-     * Sets the subtitle text rendered in the header of the popup(action sheet).
-     * Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     * Specifies the subtitle text displayed in the header of the action sheet.
+     * Applies only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     *
+     * @default ""
      */
     adaptiveSubtitle = "";
     /**
@@ -18606,46 +18458,35 @@ class DateRangePopupComponent {
      *
      * TODO: Make visible when the Infinite Calendar is fixed to set properly the size option.
      * Sets the size of the component.
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
-     * * `none`
-     *
+     * @default 'medium'
      */
     size;
     /**
-     * Fires each time the popup is about to open
-     * ([see example](slug:popup_daterange#toc-events)).
-     * This event is preventable. If you cancel the event, the popup will remain closed.
+     * Fires when the popup is about to open ([see example](slug:popup_daterange#toc-events)).
+     * You can prevent this event to keep the popup closed.
      */
     open = new EventEmitter();
     /**
-     * Fires each time the popup is about to close
-     * ([see example](slug:popup_daterange#toc-events)).
-     * This event is preventable. If you cancel the event, the popup will remain open.
+     * Fires when the popup is about to close ([see example](slug:popup_daterange#toc-events)).
+     * You can prevent this event to keep the popup open.
      */
     close = new EventEmitter();
     /**
-     * Fires each time the calendar element is blurred
-     * ([see example](slug:popup_daterange#toc-events)).
+     * Fires when the calendar element loses focus ([see example](slug:popup_daterange#toc-events)).
      */
     onBlur = new EventEmitter();
     /**
-     * Fires each time the calendar element is focused
-     * ([see example](slug:popup_daterange#toc-events)).
+     * Fires when the calendar element receives focus ([see example](slug:popup_daterange#toc-events)).
      */
     onFocus = new EventEmitter();
     /**
-     * Fires each time the popup is closed either on `ESC` keypress or on leaving the viewport
-     * ([see example](slug:popup_daterange#toc-events)).
+     * Fires when the popup closes due to an `ESC` keypress or when it leaves the viewport ([see example](slug:popup_daterange#toc-events)).
      */
     cancel = new EventEmitter();
     /**
-     * The active calendar that is visible in the popup
+     * Gets the active calendar that displays in the popup.
      *
-     * > When the popup is closed, the property returns `null`.
+     * When the popup is closed, the property returns `null`.
      */
     get calendar() {
         return this._calendar;
@@ -18656,7 +18497,7 @@ class DateRangePopupComponent {
     }
     /**
      * Gets the active state of the component.
-     * When the opened calendar is active, returns `true`.
+     * Returns `true` when the opened calendar is active.
      */
     get isActive() {
         // The actionsheet is expanding before the calendar gets activated
@@ -18804,7 +18645,7 @@ class DateRangePopupComponent {
         }
     }
     /**
-     *  Opens the popup component and focuses the calendar.
+     * Opens the popup component and focuses the calendar.
      */
     activate() {
         if (this.show === true) {
@@ -18823,7 +18664,7 @@ class DateRangePopupComponent {
         });
     }
     /**
-     *  Focuses the calendar (if available).
+     * Focuses the calendar if it is available.
      */
     focus() {
         if (this.calendar) {
@@ -18831,9 +18672,9 @@ class DateRangePopupComponent {
         }
     }
     /**
-     * Checks if a focused element ids placed inside the popup.
+     * Checks if a focused element is inside the popup.
      *
-     * @return boolean;
+     * @returns {boolean} Returns `true` if the focused element is inside the popup.
      */
     hasActiveContent() {
         if (!isDocumentAvailable() || !this.popupRef) {
@@ -18842,11 +18683,11 @@ class DateRangePopupComponent {
         return this.popupRef.popupElement.contains(document.activeElement);
     }
     /**
-     * Toggles the visibility of the popup or actionSheet.
-     * If you use the `toggle` method to show or hide the popup or actionSheet,
+     * Toggles the visibility of the popup or action sheet.
+     * When you use the `toggle` method to show or hide the popup or action sheet,
      * the `open` and `close` events do not fire.
      *
-     * @param show The state of the popup.
+     * @param {boolean} show The state of the popup.
      */
     toggle(show) {
         this.resolvedPromise.then(() => {
@@ -19444,6 +19285,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  *   public dateRange: any = { start: null, end: null };
  * }
  * ```
+ *
+ * @remarks
+ * Supported children components are: {@link DateRangePopupComponent}, {@link DateRangePopupCustomMessagesComponent}, {@link DateInputComponent}.
  */
 class DateRangeComponent {
     dateRangeService;
@@ -19453,12 +19297,7 @@ class DateRangeComponent {
      * TODO: Make visible when the Infinite Calendar is fixed to set properly the size option.
      * Sets the size of the component.
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
-     * * `none`
-     *
+     * @default 'medium'
      */
     size;
     /**
@@ -19652,44 +19491,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: undefined }, { type: DateRangeService }, { type: DateInputComponent }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; } });
 
 /**
- * A directive which manages the end range selection.
+ * Manages the end date selection in a date range.
+ *
+ * You can use the `DateRangeEndInputDirective` only with a DateInput component.
  *
- * > You can use the DateRangeEndInputDirective only with a DateInput component.
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-daterange>
+ *       <kendo-dateinput kendoDateRangeStartInput [(value)]="startDate"></kendo-dateinput>
+ *       <kendo-dateinput kendoDateRangeEndInput [(value)]="endDate"></kendo-dateinput>
+ *     </kendo-daterange>
+ *   `
+ * })
+ * export class AppComponent {
+ *   public startDate: Date = new Date();
+ *   public endDate: Date = new Date();
+ * }
+ * ```
+ *
+ * @remarks
+ * Applied to: {@link DateInputComponent}
  */
 class DateRangeEndInputDirective extends DateRangeInput {
     rangeService;
     dateInput;
     /**
-     * Specifies the auto-correction behavior. If the start date is greater than the end date, the
-     * directive fixes the date range to a single date either on input change or on blur
-     * ([see example](slug:autocorrect_daterange#toc-input-directives)).
+     * Specifies the auto-correction behavior. If the start date is greater than the end date, the directive fixes the date range to a single date either on input change or on blur ([see example](slug:autocorrect_daterange#toc-input-directives)).
      *
      * By default, the component does not perform any auto-correction.
+     *
      */
     autoCorrectOn;
     /**
      * Specifies the navigation behavior of the calendar when the active end is changed on input focus. When enabled,
      * the calendar navigates to the value of the focused input. Otherwise, the calendar displays the last picked date.
      *
-     * By default, the automatic navigation behavior on input focus is disabled.
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <h5>Toggle input focus to see the calendar navigating between range ends.</h5>
-     *  <kendo-daterange>
-     *      <kendo-dateinput kendoDateRangeStartInput [navigateCalendarOnFocus]="true" [(value)]="start"></kendo-dateinput>
-     *      <kendo-dateinput kendoDateRangeEndInput [navigateCalendarOnFocus]="true" [(value)]="end"></kendo-dateinput>
-     *  </kendo-daterange>
-     * `
-     * })
-     * export class AppComponent {
-     *   public start: Date = new Date(2018, 3, 10);
-     *   public end: Date = new Date(2018, 10, 20);
-     * }
-     * ```
+     * @default false
      */
     navigateCalendarOnFocus = false;
     constructor(rangeService, dateInput, element, renderer, zone) {
@@ -19742,46 +19582,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * A directive which manages the start selection range.
+ * Represents a directive that manages the start selection range for date range inputs.
+ *
+ * You can use the DateRangeStartInputDirective only with a DateInput component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-daterange>
+ *       <kendo-dateinput kendoDateRangeStartInput [(value)]="startDate"></kendo-dateinput>
+ *       <kendo-dateinput kendoDateRangeEndInput [(value)]="endDate"></kendo-dateinput>
+ *     </kendo-daterange>
+ *   `
+ * })
+ * export class AppComponent {
+ *   public startDate: Date = new Date();
+ *   public endDate: Date = new Date();
+ * }
+ * ```
  *
- * > You can use the DateRangeStartInputDirective only with a DateInput component.
+ * @remarks
+ * Applied to: {@link DateInputComponent}
  */
 class DateRangeStartInputDirective extends DateRangeInput {
     rangeService;
     dateInput;
     renderer;
     /**
-     * Specifies the auto-correction behavior. If the start date is greater than the end date,
-     * the directive fixes the date range to a single date either on input change or on blur
-     * ([see example](slug:autocorrect_daterange#toc-input-directives)).
+     * Specifies when the component automatically corrects invalid date ranges.
+     * When the start date is greater than the end date, the component fixes the range to a single date either on input change or on blur ([see example](slug:autocorrect_daterange#toc-input-directives)).
      *
      * By default, the component does not perform any auto-correction.
+     *
      */
     autoCorrectOn;
     /**
-     * Specifies the navigation behavior of the calendar when the active end is changed on input focus.
-     * When enabled, the calendar navigates to the value of the focused input. Otherwise, the calendar
-     * displays the last picked date.
+     * Determines how the calendar navigates when you focus on the input.
+     * When you set `navigateCalendarOnFocus` to `true`, the calendar moves to the value of the focused input.
+     * When you set it to `false`, the calendar shows the last selected date.
      *
-     * By default, the automatic navigation behavior on input focus is disabled.
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <h5>Toggle input focus to see the calendar navigating between range ends.</h5>
-     *  <kendo-daterange>
-     *      <kendo-dateinput kendoDateRangeStartInput [navigateCalendarOnFocus]="true" [(value)]="start"></kendo-dateinput>
-     *      <kendo-dateinput kendoDateRangeEndInput [navigateCalendarOnFocus]="true" [(value)]="end"></kendo-dateinput>
-     *  </kendo-daterange>
-     * `
-     * })
-     * export class AppComponent {
-     *   public start: Date = new Date(2018, 3, 10);
-     *   public end: Date = new Date(2018, 10, 20);
-     * }
-     * ```
+     * @default false
      */
     navigateCalendarOnFocus = false;
     constructor(rangeService, dateInput, element, renderer, zone) {
@@ -19835,7 +19677,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Custom component messages override default component messages ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
+ * Allows you to override the default localization messages of the DatePicker component ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
+ *
+ * @example
+ * ```html
+ * <kendo-datepicker>
+ *   <kendo-datepicker-messages
+ *     today="Today"
+ *     toggle="Open calendar">
+ *   </kendo-datepicker-messages>
+ * </kendo-datepicker>
+ * ```
  */
 class DatePickerCustomMessagesComponent extends DatePickerMessages {
     service;
@@ -19905,7 +19757,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
 /**
- * Custom component messages override default component messages ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
+ * Allows you to override the default messages of the DateTimePicker component ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
+ *
+ * @example
+ * ```html
+ * <kendo-datetimepicker>
+ *   <kendo-datetimepicker-messages
+ *     toggle="Open calendar">
+ *   </kendo-datetimepicker-messages>
+ * </kendo-datetimepicker>
+ * ```
  */
 class DateTimePickerCustomMessagesComponent extends DateTimePickerMessages {
     service;
@@ -19940,7 +19801,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
 /**
- * Custom component messages override default component messages ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
+ * Represents the Kendo UI TimePicker custom messages component for Angular. Allows you to override default component messages ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
+ *
+ * @example
+ * ```html
+ * <kendo-timepicker>
+ *   <kendo-timepicker-messages
+ *     accept="Apply"
+ *     cancel="Close"
+ *     now="Current time">
+ *   </kendo-timepicker-messages>
+ * </kendo-timepicker>
+ * ```
  */
 class TimePickerCustomMessagesComponent extends TimePickerMessages {
     service;
@@ -20089,7 +19961,7 @@ const KENDO_DATEINPUTS = [
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * The exported package module.
+ * Required for adding all Calendar features in NgModule-based Angular applications.
  *
  * The package exports:
  * - `CellTemplateDirective`&mdash;The month cell template directive.
@@ -20103,29 +19975,18 @@ const KENDO_DATEINPUTS = [
  *
  * @example
  *
- * ```ts-no-run
- * // Import the Calendar module
- * import { CalendarModule } from '@progress/kendo-angular-dateinputs';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
+ * ```typescript
  * import { NgModule } from '@angular/core';
+ * import { BrowserModule } from '@angular/platform-browser';
+ * import { CalendarModule } from '@progress/kendo-angular-dateinputs';
  *
- * // Import the app component
- * import { AppComponent } from './app.component';
- *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, CalendarModule], // import Calendar module
- *     bootstrap:    [AppComponent]
+ * @NgModule({
+ *   imports: [
+ *     BrowserModule,
+ *     CalendarModule
+ *   ]
  * })
- * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
+ * export class AppModule { }
  * ```
  */
 class CalendarModule {
@@ -20164,7 +20025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * The exported package module.
+ * Required for adding all Calendars features in NgModule-based Angular applications.
  *
  * The package exports:
  * - `CalendarModule`&mdash;The calendar module.
@@ -20172,29 +20033,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  *
  * @example
  *
- * ```ts-no-run
- * // Import the Calendars module
- * import { CalendarsModule } from '@progress/kendo-angular-dateinputs';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
+ * ```typescript
  * import { NgModule } from '@angular/core';
+ * import { BrowserModule } from '@angular/platform-browser';
+ * import { CalendarsModule } from '@progress/kendo-angular-dateinputs';
  *
- * // Import the app component
- * import { AppComponent } from './app.component';
- *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, CalendarsModule], // import the Calendars module
- *     bootstrap:    [AppComponent]
+ * @NgModule({
+ *   imports: [
+ *     BrowserModule,
+ *     CalendarsModule
+ *   ]
  * })
- * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
+ * export class AppModule { }
  * ```
  */
 class CalendarsModule {
@@ -20233,8 +20083,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the DateInput component.
+ * Required for adding all DateInput features in NgModule-based Angular applications.
+ *
+ * The package exports:
+ * - `DateInputComponent`&mdash;The DateInput component.
+ * - `DateInputMessagesComponent`&mdash;The DateInput custom messages component.
+ *
+ * @example
+ * ```ts
+ * import { DateInputModule } from '@progress/kendo-angular-dateinputs';
+ *
+ * @NgModule({
+ *   imports: [DateInputModule]
+ * })
+ * export class AppModule { }
+ * ```
  */
 class DateInputModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -20256,8 +20119,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the DatePicker component.
+ * Required for adding all DatePicker features in [NgModule-based](link:site.data.urls.angular['ngmoduleapi']) Angular applications.
+ *
+ * @example
+ * ```typescript
+ * import { DatePickerModule } from '@progress/kendo-angular-dateinputs';
+ *
+ * @NgModule({
+ *   imports: [DatePickerModule]
+ * })
+ * export class AppModule { }
+ * ```
  */
 class DatePickerModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -20385,8 +20257,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the TimePicker component.
+ * Required for adding all TimePicker features in NgModule-based Angular applications.
+ *
+ * @example
+ * ```typescript
+ * import { NgModule } from '@angular/core';
+ * import { TimePickerModule } from '@progress/kendo-angular-dateinputs';
+ *
+ * @NgModule({
+ *   imports: [TimePickerModule],
+ *   // ...
+ * })
+ * export class AppModule { }
+ * ```
  */
 class TimePickerModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -20426,8 +20309,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the DateTimePicker component.
+ * Required for adding all DateTimePicker features in [NgModule-based](link:site.data.urls.angular['ngmoduleapi']) Angular applications.
+ *
+ * @example
+ * ```typescript
+ * import { NgModule } from '@angular/core';
+ * import { BrowserModule } from '@angular/platform-browser';
+ * import { DateTimePickerModule } from '@progress/kendo-angular-dateinputs';
+ *
+ * @NgModule({
+ *   imports: [
+ *     BrowserModule,
+ *     DateTimePickerModule
+ *   ]
+ * })
+ * export class AppModule { }
+ * ```
  */
 class DateTimePickerModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -20483,6 +20380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
+ * Required for adding all MultiViewCalendar features in NgModule-based Angular applications.
  * The package exports:
  * - `CellTemplateDirective`&mdash;The month cell template directive.
  * - `MonthCellTemplateDirective`&mdash;The month cell template directive.