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

package/esm2022/datepicker/datepicker.component.mjs

@@ -56,7 +56,26 @@ const VALUE_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/date
 const DEFAULT_FORMAT = 'd';
 const TWO_DIGIT_YEAR_MAX = 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}.
  */
 export class DatePickerComponent extends MultiTabStop {
     zone;
@@ -92,13 +111,14 @@ export 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;
     /**
@@ -182,7 +202,7 @@ export 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;
@@ -197,62 +217,53 @@ export 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
      */
@@ -261,20 +272,19 @@ export 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;
@@ -297,17 +307,18 @@ export 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;
     /**
@@ -347,13 +358,13 @@ export 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);
@@ -366,9 +377,8 @@ export 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;
     /**
@@ -377,69 +387,25 @@ export 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;
     /**
      * 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;
     /**
@@ -465,11 +431,13 @@ export 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 = "";
     /**
@@ -482,27 +450,23 @@ export 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));
@@ -513,19 +477,12 @@ export 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));
         }
@@ -535,14 +492,8 @@ export 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));
@@ -560,7 +511,9 @@ export 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';
     /**
@@ -833,18 +786,6 @@ export 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();
@@ -860,7 +801,7 @@ export 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) {

package/esm2022/datepicker/datepicker.module.mjs

@@ -30,8 +30,17 @@ import * as i12 from "../calendar/templates/year-cell-template.directive";
 import * as i13 from "@progress/kendo-angular-common";
 // 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 { }
+ * ```
  */
 export class DatePickerModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });

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

@@ -8,7 +8,17 @@ import { DatePickerMessages } from './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)).
+ * 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>
+ * ```
  */
 export class DatePickerCustomMessagesComponent extends DatePickerMessages {
     service;

package/esm2022/daterange/date-range-end-input.directive.mjs

@@ -14,44 +14,45 @@ import * as i0 from "@angular/core";
 import * as i1 from "./date-range.service";
 import * as i2 from "../dateinput/dateinput.component";
 /**
- * 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}
  */
 export 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) {

package/esm2022/daterange/date-range-popup-template.directive.mjs

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