@progress/kendo-angular-dateinputs 15.4.0 → 15.5.0-develop.2

package/dateinput/dateinput.component.d.ts

@@ -90,7 +90,6 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
     title: string;
     /**
      * Sets or gets the `tabIndex` property of the DateInput.
-     * .
      */
     tabindex: number;
     /**
@@ -106,6 +105,10 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
      */
     set tabIndex(tabIndex: number);
     get tabIndex(): number;
+    /**
+     * @hidden
+     */
+    isRequired: boolean;
     /**
      * Specifies the date format that is used to display the input value
      * ([see example]({% slug formats_dateinput %})).
@@ -322,6 +325,15 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
      */
     set fillMode(fillMode: DateInputFillMode);
     get fillMode(): DateInputFillMode;
+    /**
+     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     */
+    set inputAttributes(attributes: {
+        [key: string]: string;
+    });
+    get inputAttributes(): {
+        [key: string]: string;
+    };
     /**
      * Fires each time the user selects a new value
      * ([see example](slug:events_dateinput)).
@@ -408,6 +420,10 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
     private _fillMode;
     private control;
     private subs;
+    private _inputAttributes;
+    private parsedAttributes;
+    private get defaultAttributes();
+    private get mutableAttributes();
     constructor(cdr: ChangeDetectorRef, intl: IntlService, renderer: Renderer2, wrapper: ElementRef, ngZone: NgZone, injector: Injector, localization: LocalizationService, pickerService?: PickerService);
     /**
      * @hidden
@@ -438,6 +454,10 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
      * @hidden
      */
     private setAriaInvalid;
+    /**
+     * @hidden
+     */
+    get isControlRequired(): boolean;
     /**
      * @hidden
      */
@@ -509,7 +529,8 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
     private emitBlur;
     private setSpinnerFill;
     private setComponentClasses;
