@progress/kendo-angular-dateinputs 16.0.0-develop.19 → 16.0.0-develop.20

package/esm2020/datetimepicker/datetimepicker.component.mjs

@@ -44,15 +44,16 @@ import * as i4 from "@progress/kendo-angular-l10n";
 import * as i5 from "../calendar/services/disabled-dates.service";
 import * as i6 from "@angular/common";
 import * as i7 from "../dateinput/dateinput.component";
-import * as i8 from "../calendar/calendar.component";
-import * as i9 from "../calendar/localization/calendar-custom-messages.component";
-import * as i10 from "../timepicker/localization/timeselector-custom-messages.component";
-import * as i11 from "../timepicker/timeselector.component";
-import * as i12 from "@progress/kendo-angular-common";
-import * as i13 from "@progress/kendo-angular-icons";
-import * as i14 from "@progress/kendo-angular-navigation";
-import * as i15 from "@progress/kendo-angular-buttons";
-import * as i16 from "./localization/localized-messages.directive";
+import * as i8 from "../dateinput/localization/dateinput-custom-messages.component";
+import * as i9 from "../calendar/calendar.component";
+import * as i10 from "../calendar/localization/calendar-custom-messages.component";
+import * as i11 from "../timepicker/localization/timeselector-custom-messages.component";
+import * as i12 from "../timepicker/timeselector.component";
+import * as i13 from "@progress/kendo-angular-common";
+import * as i14 from "@progress/kendo-angular-icons";
+import * as i15 from "@progress/kendo-angular-navigation";
+import * as i16 from "@progress/kendo-angular-buttons";
+import * as i17 from "./localization/localized-messages.directive";
 const timeFormatRegExp = new RegExp(`${TIME_PART.hour}|${TIME_PART.minute}|${TIME_PART.second}|${TIME_PART.dayperiod}|literal`);
 const VALUE_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/integration-with-json/';
 const MIN_MAX_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/date-time-limits/';
@@ -217,6 +218,12 @@ export class DateTimePickerComponent {
          * @default false
          */
         this.allowCaretMode = false;
+        /**
+         * If set to `true`, renders a clear button after the input text or DateTimePicker value has been changed.
+         * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
+         * @default false
+         */
+        this.clearButton = false;
         /**
          * When enabled, the DateTimePicker will autofill the rest of the date to the current date when the component loses focus.
          *
@@ -1265,6 +1272,7 @@ export class DateTimePickerComponent {
         if (isEqual(this.value, value)) {
             return;
         }
+        this.dateInput.showClearButton = true;
         this.value = cloneDate(value);
         this.onControlChange(cloneDate(value));
         this.valueChange.emit(cloneDate(value));
@@ -1334,7 +1342,7 @@ export class DateTimePickerComponent {
     }
 }
 DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i1.PopupService }, { token: i2.IntlService }, { token: i0.ChangeDetectorRef }, { token: i3.PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }, { token: i4.LocalizationService }, { token: i5.DisabledDatesService }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", subtitle: "subtitle", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", adaptiveMode: "adaptiveMode", inputAttributes: "inputAttributes", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode", headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass", "class.k-readonly": "this.readonly" } }, providers: [
+DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", subtitle: "subtitle", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", 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" }, 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,
@@ -1405,12 +1413,16 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
 
             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"
         >
         </ng-container>
 
         <kendo-dateinput
             [value]="value"
             [format]="format"
+            [clearButton]="clearButton"
             [twoDigitYearMax]="twoDigitYearMax"
             [min]="min"
             [max]="max"
@@ -1446,6 +1458,10 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             [size]="size"
             (click)="handleDateInputClick()"
         >
+            <kendo-dateinput-messages
+                [clearTitle]="localization.get('clearTitle')"
+            >
+            </kendo-dateinput-messages>
         </kendo-dateinput>
         <button
             #toggleButton
@@ -1715,7 +1731,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i7.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: i8.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: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: i9.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "component", type: i10.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: i11.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i13.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i14.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i14.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i15.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i16.LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i7.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: i8.DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "component", type: i9.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: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: i10.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "component", type: i11.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: i12.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "directive", type: i13.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i14.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i15.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i15.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i13.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i16.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i17.LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1794,12 +1810,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
             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"
         >
         </ng-container>
 
         <kendo-dateinput
             [value]="value"
             [format]="format"
+            [clearButton]="clearButton"
             [twoDigitYearMax]="twoDigitYearMax"
             [min]="min"
             [max]="max"
@@ -1835,6 +1855,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             [size]="size"
             (click)="handleDateInputClick()"
         >
+            <kendo-dateinput-messages
+                [clearTitle]="localization.get('clearTitle')"
+            >
+            </kendo-dateinput-messages>
         </kendo-dateinput>
         <button
             #toggleButton
@@ -2188,6 +2212,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], allowCaretMode: [{
                 type: Input
+            }], clearButton: [{
+                type: Input
             }], autoFill: [{
                 type: Input
             }], adaptiveMode: [{

package/esm2020/datetimepicker/localization/messages.mjs

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 export class DateTimePickerMessages extends ComponentMessages {
 }
 DateTimePickerMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateTimePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-DateTimePickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateTimePickerMessages, selector: "kendo-datetimepicker-messages-base", inputs: { toggle: "toggle", dateTab: "dateTab", dateTabLabel: "dateTabLabel", timeTab: "timeTab", timeTabLabel: "timeTabLabel", accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", today: "today", now: "now", nowLabel: "nowLabel", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle", hour: "hour", minute: "minute", second: "second", millisecond: "millisecond", dayperiod: "dayperiod" }, usesInheritance: true, ngImport: i0 });
+DateTimePickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateTimePickerMessages, selector: "kendo-datetimepicker-messages-base", inputs: { toggle: "toggle", dateTab: "dateTab", dateTabLabel: "dateTabLabel", timeTab: "timeTab", timeTabLabel: "timeTabLabel", accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", today: "today", now: "now", nowLabel: "nowLabel", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle", hour: "hour", minute: "minute", second: "second", millisecond: "millisecond", dayperiod: "dayperiod", clearTitle: "clearTitle" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateTimePickerMessages, decorators: [{
             type: Directive,
             args: [{
@@ -58,4 +58,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], dayperiod: [{
                 type: Input
+            }], clearTitle: [{
+                type: Input
             }] } });

package/esm2020/package-metadata.mjs

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

package/esm2020/timepicker/localization/messages.mjs

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 export class TimePickerMessages extends ComponentMessages {
 }
 TimePickerMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-TimePickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TimePickerMessages, selector: "kendo-timepicker-messages-base", inputs: { accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", now: "now", nowLabel: "nowLabel", toggle: "toggle", hour: "hour", minute: "minute", second: "second", millisecond: "millisecond", dayperiod: "dayperiod" }, usesInheritance: true, ngImport: i0 });
+TimePickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TimePickerMessages, selector: "kendo-timepicker-messages-base", inputs: { accept: "accept", acceptLabel: "acceptLabel", cancel: "cancel", cancelLabel: "cancelLabel", now: "now", nowLabel: "nowLabel", toggle: "toggle", hour: "hour", minute: "minute", second: "second", millisecond: "millisecond", dayperiod: "dayperiod", clearTitle: "clearTitle" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerMessages, decorators: [{
             type: Directive,
             args: [{
@@ -42,4 +42,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], dayperiod: [{
                 type: Input
+            }], clearTitle: [{
+                type: Input
             }] } });

package/esm2020/timepicker/timepicker.component.mjs

@@ -32,13 +32,14 @@ import * as i4 from "../common/picker.service";
 import * as i5 from "@progress/kendo-angular-intl";
 import * as i6 from "@angular/common";
 import * as i7 from "../dateinput/dateinput.component";
-import * as i8 from "@progress/kendo-angular-common";
-import * as i9 from "@progress/kendo-angular-icons";
-import * as i10 from "@progress/kendo-angular-navigation";
-import * as i11 from "@progress/kendo-angular-buttons";
-import * as i12 from "./localization/timepicker-localized-messages.directive";
-import * as i13 from "./localization/timeselector-custom-messages.component";
-import * as i14 from "./timeselector.component";
+import * as i8 from "../dateinput/localization/dateinput-custom-messages.component";
+import * as i9 from "@progress/kendo-angular-common";
+import * as i10 from "@progress/kendo-angular-icons";
+import * as i11 from "@progress/kendo-angular-navigation";
+import * as i12 from "@progress/kendo-angular-buttons";
+import * as i13 from "./localization/timepicker-localized-messages.directive";
+import * as i14 from "./localization/timeselector-custom-messages.component";
+import * as i15 from "./timeselector.component";
 const VALUE_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/#toc-integration-with-json';
 const INTL_DATE_FORMAT = 'https://github.com/telerik/kendo-intl/blob/master/docs/date-formatting/index.md';
 const formatRegExp = new RegExp(`${TIME_PART.hour}|${TIME_PART.minute}|${TIME_PART.second}|${TIME_PART.millisecond}|${TIME_PART.dayperiod}|literal`);
@@ -85,6 +86,12 @@ export class TimePickerComponent {
          * the input will be rendered in a read-only state regardless of the `readOnlyInput` value.
          */
         this.readOnlyInput = false;
+        /**
+         * If set to `true`, renders a clear button after the input text or TimePicker value has been changed.
+         * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
+         * @default false
+         */
+        this.clearButton = false;
         /**
          * Specifies the time format that is used to display the input value
          * ([see example]({% slug formats_timepicker %})).
@@ -658,6 +665,7 @@ export class TimePickerComponent {
                 this.focusInput();
                 this.show = false;
             }
+            this.dateInput.showClearButton = true;
             this.onControlChange(cloneDate(value));
             this.valueChange.emit(cloneDate(value));
         });
@@ -961,7 +969,7 @@ export class TimePickerComponent {
     }
 }
 TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerComponent, deps: [{ token: i1.BusViewService }, { token: i0.NgZone }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i4.PickerService }, { token: i5.IntlService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", adaptiveMode: "adaptiveMode", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", clearButton: "clearButton", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", adaptiveMode: "adaptiveMode", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
@@ -1009,6 +1017,9 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
 
             i18n-dayperiod="kendo.timepicker.dayperiod|The label for the dayperiod part in the timepicker component"
             dayperiod="Dayperiod"
+
+            i18n-clearTitle="kendo.timepicker.clearTitle|The title of the clear button"
+            clearTitle="clear"
         >
         </ng-container>
         <kendo-dateinput
@@ -1017,6 +1028,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             hasPopup="dialog"
             [isPopupOpen]="show"
             [disabled]="disabled"
+            [clearButton]="clearButton"
             [readonly]="readonly || readOnlyInput"
             [role]="'combobox'"
             [ariaReadOnly]="readonly"
@@ -1043,7 +1055,12 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             [value]="value"
             (valueChange)="handleInputChange($event)"
             (click)="handleDateInputClick()"
-        ></kendo-dateinput>
+        >
+            <kendo-dateinput-messages
+                [clearTitle]="localization.get('clearTitle')"
+            >
+            </kendo-dateinput-messages>
+        </kendo-dateinput>
         <button
             #toggleButton
             type="button"
@@ -1168,7 +1185,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                 </kendo-timeselector-messages>
             </kendo-timeselector>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i7.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "directive", type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i9.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i10.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i10.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i11.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i12.TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: i13.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: i14.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i7.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: i8.DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i10.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i11.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i11.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i12.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i13.TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: i14.TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }, { kind: "component", type: i15.TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1224,6 +1241,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
             i18n-dayperiod="kendo.timepicker.dayperiod|The label for the dayperiod part in the timepicker component"
             dayperiod="Dayperiod"
+
+            i18n-clearTitle="kendo.timepicker.clearTitle|The title of the clear button"
+            clearTitle="clear"
         >
         </ng-container>
         <kendo-dateinput
@@ -1232,6 +1252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             hasPopup="dialog"
             [isPopupOpen]="show"
             [disabled]="disabled"
+            [clearButton]="clearButton"
             [readonly]="readonly || readOnlyInput"
             [role]="'combobox'"
             [ariaReadOnly]="readonly"
@@ -1258,7 +1279,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             [value]="value"
             (valueChange)="handleInputChange($event)"
             (click)="handleDateInputClick()"
-        ></kendo-dateinput>
+        >
+            <kendo-dateinput-messages
+                [clearTitle]="localization.get('clearTitle')"
+            >
+            </kendo-dateinput-messages>
+        </kendo-dateinput>
         <button
             #toggleButton
             type="button"
@@ -1413,6 +1439,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: ['class.k-readonly']
             }], readOnlyInput: [{
                 type: Input
+            }], clearButton: [{
+                type: Input
             }], format: [{
                 type: Input
             }], formatPlaceholder: [{