@progress/kendo-angular-dateinputs 24.0.0-develop.4 → 24.0.0-develop.41

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

@@ -9,15 +9,15 @@ import * as i1$1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
 import { cloneDate, MS_PER_HOUR, MS_PER_MINUTE, addDays, getDate, isEqual, lastDecadeOfCentury, firstDecadeOfCentury, addCenturies, addDecades, lastYearOfDecade, firstYearOfDecade, createDate, lastMonthOfYear, lastDayOfMonth, durationInCenturies, addYears, durationInDecades, firstDayOfMonth, addMonths, addWeeks, dayOfWeek, durationInMonths, firstMonthOfYear, durationInYears, weekInYear } from '@progress/kendo-date-math';
 import * as i19 from '@progress/kendo-angular-common';
-import { normalizeKeys, Keys, isDocumentAvailable, EventsOutsideAngularDirective, guid, hasObservers, isObject, KendoInput, ResizeSensorComponent, isObjectPresent, removeHTMLAttributes, parseAttributes, anyChanged, isControlRequired, setHTMLAttributes, MultiTabStop, parseCSSClassNames, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
+import { normalizeKeys, Keys, isDocumentAvailable, EventsOutsideAngularDirective, guid, hasObservers, isObject, KendoInput, ResizeSensorComponent, KENDO_WEBMCP_HOST, isObjectPresent, removeHTMLAttributes, parseAttributes, anyChanged, isControlRequired, setHTMLAttributes, MultiTabStop, parseCSSClassNames, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
 export { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 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: 1776957347,
-    version: '24.0.0-develop.4',
+    publishDate: 1779255782,
+    version: '24.0.0-develop.41',
     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,
@@ -8022,7 +8022,8 @@ class CalendarComponent {
             },
             NavigationService,
             ScrollSyncService,
-            SelectionService
+            SelectionService,
+            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => CalendarComponent) }
         ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "navigationItemTemplate", first: true, predicate: NavigationItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "navigationView", first: true, predicate: NavigationComponent, descendants: true }, { propertyName: "monthView", first: true, predicate: ViewListComponent, descendants: true }, { propertyName: "multiViewCalendar", first: true, predicate: MultiViewCalendarComponent, descendants: true }], exportAs: ["kendo-calendar"], usesOnChanges: true, ngImport: i0, template: `
     <ng-container kendoCalendarLocalizedMessages
       i18n-today="kendo.calendar.today|The label for the today button in the calendar header"
@@ -8163,7 +8164,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         },
                         NavigationService,
                         ScrollSyncService,
-                        SelectionService
+                        SelectionService,
+                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => CalendarComponent) }
                     ],
                     selector: 'kendo-calendar',
                     template: `
@@ -8581,10 +8583,10 @@ class DateInputIntl {
  * Represents the [Kendo UI DateInput component for Angular](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput).
  *
  * ```html
- * <kendo-dateinput/>
+ * <kendo-dateinput></kendo-dateinput>
  * ```
  *
-  * @remarks
+ * @remarks
  * Supported children components are: {@link DateInputCustomMessagesComponent}.
  */
 class DateInputComponent {
@@ -8599,7 +8601,7 @@ class DateInputComponent {
     /**
      * @hidden
      */
-    caretAltUpIcon = caretAltUpIcon;
+    chevronUpIcon = chevronUpIcon;
     /**
      * @hidden
      */
@@ -8607,7 +8609,7 @@ class DateInputComponent {
     /**
      * @hidden
      */
-    caretAltDownIcon = caretAltDownIcon;
+    chevronDownIcon = chevronDownIcon;
     /**
      * @hidden
      */
@@ -8904,9 +8906,6 @@ class DateInputComponent {
      * @hidden
      */
     dateInput;
-    get wrapperClass() {
-        return true;
-    }
     get disabledClass() {
         return this.disabled;
     }
@@ -9059,6 +9058,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,7 +9196,11 @@ class DateInputComponent {
         this.kendoDate?.setOptions(this.options, true);
         this.kendoDateObject?.setValue(this.value);
         this.kendoDate?.refreshElementValue();
+        this.cdr.markForCheck();
     }
+    /**
+     * Resets the value of the DateInput component to `null` and triggers the `valueChange` event.
+     */
     resetInput() {
         this.isDateIncomplete = false;
         this.writeValue(null);
@@ -9379,7 +9384,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 +9455,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 +9473,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 +9561,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 +9579,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 +9677,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']
@@ -11017,7 +11016,8 @@ class DatePickerComponent extends MultiTabStop {
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.datepicker'
-            }
+            },
+            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => DatePickerComponent) }
         ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "navigationItemTemplate", first: true, predicate: NavigationItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datepicker"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoDatePickerLocalizedMessages
           i18n-today="kendo.datepicker.today|The label for the today button in the calendar header"
@@ -11207,7 +11207,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,
@@ -11225,7 +11225,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.datepicker'
-                        }
+                        },
+                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => DatePickerComponent) }
                     ],
                     selector: 'kendo-datepicker',
                     template: `
@@ -11627,7 +11628,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')
@@ -14668,7 +14669,8 @@ class TimePickerComponent extends MultiTabStop {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.timepicker'
             },
-            PickerService
+            PickerService,
+            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => TimePickerComponent) }
         ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-timepicker"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoTimePickerLocalizedMessages
           i18n-accept="kendo.timepicker.accept|The Accept button text in the timepicker component"
@@ -14888,7 +14890,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,
@@ -14906,7 +14908,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                             provide: L10N_PREFIX,
                             useValue: 'kendo.timepicker'
                         },
-                        PickerService
+                        PickerService,
+                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => TimePickerComponent) }
                     ],
                     selector: 'kendo-timepicker',
                     template: `
@@ -15418,8 +15421,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 +16365,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
      */
@@ -16855,7 +16891,8 @@ class DateTimePickerComponent extends MultiTabStop {
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
             { provide: KendoInput, useExisting: forwardRef(() => DateTimePickerComponent) },
-            { provide: MultiTabStop, useExisting: forwardRef(() => DateTimePickerComponent) }
+            { provide: MultiTabStop, useExisting: forwardRef(() => DateTimePickerComponent) },
+            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => DateTimePickerComponent) }
         ], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datetimepicker"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container
           kendoDateTimePickerLocalizedMessages
@@ -17096,47 +17133,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 +17272,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,
@@ -17278,7 +17288,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateTimePickerComponent), multi: true },
                         { provide: KendoInput, useExisting: forwardRef(() => DateTimePickerComponent) },
-                        { provide: MultiTabStop, useExisting: forwardRef(() => DateTimePickerComponent) }
+                        { provide: MultiTabStop, useExisting: forwardRef(() => DateTimePickerComponent) },
+                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => DateTimePickerComponent) }
                     ],
                     template: `
         <ng-container
@@ -17520,47 +17531,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 +17672,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 +19156,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,
@@ -19501,7 +19485,10 @@ class DateRangeComponent {
         this.subscription?.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DateRangeComponent, deps: [{ token: DateRangeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: DateRangeComponent, isStandalone: true, selector: "kendo-daterange", inputs: { size: "size" }, host: { listeners: { "keydown": "keydown($event)" }, properties: { "class.k-daterangepicker": "this.wrapperClass" } }, providers: [DateRangeService], queries: [{ propertyName: "contentPopup", predicate: DateRangePopupComponent }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: DateRangeComponent, isStandalone: true, selector: "kendo-daterange", inputs: { size: "size" }, host: { listeners: { "keydown": "keydown($event)" }, properties: { "class.k-daterangepicker": "this.wrapperClass" } }, providers: [
+            DateRangeService,
+            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => DateRangeComponent) }
+        ], queries: [{ propertyName: "contentPopup", predicate: DateRangePopupComponent }], ngImport: i0, template: `
         <ng-content></ng-content>
         @if (showDefault) {
           <kendo-daterange-popup [size]="size"></kendo-daterange-popup>
@@ -19511,7 +19498,10 @@ class DateRangeComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
             args: [{
-                    providers: [DateRangeService],
+                    providers: [
+                        DateRangeService,
+                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => DateRangeComponent) }
+                    ],
                     selector: 'kendo-daterange',
                     template: `
         <ng-content></ng-content>

package/package-metadata.mjs

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