@progress/kendo-angular-dateinputs 21.1.1-develop.1 → 21.2.0-develop.1

package/esm2022/datetimepicker/datetimepicker.component.mjs

@@ -43,7 +43,7 @@ import { TimeSelectorCustomMessagesComponent } from '../timepicker/localization/
 import { CalendarCustomMessagesComponent } from '../calendar/localization/calendar-custom-messages.component';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
-import { NgIf, NgTemplateOutlet, NgClass } from '@angular/common';
+import { NgTemplateOutlet, NgClass } from '@angular/common';
 import { DateInputCustomMessagesComponent } from '../dateinput/localization/dateinput-custom-messages.component';
 import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
 import { touchEnabled } from '@progress/kendo-common';
@@ -1483,7 +1483,7 @@ export class DateTimePickerComponent extends MultiTabStop {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i1.PopupService }, { token: i2.IntlService }, { token: i0.ChangeDetectorRef }, { token: i3.PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i4.LocalizationService }, { token: i5.DisabledDatesService }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i6.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DateTimePickerComponent, isStandalone: true, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", clearButton: "clearButton", autoFill: "autoFill", adaptiveMode: "adaptiveMode", inputAttributes: "inputAttributes", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode", headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", escape: "escape" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass", "class.k-readonly": "this.readonly" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DateTimePickerComponent, isStandalone: true, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", clearButton: "clearButton", autoFill: "autoFill", adaptiveMode: "adaptiveMode", inputAttributes: "inputAttributes", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode", headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", escape: "escape" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass", "class.k-readonly": "this.readonly" } }, providers: [
             PickerService,
             LocalizationService,
             DisabledDatesService,
@@ -1494,163 +1494,167 @@ export class DateTimePickerComponent extends MultiTabStop {
             { provide: MultiTabStop, 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
-
-            i18n-dateTab="kendo.datetimepicker.dateTab|The Date tab text in the datetimepicker popup header"
-            dateTab="Date"
-
-            i18n-dateTabLabel="kendo.datetimepicker.dateTabLabel|The label for the Date tab in the datetimepicker popup header"
-            dateTabLabel="Date tab"
-
-            i18n-timeTab="kendo.datetimepicker.timeTab|The Time tab text in the datetimepicker popup header"
-            timeTab="Time"
-
-            i18n-timeTabLabel="kendo.datetimepicker.timeTabLabel|The label for the Time tab in the datetimepicker popup header"
-            timeTabLabel="Time tab"
-
-            i18n-toggle="kendo.datetimepicker.toggle|The title of the toggle button in the datetimepicker component"
-            toggle="Toggle popup"
-
-            i18n-accept="kendo.datetimepicker.accept|The Accept button text in the datetimepicker component"
-            accept="Set"
-
-            i18n-acceptLabel="kendo.datetimepicker.acceptLabel|The label for the Accept button in the datetimepicker component"
-            acceptLabel="Set"
-
-            i18n-cancel="kendo.datetimepicker.cancel|The Cancel button text in the datetimepicker component"
-            cancel="Cancel"
-
-            i18n-cancelLabel="kendo.datetimepicker.cancelLabel|The label for the Cancel button in the datetimepicker component"
-            cancelLabel="Cancel"
-
-            i18n-now="kendo.datetimepicker.now|The Now button text in the timepicker component"
-            now="NOW"
-
-            i18n-nowLabel="kendo.datetimepicker.nowLabel|The label for the Now button in the timepicker component"
-            nowLabel="Select now"
-
-            i18n-today="kendo.datetimepicker.today|The label for the today button in the calendar header"
-            today="Today"
-
-            i18n-prevButtonTitle="kendo.datetimepicker.prevButtonTitle|The title of the previous button in the Classic calendar"
-            prevButtonTitle="Navigate to previous view"
-
-            i18n-nextButtonTitle="kendo.datetimepicker.nextButtonTitle|The title of the next button in the Classic calendar"
-            nextButtonTitle="Navigate to next view"
-
-            i18n-parentViewButtonTitle="kendo.datetimepicker.parentViewButtonTitle|The title of the parent view button in the calendar header"
-            parentViewButtonTitle="Navigate to parent view"
-
-            i18n-hour="kendo.datetimepicker.hour|The label for the hour part in the timepicker component"
-            hour="Hour"
-
-            i18n-minute="kendo.datetimepicker.minute|The label for the minute part in the timepicker component"
-            minute="Minute"
-
-            i18n-second="kendo.datetimepicker.second|The label for the second part in the timepicker component"
-            second="Second"
-
-            i18n-millisecond="kendo.datetimepicker.millisecond|The label for the millisecond part in the timepicker component"
-            millisecond="Millisecond"
-
-            i18n-dayperiod="kendo.datetimepicker.dayperiod|The label for the dayperiod part in the timepicker component"
-            dayperiod="Dayperiod"
-
-            i18n-clearTitle="kendo.datetimepicker.clearTitle|The title of the clear button"
-            clearTitle="clear"
-
-            i18n-adaptiveCloseButtonTitle="kendo.datetimepicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
-            adaptiveCloseButtonTitle="Close"
-        >
+          kendoDateTimePickerLocalizedMessages
+        
+          i18n-dateTab="kendo.datetimepicker.dateTab|The Date tab text in the datetimepicker popup header"
+          dateTab="Date"
+        
+          i18n-dateTabLabel="kendo.datetimepicker.dateTabLabel|The label for the Date tab in the datetimepicker popup header"
+          dateTabLabel="Date tab"
+        
+          i18n-timeTab="kendo.datetimepicker.timeTab|The Time tab text in the datetimepicker popup header"
+          timeTab="Time"
+        
+          i18n-timeTabLabel="kendo.datetimepicker.timeTabLabel|The label for the Time tab in the datetimepicker popup header"
+          timeTabLabel="Time tab"
+        
+          i18n-toggle="kendo.datetimepicker.toggle|The title of the toggle button in the datetimepicker component"
+          toggle="Toggle popup"
+        
+          i18n-accept="kendo.datetimepicker.accept|The Accept button text in the datetimepicker component"
+          accept="Set"
+        
+          i18n-acceptLabel="kendo.datetimepicker.acceptLabel|The label for the Accept button in the datetimepicker component"
+          acceptLabel="Set"
+        
+          i18n-cancel="kendo.datetimepicker.cancel|The Cancel button text in the datetimepicker component"
+          cancel="Cancel"
+        
+          i18n-cancelLabel="kendo.datetimepicker.cancelLabel|The label for the Cancel button in the datetimepicker component"
+          cancelLabel="Cancel"
+        
+          i18n-now="kendo.datetimepicker.now|The Now button text in the timepicker component"
+          now="NOW"
+        
+          i18n-nowLabel="kendo.datetimepicker.nowLabel|The label for the Now button in the timepicker component"
+          nowLabel="Select now"
+        
+          i18n-today="kendo.datetimepicker.today|The label for the today button in the calendar header"
+          today="Today"
+        
+          i18n-prevButtonTitle="kendo.datetimepicker.prevButtonTitle|The title of the previous button in the Classic calendar"
+          prevButtonTitle="Navigate to previous view"
+        
+          i18n-nextButtonTitle="kendo.datetimepicker.nextButtonTitle|The title of the next button in the Classic calendar"
+          nextButtonTitle="Navigate to next view"
+        
+          i18n-parentViewButtonTitle="kendo.datetimepicker.parentViewButtonTitle|The title of the parent view button in the calendar header"
+          parentViewButtonTitle="Navigate to parent view"
+        
+          i18n-hour="kendo.datetimepicker.hour|The label for the hour part in the timepicker component"
+          hour="Hour"
+        
+          i18n-minute="kendo.datetimepicker.minute|The label for the minute part in the timepicker component"
+          minute="Minute"
+        
+          i18n-second="kendo.datetimepicker.second|The label for the second part in the timepicker component"
+          second="Second"
+        
+          i18n-millisecond="kendo.datetimepicker.millisecond|The label for the millisecond part in the timepicker component"
+          millisecond="Millisecond"
+        
+          i18n-dayperiod="kendo.datetimepicker.dayperiod|The label for the dayperiod part in the timepicker component"
+          dayperiod="Dayperiod"
+        
+          i18n-clearTitle="kendo.datetimepicker.clearTitle|The title of the clear button"
+          clearTitle="clear"
+        
+          i18n-adaptiveCloseButtonTitle="kendo.datetimepicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+          adaptiveCloseButtonTitle="Close"
+          >
         </ng-container>
-
+        
         <kendo-dateinput
-            [value]="value"
-            [format]="format"
-            [clearButton]="clearButton"
-            [twoDigitYearMax]="twoDigitYearMax"
-            [min]="min"
-            [max]="max"
-            [incompleteDateValidation]="incompleteDateValidation"
-            [autoCorrectParts]="autoCorrectParts"
-            [autoSwitchParts]="autoSwitchParts"
-            [autoSwitchKeys]="autoSwitchKeys"
-            [enableMouseWheel]="enableMouseWheel"
-            [allowCaretMode]="allowCaretMode"
-            [autoFill]="autoFill"
-            [formatPlaceholder]="formatPlaceholder"
-            [placeholder]="placeholder"
-            [disabled]="disabled"
-            [focusableId]="focusableId"
-            [readonly]="readonly || readOnlyInput"
-            [role]="'combobox'"
-            [ariaReadOnly]="readonly"
-            [steps]="steps"
-            [tabindex]="tabindex"
-            [isRequired]="isControlRequired"
-            [title]="adaptiveTitle"
-            pickerType="datetimepicker"
-            hasPopup="dialog"
-            [inputAttributes]="inputAttributes"
-            [isPopupOpen]="isOpen"
-            (valueChange)="handleInputValueChange($event)"
+          [value]="value"
+          [format]="format"
+          [clearButton]="clearButton"
+          [twoDigitYearMax]="twoDigitYearMax"
+          [min]="min"
+          [max]="max"
+          [incompleteDateValidation]="incompleteDateValidation"
+          [autoCorrectParts]="autoCorrectParts"
+          [autoSwitchParts]="autoSwitchParts"
+          [autoSwitchKeys]="autoSwitchKeys"
+          [enableMouseWheel]="enableMouseWheel"
+          [allowCaretMode]="allowCaretMode"
+          [autoFill]="autoFill"
+          [formatPlaceholder]="formatPlaceholder"
+          [placeholder]="placeholder"
+          [disabled]="disabled"
+          [focusableId]="focusableId"
+          [readonly]="readonly || readOnlyInput"
+          [role]="'combobox'"
+          [ariaReadOnly]="readonly"
+          [steps]="steps"
+          [tabindex]="tabindex"
+          [isRequired]="isControlRequired"
+          [title]="adaptiveTitle"
+          pickerType="datetimepicker"
+          hasPopup="dialog"
+          [inputAttributes]="inputAttributes"
+          [isPopupOpen]="isOpen"
+          (valueChange)="handleInputValueChange($event)"
             [kendoEventsOutsideAngular]="{
                 keydown: handleKeyDown
             }"
-            [scope]="this"
-            fillMode="none"
-            rounded="none"
-            size="none"
-            (click)="handleDateInputClick()"
-        >
-            <kendo-dateinput-messages
-                [clearTitle]="localization.get('clearTitle')"
+          [scope]="this"
+          fillMode="none"
+          rounded="none"
+          size="none"
+          (click)="handleDateInputClick()"
+          >
+          <kendo-dateinput-messages
+            [clearTitle]="localization.get('clearTitle')"
             >
-            </kendo-dateinput-messages>
+          </kendo-dateinput-messages>
         </kendo-dateinput>
         <button
-            #toggleButton
-            type="button"
-            class="k-input-button k-button k-icon-button"
-            [tabindex]="-1"
-            [attr.title]="localization.get('toggle')"
-            [attr.aria-label]="localization.get('toggle')"
-            [attr.disabled]="disabled ? '' : null"
+          #toggleButton
+          type="button"
+          class="k-input-button k-button k-icon-button"
+          [tabindex]="-1"
+          [attr.title]="localization.get('toggle')"
+          [attr.aria-label]="localization.get('toggle')"
+          [attr.disabled]="disabled ? '' : null"
             [kendoEventsOutsideAngular]="{
                 mousedown: preventMouseDown,
                 click: handleIconClick
             }"
-            [scope]="this"
-        >
+          [scope]="this"
+          >
+          @if (activeTab === 'date') {
             <kendo-icon-wrapper
-                *ngIf="activeTab === 'date'"
-                name="calendar"
-                [svgIcon]="calendarIcon"
-                innerCssClass="k-button-icon"
-            >
+              name="calendar"
+              [svgIcon]="calendarIcon"
+              innerCssClass="k-button-icon"
+              >
             </kendo-icon-wrapper>
+          }
+          @if (activeTab === 'time') {
             <kendo-icon-wrapper
-                *ngIf="activeTab === 'time'"
-                name="clock"
-                [svgIcon]="clockIcon"
-                innerCssClass="k-button-icon"
-            >
+              name="clock"
+              [svgIcon]="clockIcon"
+              innerCssClass="k-button-icon"
+              >
             </kendo-icon-wrapper>
+          }
         </button>
-
+        
         <ng-container #container></ng-container>
-
+        
         <ng-template #popupTemplate>
-            <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
+          <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
         </ng-template>
-
-        <kendo-resize-sensor *ngIf="isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
-
+        
+        @if (isAdaptiveModeEnabled) {
+          <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
+        }
+        
         <kendo-actionsheet
-            #actionSheet
-            (overlayClick)="toggleActionSheet(false)"
-            (collapse)="handleActionSheetCollapse()"
-            [titleId]="calendar?.headerId"
+          #actionSheet
+          (overlayClick)="toggleActionSheet(false)"
+          (collapse)="handleActionSheetCollapse()"
+          [titleId]="calendar?.headerId"
             [cssClass]="{
                 'k-adaptive-actionsheet': true,
                 'k-actionsheet-fullscreen': windowSize === 'small',
@@ -1659,66 +1663,71 @@ export class DateTimePickerComponent extends MultiTabStop {
             [cssStyle]="{
                 height: windowSize === 'small' ? '100vh' : '60vh'
             }"
-        >
-            <ng-template kendoActionSheetTemplate>
-                <div class="k-actionsheet-titlebar">
-                    <div class="k-actionsheet-titlebar-group">
-                        <div class="k-actionsheet-title">
-                            <div class="k-text-center" *ngIf="adaptiveTitle">{{ adaptiveTitle }}</div>
-                            <div class="k-actionsheet-subtitle k-text-center" *ngIf="adaptiveSubtitle">{{ adaptiveSubtitle }}</div>
-                        </div>
-                        <div class="k-actionsheet-actions">
-                            <button
-                                kendoButton
-                                type="button"
-                                icon="check"
-                                [attr.title]="localization.get('adaptiveCloseButtonTitle')"
-                                [svgIcon]="checkIcon"
-                                fillMode="flat"
-                                themeColor="primary"
-                                [tabIndex]="-1"
-                                size="large"
-                                innerCssClass="k-button-icon"
-                                (click)="toggleActionSheet(false)">
-                            </button>
-                        </div>
-                    </div>
+          >
+          <ng-template kendoActionSheetTemplate>
+            <div class="k-actionsheet-titlebar">
+              <div class="k-actionsheet-titlebar-group">
+                <div class="k-actionsheet-title">
+                  @if (adaptiveTitle) {
+                    <div class="k-text-center">{{ adaptiveTitle }}</div>
+                  }
+                  @if (adaptiveSubtitle) {
+                    <div class="k-actionsheet-subtitle k-text-center">{{ adaptiveSubtitle }}</div>
+                  }
                 </div>
-                <div class="k-actionsheet-content">
-                    <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
+                <div class="k-actionsheet-actions">
+                  <button
+                    kendoButton
+                    type="button"
+                    icon="check"
+                    [attr.title]="localization.get('adaptiveCloseButtonTitle')"
+                    [svgIcon]="checkIcon"
+                    fillMode="flat"
+                    themeColor="primary"
+                    [tabIndex]="-1"
+                    size="large"
+                    innerCssClass="k-button-icon"
+                    (click)="toggleActionSheet(false)">
+                  </button>
                 </div>
-                <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
-                    <button kendoButton
-                        *ngIf="cancelButton"
-                        class="k-time-cancel"
-                        type="button"
-                        (click)="handleCancel()"
-                        size="large"
-                        [attr.title]="localization.get('cancelLabel')"
-                        [attr.aria-label]="localization.get('cancelLabel')"
-                    >
-                        {{localization.get('cancel')}}
-                    </button>
-
-                    <button kendoButton
-                        type="button"
-                        class="k-time-accept"
-                        (click)="handleAccept()"
-                        [disabled]="!calendarValue"
-                        size="large"
-                        themeColor="primary"
-                        [attr.title]="localization.get('acceptLabel')"
-                        [attr.aria-label]="localization.get('acceptLabel')"
-                    >
-                        {{localization.get('accept')}}
-                    </button>
-                </div>
-            </ng-template>
+              </div>
+            </div>
+            <div class="k-actionsheet-content">
+              <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
+            </div>
+            <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
+              @if (cancelButton) {
+                <button kendoButton
+                  class="k-time-cancel"
+                  type="button"
+                  (click)="handleCancel()"
+                  size="large"
+                  [attr.title]="localization.get('cancelLabel')"
+                  [attr.aria-label]="localization.get('cancelLabel')"
+                  >
+                  {{localization.get('cancel')}}
+                </button>
+              }
+        
+              <button kendoButton
+                type="button"
+                class="k-time-accept"
+                (click)="handleAccept()"
+                [disabled]="!calendarValue"
+                size="large"
+                themeColor="primary"
+                [attr.title]="localization.get('acceptLabel')"
+                [attr.aria-label]="localization.get('acceptLabel')"
+                >
+                {{localization.get('accept')}}
+              </button>
+            </div>
+          </ng-template>
         </kendo-actionsheet>
-
+        
         <ng-template #dateTimeTemplate>
-            <div
-                class="k-datetime-wrap k-{{activeTab}}-tab"
+          <div
+            class="k-datetime-wrap k-{{activeTab}}-tab"
                 [ngClass]="{
                     'k-datetime-wrap-md': !isAdaptive,
                     'k-datetime-wrap-lg': isAdaptive
@@ -1727,174 +1736,175 @@ export class DateTimePickerComponent extends MultiTabStop {
                     mousedown: preventMouseDown,
                     keydown: handleKeyDown
                 }"
-                [scope]="this"
+            [scope]="this"
             >
-                <div class="k-datetime-buttongroup"
+            <div class="k-datetime-buttongroup"
                     [kendoEventsOutsideAngular]="{
                         focusin: handleFocus,
                         focusout: handleBlur
                     }"
-                    [scope]="this"
-                >
-                    <div class="k-button-group k-button-group-solid 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')"
+              [scope]="this"
+              >
+              <div class="k-button-group k-button-group-solid 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')"
+                  [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>
-                <div
-                    #dateTimeSelector
-                    class="k-datetime-selector"
-                    [style.transition]="tabSwitchTransition"
+                  [scope]="this"
+                  >
+                  {{localization.get('timeTab')}}
+                </button>
+              </div>
+            </div>
+            <div
+              #dateTimeSelector
+              class="k-datetime-selector"
+              [style.transition]="tabSwitchTransition"
                     [kendoEventsOutsideAngular]="{
                         transitionend: handleTabChangeTransitionEnd.bind(this, dateTimeSelector)
                     }"
-                >
-                    <div class="k-datetime-calendar-wrap">
-                        <kendo-calendar
-                            #calendar
-                            [focusedDate]="focusedDate"
-                            [size]="isAdaptive ? 'large' : size"
-                            [(value)]="calendarValue"
-                            [type]="calendarType"
-                            [min]="calendarMin"
-                            [max]="calendarMax"
-                            [weekDaysFormat]="weekDaysFormat"
-                            [weekNumber]="weekNumber"
-                            [navigation]="false"
-                            [animateNavigation]="animateCalendarNavigation"
-                            [showOtherMonthDays]="showOtherMonthDays"
-                            [cellTemplate]="cellTemplate"
-                            [monthCellTemplate]="monthCellTemplate"
-                            [yearCellTemplate]="yearCellTemplate"
-                            [decadeCellTemplate]="decadeCellTemplate"
-                            [centuryCellTemplate]="centuryCellTemplate"
-                            [weekNumberTemplate]="weekNumberTemplate"
-                            [headerTitleTemplate]="headerTitleTemplate"
-                            [headerTemplate]="headerTemplate"
-                            [footerTemplate]="footerTemplate"
-                            [footer]="footer"
-                            [disabled]="disableCalendar"
-                            [disabledDates]="disabledDates"
-                            (valueChange)="handleCalendarValueChange()"
-                        >
-                            <kendo-calendar-messages
-                                [today]="localization.get('today')"
-                                [prevButtonTitle]="localization.get('prevButtonTitle')"
-                                [nextButtonTitle]="localization.get('nextButtonTitle')"
-                                [parentViewButtonTitle]="localization.get('parentViewButtonTitle')"
-                            >
-                            </kendo-calendar-messages>
-                        </kendo-calendar>
-                    </div>
-                    <div class="k-datetime-time-wrap">
-                        <kendo-timeselector
-                            [ngClass]="{'k-timeselector-lg': isAdaptive}"
-                            [value]="value"
-                            [format]="timeSelectorFormat"
-                            [min]="timeSelectorMin"
-                            [max]="timeSelectorMax"
-                            [setButton]="false"
-                            [cancelButton]="false"
-                            [steps]="steps"
-                            [disabled]="disableTimeSelector"
-                            [isAdaptiveEnabled]="isAdaptiveModeEnabled"
-                            [isDateTimePicker]="true"
-                            (tabOutLastPart)="onTabOutLastPart()"
-                            (tabOutFirstPart)="onTabOutFirstPart()"
-                            (tabOutNow)="onTabOutNow()"
-                        >
-                            <kendo-timeselector-messages
-                                [acceptLabel]="localization.get('acceptLabel')"
-                                [accept]="localization.get('accept')"
-                                [cancelLabel]="localization.get('cancelLabel')"
-                                [cancel]="localization.get('cancel')"
-                                [nowLabel]="localization.get('nowLabel')"
-                                [now]="localization.get('now')"
-                                [hour]="localization.get('hour')"
-                                [minute]="localization.get('minute')"
-                                [second]="localization.get('second')"
-                                [millisecond]="localization.get('millisecond')"
-                                [dayperiod]="localization.get('dayperiod')"
-                            >
-                            </kendo-timeselector-messages>
-                        </kendo-timeselector>
-                    </div>
-                </div>
-                <div
-                    *ngIf="!isAdaptive"
-                    class="k-datetime-footer k-actions k-actions-stretched k-actions-horizontal"
+              >
+              <div class="k-datetime-calendar-wrap">
+                <kendo-calendar
+                  #calendar
+                  [focusedDate]="focusedDate"
+                  [size]="isAdaptive ? 'large' : size"
+                  [(value)]="calendarValue"
+                  [type]="calendarType"
+                  [min]="calendarMin"
+                  [max]="calendarMax"
+                  [weekDaysFormat]="weekDaysFormat"
+                  [weekNumber]="weekNumber"
+                  [navigation]="false"
+                  [animateNavigation]="animateCalendarNavigation"
+                  [showOtherMonthDays]="showOtherMonthDays"
+                  [cellTemplate]="cellTemplate"
+                  [monthCellTemplate]="monthCellTemplate"
+                  [yearCellTemplate]="yearCellTemplate"
+                  [decadeCellTemplate]="decadeCellTemplate"
+                  [centuryCellTemplate]="centuryCellTemplate"
+                  [weekNumberTemplate]="weekNumberTemplate"
+                  [headerTitleTemplate]="headerTitleTemplate"
+                  [headerTemplate]="headerTemplate"
+                  [footerTemplate]="footerTemplate"
+                  [footer]="footer"
+                  [disabled]="disableCalendar"
+                  [disabledDates]="disabledDates"
+                  (valueChange)="handleCalendarValueChange()"
+                  >
+                  <kendo-calendar-messages
+                    [today]="localization.get('today')"
+                    [prevButtonTitle]="localization.get('prevButtonTitle')"
+                    [nextButtonTitle]="localization.get('nextButtonTitle')"
+                    [parentViewButtonTitle]="localization.get('parentViewButtonTitle')"
+                    >
+                  </kendo-calendar-messages>
+                </kendo-calendar>
+              </div>
+              <div class="k-datetime-time-wrap">
+                <kendo-timeselector
+                  [ngClass]="{'k-timeselector-lg': isAdaptive}"
+                  [value]="value"
+                  [format]="timeSelectorFormat"
+                  [min]="timeSelectorMin"
+                  [max]="timeSelectorMax"
+                  [setButton]="false"
+                  [cancelButton]="false"
+                  [steps]="steps"
+                  [disabled]="disableTimeSelector"
+                  [isAdaptiveEnabled]="isAdaptiveModeEnabled"
+                  [isDateTimePicker]="true"
+                  (tabOutLastPart)="onTabOutLastPart()"
+                  (tabOutFirstPart)="onTabOutFirstPart()"
+                  (tabOutNow)="onTabOutNow()"
+                  >
+                  <kendo-timeselector-messages
+                    [acceptLabel]="localization.get('acceptLabel')"
+                    [accept]="localization.get('accept')"
+                    [cancelLabel]="localization.get('cancelLabel')"
+                    [cancel]="localization.get('cancel')"
+                    [nowLabel]="localization.get('nowLabel')"
+                    [now]="localization.get('now')"
+                    [hour]="localization.get('hour')"
+                    [minute]="localization.get('minute')"
+                    [second]="localization.get('second')"
+                    [millisecond]="localization.get('millisecond')"
+                    [dayperiod]="localization.get('dayperiod')"
+                    >
+                  </kendo-timeselector-messages>
+                </kendo-timeselector>
+              </div>
+            </div>
+            @if (!isAdaptive) {
+              <div
+                class="k-datetime-footer k-actions k-actions-stretched k-actions-horizontal"
                     [kendoEventsOutsideAngular]="{
                         focusin: handleFocus,
                         focusout: handleBlur
                     }"
