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

package/datepicker/datepicker.component.d.ts

@@ -37,7 +37,26 @@ import { WeekDaysFormat } from '../common/models/week-days-format';
 import { AdaptiveSize, AdaptiveService } from '@progress/kendo-angular-utils';
 import * as i0 from "@angular/core";
 /**
- * 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 declare class DatePickerComponent extends MultiTabStop implements ControlValueAccessor, OnInit, AfterViewInit, OnChanges, OnDestroy, Validator {
     zone: NgZone;
@@ -71,13 +90,14 @@ export declare class DatePickerComponent extends MultiTabStop implements Control
      */
     set cellTemplateRef(template: CellTemplateDirective);
     /**
-     * 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: boolean;
     /**
-     * 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: {
         [key: string]: string;
@@ -147,7 +167,7 @@ export declare class DatePickerComponent extends MultiTabStop implements Control
      */
     set footerTemplateRef(template: FooterTemplateDirective);
     /**
-     * Toggles the visibility of the Calendar footer.
+     * Controls the visibility of the Calendar footer.
      * @default false
      */
     footer: boolean;
@@ -160,62 +180,53 @@ export declare class DatePickerComponent extends MultiTabStop implements Control
      */
     set navigationItemTemplateRef(template: NavigationItemTemplateDirective);
     /**
-     * Sets the format of the displayed Calendar week days' names.
+     * Specifies the format of the displayed Calendar week days' names.
      * @default 'short'
      */
     weekDaysFormat?: WeekDaysFormat;
     /**
-     * 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: boolean;
     /**
-     * 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: CalendarView;
     /**
-     * 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: CalendarView;
     /**
-     * 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: CalendarView;
     /**
      * Specifies the Calendar type.
-     *
-     * The possible values are:
-     * - `infinite` (default)
-     * - `classic`
-     *
+     * @default 'infinite'
      */
     calendarType: CalendarType;
     /**
      * 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: boolean;
     /**
-     * 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: boolean;
     /**
-     * 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
      */
@@ -224,17 +235,16 @@ export declare class DatePickerComponent extends MultiTabStop implements Control
      * 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: boolean;
     /**
      * 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: PopupSettings);
     get popupSettings(): PopupSettings;
@@ -249,17 +259,18 @@ export declare class DatePickerComponent extends MultiTabStop implements Control
     /**
      * Specifies the smallest valid date
      * ([see example]({% slug dateranges_datepicker %})).
-     * By default, the `min` value is `1900-1-1`.
+     * @default 1900-1-1
      */
     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: Date;
     /**
      * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
+     * @default false
      */
     incompleteDateValidation: boolean;
     /**
@@ -299,13 +310,13 @@ export declare class DatePickerComponent extends MultiTabStop implements Control
     /**
      * Specifies the focused date of the Calendar component
      * ([see example](slug:datepicker_calendar_options#toc-focused-dates)).
+     * @default null
      */
     focusedDate: Date;
     /**
      * 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: Date | null);
     get value(): Date | null;
@@ -313,9 +324,8 @@ export declare class DatePickerComponent extends MultiTabStop implements Control
      * 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: string | FormatSettings;
     /**
@@ -324,69 +334,25 @@ export declare class DatePickerComponent extends MultiTabStop implements Control
      *
      * 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: number;
     /**
      * 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: DateInputFormatPlaceholder;
     /**
      * 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: string;
     /**
-     * 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: number;
     /**
@@ -403,11 +369,13 @@ export declare class DatePickerComponent extends MultiTabStop implements Control
     /**
      * 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: string;
     /**
      * 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: string;
     /**
@@ -420,52 +388,37 @@ export declare class DatePickerComponent extends MultiTabStop implements Control
      * 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: boolean;
     /**
      * 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: boolean;
     /**
      * Sets the size of the component.
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
-     * * `none`
-     *
+     * @default 'medium'
      */
     set size(size: DateInputSize);
     get size(): DateInputSize;
     /**
-     * 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: DateInputRounded);
     get rounded(): DateInputRounded;
     /**
-     * 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: DateInputFillMode);
     get fillMode(): DateInputFillMode;
     /**
-     * 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: AdaptiveMode;
     /**
@@ -607,18 +560,6 @@ export declare class DatePickerComponent extends MultiTabStop implements Control
     handleActionSheetClick(e: PointerEvent): void;
     /**
      * 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(): void;
     /**
@@ -630,7 +571,7 @@ export declare class DatePickerComponent extends MultiTabStop implements Control
      * 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?: boolean): void;
     /**

package/datepicker/datepicker.module.d.ts

@@ -17,8 +17,17 @@ import * as i11 from "../calendar/templates/weeknumber-cell-template.directive";
 import * as i12 from "../calendar/templates/year-cell-template.directive";
 import * as i13 from "@progress/kendo-angular-common";
 /**
- * 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 declare class DatePickerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DatePickerModule, never>;

package/datepicker/localization/datepicker-custom-messages.component.d.ts

@@ -6,7 +6,17 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { DatePickerMessages } from './messages';
 import * as i0 from "@angular/core";
 /**
- * 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 declare class DatePickerCustomMessagesComponent extends DatePickerMessages {
     protected service: LocalizationService;

package/daterange/auto-correct-on.type.d.ts

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * The literal type that defines which of the auto-correction options is enabled.
+ * Defines the auto-correction options for date range inputs.
+ * Use `blur` to correct on focus loss, `change` to correct on value change, or `none` to disable auto-correction.
  */
 export type AutoCorrectOn = 'blur' | 'change' | 'none';

package/daterange/date-range-end-input.directive.d.ts

@@ -10,44 +10,45 @@ import { DateRangeService } from './date-range.service';
 import { SelectionRange } from '../calendar/models/selection-range.interface';
 import * as i0 from "@angular/core";
 /**
- * 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 declare class DateRangeEndInputDirective extends DateRangeInput implements OnInit, OnDestroy {
     private rangeService;
     private 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: 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: boolean;
     constructor(rangeService: DateRangeService, dateInput: DateInputComponent, element: ElementRef, renderer: Renderer2, zone: NgZone);

package/daterange/date-range-popup-template.directive.d.ts

@@ -5,8 +5,19 @@
 import { 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 declare class DateRangePopupTemplateDirective {
     templateRef: TemplateRef<any>;