+    private setInputAttributes;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateInputComponent, [null, null, null, null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DateInputComponent, "kendo-dateinput", ["kendo-dateinput"], { "focusableId": "focusableId"; "pickerType": "pickerType"; "disabled": "disabled"; "readonly": "readonly"; "title": "title"; "tabindex": "tabindex"; "role": "role"; "ariaReadOnly": "ariaReadOnly"; "tabIndex": "tabIndex"; "format": "format"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "steps": "steps"; "max": "max"; "min": "min"; "rangeValidation": "rangeValidation"; "autoCorrectParts": "autoCorrectParts"; "autoSwitchParts": "autoSwitchParts"; "autoSwitchKeys": "autoSwitchKeys"; "allowCaretMode": "allowCaretMode"; "autoFill": "autoFill"; "incompleteDateValidation": "incompleteDateValidation"; "twoDigitYearMax": "twoDigitYearMax"; "enableMouseWheel": "enableMouseWheel"; "value": "value"; "spinners": "spinners"; "isPopupOpen": "isPopupOpen"; "hasPopup": "hasPopup"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; }, { "valueChange": "valueChange"; "valueUpdate": "valueUpdate"; "onFocus": "focus"; "onBlur": "blur"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateInputComponent, "kendo-dateinput", ["kendo-dateinput"], { "focusableId": "focusableId"; "pickerType": "pickerType"; "disabled": "disabled"; "readonly": "readonly"; "title": "title"; "tabindex": "tabindex"; "role": "role"; "ariaReadOnly": "ariaReadOnly"; "tabIndex": "tabIndex"; "isRequired": "isRequired"; "format": "format"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "steps": "steps"; "max": "max"; "min": "min"; "rangeValidation": "rangeValidation"; "autoCorrectParts": "autoCorrectParts"; "autoSwitchParts": "autoSwitchParts"; "autoSwitchKeys": "autoSwitchKeys"; "allowCaretMode": "allowCaretMode"; "autoFill": "autoFill"; "incompleteDateValidation": "incompleteDateValidation"; "twoDigitYearMax": "twoDigitYearMax"; "enableMouseWheel": "enableMouseWheel"; "value": "value"; "spinners": "spinners"; "isPopupOpen": "isPopupOpen"; "hasPopup": "hasPopup"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "inputAttributes": "inputAttributes"; }, { "valueChange": "valueChange"; "valueUpdate": "valueUpdate"; "onFocus": "focus"; "onBlur": "blur"; }, never, never>;
 }
 export {};

package/datepicker/datepicker.component.d.ts

@@ -68,6 +68,12 @@ export declare class DatePickerComponent implements ControlValueAccessor, OnInit
      * @hidden
      */
     set cellTemplateRef(template: CellTemplateDirective);
+    /**
+     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     */
+    inputAttributes: {
+        [key: string]: string;
+    };
     /**
      * @hidden
      */
@@ -503,6 +509,10 @@ export declare class DatePickerComponent implements ControlValueAccessor, OnInit
      */
     xIcon: SVGIcon;
     private get inputElement();
+    /**
+     * @hidden
+     */
+    get isControlRequired(): boolean;
     private _popupSettings;
     private _show;
     private _value;
@@ -680,5 +690,5 @@ export declare class DatePickerComponent implements ControlValueAccessor, OnInit
     private handleDateCompletenessChange;
     private setComponentClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<DatePickerComponent, [null, null, null, null, null, null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DatePickerComponent, "kendo-datepicker", ["kendo-datepicker"], { "focusableId": "focusableId"; "cellTemplateRef": "cellTemplate"; "monthCellTemplateRef": "monthCellTemplate"; "yearCellTemplateRef": "yearCellTemplate"; "decadeCellTemplateRef": "decadeCellTemplate"; "centuryCellTemplateRef": "centuryCellTemplate"; "weekNumberTemplateRef": "weekNumberTemplate"; "headerTitleTemplateRef": "headerTitleTemplate"; "headerTemplateRef": "headerTemplate"; "footerTemplateRef": "footerTemplate"; "footer": "footer"; "navigationItemTemplateRef": "navigationItemTemplate"; "weekDaysFormat": "weekDaysFormat"; "showOtherMonthDays": "showOtherMonthDays"; "activeView": "activeView"; "bottomView": "bottomView"; "topView": "topView"; "calendarType": "calendarType"; "animateCalendarNavigation": "animateCalendarNavigation"; "disabled": "disabled"; "readonly": "readonly"; "readOnlyInput": "readOnlyInput"; "popupSettings": "popupSettings"; "navigation": "navigation"; "min": "min"; "max": "max"; "incompleteDateValidation": "incompleteDateValidation"; "autoCorrectParts": "autoCorrectParts"; "autoSwitchParts": "autoSwitchParts"; "autoSwitchKeys": "autoSwitchKeys"; "enableMouseWheel": "enableMouseWheel"; "allowCaretMode": "allowCaretMode"; "autoFill": "autoFill"; "focusedDate": "focusedDate"; "value": "value"; "format": "format"; "twoDigitYearMax": "twoDigitYearMax"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "disabledDates": "disabledDates"; "title": "title"; "subtitle": "subtitle"; "rangeValidation": "rangeValidation"; "disabledDatesValidation": "disabledDatesValidation"; "weekNumber": "weekNumber"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "adaptiveMode": "adaptiveMode"; }, { "valueChange": "valueChange"; "onFocus": "focus"; "onBlur": "blur"; "open": "open"; "close": "close"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatePickerComponent, "kendo-datepicker", ["kendo-datepicker"], { "focusableId": "focusableId"; "cellTemplateRef": "cellTemplate"; "inputAttributes": "inputAttributes"; "monthCellTemplateRef": "monthCellTemplate"; "yearCellTemplateRef": "yearCellTemplate"; "decadeCellTemplateRef": "decadeCellTemplate"; "centuryCellTemplateRef": "centuryCellTemplate"; "weekNumberTemplateRef": "weekNumberTemplate"; "headerTitleTemplateRef": "headerTitleTemplate"; "headerTemplateRef": "headerTemplate"; "footerTemplateRef": "footerTemplate"; "footer": "footer"; "navigationItemTemplateRef": "navigationItemTemplate"; "weekDaysFormat": "weekDaysFormat"; "showOtherMonthDays": "showOtherMonthDays"; "activeView": "activeView"; "bottomView": "bottomView"; "topView": "topView"; "calendarType": "calendarType"; "animateCalendarNavigation": "animateCalendarNavigation"; "disabled": "disabled"; "readonly": "readonly"; "readOnlyInput": "readOnlyInput"; "popupSettings": "popupSettings"; "navigation": "navigation"; "min": "min"; "max": "max"; "incompleteDateValidation": "incompleteDateValidation"; "autoCorrectParts": "autoCorrectParts"; "autoSwitchParts": "autoSwitchParts"; "autoSwitchKeys": "autoSwitchKeys"; "enableMouseWheel": "enableMouseWheel"; "allowCaretMode": "allowCaretMode"; "autoFill": "autoFill"; "focusedDate": "focusedDate"; "value": "value"; "format": "format"; "twoDigitYearMax": "twoDigitYearMax"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "disabledDates": "disabledDates"; "title": "title"; "subtitle": "subtitle"; "rangeValidation": "rangeValidation"; "disabledDatesValidation": "disabledDatesValidation"; "weekNumber": "weekNumber"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "adaptiveMode": "adaptiveMode"; }, { "valueChange": "valueChange"; "onFocus": "focus"; "onBlur": "blur"; "open": "open"; "close": "close"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate"], never>;
 }

package/datetimepicker/datetimepicker.component.d.ts

@@ -2,8 +2,8 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, OnDestroy, ChangeDetectorRef, EventEmitter, NgZone, OnInit, SimpleChanges, OnChanges, Renderer2, AfterViewInit } from '@angular/core';
-import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
+import { ElementRef, OnDestroy, ChangeDetectorRef, EventEmitter, NgZone, OnInit, SimpleChanges, OnChanges, Renderer2, AfterViewInit, Injector } from '@angular/core';
+import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors, FormControl } from '@angular/forms';
 import { Day } from '@progress/kendo-date-math';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { IntlService } from '@progress/kendo-angular-intl';
@@ -51,6 +51,7 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
     localization: LocalizationService;
     private disabledDatesService;
     private renderer;
+    private injector;
     /**
      * @hidden
      */
@@ -303,6 +304,12 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
      * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
      */
     adaptiveMode: AdaptiveMode;
+    /**
+     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     */
+    inputAttributes: {
+        [key: string]: string;
+    };
     /**
      * Fires each time the user selects a new value
      * ([see example](slug:events_datetimepicker)).
@@ -507,6 +514,14 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
     private get acceptButton();
     private get cancelButtonElement();
     private get dateTabButton();
+    /**
+     * @hidden
+     */
+    get formControl(): FormControl;
+    /**
+     * @hidden
+     */
+    get isControlRequired(): boolean;
     private popupRef;
     private _popupSettings;
     private _value;
@@ -530,7 +545,7 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
     private _rounded;
     private _fillMode;
     private windowSize;
-    constructor(popupService: PopupService, intl: IntlService, cdr: ChangeDetectorRef, pickerService: PickerService, ngZone: NgZone, wrapper: ElementRef<HTMLElement>, touchEnabled: boolean, localization: LocalizationService, disabledDatesService: DisabledDatesService, renderer: Renderer2);
+    constructor(popupService: PopupService, intl: IntlService, cdr: ChangeDetectorRef, pickerService: PickerService, ngZone: NgZone, wrapper: ElementRef<HTMLElement>, touchEnabled: boolean, localization: LocalizationService, disabledDatesService: DisabledDatesService, renderer: Renderer2, injector: Injector);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -704,5 +719,5 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
     private handleDateCompletenessChange;
     private setComponentClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateTimePickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DateTimePickerComponent, "kendo-datetimepicker", ["kendo-datetimepicker"], { "focusableId": "focusableId"; "weekDaysFormat": "weekDaysFormat"; "showOtherMonthDays": "showOtherMonthDays"; "value": "value"; "format": "format"; "twoDigitYearMax": "twoDigitYearMax"; "tabindex": "tabindex"; "disabledDates": "disabledDates"; "popupSettings": "popupSettings"; "title": "title"; "subtitle": "subtitle"; "disabled": "disabled"; "readonly": "readonly"; "readOnlyInput": "readOnlyInput"; "cancelButton": "cancelButton"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "steps": "steps"; "focusedDate": "focusedDate"; "calendarType": "calendarType"; "animateCalendarNavigation": "animateCalendarNavigation"; "weekNumber": "weekNumber"; "min": "min"; "max": "max"; "rangeValidation": "rangeValidation"; "disabledDatesValidation": "disabledDatesValidation"; "incompleteDateValidation": "incompleteDateValidation"; "autoCorrectParts": "autoCorrectParts"; "autoSwitchParts": "autoSwitchParts"; "autoSwitchKeys": "autoSwitchKeys"; "enableMouseWheel": "enableMouseWheel"; "allowCaretMode": "allowCaretMode"; "autoFill": "autoFill"; "adaptiveMode": "adaptiveMode"; "defaultTab": "defaultTab"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "headerTemplateRef": "headerTemplate"; "footerTemplateRef": "footerTemplate"; "footer": "footer"; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateTimePickerComponent, "kendo-datetimepicker", ["kendo-datetimepicker"], { "focusableId": "focusableId"; "weekDaysFormat": "weekDaysFormat"; "showOtherMonthDays": "showOtherMonthDays"; "value": "value"; "format": "format"; "twoDigitYearMax": "twoDigitYearMax"; "tabindex": "tabindex"; "disabledDates": "disabledDates"; "popupSettings": "popupSettings"; "title": "title"; "subtitle": "subtitle"; "disabled": "disabled"; "readonly": "readonly"; "readOnlyInput": "readOnlyInput"; "cancelButton": "cancelButton"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "steps": "steps"; "focusedDate": "focusedDate"; "calendarType": "calendarType"; "animateCalendarNavigation": "animateCalendarNavigation"; "weekNumber": "weekNumber"; "min": "min"; "max": "max"; "rangeValidation": "rangeValidation"; "disabledDatesValidation": "disabledDatesValidation"; "incompleteDateValidation": "incompleteDateValidation"; "autoCorrectParts": "autoCorrectParts"; "autoSwitchParts": "autoSwitchParts"; "autoSwitchKeys": "autoSwitchKeys"; "enableMouseWheel": "enableMouseWheel"; "allowCaretMode": "allowCaretMode"; "autoFill": "autoFill"; "adaptiveMode": "adaptiveMode"; "inputAttributes": "inputAttributes"; "defaultTab": "defaultTab"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "headerTemplateRef": "headerTemplate"; "footerTemplateRef": "footerTemplate"; "footer": "footer"; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate"], never>;
 }

package/esm2020/dateinput/dateinput.component.mjs

@@ -12,7 +12,7 @@ import { IntlService, localeData } from '@progress/kendo-angular-intl';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { cloneDate, isEqual } from '@progress/kendo-date-math';
-import { hasObservers, KendoInput } from '@progress/kendo-angular-common';
+import { hasObservers, isControlRequired, KendoInput, setHTMLAttributes, removeHTMLAttributes, isObjectPresent, parseAttributes } from '@progress/kendo-angular-common';
 import { Arrow } from './arrow.enum';
 import { noop, isValidRange, getSizeClass, getRoundedClass, getFillModeClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE } from '../util';
 import { PickerService } from '../common/picker.service';
@@ -107,7 +107,6 @@ export class DateInputComponent {
         this.title = "";
         /**
          * Sets or gets the `tabIndex` property of the DateInput.
-         * .
          */
         this.tabindex = 0;
         /**
@@ -118,6 +117,10 @@ export class DateInputComponent {
          * @hidden
          */
         this.ariaReadOnly = false;
+        /**
+         * @hidden
+         */
+        this.isRequired = false;
         /**
          * Specifies the date format that is used to display the input value
          * ([see example]({% slug formats_dateinput %})).
@@ -278,6 +281,7 @@ export class DateInputComponent {
         this._rounded = DEFAULT_ROUNDED;
         this._fillMode = DEFAULT_FILL_MODE;
         this.subs = new Subscription();
+        this.parsedAttributes = {};
         validatePackage(packageMetadata);
         if (this.pickerService) {
             this.pickerService.input = this;
@@ -448,6 +452,22 @@ export class DateInputComponent {
     get fillMode() {
         return this._fillMode;
     }
+    /**
+     * Sets 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)) {
+            removeHTMLAttributes(this.parsedAttributes, this.renderer, this.dateInput.nativeElement);
+        }
+        this._inputAttributes = attributes;
+        this.parsedAttributes = this.inputAttributes ?
+            parseAttributes(this.inputAttributes, this.defaultAttributes) :
+            this.inputAttributes;
+        this.setInputAttributes();
+    }
+    get inputAttributes() {
+        return this._inputAttributes;
+    }
     get wrapperClass() {
         return true;
     }
@@ -505,6 +525,30 @@ export class DateInputComponent {
             intlService: new DateInputIntl(this.intl)
         };
     }
+    get defaultAttributes() {
+        return {
+            'aria-readonly': this.ariaReadOnly,
+            id: this.focusableId,
+            title: this.title,
+            tabindex: this.tabindex,
+            disabled: this.disabled ? '' : null,
+            readonly: this.readonly ? '' : null,
+            placeholder: this.placeholder,
+            'aria-expanded': this.isPopupOpen,
+            'aria-haspopup': this.hasPopup,
+            required: this.isControlRequired ? '' : null
+        };
+    }
+    get mutableAttributes() {
+        return {
+            autocomplete: 'off',
+            autocorrect: 'off',
+            autocapitalize: 'off',
+            spellcheck: 'false',
+            role: this.role
+        };
+    }
+    ;
     /**
      * @hidden
      * Used by the TextBoxContainer to determine if the component is empty
@@ -620,6 +664,12 @@ export class DateInputComponent {
             this.renderer.setAttribute(this.inputElement, attributeNames.ariaInvalid, 'false');
         }
     }
+    /**
+     * @hidden
+     */
+    get isControlRequired() {
+        return isControlRequired(this.formControl) || this.isRequired;
+    }
     /**
      * @hidden
      */
@@ -817,9 +867,13 @@ export class DateInputComponent {
             this.setSpinnerFill(this.spindown.nativeElement, this.fillMode);
         }
     }
+    setInputAttributes() {
+        const attributesToRender = Object.assign({}, this.mutableAttributes, this.parsedAttributes);
+        setHTMLAttributes(attributesToRender, this.renderer, this.dateInput.nativeElement);
+    }
 }
 DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.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 });
-DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateInputComponent, selector: "kendo-dateinput", inputs: { focusableId: "focusableId", pickerType: "pickerType", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", allowCaretMode: "allowCaretMode", autoFill: "autoFill", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", enableMouseWheel: "enableMouseWheel", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-input": "this.wrapperClass", "class.k-dateinput": "this.wrapperClass", "class.k-disabled": "this.disabledClass" } }, providers: [
+DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateInputComponent, selector: "kendo-dateinput", inputs: { focusableId: "focusableId", pickerType: "pickerType", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", isRequired: "isRequired", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", allowCaretMode: "allowCaretMode", autoFill: "autoFill", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", enableMouseWheel: "enableMouseWheel", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-input": "this.wrapperClass", "class.k-dateinput": "this.wrapperClass", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true },
         { provide: L10N_PREFIX, useValue: 'kendo.dateinput' },
@@ -834,13 +888,13 @@ DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
         decrement="Decrease value"
     >
     </ng-container>
-    <input
-        #dateInput
+    <input #dateInput
+        class="k-input-inner"
+        [attr.required]="isControlRequired ? '' : null"
         autocomplete="off"
         autocorrect="off"
         autocapitalize="off"
         spellcheck="false"
-        class="k-input-inner"
         [attr.role]="role"
         [attr.aria-readonly]="ariaReadOnly"
         [id]="focusableId"
@@ -918,13 +972,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         decrement="Decrease value"
     >
     </ng-container>
-    <input
-        #dateInput
+    <input #dateInput
+        class="k-input-inner"
+        [attr.required]="isControlRequired ? '' : null"
         autocomplete="off"
         autocorrect="off"
         autocapitalize="off"
         spellcheck="false"
-        class="k-input-inner"
         [attr.role]="role"
         [attr.aria-readonly]="ariaReadOnly"
         [id]="focusableId"
@@ -1004,6 +1058,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], tabIndex: [{
                 type: Input
+            }], isRequired: [{
+                type: Input
             }], format: [{
                 type: Input
             }], formatPlaceholder: [{
@@ -1048,6 +1104,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], fillMode: [{
                 type: Input
+            }], inputAttributes: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], valueUpdate: [{

package/esm2020/datepicker/datepicker.component.mjs

@@ -7,7 +7,7 @@ import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { cloneDate } from '@progress/kendo-date-math';
-import { hasObservers, isDocumentAvailable, KendoInput, Keys } from '@progress/kendo-angular-common';
+import { hasObservers, isControlRequired, isDocumentAvailable, KendoInput, Keys } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { MIN_DATE, MAX_DATE } from '../defaults';
@@ -575,6 +575,12 @@ export class DatePickerComponent {
     get inputElement() {
         return this.wrapper.nativeElement.querySelector('input');
     }
+    /**
+     * @hidden
+     */
+    get isControlRequired() {
+        return isControlRequired(this.control);
+    }
     /**
      * @hidden
      * Used by the TextBoxContainer to determine if the component is empty.
@@ -1071,7 +1077,7 @@ export class DatePickerComponent {
     }
 }
 DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i3.PickerService }, { token: i4.DisabledDatesService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { focusableId: "focusableId", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer", navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", bottomView: "bottomView", topView: "topView", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", popupSettings: "popupSettings", navigation: "navigation", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode", adaptiveMode: "adaptiveMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { focusableId: "focusableId", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], inputAttributes: "inputAttributes", monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer", navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", bottomView: "bottomView", topView: "topView", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", popupSettings: "popupSettings", navigation: "navigation", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode", adaptiveMode: "adaptiveMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => DatePickerComponent) },
@@ -1110,6 +1116,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [readonly]="readonly || readOnlyInput"
             [ariaReadOnly]="readonly"
             [tabindex]="tabindex"
+            [isRequired]="isControlRequired"
             [title]="title"
             [focusableId]="focusableId"
             [format]="format"
@@ -1128,6 +1135,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             fillMode="none"
             rounded="none"
             size="none"
+            [inputAttributes]="inputAttributes"
             [value]="value"
             (valueChange)="handleInputChange($event)"
             (click)="handleDateInputClick()"
@@ -1244,7 +1252,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-calendar-messages>
             </kendo-calendar>
         </ng-template>
-    `, isInline: true, components: [{ type: i5.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i8.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i9.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i10.CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i11.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: i12.DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i7.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i5.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i8.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i9.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i10.CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i11.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: i12.DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i7.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1291,6 +1299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [readonly]="readonly || readOnlyInput"
             [ariaReadOnly]="readonly"
             [tabindex]="tabindex"
+            [isRequired]="isControlRequired"
             [title]="title"
             [focusableId]="focusableId"
             [format]="format"
@@ -1309,6 +1318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             fillMode="none"
             rounded="none"
             size="none"
+            [inputAttributes]="inputAttributes"
             [value]="value"
             (valueChange)="handleInputChange($event)"
             (click)="handleDateInputClick()"
@@ -1452,6 +1462,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], cellTemplateRef: [{
                 type: Input,
                 args: ['cellTemplate']
+            }], inputAttributes: [{
+                type: Input
             }], monthCellTemplate: [{
                 type: ContentChild,
                 args: [MonthCellTemplateDirective, { static: false }]

package/esm2020/datetimepicker/datetimepicker.component.mjs

@@ -2,14 +2,14 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, HostBinding, ViewChild, ElementRef, Input, isDevMode, TemplateRef, ChangeDetectorRef, Output, EventEmitter, NgZone, ViewContainerRef, forwardRef, ContentChild, Inject, ChangeDetectionStrategy, Renderer2, } from '@angular/core';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { Component, HostBinding, ViewChild, ElementRef, Input, isDevMode, TemplateRef, ChangeDetectorRef, Output, EventEmitter, NgZone, ViewContainerRef, forwardRef, ContentChild, Inject, ChangeDetectionStrategy, Renderer2, Injector, } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
 import { Subscription, fromEvent } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { cloneDate, isEqual, getDate } from '@progress/kendo-date-math';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { IntlService } from '@progress/kendo-angular-intl';
-import { hasObservers, isDocumentAvailable, KendoInput, Keys } from '@progress/kendo-angular-common';
+import { hasObservers, isControlRequired, isDocumentAvailable, KendoInput, Keys } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
@@ -67,7 +67,7 @@ const DATE_TAB_BUTTON_SELECTOR = '.k-button.k-date-tab';
  * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
  */
 export class DateTimePickerComponent {
-    constructor(popupService, intl, cdr, pickerService, ngZone, wrapper, touchEnabled, localization, disabledDatesService, renderer) {
+    constructor(popupService, intl, cdr, pickerService, ngZone, wrapper, touchEnabled, localization, disabledDatesService, renderer, injector) {
         this.popupService = popupService;
         this.intl = intl;
         this.cdr = cdr;
@@ -78,6 +78,7 @@ export class DateTimePickerComponent {
         this.localization = localization;
         this.disabledDatesService = disabledDatesService;
         this.renderer = renderer;
+        this.injector = injector;
         /**
          * @hidden
          */
@@ -663,6 +664,19 @@ export class DateTimePickerComponent {
         return this.popupRef?.popup.instance.container.nativeElement.querySelector(DATE_TAB_BUTTON_SELECTOR);
     }
     ;
+    /**
+     * @hidden
+     */
+    get formControl() {
+        const ngControl = this.injector.get(NgControl, null);
+        return ngControl?.control || null;
+    }
+    /**
+     * @hidden
+     */
+    get isControlRequired() {
+        return isControlRequired(this.formControl);
+    }
     ngOnInit() {
         this.subscriptions.add(this.pickerService.onFocus
             // detect popup changes to disable the inactive view mark-up when the popup is open
@@ -1312,8 +1326,8 @@ export class DateTimePickerComponent {
         }
     }
 }
-DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i1.PopupService }, { token: i2.IntlService }, { token: i0.ChangeDetectorRef }, { token: i3.PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }, { token: i4.LocalizationService }, { token: i5.DisabledDatesService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", subtitle: "subtitle", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", adaptiveMode: "adaptiveMode", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode", headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass", "class.k-readonly": "this.readonly" } }, providers: [
+DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i1.PopupService }, { token: i2.IntlService }, { token: i0.ChangeDetectorRef }, { token: i3.PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }, { token: i4.LocalizationService }, { token: i5.DisabledDatesService }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", subtitle: "subtitle", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", adaptiveMode: "adaptiveMode", inputAttributes: "inputAttributes", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode", headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass", "class.k-readonly": "this.readonly" } }, providers: [
         PickerService,
         LocalizationService,
         DisabledDatesService,
@@ -1409,9 +1423,11 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [ariaReadOnly]="readonly"
             [steps]="steps"
             [tabindex]="tabindex"
+            [isRequired]="isControlRequired"
             [title]="title"
             pickerType="datetimepicker"
             hasPopup="dialog"
+            [inputAttributes]="inputAttributes"
             [isPopupOpen]="isOpen"
             (valueChange)="handleInputValueChange($event)"
             [kendoEventsOutsideAngular]="{
@@ -1691,7 +1707,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: i6.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i11.CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i12.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: i13.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }, { type: i14.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: i15.LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i16.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i16.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i6.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i11.CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i12.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: i13.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }, { type: i14.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: i15.LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i16.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i16.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1795,9 +1811,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [ariaReadOnly]="readonly"
             [steps]="steps"
             [tabindex]="tabindex"
+            [isRequired]="isControlRequired"
             [title]="title"
             pickerType="datetimepicker"
             hasPopup="dialog"
+            [inputAttributes]="inputAttributes"
             [isPopupOpen]="isOpen"
             (valueChange)="handleInputValueChange($event)"
             [kendoEventsOutsideAngular]="{
@@ -2082,7 +2100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.PopupService }, { type: i2.IntlService }, { type: i0.ChangeDetectorRef }, { type: i3.PickerService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [TOUCH_ENABLED]
-                }] }, { type: i4.LocalizationService }, { type: i5.DisabledDatesService }, { type: i0.Renderer2 }]; }, propDecorators: { hostClasses: [{
+                }] }, { type: i4.LocalizationService }, { type: i5.DisabledDatesService }, { type: i0.Renderer2 }, { type: i0.Injector }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-datetimepicker']
             }, {
@@ -2165,6 +2183,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], adaptiveMode: [{
                 type: Input
+            }], inputAttributes: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], open: [{

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1712142428,
-    version: '15.4.0',
+    publishDate: 1712566608,
+    version: '15.5.0-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };