@progress/kendo-angular-dateinputs 24.0.0-develop.3 → 24.0.0-develop.30

package/dateinput/dateinput.component.d.ts

@@ -63,7 +63,7 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
     /**
      * @hidden
      */
-    caretAltUpIcon: SVGIcon;
+    chevronUpIcon: SVGIcon;
     /**
      * @hidden
      */
@@ -71,7 +71,7 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
     /**
      * @hidden
      */
-    caretAltDownIcon: SVGIcon;
+    chevronDownIcon: SVGIcon;
     /**
      * @hidden
      */
@@ -308,7 +308,6 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
      * @hidden
      */
     dateInput: ElementRef;
-    get wrapperClass(): boolean;
     get disabledClass(): boolean;
     get inputElement(): any;
     get inputValue(): string;

package/datetimepicker/datetimepicker.component.d.ts

@@ -38,6 +38,7 @@ import { ActionSheetComponent } from '@progress/kendo-angular-navigation';
 import { HeaderTemplateDirective } from '../calendar/templates/header-template.directive';
 import { FooterTemplateDirective } from '../calendar/templates/footer-template.directive';
 import { WeekDaysFormat } from '../common/models/week-days-format';
+import { SegmentedItemSettings } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
 /**
  * Represents the Kendo UI DateTimePicker component for Angular.
@@ -640,6 +641,22 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
      * @hidden
      */
     handleBlur(event?: FocusEvent): void;
+    /**
+     * @hidden
+     */
+    get tabItems(): SegmentedItemSettings[];
+    /**
+     * @hidden
+     */
+    get activeTabIndex(): number;
+    /**
+     * @hidden
+     */
+    onTabChange(index: number): void;
+    /**
+     * @hidden
+     */
+    handleButtonGroupKeydown(event: KeyboardEvent): void;
     /**
      * @hidden
      */

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

@@ -16,8 +16,8 @@ import * as i1 from '@progress/kendo-angular-intl';
 import { localeData } from '@progress/kendo-angular-intl';
 import { Subject, Subscription, ReplaySubject, Observable, combineLatest, of, interval, animationFrameScheduler, EMPTY, fromEvent, from, BehaviorSubject, merge } from 'rxjs';
 import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
-import { chevronRightIcon, chevronLeftIcon, caretAltUpIcon, xIcon, caretAltDownIcon, calendarIcon, checkIcon, clockIcon } from '@progress/kendo-svg-icons';
-import { ButtonComponent } from '@progress/kendo-angular-buttons';
+import { chevronRightIcon, chevronLeftIcon, chevronUpIcon, xIcon, chevronDownIcon, calendarIcon, checkIcon, clockIcon } from '@progress/kendo-svg-icons';
+import { ButtonComponent, SegmentedControlComponent } from '@progress/kendo-angular-buttons';
 import { map, scan, takeWhile, debounceTime, tap, filter } from 'rxjs/operators';
 import { DateInput } from '@progress/kendo-dateinputs-common';
 import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
@@ -36,8 +36,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1776940518,
-    version: '24.0.0-develop.3',
+    publishDate: 1778748718,
+    version: '24.0.0-develop.30',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -2811,7 +2811,7 @@ class HeaderComponent {
         }
       </span>
     }
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
@@ -3534,7 +3534,7 @@ class FooterComponent {
         {{intl.formatDate(getToday(), 'D')}}
       </button>
     }
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FooterComponent, decorators: [{
             type: Component,
@@ -8599,7 +8599,7 @@ class DateInputComponent {
     /**
      * @hidden
      */
-    caretAltUpIcon = caretAltUpIcon;
+    chevronUpIcon = chevronUpIcon;
     /**
      * @hidden
      */
@@ -8607,7 +8607,7 @@ class DateInputComponent {
     /**
      * @hidden
      */
-    caretAltDownIcon = caretAltDownIcon;
+    chevronDownIcon = chevronDownIcon;
     /**
      * @hidden
      */
@@ -8904,9 +8904,6 @@ class DateInputComponent {
      * @hidden
      */
     dateInput;
-    get wrapperClass() {
-        return true;
-    }
     get disabledClass() {
         return this.disabled;
     }
@@ -9059,6 +9056,8 @@ class DateInputComponent {
      * @hidden
      */
     ngOnInit() {
+        this.renderer.addClass(this.wrapper.nativeElement, 'k-input');
+        this.renderer.addClass(this.wrapper.nativeElement, 'k-dateinput');
         if (this.kendoDate) {
             this.kendoDate.destroy();
         }
@@ -9195,6 +9194,7 @@ class DateInputComponent {
         this.kendoDate?.setOptions(this.options, true);
         this.kendoDateObject?.setValue(this.value);
         this.kendoDate?.refreshElementValue();
+        this.cdr.markForCheck();
     }
     resetInput() {
         this.isDateIncomplete = false;
@@ -9379,7 +9379,7 @@ class DateInputComponent {
         setHTMLAttributes(attributesToRender, this.renderer, this.dateInput.nativeElement, this.ngZone);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DateInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.IntlService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i1$1.LocalizationService }, { token: PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: DateInputComponent, isStandalone: true, selector: "kendo-dateinput", inputs: { focusableId: "focusableId", pickerType: "pickerType", clearButton: "clearButton", 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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: DateInputComponent, isStandalone: true, selector: "kendo-dateinput", inputs: { focusableId: "focusableId", pickerType: "pickerType", clearButton: "clearButton", 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-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' },
@@ -9450,8 +9450,8 @@ class DateInputComponent {
           [attr.aria-label]="localization.get('increment')"
           >
           <kendo-icon-wrapper
-            name="caret-alt-up"
-            [svgIcon]="caretAltUpIcon"
+            name="chevron-up"
+            [svgIcon]="chevronUpIcon"
             innerCssClass="k-button-icon"
             >
           </kendo-icon-wrapper>
@@ -9468,8 +9468,8 @@ class DateInputComponent {
           [attr.aria-label]="localization.get('decrement')"
           >
           <kendo-icon-wrapper
-            name="caret-alt-down"
-            [svgIcon]="caretAltDownIcon"
+            name="chevron-down"
+            [svgIcon]="chevronDownIcon"
             innerCssClass="k-button-icon"
             >
           </kendo-icon-wrapper>
@@ -9556,8 +9556,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           [attr.aria-label]="localization.get('increment')"
           >
           <kendo-icon-wrapper
-            name="caret-alt-up"
-            [svgIcon]="caretAltUpIcon"
+            name="chevron-up"
+            [svgIcon]="chevronUpIcon"
             innerCssClass="k-button-icon"
             >
           </kendo-icon-wrapper>
@@ -9574,8 +9574,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           [attr.aria-label]="localization.get('decrement')"
           >
           <kendo-icon-wrapper
-            name="caret-alt-down"
-            [svgIcon]="caretAltDownIcon"
+            name="chevron-down"
+            [svgIcon]="chevronDownIcon"
             innerCssClass="k-button-icon"
             >
           </kendo-icon-wrapper>
@@ -9672,12 +9672,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], dateInput: [{
                 type: ViewChild,
                 args: ['dateInput', { static: true }]
-            }], wrapperClass: [{
-                type: HostBinding,
-                args: ['class.k-input']
-            }, {
-                type: HostBinding,
-                args: ['class.k-dateinput']
             }], disabledClass: [{
                 type: HostBinding,
                 args: ['class.k-disabled']
@@ -11207,7 +11201,7 @@ class DatePickerComponent extends MultiTabStop {
             </kendo-calendar-messages>
           </kendo-calendar>
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "directive", type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "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"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["closePopup", "activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        `, isInline: true, dependencies: [{ kind: "directive", type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "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"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["closePopup", "activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -11627,7 +11621,7 @@ const listItem = () => li('<span>02</span>', 'k-item');
 const list = () => ul([listItem()], 'k-reset');
 const scrollable = () => (div([list()], 'k-time-container k-flex k-content k-scrollable'));
 const actionSheetContent = (isDateTimePicker) => [
-    isDateTimePicker ? div([div('button', 'k-button k-button-lg')], 'k-datetime-buttongroup') : null,
+    isDateTimePicker ? div([div('button', 'k-segmented-control-button')], 'k-segmented-control') : null,
     div([
         div([span('04:08:48:49 AM', 'k-title k-timeselector-title'),
             div('now', 'k-button k-button-md')
@@ -14888,7 +14882,7 @@ class TimePickerComponent extends MultiTabStop {
             </kendo-timeselector-messages>
           </kendo-timeselector>
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "directive", type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "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"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutFirstPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        `, isInline: true, dependencies: [{ kind: "directive", type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "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"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutFirstPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
@@ -15418,8 +15412,8 @@ const DEFAULT_TIMESELECTOR_FORMAT = 't';
 const TWO_DIGIT_YEAR_MAX = 68;
 const ACCEPT_BUTTON_SELECTOR = '.k-button.k-time-accept';
 const CANCEL_BUTTON_SELECOTR = '.k-button.k-time-cancel';
-const DATE_TAB_BUTTON_SELECTOR = '.k-button.k-group-start';
-const TIME_TAB_BUTTON_SELECTOR = '.k-button.k-group-end';
+const DATE_TAB_BUTTON_SELECTOR = '.k-segmented-control-button:first-of-type';
+const TIME_TAB_BUTTON_SELECTOR = '.k-segmented-control-button:last-of-type';
 const TODAY_BUTTON_SELECTOR = '.k-button.k-calendar-nav-today';
 /**
  * Represents the Kendo UI DateTimePicker component for Angular.
@@ -16362,6 +16356,39 @@ class DateTimePickerComponent extends MultiTabStop {
             this.cdr.markForCheck();
         });
     }
+    /**
+     * @hidden
+     */
+    get tabItems() {
+        return [
+            { text: this.localization.get('dateTab'), title: this.localization.get('dateTabLabel') },
+            { text: this.localization.get('timeTab'), title: this.localization.get('timeTabLabel') }
+        ];
+    }
+    /**
+     * @hidden
+     */
+    get activeTabIndex() {
+        return this.activeTab === 'date' ? 0 : 1;
+    }
+    /**
+     * @hidden
+     */
+    onTabChange(index) {
+        this.changeActiveTab(index === 0 ? 'date' : 'time');
+    }
+    /**
+     * @hidden
+     */
+    handleButtonGroupKeydown(event) {
+        if (event.key !== Keys.Tab) {
+            return;
+        }
+        if ((event.shiftKey && event.target === this.dateTabButton) ||
+            (!event.shiftKey && event.target === this.timeTabButton)) {
+            this.handleTab(event);
+        }
+    }
     /**
      * @hidden
      */
@@ -17096,47 +17123,20 @@ class DateTimePickerComponent extends MultiTabStop {
                 }"
             [scope]="this"
             >
-            <div class="k-datetime-buttongroup"
-                    [kendoEventsOutsideAngular]="{
-                        focusin: handleFocus,
-                        focusout: handleBlur
-                    }"
-              [scope]="this"
-              >
-              <div class="k-button-group k-button-group-stretched" role="group">
-                <button kendoButton
-                  type="button"
-                  class="k-group-start"
-                  [size]="isAdaptive ? 'large' : size"
-                  [class.k-selected]="activeTab === 'date'"
-                  [attr.aria-pressed]="activeTab === 'date' ? 'true' : 'false'"
-                  [attr.title]="localization.get('dateTabLabel')"
-                  [attr.aria-label]="localization.get('dateTabLabel')"
-                            [kendoEventsOutsideAngular]="{
-                                click: changeActiveTab.bind(this, 'date'),
-                                'keydown.shift.tab': handleTab
-                            }"
-                  [scope]="this"
-                  >
-                  {{localization.get('dateTab')}}
-                </button>
-                <button kendoButton
-                  type="button"
-                  class="k-group-end"
-                  [size]="isAdaptive ? 'large' : size"
-                  [class.k-selected]="activeTab === 'time'"
-                  [attr.aria-pressed]="activeTab === 'time' ? 'true' : 'false'"
-                  [attr.title]="localization.get('timeTabLabel')"
-                  [attr.aria-label]="localization.get('timeTabLabel')"
-                            [kendoEventsOutsideAngular]="{
-                                click: changeActiveTab.bind(this, 'time'),
-                                'keydown.tab': handleTab
-                            }"
-                  [scope]="this"
-                  >
-                  {{localization.get('timeTab')}}
-                </button>
-              </div>
+            <div class="k-datetime-buttongroup">
+                <kendo-segmented-control
+                [items]="tabItems"
+                [selected]="activeTabIndex"
+                [size]="isAdaptive ? 'large' : size"
+                layoutMode="stretch"
+                (selectedChange)="onTabChange($event)"
+                [kendoEventsOutsideAngular]="{
+                    focusin: handleFocus,
+                    focusout: handleBlur,
+                    keydown: handleButtonGroupKeydown
+                }"
+                [scope]="this">
+                </kendo-segmented-control>
             </div>
             <div
               #dateTimeSelector
@@ -17262,7 +17262,7 @@ class DateTimePickerComponent extends MultiTabStop {
             }
           </div>
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "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"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["closePopup", "activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutFirstPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "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"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["closePopup", "activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutFirstPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: SegmentedControlComponent, selector: "kendo-segmented-control", inputs: ["items", "layoutMode", "size", "selected"], outputs: ["selectedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
@@ -17520,47 +17520,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }"
             [scope]="this"
             >
-            <div class="k-datetime-buttongroup"
-                    [kendoEventsOutsideAngular]="{
-                        focusin: handleFocus,
-                        focusout: handleBlur
-                    }"
-              [scope]="this"
-              >
-              <div class="k-button-group k-button-group-stretched" role="group">
-                <button kendoButton
-                  type="button"
-                  class="k-group-start"
-                  [size]="isAdaptive ? 'large' : size"
-                  [class.k-selected]="activeTab === 'date'"
-                  [attr.aria-pressed]="activeTab === 'date' ? 'true' : 'false'"
-                  [attr.title]="localization.get('dateTabLabel')"
-                  [attr.aria-label]="localization.get('dateTabLabel')"
-                            [kendoEventsOutsideAngular]="{
-                                click: changeActiveTab.bind(this, 'date'),
-                                'keydown.shift.tab': handleTab
-                            }"
-                  [scope]="this"
-                  >
-                  {{localization.get('dateTab')}}
-                </button>
-                <button kendoButton
-                  type="button"
-                  class="k-group-end"
-                  [size]="isAdaptive ? 'large' : size"
-                  [class.k-selected]="activeTab === 'time'"
-                  [attr.aria-pressed]="activeTab === 'time' ? 'true' : 'false'"
-                  [attr.title]="localization.get('timeTabLabel')"
-                  [attr.aria-label]="localization.get('timeTabLabel')"
-                            [kendoEventsOutsideAngular]="{
-                                click: changeActiveTab.bind(this, 'time'),
-                                'keydown.tab': handleTab
-                            }"
-                  [scope]="this"
-                  >
-                  {{localization.get('timeTab')}}
-                </button>
-              </div>
+            <div class="k-datetime-buttongroup">
+                <kendo-segmented-control
+                [items]="tabItems"
+                [selected]="activeTabIndex"
+                [size]="isAdaptive ? 'large' : size"
+                layoutMode="stretch"
+                (selectedChange)="onTabChange($event)"
+                [kendoEventsOutsideAngular]="{
+                    focusin: handleFocus,
+                    focusout: handleBlur,
+                    keydown: handleButtonGroupKeydown
+                }"
+                [scope]="this">
+                </kendo-segmented-control>
             </div>
             <div
               #dateTimeSelector
@@ -17688,7 +17661,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         </ng-template>
         `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, DateInputComponent, EventsOutsideAngularDirective, DateInputCustomMessagesComponent, IconWrapperComponent, NgTemplateOutlet, ResizeSensorComponent, ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, NgClass, CalendarComponent, CalendarCustomMessagesComponent, TimeSelectorComponent, TimeSelectorCustomMessagesComponent]
+                    imports: [LocalizedMessagesDirective, DateInputComponent, EventsOutsideAngularDirective, DateInputCustomMessagesComponent, IconWrapperComponent, NgTemplateOutlet, ResizeSensorComponent, ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, NgClass, CalendarComponent, CalendarCustomMessagesComponent, TimeSelectorComponent, TimeSelectorCustomMessagesComponent, SegmentedControlComponent]
                 }]
         }], ctorParameters: () => [{ type: i1$2.PopupService }, { type: i1.IntlService }, { type: i0.ChangeDetectorRef }, { type: PickerService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i1$1.LocalizationService }, { type: DisabledDatesService }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i6.AdaptiveService }], propDecorators: { hostClasses: [{
                 type: HostBinding,
@@ -19172,7 +19145,7 @@ class DateRangePopupComponent {
             </div>
           </ng-template>
         </kendo-actionsheet>
-        `, isInline: true, dependencies: [{ kind: "directive", type: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }, { kind: "component", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "size", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }, { kind: "component", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "size", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DateRangePopupComponent, decorators: [{
             type: Component,

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1776940518,
-  "version": "24.0.0-develop.3",
+  "publishDate": 1778748718,
+  "version": "24.0.0-develop.30",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dateinputs",
-  "version": "24.0.0-develop.3",
+  "version": "24.0.0-develop.30",
   "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",
@@ -100,7 +100,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1776940518,
+      "publishDate": 1778748718,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -111,22 +111,22 @@
     "@angular/forms": "19 - 21",
     "@angular/platform-browser": "19 - 21",
     "@progress/kendo-licensing": "^1.11.0",
-    "@progress/kendo-angular-buttons": "24.0.0-develop.3",
-    "@progress/kendo-angular-common": "24.0.0-develop.3",
-    "@progress/kendo-angular-utils": "24.0.0-develop.3",
-    "@progress/kendo-angular-intl": "24.0.0-develop.3",
-    "@progress/kendo-angular-l10n": "24.0.0-develop.3",
-    "@progress/kendo-angular-icons": "24.0.0-develop.3",
-    "@progress/kendo-angular-popup": "24.0.0-develop.3",
-    "@progress/kendo-angular-navigation": "24.0.0-develop.3",
+    "@progress/kendo-angular-buttons": "24.0.0-develop.30",
+    "@progress/kendo-angular-common": "24.0.0-develop.30",
+    "@progress/kendo-angular-utils": "24.0.0-develop.30",
+    "@progress/kendo-angular-intl": "24.0.0-develop.30",
+    "@progress/kendo-angular-l10n": "24.0.0-develop.30",
+    "@progress/kendo-angular-icons": "24.0.0-develop.30",
+    "@progress/kendo-angular-popup": "24.0.0-develop.30",
+    "@progress/kendo-angular-navigation": "24.0.0-develop.30",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "24.0.0-develop.3",
+    "@progress/kendo-angular-schematics": "24.0.0-develop.30",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-date-math": "^1.1.0",
-    "@progress/kendo-dateinputs-common": "^0.4.10"
+    "@progress/kendo-dateinputs-common": "^0.4.11"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-dateinputs.mjs",