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

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

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

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

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

package/esm2022/calendar/templates/navigation-item-template.directive.mjs

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

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

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

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

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

package/esm2022/dateinput/dateinput.component.mjs

@@ -75,13 +75,20 @@ export 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}.
  */
 export class DateInputComponent {
     cdr;
@@ -124,31 +131,36 @@ export 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;
     /**
@@ -176,59 +188,17 @@ export 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;
     /**
      * 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;
@@ -237,86 +207,72 @@ export 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;
     /**
@@ -325,6 +281,7 @@ export 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;
     /**
@@ -336,7 +293,7 @@ export 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);
@@ -351,6 +308,8 @@ export 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;
     /**
@@ -362,18 +321,14 @@ export 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));
         }
@@ -383,19 +338,12 @@ export 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));
         }
@@ -405,18 +353,12 @@ export 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) {
@@ -430,7 +372,7 @@ export 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)) {
@@ -805,20 +747,9 @@ export 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.
@@ -952,7 +883,7 @@ export 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: i2.LocalizationService }, { token: i3.PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });

package/esm2022/dateinput/dateinput.module.mjs

@@ -10,8 +10,21 @@ import * as i1 from "./localization/dateinput-custom-messages.component";
 import * as i2 from "./dateinput.component";
 // 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`—The DateInput component.
+ * - `DateInputMessagesComponent`—The DateInput custom messages component.
+ *
+ * @example
+ * ```ts
+ * import { DateInputModule } from '@progress/kendo-angular-dateinputs';
+ *
+ * @NgModule({
+ *   imports: [DateInputModule]
+ * })
+ * export class AppModule { }
+ * ```
  */
 export class DateInputModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });

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

@@ -8,7 +8,24 @@ import { DateInputMessages } 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)).
+ * 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 { }
+ * ```
  */
 export class DateInputCustomMessagesComponent extends DateInputMessages {
     service;