-                    [scope]="this"
+                [scope]="this"
                 >
-                    <button kendoButton
-                        type="button"
-                        class="k-time-accept"
-                        themeColor="primary"
-                        [attr.title]="localization.get('acceptLabel')"
-                        [attr.aria-label]="localization.get('acceptLabel')"
-                        [disabled]="!calendarValue"
+                <button kendoButton
+                  type="button"
+                  class="k-time-accept"
+                  themeColor="primary"
+                  [attr.title]="localization.get('acceptLabel')"
+                  [attr.aria-label]="localization.get('acceptLabel')"
+                  [disabled]="!calendarValue"
                         [kendoEventsOutsideAngular]="{
                             click: handleAccept,
                             'keydown.tab': handleTab,
                             'keydown.shift.tab': handleTab
                         }"
-                        [scope]="this"
-                    >
-                        {{localization.get('accept')}}
-                    </button>
-
-                    <button kendoButton
-                        *ngIf="cancelButton"
-                        type="button"
-                        class="k-time-cancel"
-                        [attr.title]="localization.get('cancelLabel')"
-                        [attr.aria-label]="localization.get('cancelLabel')"
+                  [scope]="this"
+                  >
+                  {{localization.get('accept')}}
+                </button>
+                @if (cancelButton) {
+                  <button kendoButton
+                    type="button"
+                    class="k-time-cancel"
+                    [attr.title]="localization.get('cancelLabel')"
+                    [attr.aria-label]="localization.get('cancelLabel')"
                         [kendoEventsOutsideAngular]="{
                             click: handleCancel,
                             'keydown.tab': handleTab,
                             'keydown.shift.tab': handleTab
                         }"
