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

package/esm2022/calendar/calendar.module.mjs

@@ -28,7 +28,7 @@ import * as i11 from "./templates/weeknumber-cell-template.directive";
 import * as i12 from "./templates/year-cell-template.directive";
 // 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`—The month cell template directive.
@@ -42,29 +42,18 @@ import * as i12 from "./templates/year-cell-template.directive";
  *
  * @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 { }
  * ```
  */
 export class CalendarModule {

package/esm2022/calendar/calendars.module.mjs

@@ -30,7 +30,7 @@ import * as i13 from "./localization/multiview-calendar-custom-messages.componen
 import * as i14 from "./multiview-calendar.component";
 // 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`—The calendar module.
@@ -38,29 +38,18 @@ import * as i14 from "./multiview-calendar.component";
  *
  * @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 { }
  * ```
  */
 export class CalendarsModule {

package/esm2022/calendar/localization/calendar-custom-messages.component.mjs

@@ -8,7 +8,15 @@ import { CalendarMessages } from './calendar-messages';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
- * 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).
  */
 export class CalendarCustomMessagesComponent extends CalendarMessages {
     service;

package/esm2022/calendar/localization/multiview-calendar-custom-messages.component.mjs

@@ -8,7 +8,15 @@ import { Messages } from './multiview-calendar-messages';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
- * 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).
  */
 export class MultiViewCalendarCustomMessagesComponent extends Messages {
     service;

package/esm2022/calendar/models/selection-range.interface.mjs

@@ -3,6 +3,8 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
+ * A constant representing an empty selection range with both start and end set to null.
+ *
  * @hidden
  */
 export const EMPTY_SELECTIONRANGE = { start: null, end: null };

package/esm2022/calendar/models/selection.mjs

@@ -3,6 +3,17 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
+ * 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
  */
 export function handleRangeSelection(date, selectionRange, activeRangeEnd, allowReverse = false) {

package/esm2022/calendar/multiview-calendar.component.mjs

@@ -63,17 +63,13 @@ export 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}.
  */
 export class MultiViewCalendarComponent {
     bus;
@@ -85,7 +81,8 @@ export 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;
@@ -125,11 +122,10 @@ export 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();
@@ -139,6 +135,7 @@ export class MultiViewCalendarComponent {
     }
     /**
      * Toggles the visibility of the footer.
+     *
      * @default false
      */
     footer = false;
@@ -161,9 +158,9 @@ export 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);
@@ -172,9 +169,9 @@ export 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);
@@ -183,7 +180,7 @@ export 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
      */
@@ -192,16 +189,14 @@ export 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;
@@ -233,16 +228,19 @@ export 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;
     /**
@@ -255,7 +253,8 @@ export 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";
@@ -264,31 +263,37 @@ export 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;
     /**
@@ -300,12 +305,14 @@ export 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'.
@@ -317,7 +324,7 @@ export 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.
@@ -332,8 +339,10 @@ export 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;
     /**

package/esm2022/calendar/multiview-calendar.module.mjs

@@ -25,6 +25,7 @@ import * as i11 from "./templates/weeknumber-cell-template.directive";
 import * as i12 from "./templates/year-cell-template.directive";
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
+ * Required for adding all MultiViewCalendar features in NgModule-based Angular applications.
  * The package exports:
  * - `CellTemplateDirective`—The month cell template directive.
  * - `MonthCellTemplateDirective`—The month cell template directive.

package/esm2022/calendar/templates/cell-template.directive.mjs

@@ -5,30 +5,27 @@
 import { Directive, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * 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>
  * ```
  */
 export class CellTemplateDirective {

package/esm2022/calendar/templates/century-cell-template.directive.mjs

@@ -5,29 +5,25 @@
 import { Directive, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * 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>
  * ```
  */
 export class CenturyCellTemplateDirective {

package/esm2022/calendar/templates/decade-cell-template.directive.mjs

@@ -5,29 +5,25 @@
 import { Directive, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * 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>
  * ```
  */
 export class DecadeCellTemplateDirective {

package/esm2022/calendar/templates/footer-template.directive.mjs

@@ -5,27 +5,26 @@
 import { Directive, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * 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>
  * ```
  */
 export class FooterTemplateDirective {

package/esm2022/calendar/templates/header-template.directive.mjs

@@ -5,28 +5,29 @@
 import { Directive, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * 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>
  * ```
  */
 export class HeaderTemplateDirective {