@progress/kendo-angular-dateinputs 11.0.0-develop.87 → 11.0.0-develop.88

package/datepicker/datepicker.component.d.ts

@@ -45,6 +45,10 @@ export declare class DatePickerComponent implements ControlValueAccessor, OnInit
     container: ViewContainerRef;
     popupTemplate: TemplateRef<any>;
     toggleButton: ElementRef;
+    /**
+     * @hidden
+     */
+    focusableId: string;
     /**
      * @hidden
      */
@@ -577,5 +581,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"], { "cellTemplateRef": "cellTemplate"; "monthCellTemplateRef": "monthCellTemplate"; "yearCellTemplateRef": "yearCellTemplate"; "decadeCellTemplateRef": "decadeCellTemplate"; "centuryCellTemplateRef": "centuryCellTemplate"; "weekNumberTemplateRef": "weekNumberTemplate"; "headerTitleTemplateRef": "headerTitleTemplate"; "navigationItemTemplateRef": "navigationItemTemplate"; "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"; "focusedDate": "focusedDate"; "value": "value"; "format": "format"; "twoDigitYearMax": "twoDigitYearMax"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "disabledDates": "disabledDates"; "title": "title"; "rangeValidation": "rangeValidation"; "disabledDatesValidation": "disabledDatesValidation"; "weekNumber": "weekNumber"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; }, { "valueChange": "valueChange"; "onFocus": "focus"; "onBlur": "blur"; "open": "open"; "close": "close"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], never>;
+    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"; "navigationItemTemplateRef": "navigationItemTemplate"; "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"; "focusedDate": "focusedDate"; "value": "value"; "format": "format"; "twoDigitYearMax": "twoDigitYearMax"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "disabledDates": "disabledDates"; "title": "title"; "rangeValidation": "rangeValidation"; "disabledDatesValidation": "disabledDatesValidation"; "weekNumber": "weekNumber"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; }, { "valueChange": "valueChange"; "onFocus": "focus"; "onBlur": "blur"; "open": "open"; "close": "close"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], never>;
 }

package/datetimepicker/datetimepicker.component.d.ts

@@ -73,6 +73,10 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
      * @hidden
      */
     get timeSelector(): TimeSelectorComponent;
+    /**
+     * @hidden
+     */
+    focusableId: string;
     /**
      * Specifies the value of the DateTimePicker component.
      *
@@ -563,5 +567,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"], { "value": "value"; "format": "format"; "twoDigitYearMax": "twoDigitYearMax"; "tabindex": "tabindex"; "disabledDates": "disabledDates"; "popupSettings": "popupSettings"; "title": "title"; "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"; "defaultTab": "defaultTab"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateTimePickerComponent, "kendo-datetimepicker", ["kendo-datetimepicker"], { "focusableId": "focusableId"; "value": "value"; "format": "format"; "twoDigitYearMax": "twoDigitYearMax"; "tabindex": "tabindex"; "disabledDates": "disabledDates"; "popupSettings": "popupSettings"; "title": "title"; "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"; "defaultTab": "defaultTab"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], never>;
 }

package/esm2020/dateinput/dateinput.component.mjs

@@ -666,7 +666,9 @@ export class DateInputComponent {
      * @hidden
      */
     set focusableId(_focusableId) {
-        this._focusableId = _focusableId;
+        if (_focusableId) {
+            this._focusableId = _focusableId;
+        }
     }
     get focusableId() {
         return this._focusableId;

package/esm2020/datepicker/datepicker.component.mjs

@@ -893,7 +893,7 @@ export class DatePickerComponent {
     }
 }
 DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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.11", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], 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", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "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.11", 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"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], 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", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "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) },
@@ -930,6 +930,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [ariaReadOnly]="readonly"
             [tabindex]="tabindex"
             [title]="title"
+            [focusableId]="focusableId"
             [format]="format"
             [twoDigitYearMax]="twoDigitYearMax"
             [formatPlaceholder]="formatPlaceholder"
@@ -1041,6 +1042,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [ariaReadOnly]="readonly"
             [tabindex]="tabindex"
             [title]="title"
+            [focusableId]="focusableId"
             [format]="format"
             [twoDigitYearMax]="twoDigitYearMax"
             [formatPlaceholder]="formatPlaceholder"
@@ -1123,6 +1125,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], toggleButton: [{
                 type: ViewChild,
                 args: ['toggleButton', { static: true }]
+            }], focusableId: [{
+                type: Input
             }], cellTemplate: [{
                 type: ContentChild,
                 args: [CellTemplateDirective, { static: false }]

package/esm2020/datetimepicker/datetimepicker.component.mjs

@@ -1024,7 +1024,7 @@ export class DateTimePickerComponent {
     }
 }
 DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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.11", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", 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", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode" }, 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" } }, providers: [
+DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", 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", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode" }, 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" } }, providers: [
         PickerService,
         LocalizationService,
         DisabledDatesService,
@@ -1090,6 +1090,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [formatPlaceholder]="formatPlaceholder"
             [placeholder]="placeholder"
             [disabled]="disabled"
+            [focusableId]="focusableId"
             [readonly]="readonly || readOnlyInput"
             [role]="'combobox'"
             [ariaReadOnly]="readonly"
@@ -1351,6 +1352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [formatPlaceholder]="formatPlaceholder"
             [placeholder]="placeholder"
             [disabled]="disabled"
+            [focusableId]="focusableId"
             [readonly]="readonly || readOnlyInput"
             [role]="'combobox'"
             [ariaReadOnly]="readonly"
@@ -1555,6 +1557,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], toggleButton: [{
                 type: ViewChild,
                 args: ['toggleButton', { static: true }]
+            }], focusableId: [{
+                type: Input
             }], value: [{
                 type: Input
             }], format: [{

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: 1672939046,
+    publishDate: 1672996949,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/timepicker/timepicker.component.mjs

@@ -808,7 +808,7 @@ export class TimePickerComponent {
     }
 }
 TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimePickerComponent, deps: [{ token: i1.BusViewService }, { token: i0.NgZone }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i4.PickerService }, { token: i5.IntlService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", rangeValidation: "rangeValidation", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", rangeValidation: "rangeValidation", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
@@ -870,6 +870,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [format]="format"
             [formatPlaceholder]="formatPlaceholder"
             [placeholder]="placeholder"
+            [focusableId]="focusableId"
             [min]="normalizeTime(min)"
             [max]="normalizeTime(max)"
             [incompleteDateValidation]="incompleteDateValidation"
@@ -1002,6 +1003,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [format]="format"
             [formatPlaceholder]="formatPlaceholder"
             [placeholder]="placeholder"
+            [focusableId]="focusableId"
             [min]="normalizeTime(min)"
             [max]="normalizeTime(max)"
             [incompleteDateValidation]="incompleteDateValidation"
@@ -1080,6 +1082,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], toggleButton: [{
                 type: ViewChild,
                 args: ['toggleButton', { static: true }]
+            }], focusableId: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], readonly: [{

package/fesm2015/progress-kendo-angular-dateinputs.mjs

@@ -28,7 +28,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1672939046,
+    publishDate: 1672996949,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -7530,7 +7530,9 @@ class DateInputComponent {
      * @hidden
      */
     set focusableId(_focusableId) {
-        this._focusableId = _focusableId;
+        if (_focusableId) {
+            this._focusableId = _focusableId;
+        }
     }
     get focusableId() {
         return this._focusableId;
@@ -9500,7 +9502,7 @@ class DatePickerComponent {
     }
 }
 DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: DisabledDatesService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], 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", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "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.11", 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"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], 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", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "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) },
@@ -9537,6 +9539,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [ariaReadOnly]="readonly"
             [tabindex]="tabindex"
             [title]="title"
+            [focusableId]="focusableId"
             [format]="format"
             [twoDigitYearMax]="twoDigitYearMax"
             [formatPlaceholder]="formatPlaceholder"
@@ -9648,6 +9651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [ariaReadOnly]="readonly"
             [tabindex]="tabindex"
             [title]="title"
+            [focusableId]="focusableId"
             [format]="format"
             [twoDigitYearMax]="twoDigitYearMax"
             [formatPlaceholder]="formatPlaceholder"
@@ -9732,6 +9736,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], toggleButton: [{
                 type: ViewChild,
                 args: ['toggleButton', { static: true }]
+            }], focusableId: [{
+                type: Input
             }], cellTemplate: [{
                 type: ContentChild,
                 args: [CellTemplateDirective, { static: false }]
@@ -12423,7 +12429,7 @@ class TimePickerComponent {
     }
 }
 TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimePickerComponent, deps: [{ token: BusViewService }, { token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: i1.IntlService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", rangeValidation: "rangeValidation", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", rangeValidation: "rangeValidation", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
@@ -12485,6 +12491,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [format]="format"
             [formatPlaceholder]="formatPlaceholder"
             [placeholder]="placeholder"
+            [focusableId]="focusableId"
             [min]="normalizeTime(min)"
             [max]="normalizeTime(max)"
             [incompleteDateValidation]="incompleteDateValidation"
@@ -12617,6 +12624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [format]="format"
             [formatPlaceholder]="formatPlaceholder"
             [placeholder]="placeholder"
+            [focusableId]="focusableId"
             [min]="normalizeTime(min)"
             [max]="normalizeTime(max)"
             [incompleteDateValidation]="incompleteDateValidation"
@@ -12697,6 +12705,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], toggleButton: [{
                 type: ViewChild,
                 args: ['toggleButton', { static: true }]
+            }], focusableId: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], readonly: [{
@@ -13813,7 +13823,7 @@ class DateTimePickerComponent {
     }
 }
 DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i1$2.PopupService }, { token: i1.IntlService }, { token: i0.ChangeDetectorRef }, { token: PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }, { token: i1$1.LocalizationService }, { token: DisabledDatesService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", 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", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode" }, 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" } }, providers: [
+DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", 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", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode" }, 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" } }, providers: [
         PickerService,
         LocalizationService,
         DisabledDatesService,
@@ -13879,6 +13889,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [formatPlaceholder]="formatPlaceholder"
             [placeholder]="placeholder"
             [disabled]="disabled"
+            [focusableId]="focusableId"
             [readonly]="readonly || readOnlyInput"
             [role]="'combobox'"
             [ariaReadOnly]="readonly"
@@ -14140,6 +14151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [formatPlaceholder]="formatPlaceholder"
             [placeholder]="placeholder"
             [disabled]="disabled"
+            [focusableId]="focusableId"
             [readonly]="readonly || readOnlyInput"
             [role]="'combobox'"
             [ariaReadOnly]="readonly"
@@ -14346,6 +14358,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], toggleButton: [{
                 type: ViewChild,
                 args: ['toggleButton', { static: true }]
+            }], focusableId: [{
+                type: Input
             }], value: [{
                 type: Input
             }], format: [{

package/fesm2020/progress-kendo-angular-dateinputs.mjs

@@ -28,7 +28,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1672939046,
+    publishDate: 1672996949,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -7524,7 +7524,9 @@ class DateInputComponent {
      * @hidden
      */
     set focusableId(_focusableId) {
-        this._focusableId = _focusableId;
+        if (_focusableId) {
+            this._focusableId = _focusableId;
+        }
     }
     get focusableId() {
         return this._focusableId;
@@ -9490,7 +9492,7 @@ class DatePickerComponent {
     }
 }
 DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: DisabledDatesService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], 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", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "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.11", 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"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], 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", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "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) },
@@ -9527,6 +9529,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [ariaReadOnly]="readonly"
             [tabindex]="tabindex"
             [title]="title"
+            [focusableId]="focusableId"
             [format]="format"
             [twoDigitYearMax]="twoDigitYearMax"
             [formatPlaceholder]="formatPlaceholder"
@@ -9638,6 +9641,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [ariaReadOnly]="readonly"
             [tabindex]="tabindex"
             [title]="title"
+            [focusableId]="focusableId"
             [format]="format"
             [twoDigitYearMax]="twoDigitYearMax"
             [formatPlaceholder]="formatPlaceholder"
@@ -9720,6 +9724,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], toggleButton: [{
                 type: ViewChild,
                 args: ['toggleButton', { static: true }]
+            }], focusableId: [{
+                type: Input
             }], cellTemplate: [{
                 type: ContentChild,
                 args: [CellTemplateDirective, { static: false }]
@@ -12407,7 +12413,7 @@ class TimePickerComponent {
     }
 }
 TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimePickerComponent, deps: [{ token: BusViewService }, { token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: i1.IntlService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", rangeValidation: "rangeValidation", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", rangeValidation: "rangeValidation", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
@@ -12469,6 +12475,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [format]="format"
             [formatPlaceholder]="formatPlaceholder"
             [placeholder]="placeholder"
+            [focusableId]="focusableId"
             [min]="normalizeTime(min)"
             [max]="normalizeTime(max)"
             [incompleteDateValidation]="incompleteDateValidation"
@@ -12601,6 +12608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [format]="format"
             [formatPlaceholder]="formatPlaceholder"
             [placeholder]="placeholder"
+            [focusableId]="focusableId"
             [min]="normalizeTime(min)"
             [max]="normalizeTime(max)"
             [incompleteDateValidation]="incompleteDateValidation"
@@ -12679,6 +12687,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], toggleButton: [{
                 type: ViewChild,
                 args: ['toggleButton', { static: true }]
+            }], focusableId: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], readonly: [{
@@ -13794,7 +13804,7 @@ class DateTimePickerComponent {
     }
 }
 DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i1$2.PopupService }, { token: i1.IntlService }, { token: i0.ChangeDetectorRef }, { token: PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }, { token: i1$1.LocalizationService }, { token: DisabledDatesService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", 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", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode" }, 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" } }, providers: [
+DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", 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", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode" }, 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" } }, providers: [
         PickerService,
         LocalizationService,
         DisabledDatesService,
@@ -13860,6 +13870,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [formatPlaceholder]="formatPlaceholder"
             [placeholder]="placeholder"
             [disabled]="disabled"
+            [focusableId]="focusableId"
             [readonly]="readonly || readOnlyInput"
             [role]="'combobox'"
             [ariaReadOnly]="readonly"
@@ -14121,6 +14132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [formatPlaceholder]="formatPlaceholder"
             [placeholder]="placeholder"
             [disabled]="disabled"
+            [focusableId]="focusableId"
             [readonly]="readonly || readOnlyInput"
             [role]="'combobox'"
             [ariaReadOnly]="readonly"
@@ -14325,6 +14337,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], toggleButton: [{
                 type: ViewChild,
                 args: ['toggleButton', { static: true }]
+            }], focusableId: [{
+                type: Input
             }], value: [{
                 type: Input
             }], format: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dateinputs",