-                        [scope]="this"
+                    [scope]="this"
                     >
-                        {{localization.get('cancel')}}
-                    </button>
-                </div>
-            </div>
+                    {{localization.get('cancel')}}
+                  </button>
+                }
+              </div>
+            }
+          </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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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", "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", "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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
@@ -1914,163 +1924,167 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ],
                     template: `
         <ng-container
-            kendoDateTimePickerLocalizedMessages
-
-            i18n-dateTab="kendo.datetimepicker.dateTab|The Date tab text in the datetimepicker popup header"
-            dateTab="Date"
-
-            i18n-dateTabLabel="kendo.datetimepicker.dateTabLabel|The label for the Date tab in the datetimepicker popup header"
-            dateTabLabel="Date tab"
-
-            i18n-timeTab="kendo.datetimepicker.timeTab|The Time tab text in the datetimepicker popup header"
-            timeTab="Time"
-
-            i18n-timeTabLabel="kendo.datetimepicker.timeTabLabel|The label for the Time tab in the datetimepicker popup header"
-            timeTabLabel="Time tab"
-
-            i18n-toggle="kendo.datetimepicker.toggle|The title of the toggle button in the datetimepicker component"
-            toggle="Toggle popup"
-
-            i18n-accept="kendo.datetimepicker.accept|The Accept button text in the datetimepicker component"
-            accept="Set"
-
-            i18n-acceptLabel="kendo.datetimepicker.acceptLabel|The label for the Accept button in the datetimepicker component"
-            acceptLabel="Set"
-
-            i18n-cancel="kendo.datetimepicker.cancel|The Cancel button text in the datetimepicker component"
-            cancel="Cancel"
-
-            i18n-cancelLabel="kendo.datetimepicker.cancelLabel|The label for the Cancel button in the datetimepicker component"
-            cancelLabel="Cancel"
-
-            i18n-now="kendo.datetimepicker.now|The Now button text in the timepicker component"
-            now="NOW"
-
-            i18n-nowLabel="kendo.datetimepicker.nowLabel|The label for the Now button in the timepicker component"
-            nowLabel="Select now"
-
-            i18n-today="kendo.datetimepicker.today|The label for the today button in the calendar header"
-            today="Today"
-
-            i18n-prevButtonTitle="kendo.datetimepicker.prevButtonTitle|The title of the previous button in the Classic calendar"
-            prevButtonTitle="Navigate to previous view"
-
-            i18n-nextButtonTitle="kendo.datetimepicker.nextButtonTitle|The title of the next button in the Classic calendar"
-            nextButtonTitle="Navigate to next view"
-
-            i18n-parentViewButtonTitle="kendo.datetimepicker.parentViewButtonTitle|The title of the parent view button in the calendar header"
-            parentViewButtonTitle="Navigate to parent view"
-
-            i18n-hour="kendo.datetimepicker.hour|The label for the hour part in the timepicker component"
-            hour="Hour"
-
-            i18n-minute="kendo.datetimepicker.minute|The label for the minute part in the timepicker component"
-            minute="Minute"
-
-            i18n-second="kendo.datetimepicker.second|The label for the second part in the timepicker component"
-            second="Second"
-
-            i18n-millisecond="kendo.datetimepicker.millisecond|The label for the millisecond part in the timepicker component"
-            millisecond="Millisecond"
-
-            i18n-dayperiod="kendo.datetimepicker.dayperiod|The label for the dayperiod part in the timepicker component"
-            dayperiod="Dayperiod"
-
-            i18n-clearTitle="kendo.datetimepicker.clearTitle|The title of the clear button"
-            clearTitle="clear"
-
-            i18n-adaptiveCloseButtonTitle="kendo.datetimepicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
-            adaptiveCloseButtonTitle="Close"
-        >
+          kendoDateTimePickerLocalizedMessages
+        
+          i18n-dateTab="kendo.datetimepicker.dateTab|The Date tab text in the datetimepicker popup header"
+          dateTab="Date"
+        
+          i18n-dateTabLabel="kendo.datetimepicker.dateTabLabel|The label for the Date tab in the datetimepicker popup header"
+          dateTabLabel="Date tab"
+        
+          i18n-timeTab="kendo.datetimepicker.timeTab|The Time tab text in the datetimepicker popup header"
+          timeTab="Time"
+        
+          i18n-timeTabLabel="kendo.datetimepicker.timeTabLabel|The label for the Time tab in the datetimepicker popup header"
+          timeTabLabel="Time tab"
+        
+          i18n-toggle="kendo.datetimepicker.toggle|The title of the toggle button in the datetimepicker component"
+          toggle="Toggle popup"
+        
+          i18n-accept="kendo.datetimepicker.accept|The Accept button text in the datetimepicker component"
+          accept="Set"
+        
+          i18n-acceptLabel="kendo.datetimepicker.acceptLabel|The label for the Accept button in the datetimepicker component"
+          acceptLabel="Set"
+        
+          i18n-cancel="kendo.datetimepicker.cancel|The Cancel button text in the datetimepicker component"
+          cancel="Cancel"
+        
+          i18n-cancelLabel="kendo.datetimepicker.cancelLabel|The label for the Cancel button in the datetimepicker component"
+          cancelLabel="Cancel"
+        
+          i18n-now="kendo.datetimepicker.now|The Now button text in the timepicker component"
+          now="NOW"
+        
+          i18n-nowLabel="kendo.datetimepicker.nowLabel|The label for the Now button in the timepicker component"
+          nowLabel="Select now"
+        
+          i18n-today="kendo.datetimepicker.today|The label for the today button in the calendar header"
+          today="Today"
+        
+          i18n-prevButtonTitle="kendo.datetimepicker.prevButtonTitle|The title of the previous button in the Classic calendar"
+          prevButtonTitle="Navigate to previous view"
+        
+          i18n-nextButtonTitle="kendo.datetimepicker.nextButtonTitle|The title of the next button in the Classic calendar"
+          nextButtonTitle="Navigate to next view"
+        
+          i18n-parentViewButtonTitle="kendo.datetimepicker.parentViewButtonTitle|The title of the parent view button in the calendar header"
+          parentViewButtonTitle="Navigate to parent view"
+        
+          i18n-hour="kendo.datetimepicker.hour|The label for the hour part in the timepicker component"
+          hour="Hour"
+        
+          i18n-minute="kendo.datetimepicker.minute|The label for the minute part in the timepicker component"
+          minute="Minute"
+        
+          i18n-second="kendo.datetimepicker.second|The label for the second part in the timepicker component"
+          second="Second"
+        
+          i18n-millisecond="kendo.datetimepicker.millisecond|The label for the millisecond part in the timepicker component"
+          millisecond="Millisecond"
+        
+          i18n-dayperiod="kendo.datetimepicker.dayperiod|The label for the dayperiod part in the timepicker component"
+          dayperiod="Dayperiod"
+        
+          i18n-clearTitle="kendo.datetimepicker.clearTitle|The title of the clear button"
+          clearTitle="clear"
+        
+          i18n-adaptiveCloseButtonTitle="kendo.datetimepicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+          adaptiveCloseButtonTitle="Close"
+          >
         </ng-container>
-
+        
         <kendo-dateinput
-            [value]="value"
-            [format]="format"
-            [clearButton]="clearButton"
-            [twoDigitYearMax]="twoDigitYearMax"
-            [min]="min"
-            [max]="max"
-            [incompleteDateValidation]="incompleteDateValidation"
-            [autoCorrectParts]="autoCorrectParts"
-            [autoSwitchParts]="autoSwitchParts"
-            [autoSwitchKeys]="autoSwitchKeys"
-            [enableMouseWheel]="enableMouseWheel"
-            [allowCaretMode]="allowCaretMode"
-            [autoFill]="autoFill"
-            [formatPlaceholder]="formatPlaceholder"
-            [placeholder]="placeholder"
-            [disabled]="disabled"
-            [focusableId]="focusableId"
-            [readonly]="readonly || readOnlyInput"
-            [role]="'combobox'"
-            [ariaReadOnly]="readonly"
-            [steps]="steps"
-            [tabindex]="tabindex"
-            [isRequired]="isControlRequired"
-            [title]="adaptiveTitle"
-            pickerType="datetimepicker"
-            hasPopup="dialog"
-            [inputAttributes]="inputAttributes"
-            [isPopupOpen]="isOpen"
-            (valueChange)="handleInputValueChange($event)"
+          [value]="value"
+          [format]="format"
+          [clearButton]="clearButton"
+          [twoDigitYearMax]="twoDigitYearMax"
+          [min]="min"
+          [max]="max"
+          [incompleteDateValidation]="incompleteDateValidation"
+          [autoCorrectParts]="autoCorrectParts"
+          [autoSwitchParts]="autoSwitchParts"
+          [autoSwitchKeys]="autoSwitchKeys"
+          [enableMouseWheel]="enableMouseWheel"
+          [allowCaretMode]="allowCaretMode"
+          [autoFill]="autoFill"
+          [formatPlaceholder]="formatPlaceholder"
+          [placeholder]="placeholder"
+          [disabled]="disabled"
+          [focusableId]="focusableId"
+          [readonly]="readonly || readOnlyInput"
+          [role]="'combobox'"
+          [ariaReadOnly]="readonly"
+          [steps]="steps"
+          [tabindex]="tabindex"
+          [isRequired]="isControlRequired"
+          [title]="adaptiveTitle"
+          pickerType="datetimepicker"
+          hasPopup="dialog"
+          [inputAttributes]="inputAttributes"
+          [isPopupOpen]="isOpen"
+          (valueChange)="handleInputValueChange($event)"
             [kendoEventsOutsideAngular]="{
                 keydown: handleKeyDown
             }"
-            [scope]="this"
-            fillMode="none"
-            rounded="none"
-            size="none"
-            (click)="handleDateInputClick()"
-        >
-            <kendo-dateinput-messages
-                [clearTitle]="localization.get('clearTitle')"
+          [scope]="this"
+          fillMode="none"
+          rounded="none"
+          size="none"
+          (click)="handleDateInputClick()"
+          >
+          <kendo-dateinput-messages
+            [clearTitle]="localization.get('clearTitle')"
             >
-            </kendo-dateinput-messages>
+          </kendo-dateinput-messages>
         </kendo-dateinput>
         <button
-            #toggleButton
-            type="button"
-            class="k-input-button k-button k-icon-button"
-            [tabindex]="-1"
-            [attr.title]="localization.get('toggle')"
-            [attr.aria-label]="localization.get('toggle')"
-            [attr.disabled]="disabled ? '' : null"
+          #toggleButton
+          type="button"
+          class="k-input-button k-button k-icon-button"
+          [tabindex]="-1"
+          [attr.title]="localization.get('toggle')"
+          [attr.aria-label]="localization.get('toggle')"
+          [attr.disabled]="disabled ? '' : null"
             [kendoEventsOutsideAngular]="{
                 mousedown: preventMouseDown,
                 click: handleIconClick
             }"
-            [scope]="this"
-        >
+          [scope]="this"
+          >
+          @if (activeTab === 'date') {
             <kendo-icon-wrapper
-                *ngIf="activeTab === 'date'"
-                name="calendar"
-                [svgIcon]="calendarIcon"
-                innerCssClass="k-button-icon"
-            >
+              name="calendar"
+              [svgIcon]="calendarIcon"
+              innerCssClass="k-button-icon"
+              >
             </kendo-icon-wrapper>
+          }
+          @if (activeTab === 'time') {
             <kendo-icon-wrapper
-                *ngIf="activeTab === 'time'"
-                name="clock"
-                [svgIcon]="clockIcon"
-                innerCssClass="k-button-icon"
-            >
+              name="clock"
+              [svgIcon]="clockIcon"
+              innerCssClass="k-button-icon"
+              >
             </kendo-icon-wrapper>
+          }
         </button>
-
+        
         <ng-container #container></ng-container>
-
+        
         <ng-template #popupTemplate>
-            <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
+          <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
         </ng-template>
-
-        <kendo-resize-sensor *ngIf="isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
-
+        
+        @if (isAdaptiveModeEnabled) {
+          <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
+        }
+        
         <kendo-actionsheet
-            #actionSheet
-            (overlayClick)="toggleActionSheet(false)"
-            (collapse)="handleActionSheetCollapse()"
-            [titleId]="calendar?.headerId"
+          #actionSheet
+          (overlayClick)="toggleActionSheet(false)"
+          (collapse)="handleActionSheetCollapse()"
+          [titleId]="calendar?.headerId"
             [cssClass]="{
                 'k-adaptive-actionsheet': true,
                 'k-actionsheet-fullscreen': windowSize === 'small',
@@ -2079,66 +2093,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [cssStyle]="{
                 height: windowSize === 'small' ? '100vh' : '60vh'
             }"
-        >
-            <ng-template kendoActionSheetTemplate>
-                <div class="k-actionsheet-titlebar">
-                    <div class="k-actionsheet-titlebar-group">
-                        <div class="k-actionsheet-title">
-                            <div class="k-text-center" *ngIf="adaptiveTitle">{{ adaptiveTitle }}</div>
-                            <div class="k-actionsheet-subtitle k-text-center" *ngIf="adaptiveSubtitle">{{ adaptiveSubtitle }}</div>
-                        </div>
-                        <div class="k-actionsheet-actions">
-                            <button
-                                kendoButton
-                                type="button"
-                                icon="check"
-                                [attr.title]="localization.get('adaptiveCloseButtonTitle')"
-                                [svgIcon]="checkIcon"
-                                fillMode="flat"
-                                themeColor="primary"
-                                [tabIndex]="-1"
-                                size="large"
-                                innerCssClass="k-button-icon"
-                                (click)="toggleActionSheet(false)">
-                            </button>
-                        </div>
-                    </div>
+          >
+          <ng-template kendoActionSheetTemplate>
+            <div class="k-actionsheet-titlebar">
+              <div class="k-actionsheet-titlebar-group">
+                <div class="k-actionsheet-title">
+                  @if (adaptiveTitle) {
+                    <div class="k-text-center">{{ adaptiveTitle }}</div>
+                  }
+                  @if (adaptiveSubtitle) {
+                    <div class="k-actionsheet-subtitle k-text-center">{{ adaptiveSubtitle }}</div>
+                  }
                 </div>
-                <div class="k-actionsheet-content">
-                    <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
+                <div class="k-actionsheet-actions">
+                  <button
+                    kendoButton
+                    type="button"
+                    icon="check"
+                    [attr.title]="localization.get('adaptiveCloseButtonTitle')"
+                    [svgIcon]="checkIcon"
+                    fillMode="flat"
+                    themeColor="primary"
+                    [tabIndex]="-1"
+                    size="large"
+                    innerCssClass="k-button-icon"
+                    (click)="toggleActionSheet(false)">
+                  </button>
                 </div>
-                <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
-                    <button kendoButton
-                        *ngIf="cancelButton"
-                        class="k-time-cancel"
-                        type="button"
-                        (click)="handleCancel()"
-                        size="large"
-                        [attr.title]="localization.get('cancelLabel')"
-                        [attr.aria-label]="localization.get('cancelLabel')"
-                    >
-                        {{localization.get('cancel')}}
-                    </button>
-
-                    <button kendoButton
-                        type="button"
-                        class="k-time-accept"
-                        (click)="handleAccept()"
-                        [disabled]="!calendarValue"
-                        size="large"
-                        themeColor="primary"
-                        [attr.title]="localization.get('acceptLabel')"
-                        [attr.aria-label]="localization.get('acceptLabel')"
-                    >
-                        {{localization.get('accept')}}
-                    </button>
-                </div>
-            </ng-template>
+              </div>
+            </div>
+            <div class="k-actionsheet-content">
+              <ng-container *ngTemplateOutlet="dateTimeTemplate"></ng-container>
+            </div>
+            <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
+              @if (cancelButton) {
+                <button kendoButton
+                  class="k-time-cancel"
+                  type="button"
+                  (click)="handleCancel()"
+                  size="large"
+                  [attr.title]="localization.get('cancelLabel')"
+                  [attr.aria-label]="localization.get('cancelLabel')"
+                  >
+                  {{localization.get('cancel')}}
+                </button>
+              }
+        
+              <button kendoButton
+                type="button"
+                class="k-time-accept"
+                (click)="handleAccept()"
+                [disabled]="!calendarValue"
+                size="large"
+                themeColor="primary"
+                [attr.title]="localization.get('acceptLabel')"
+                [attr.aria-label]="localization.get('acceptLabel')"
+                >
+                {{localization.get('accept')}}
+              </button>
+            </div>
+          </ng-template>
         </kendo-actionsheet>
-
+        
         <ng-template #dateTimeTemplate>
-            <div
-                class="k-datetime-wrap k-{{activeTab}}-tab"
+          <div
+            class="k-datetime-wrap k-{{activeTab}}-tab"
                 [ngClass]="{
                     'k-datetime-wrap-md': !isAdaptive,
                     'k-datetime-wrap-lg': isAdaptive
@@ -2147,176 +2166,177 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     mousedown: preventMouseDown,
                     keydown: handleKeyDown
                 }"
-                [scope]="this"
+            [scope]="this"
             >
-                <div class="k-datetime-buttongroup"
+            <div class="k-datetime-buttongroup"
                     [kendoEventsOutsideAngular]="{
                         focusin: handleFocus,
                         focusout: handleBlur
                     }"
-                    [scope]="this"
-                >
-                    <div class="k-button-group k-button-group-solid 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')"
+              [scope]="this"
+              >
+              <div class="k-button-group k-button-group-solid 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')"
+                  [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>
-                <div
-                    #dateTimeSelector
-                    class="k-datetime-selector"
-                    [style.transition]="tabSwitchTransition"
+                  [scope]="this"
+                  >
+                  {{localization.get('timeTab')}}
+                </button>
+              </div>
+            </div>
+            <div
+              #dateTimeSelector
+              class="k-datetime-selector"
+              [style.transition]="tabSwitchTransition"
                     [kendoEventsOutsideAngular]="{
                         transitionend: handleTabChangeTransitionEnd.bind(this, dateTimeSelector)
                     }"
-                >
-                    <div class="k-datetime-calendar-wrap">
-                        <kendo-calendar
-                            #calendar
-                            [focusedDate]="focusedDate"
-                            [size]="isAdaptive ? 'large' : size"
-                            [(value)]="calendarValue"
-                            [type]="calendarType"
-                            [min]="calendarMin"
-                            [max]="calendarMax"
-                            [weekDaysFormat]="weekDaysFormat"
-                            [weekNumber]="weekNumber"
-                            [navigation]="false"
-                            [animateNavigation]="animateCalendarNavigation"
-                            [showOtherMonthDays]="showOtherMonthDays"
-                            [cellTemplate]="cellTemplate"
-                            [monthCellTemplate]="monthCellTemplate"
-                            [yearCellTemplate]="yearCellTemplate"
-                            [decadeCellTemplate]="decadeCellTemplate"
-                            [centuryCellTemplate]="centuryCellTemplate"
-                            [weekNumberTemplate]="weekNumberTemplate"
-                            [headerTitleTemplate]="headerTitleTemplate"
-                            [headerTemplate]="headerTemplate"
-                            [footerTemplate]="footerTemplate"
-                            [footer]="footer"
-                            [disabled]="disableCalendar"
-                            [disabledDates]="disabledDates"
-                            (valueChange)="handleCalendarValueChange()"
-                        >
-                            <kendo-calendar-messages
-                                [today]="localization.get('today')"
-                                [prevButtonTitle]="localization.get('prevButtonTitle')"
-                                [nextButtonTitle]="localization.get('nextButtonTitle')"
-                                [parentViewButtonTitle]="localization.get('parentViewButtonTitle')"
-                            >
-                            </kendo-calendar-messages>
-                        </kendo-calendar>
-                    </div>
-                    <div class="k-datetime-time-wrap">
-                        <kendo-timeselector
-                            [ngClass]="{'k-timeselector-lg': isAdaptive}"
-                            [value]="value"
-                            [format]="timeSelectorFormat"
-                            [min]="timeSelectorMin"
-                            [max]="timeSelectorMax"
-                            [setButton]="false"
-                            [cancelButton]="false"
-                            [steps]="steps"
-                            [disabled]="disableTimeSelector"
-                            [isAdaptiveEnabled]="isAdaptiveModeEnabled"
-                            [isDateTimePicker]="true"
-                            (tabOutLastPart)="onTabOutLastPart()"
-                            (tabOutFirstPart)="onTabOutFirstPart()"
-                            (tabOutNow)="onTabOutNow()"
-                        >
-                            <kendo-timeselector-messages
-                                [acceptLabel]="localization.get('acceptLabel')"
-                                [accept]="localization.get('accept')"
-                                [cancelLabel]="localization.get('cancelLabel')"
-                                [cancel]="localization.get('cancel')"
-                                [nowLabel]="localization.get('nowLabel')"
-                                [now]="localization.get('now')"
-                                [hour]="localization.get('hour')"
-                                [minute]="localization.get('minute')"
-                                [second]="localization.get('second')"
-                                [millisecond]="localization.get('millisecond')"
-                                [dayperiod]="localization.get('dayperiod')"
-                            >
-                            </kendo-timeselector-messages>
-                        </kendo-timeselector>
-                    </div>
-                </div>
-                <div
-                    *ngIf="!isAdaptive"
-                    class="k-datetime-footer k-actions k-actions-stretched k-actions-horizontal"
+              >
+              <div class="k-datetime-calendar-wrap">
+                <kendo-calendar
+                  #calendar
+                  [focusedDate]="focusedDate"
+                  [size]="isAdaptive ? 'large' : size"
+                  [(value)]="calendarValue"
+                  [type]="calendarType"
+                  [min]="calendarMin"
+                  [max]="calendarMax"
+                  [weekDaysFormat]="weekDaysFormat"
+                  [weekNumber]="weekNumber"
+                  [navigation]="false"
+                  [animateNavigation]="animateCalendarNavigation"
+                  [showOtherMonthDays]="showOtherMonthDays"
+                  [cellTemplate]="cellTemplate"
+                  [monthCellTemplate]="monthCellTemplate"
+                  [yearCellTemplate]="yearCellTemplate"
+                  [decadeCellTemplate]="decadeCellTemplate"
+                  [centuryCellTemplate]="centuryCellTemplate"
+                  [weekNumberTemplate]="weekNumberTemplate"
+                  [headerTitleTemplate]="headerTitleTemplate"
+                  [headerTemplate]="headerTemplate"
+                  [footerTemplate]="footerTemplate"
+                  [footer]="footer"
+                  [disabled]="disableCalendar"
+                  [disabledDates]="disabledDates"
+                  (valueChange)="handleCalendarValueChange()"
+                  >
+                  <kendo-calendar-messages
+                    [today]="localization.get('today')"
+                    [prevButtonTitle]="localization.get('prevButtonTitle')"
+                    [nextButtonTitle]="localization.get('nextButtonTitle')"
+                    [parentViewButtonTitle]="localization.get('parentViewButtonTitle')"
+                    >
+                  </kendo-calendar-messages>
+                </kendo-calendar>
+              </div>
+              <div class="k-datetime-time-wrap">
+                <kendo-timeselector
+                  [ngClass]="{'k-timeselector-lg': isAdaptive}"
+                  [value]="value"
+                  [format]="timeSelectorFormat"
+                  [min]="timeSelectorMin"
+                  [max]="timeSelectorMax"
+                  [setButton]="false"
+                  [cancelButton]="false"
+                  [steps]="steps"
+                  [disabled]="disableTimeSelector"
+                  [isAdaptiveEnabled]="isAdaptiveModeEnabled"
+                  [isDateTimePicker]="true"
+                  (tabOutLastPart)="onTabOutLastPart()"
+                  (tabOutFirstPart)="onTabOutFirstPart()"
+                  (tabOutNow)="onTabOutNow()"
+                  >
+                  <kendo-timeselector-messages
+                    [acceptLabel]="localization.get('acceptLabel')"
+                    [accept]="localization.get('accept')"
+                    [cancelLabel]="localization.get('cancelLabel')"
+                    [cancel]="localization.get('cancel')"
+                    [nowLabel]="localization.get('nowLabel')"
+                    [now]="localization.get('now')"
+                    [hour]="localization.get('hour')"
+                    [minute]="localization.get('minute')"
+                    [second]="localization.get('second')"
+                    [millisecond]="localization.get('millisecond')"
+                    [dayperiod]="localization.get('dayperiod')"
+                    >
+                  </kendo-timeselector-messages>
+                </kendo-timeselector>
+              </div>
+            </div>
+            @if (!isAdaptive) {
+              <div
+                class="k-datetime-footer k-actions k-actions-stretched k-actions-horizontal"
                     [kendoEventsOutsideAngular]="{
                         focusin: handleFocus,
                         focusout: handleBlur
                     }"
-                    [scope]="this"
+                [scope]="this"
                 >
-                    <button kendoButton
-                        type="button"
-                        class="k-time-accept"
-                        themeColor="primary"
-                        [attr.title]="localization.get('acceptLabel')"
-                        [attr.aria-label]="localization.get('acceptLabel')"
-                        [disabled]="!calendarValue"
+                <button kendoButton
+                  type="button"
+                  class="k-time-accept"
+                  themeColor="primary"
+                  [attr.title]="localization.get('acceptLabel')"
+                  [attr.aria-label]="localization.get('acceptLabel')"
+                  [disabled]="!calendarValue"
                         [kendoEventsOutsideAngular]="{
                             click: handleAccept,
                             'keydown.tab': handleTab,
                             'keydown.shift.tab': handleTab
                         }"
-                        [scope]="this"
-                    >
-                        {{localization.get('accept')}}
-                    </button>
-
-                    <button kendoButton
-                        *ngIf="cancelButton"
-                        type="button"
-                        class="k-time-cancel"
-                        [attr.title]="localization.get('cancelLabel')"
-                        [attr.aria-label]="localization.get('cancelLabel')"
+                  [scope]="this"
+                  >
+                  {{localization.get('accept')}}
+                </button>
+                @if (cancelButton) {
+                  <button kendoButton
+                    type="button"
+                    class="k-time-cancel"
+                    [attr.title]="localization.get('cancelLabel')"
+                    [attr.aria-label]="localization.get('cancelLabel')"
                         [kendoEventsOutsideAngular]="{
                             click: handleCancel,
                             'keydown.tab': handleTab,
                             'keydown.shift.tab': handleTab
                         }"
-                        [scope]="this"
+                    [scope]="this"
                     >
-                        {{localization.get('cancel')}}
-                    </button>
-                </div>
-            </div>
+                    {{localization.get('cancel')}}
+                  </button>
+                }
+              </div>
+            }
+          </div>
         </ng-template>
-    `,
+        `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, DateInputComponent, EventsOutsideAngularDirective, DateInputCustomMessagesComponent, NgIf, 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]
                 }]
         }], ctorParameters: () => [{ type: i1.PopupService }, { type: i2.IntlService }, { type: i0.ChangeDetectorRef }, { type: i3.PickerService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i4.LocalizationService }, { type: i5.DisabledDatesService }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i6.AdaptiveService }], propDecorators: { hostClasses: [{
                 type: HostBinding,