-  "version": "11.0.0-develop.87",
+  "version": "11.0.0-develop.88",
   "description": "Kendo UI for Angular Date Inputs Package - Everything you need to add date selection functionality to apps (DatePicker, TimePicker, DateInput, DateRangePicker, DateTimePicker, Calendar, and MultiViewCalendar).",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -35,13 +35,13 @@
     "@progress/kendo-common": "^0.2.0",
     "@progress/kendo-date-math": "^1.1.0",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "11.0.0-develop.87",
-    "@progress/kendo-angular-intl": "11.0.0-develop.87",
-    "@progress/kendo-angular-l10n": "11.0.0-develop.87",
-    "@progress/kendo-angular-popup": "11.0.0-develop.87",
-    "@progress/kendo-angular-schematics": "11.0.0-develop.87",
+    "@progress/kendo-angular-common": "11.0.0-develop.88",
+    "@progress/kendo-angular-intl": "11.0.0-develop.88",
+    "@progress/kendo-angular-l10n": "11.0.0-develop.88",
+    "@progress/kendo-angular-popup": "11.0.0-develop.88",
+    "@progress/kendo-angular-schematics": "11.0.0-develop.88",
     "rxjs": "^6.5.3 || ^7.0.0",
-    "@progress/kendo-angular-label": "11.0.0-develop.87"
+    "@progress/kendo-angular-label": "11.0.0-develop.88"
   },
   "dependencies": {
     "tslib": "^2.3.1"

package/timepicker/timepicker.component.d.ts

@@ -37,6 +37,10 @@ export declare class TimePickerComponent implements ControlValueAccessor, OnInit
     container: ViewContainerRef;
     popupTemplate: TemplateRef<any>;
     toggleButton: ElementRef;
+    /**
+     * @hidden
+     */
+    focusableId: string;
     /**
      * Sets or gets the `disabled` property of the TimePicker and
      * determines whether the component is active
@@ -476,5 +480,5 @@ export declare class TimePickerComponent implements ControlValueAccessor, OnInit
     private handleDateCompletenessChange;
     private setComponentClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<TimePickerComponent, [null, null, null, null, null, null, null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TimePickerComponent, "kendo-timepicker", ["kendo-timepicker"], { "disabled": "disabled"; "readonly": "readonly"; "readOnlyInput": "readOnlyInput"; "format": "format"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "min": "min"; "max": "max"; "incompleteDateValidation": "incompleteDateValidation"; "cancelButton": "cancelButton"; "nowButton": "nowButton"; "steps": "steps"; "popupSettings": "popupSettings"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "title": "title"; "rangeValidation": "rangeValidation"; "value": "value"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; }, { "valueChange": "valueChange"; "onFocus": "focus"; "onBlur": "blur"; "open": "open"; "close": "close"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TimePickerComponent, "kendo-timepicker", ["kendo-timepicker"], { "focusableId": "focusableId"; "disabled": "disabled"; "readonly": "readonly"; "readOnlyInput": "readOnlyInput"; "format": "format"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "min": "min"; "max": "max"; "incompleteDateValidation": "incompleteDateValidation"; "cancelButton": "cancelButton"; "nowButton": "nowButton"; "steps": "steps"; "popupSettings": "popupSettings"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "title": "title"; "rangeValidation": "rangeValidation"; "value": "value"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; }, { "valueChange": "valueChange"; "onFocus": "focus"; "onBlur": "blur"; "open": "open"; "close": "close"; }, never, never>;
 }