@progress/kendo-angular-dateinputs 17.0.0-develop.21 → 17.0.0-develop.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (182) hide show
  1. package/calendar/calendar.component.d.ts +1 -1
  2. package/calendar/footer.component.d.ts +1 -1
  3. package/calendar/for.directive.d.ts +1 -1
  4. package/calendar/header.component.d.ts +1 -1
  5. package/calendar/horizontal-view-list.component.d.ts +1 -1
  6. package/calendar/localization/calendar-messages.d.ts +1 -1
  7. package/calendar/localization/multiview-calendar-messages.d.ts +1 -1
  8. package/calendar/models/orientation.d.ts +1 -1
  9. package/calendar/models/selection-range-end.type.d.ts +1 -1
  10. package/calendar/models/selection.d.ts +1 -1
  11. package/calendar/models/type.d.ts +1 -1
  12. package/calendar/models/view.type.d.ts +1 -1
  13. package/calendar/multiview-calendar.component.d.ts +1 -1
  14. package/calendar/navigation.component.d.ts +1 -1
  15. package/calendar/view-list.component.d.ts +1 -1
  16. package/calendar/view.component.d.ts +1 -1
  17. package/common/models/fillmode.d.ts +1 -1
  18. package/common/models/rounded.d.ts +1 -1
  19. package/common/models/size.d.ts +1 -1
  20. package/common/models/week-days-format.d.ts +1 -1
  21. package/dateinput/dateinput.component.d.ts +2 -2
  22. package/dateinput/localization/messages.d.ts +1 -1
  23. package/dateinput/models/format-placeholder.model.d.ts +1 -1
  24. package/datepicker/datepicker.component.d.ts +1 -1
  25. package/datepicker/localization/messages.d.ts +1 -1
  26. package/daterange/auto-correct-on.type.d.ts +1 -1
  27. package/daterange/date-range-end-input.directive.d.ts +1 -1
  28. package/daterange/date-range-popup.component.d.ts +1 -1
  29. package/daterange/date-range-selection.directive.d.ts +1 -1
  30. package/daterange/date-range-start-input.directive.d.ts +1 -1
  31. package/daterange/date-range.component.d.ts +1 -1
  32. package/daterange/localization/messages.d.ts +1 -1
  33. package/datetimepicker/datetimepicker.component.d.ts +1 -1
  34. package/datetimepicker/localization/messages.d.ts +1 -1
  35. package/datetimepicker/models/active-tab.type.d.ts +1 -1
  36. package/{esm2020 → esm2022}/calendar/calendar.component.mjs +276 -166
  37. package/{esm2020 → esm2022}/calendar/calendar.module.mjs +14 -14
  38. package/{esm2020 → esm2022}/calendar/calendars.module.mjs +14 -14
  39. package/{esm2020 → esm2022}/calendar/footer.component.mjs +10 -6
  40. package/{esm2020 → esm2022}/calendar/for.directive.mjs +13 -4
  41. package/{esm2020 → esm2022}/calendar/header.component.mjs +46 -29
  42. package/{esm2020 → esm2022}/calendar/horizontal-view-list.component.mjs +63 -40
  43. package/{esm2020 → esm2022}/calendar/localization/calendar-custom-messages.component.mjs +9 -8
  44. package/{esm2020 → esm2022}/calendar/localization/calendar-localized-messages.directive.mjs +9 -8
  45. package/{esm2020/calendar/localization/multiview-calendar-messages.mjs → esm2022/calendar/localization/calendar-messages.mjs} +21 -5
  46. package/{esm2020 → esm2022}/calendar/localization/multiview-calendar-custom-messages.component.mjs +9 -8
  47. package/{esm2020 → esm2022}/calendar/localization/multiview-calendar-localized-messages.directive.mjs +9 -8
  48. package/esm2022/calendar/localization/multiview-calendar-messages.mjs +45 -0
  49. package/{esm2020 → esm2022}/calendar/multiview-calendar.component.mjs +299 -211
  50. package/{esm2020 → esm2022}/calendar/multiview-calendar.module.mjs +11 -11
  51. package/{esm2020 → esm2022}/calendar/navigation.component.mjs +34 -15
  52. package/{esm2020 → esm2022}/calendar/services/bus-view.service.mjs +8 -6
  53. package/{esm2020 → esm2022}/calendar/services/century-view.service.mjs +15 -17
  54. package/{esm2020 → esm2022}/calendar/services/decade-view.service.mjs +15 -17
  55. package/{esm2020 → esm2022}/calendar/services/disabled-dates.service.mjs +12 -14
  56. package/{esm2020 → esm2022}/calendar/services/dom.service.mjs +21 -3
  57. package/{esm2020 → esm2022}/calendar/services/month-view.service.mjs +16 -15
  58. package/{esm2020 → esm2022}/calendar/services/navigation.service.mjs +4 -3
  59. package/{esm2020 → esm2022}/calendar/services/scroll-sync.service.mjs +11 -3
  60. package/{esm2020 → esm2022}/calendar/services/selection.service.mjs +5 -3
  61. package/{esm2020 → esm2022}/calendar/services/weeknames.service.mjs +4 -3
  62. package/{esm2020 → esm2022}/calendar/services/year-view.service.mjs +16 -15
  63. package/{esm2020 → esm2022}/calendar/templates/cell-template.directive.mjs +4 -3
  64. package/{esm2020 → esm2022}/calendar/templates/century-cell-template.directive.mjs +4 -3
  65. package/{esm2020 → esm2022}/calendar/templates/decade-cell-template.directive.mjs +4 -3
  66. package/{esm2020 → esm2022}/calendar/templates/footer-template.directive.mjs +4 -3
  67. package/{esm2020 → esm2022}/calendar/templates/header-template.directive.mjs +4 -3
  68. package/{esm2020 → esm2022}/calendar/templates/header-title-template.directive.mjs +4 -3
  69. package/{esm2020 → esm2022}/calendar/templates/month-cell-template.directive.mjs +4 -3
  70. package/{esm2020 → esm2022}/calendar/templates/navigation-item-template.directive.mjs +4 -3
  71. package/{esm2020 → esm2022}/calendar/templates/weeknumber-cell-template.directive.mjs +4 -3
  72. package/{esm2020 → esm2022}/calendar/templates/year-cell-template.directive.mjs +4 -3
  73. package/{esm2020 → esm2022}/calendar/view-list.component.mjs +68 -37
  74. package/{esm2020 → esm2022}/calendar/view.component.mjs +50 -24
  75. package/{esm2020 → esm2022}/common/adaptive.module.mjs +7 -7
  76. package/{esm2020 → esm2022}/common/picker.service.mjs +7 -6
  77. package/{esm2020 → esm2022}/dateinput/dateinput.component.mjs +282 -231
  78. package/{esm2020 → esm2022}/dateinput/dateinput.module.mjs +6 -6
  79. package/{esm2020 → esm2022}/dateinput/localization/dateinput-custom-messages.component.mjs +9 -8
  80. package/{esm2020 → esm2022}/dateinput/localization/dateinput-localized-messages.directive.mjs +9 -8
  81. package/{esm2020 → esm2022}/dateinput/localization/messages.mjs +15 -3
  82. package/{esm2020 → esm2022}/dateinputs.module.mjs +22 -22
  83. package/{esm2020 → esm2022}/datepicker/datepicker.component.mjs +403 -282
  84. package/{esm2020 → esm2022}/datepicker/datepicker.module.mjs +16 -16
  85. package/{esm2020 → esm2022}/datepicker/localization/datepicker-custom-messages.component.mjs +9 -8
  86. package/{esm2020 → esm2022}/datepicker/localization/datepicker-localized-messages.directive.mjs +9 -8
  87. package/esm2022/datepicker/localization/messages.mjs +57 -0
  88. package/{esm2020 → esm2022}/daterange/date-range-end-input.directive.mjs +38 -28
  89. package/{esm2020 → esm2022}/daterange/date-range-input.mjs +19 -13
  90. package/{esm2020 → esm2022}/daterange/date-range-popup-template.directive.mjs +4 -3
  91. package/{esm2020 → esm2022}/daterange/date-range-popup.component.mjs +237 -144
  92. package/{esm2020 → esm2022}/daterange/date-range-selection.directive.mjs +41 -36
  93. package/{esm2020 → esm2022}/daterange/date-range-start-input.directive.mjs +40 -29
  94. package/{esm2020 → esm2022}/daterange/date-range.component.mjs +30 -13
  95. package/{esm2020 → esm2022}/daterange/date-range.module.mjs +16 -16
  96. package/{esm2020 → esm2022}/daterange/date-range.service.mjs +34 -33
  97. package/{esm2020 → esm2022}/daterange/localization/daterange-popup-custom-messages.component.mjs +9 -8
  98. package/{esm2020 → esm2022}/daterange/localization/daterange-popup-localized-messages.directive.mjs +9 -8
  99. package/{esm2020 → esm2022}/daterange/localization/messages.mjs +19 -3
  100. package/{esm2020 → esm2022}/datetimepicker/datetimepicker.component.mjs +350 -262
  101. package/{esm2020 → esm2022}/datetimepicker/datetimepicker.module.mjs +22 -22
  102. package/{esm2020 → esm2022}/datetimepicker/localization/datetimepicker-custom-messages.component.mjs +9 -8
  103. package/{esm2020 → esm2022}/datetimepicker/localization/localized-messages.directive.mjs +9 -8
  104. package/esm2022/datetimepicker/localization/messages.mjs +147 -0
  105. package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
  106. package/{esm2020 → esm2022}/preventable-event.mjs +2 -3
  107. package/esm2022/timepicker/localization/messages.mjs +99 -0
  108. package/{esm2020 → esm2022}/timepicker/localization/timepicker-custom-messages.component.mjs +9 -8
  109. package/{esm2020 → esm2022}/timepicker/localization/timepicker-localized-messages.directive.mjs +9 -8
  110. package/{esm2020 → esm2022}/timepicker/localization/timeselector-custom-messages.component.mjs +9 -8
  111. package/{esm2020 → esm2022}/timepicker/localization/timeselector-localized-messages.directive.mjs +9 -8
  112. package/{esm2020 → esm2022}/timepicker/services/dayperiod.service.mjs +7 -3
  113. package/{esm2020 → esm2022}/timepicker/services/dom.service.mjs +7 -3
  114. package/{esm2020 → esm2022}/timepicker/services/hours.service.mjs +10 -5
  115. package/{esm2020 → esm2022}/timepicker/services/milliseconds.service.mjs +9 -4
  116. package/{esm2020 → esm2022}/timepicker/services/minutes.service.mjs +9 -4
  117. package/{esm2020 → esm2022}/timepicker/services/seconds.service.mjs +9 -4
  118. package/{esm2020 → esm2022}/timepicker/timelist.component.mjs +45 -27
  119. package/{esm2020 → esm2022}/timepicker/timepicker.component.mjs +269 -196
  120. package/{esm2020 → esm2022}/timepicker/timepicker.module.mjs +14 -14
  121. package/{esm2020 → esm2022}/timepicker/timeselector.component.mjs +95 -72
  122. package/{esm2020 → esm2022}/virtualization/services/row-height.service.mjs +5 -2
  123. package/{esm2020 → esm2022}/virtualization/services/scroller.service.mjs +14 -3
  124. package/{esm2020 → esm2022}/virtualization/virtualization.component.mjs +42 -28
  125. package/{fesm2020 → fesm2022}/progress-kendo-angular-dateinputs.mjs +3571 -2396
  126. package/package.json +18 -24
  127. package/timepicker/localization/messages.d.ts +1 -1
  128. package/timepicker/timelist.component.d.ts +1 -1
  129. package/timepicker/timepicker.component.d.ts +1 -1
  130. package/timepicker/timeselector.component.d.ts +1 -1
  131. package/util.d.ts +1 -1
  132. package/virtualization/services/scroller.service.d.ts +2 -2
  133. package/virtualization/virtualization.component.d.ts +1 -1
  134. package/esm2020/calendar/localization/calendar-messages.mjs +0 -29
  135. package/esm2020/datepicker/localization/messages.mjs +0 -33
  136. package/esm2020/datetimepicker/localization/messages.mjs +0 -63
  137. package/esm2020/timepicker/localization/messages.mjs +0 -47
  138. package/fesm2015/progress-kendo-angular-dateinputs.mjs +0 -19350
  139. /package/{esm2020 → esm2022}/calendar/models/cell-context.interface.mjs +0 -0
  140. /package/{esm2020 → esm2022}/calendar/models/keydown.interface.mjs +0 -0
  141. /package/{esm2020 → esm2022}/calendar/models/navigation-action.enum.mjs +0 -0
  142. /package/{esm2020 → esm2022}/calendar/models/orientation.mjs +0 -0
  143. /package/{esm2020 → esm2022}/calendar/models/row-length-options.interface.mjs +0 -0
  144. /package/{esm2020 → esm2022}/calendar/models/scrollable.interface.mjs +0 -0
  145. /package/{esm2020 → esm2022}/calendar/models/selection-range-end.type.mjs +0 -0
  146. /package/{esm2020 → esm2022}/calendar/models/selection-range.interface.mjs +0 -0
  147. /package/{esm2020 → esm2022}/calendar/models/selection.mjs +0 -0
  148. /package/{esm2020 → esm2022}/calendar/models/type.mjs +0 -0
  149. /package/{esm2020 → esm2022}/calendar/models/view-service.interface.mjs +0 -0
  150. /package/{esm2020 → esm2022}/calendar/models/view.enum.mjs +0 -0
  151. /package/{esm2020 → esm2022}/calendar/models/view.type.mjs +0 -0
  152. /package/{esm2020 → esm2022}/common/dom-queries.mjs +0 -0
  153. /package/{esm2020 → esm2022}/common/models/fillmode.mjs +0 -0
  154. /package/{esm2020 → esm2022}/common/models/rounded.mjs +0 -0
  155. /package/{esm2020 → esm2022}/common/models/size.mjs +0 -0
  156. /package/{esm2020 → esm2022}/common/models/week-days-format.mjs +0 -0
  157. /package/{esm2020 → esm2022}/common/utils.mjs +0 -0
  158. /package/{esm2020 → esm2022}/dateinput/arrow.enum.mjs +0 -0
  159. /package/{esm2020 → esm2022}/dateinput/models/format-placeholder.model.mjs +0 -0
  160. /package/{esm2020 → esm2022}/dateinput/models/format-settings.model.mjs +0 -0
  161. /package/{esm2020 → esm2022}/dateinput/models/incremental-steps.model.mjs +0 -0
  162. /package/{esm2020 → esm2022}/daterange/auto-correct-on.type.mjs +0 -0
  163. /package/{esm2020 → esm2022}/datetimepicker/models/active-tab.type.mjs +0 -0
  164. /package/{esm2020 → esm2022}/defaults.mjs +0 -0
  165. /package/{esm2020 → esm2022}/directives.mjs +0 -0
  166. /package/{esm2020 → esm2022}/index.mjs +0 -0
  167. /package/{esm2020 → esm2022}/popup-settings.model.mjs +0 -0
  168. /package/{esm2020 → esm2022}/progress-kendo-angular-dateinputs.mjs +0 -0
  169. /package/{esm2020 → esm2022}/timepicker/models/incremental-steps.model.mjs +0 -0
  170. /package/{esm2020 → esm2022}/timepicker/models/list-item.interface.mjs +0 -0
  171. /package/{esm2020 → esm2022}/timepicker/models/list-service-settings.mjs +0 -0
  172. /package/{esm2020 → esm2022}/timepicker/models/list-service.interface.mjs +0 -0
  173. /package/{esm2020 → esm2022}/timepicker/models/time-part.default.mjs +0 -0
  174. /package/{esm2020 → esm2022}/timepicker/util.mjs +0 -0
  175. /package/{esm2020 → esm2022}/util.mjs +0 -0
  176. /package/{esm2020 → esm2022}/validators/disabled-date.validator.mjs +0 -0
  177. /package/{esm2020 → esm2022}/validators/disabled-dates-range.validator.mjs +0 -0
  178. /package/{esm2020 → esm2022}/validators/incomplete-date.validator.mjs +0 -0
  179. /package/{esm2020 → esm2022}/validators/max.validator.mjs +0 -0
  180. /package/{esm2020 → esm2022}/validators/min.validator.mjs +0 -0
  181. /package/{esm2020 → esm2022}/validators/time-range.validator.mjs +0 -0
  182. /package/{esm2020 → esm2022}/virtualization/models/scrollable.interface.mjs +0 -0
@@ -47,186 +47,122 @@ const CANCEL_BUTTON_SELECTOR = '.k-button.k-time-cancel';
47
47
  * Represents the [Kendo UI TimePicker component for Angular](slug:overview_timepicker).
48
48
  */
49
49
  export class TimePickerComponent extends MultiTabStop {
50
- constructor(bus, zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, intl) {
51
- super();
52
- this.bus = bus;
53
- this.zone = zone;
54
- this.localization = localization;
55
- this.cdr = cdr;
56
- this.popupService = popupService;
57
- this.wrapper = wrapper;
58
- this.renderer = renderer;
59
- this.injector = injector;
60
- this.pickerService = pickerService;
61
- this.intl = intl;
62
- /**
63
- * @hidden
64
- */
65
- this.clockIcon = clockIcon;
66
- /**
67
- * Sets or gets the `disabled` property of the TimePicker and
68
- * determines whether the component is active
69
- * ([see example]({% slug disabled_timepicker %})).
70
- * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_timepicker#toc-managing-the-timepicker-disabled-state-in-reactive-forms).
71
- */
72
- this.disabled = false;
73
- /**
74
- * Sets the read-only state of the TimePicker
75
- * ([see example]({% slug readonly_timepicker %}#toc-read-only-timepicker)).
76
- *
77
- * @default false
78
- */
79
- this.readonly = false;
80
- /**
81
- * Sets the read-only state of the TimePicker input field
82
- * ([see example]({% slug readonly_timepicker %}#toc-read-only-input)).
83
- *
84
- * > Note that if you set the [`readonly`]({% slug api_dateinputs_timepickercomponent %}#toc-readonly) property value to `true`,
85
- * the input will be rendered in a read-only state regardless of the `readOnlyInput` value.
86
- */
87
- this.readOnlyInput = false;
88
- /**
89
- * If set to `true`, renders a clear button after the input text or TimePicker value has been changed.
90
- * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
91
- * @default false
92
- */
93
- this.clearButton = false;
94
- /**
95
- * Specifies the time format that is used to display the input value
96
- * ([see example]({% slug formats_timepicker %})).
97
- */
98
- this.format = 't';
99
- /**
100
- * Specifies the hint the TimePicker displays when its value is `null`.
101
- * For more information, refer to the article on
102
- * [placeholders]({% slug placeholders_timepicker %}).
103
- *
104
- * @example
105
- * ```ts
106
- * _@Component({
107
- * selector: 'my-app',
108
- * template: `
109
- * <kendo-timepicker placeholder="Enter start..."></kendo-timepicker>
110
- * `
111
- * })
112
- * export class AppComponent { }
113
- * ```
114
- */
115
- this.placeholder = null;
116
- /**
117
- * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
118
- */
119
- this.incompleteDateValidation = false;
120
- /**
121
- * Determines whether to automatically move to the next segment after the user completes the current one.
122
- *
123
- * @default true
124
- */
125
- this.autoSwitchParts = true;
126
- /**
127
- * A string array representing custom keys, which will move the focus to the next date format segment.
128
- */
129
- this.autoSwitchKeys = [];
130
- /**
131
- * Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
132
- *
133
- * @default true
134
- */
135
- this.enableMouseWheel = true;
136
- /**
137
- * Determines if the users should see a blinking caret inside the Date Input when possible.
138
- *
139
- * @default false
140
- */
141
- this.allowCaretMode = false;
142
- /**
143
- * Determines whether to display the **Cancel** button in the popup.
144
- */
145
- this.cancelButton = true;
146
- /**
147
- * Determines whether to display the **Now** button in the popup.
148
- *
149
- * > If the current time is out of range or the incremental step is greater than `1`, the **Now** button will be hidden.
150
- */
151
- this.nowButton = true;
152
- /**
153
- * Sets or gets the `tabindex` property of the TimePicker.
154
- */
155
- this.tabindex = 0;
156
- /**
157
- * Sets the title of the input element of the TimePicker and the title text rendered
158
- * in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
159
- */
160
- this.title = "";
161
- /**
162
- * Determines whether the built-in min or max validators are enforced when a form is being validated.
163
- */
164
- this.rangeValidation = true;
165
- /**
166
- * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
167
- */
168
- this.adaptiveMode = 'none';
169
- /**
170
- * Fires each time the user selects a new value
171
- * ([see example](slug:events_timepicker)).
172
- */
173
- this.valueChange = new EventEmitter();
174
- /**
175
- * Fires each time the user focuses the input element
176
- * ([see example](slug:events_timepicker)).
177
- */
178
- this.onFocus = new EventEmitter();
179
- /**
180
- * Fires each time the input element gets blurred
181
- * ([see example](slug:events_timepicker)).
182
- */
183
- this.onBlur = new EventEmitter();
184
- /**
185
- * Fires each time the popup is about to open
186
- * ([see example](slug:events_timepicker)).
187
- * This event is preventable. If you cancel the event, the popup will remain closed.
188
- */
189
- this.open = new EventEmitter();
190
- /**
191
- * Fires each time the popup is about to close
192
- * ([see example](slug:events_timepicker)).
193
- * This event is preventable. If you cancel the event, the popup will remain open.
194
- */
195
- this.close = new EventEmitter();
196
- /**
197
- * @hidden
198
- */
199
- this.escape = new EventEmitter();
200
- /**
201
- * @hidden
202
- */
203
- this.wrapperClasses = true;
204
- /**
205
- * @hidden
206
- */
207
- this.xIcon = xIcon;
208
- this.onControlChange = noop;
209
- this.onControlTouched = noop;
210
- this.onValidatorChange = noop;
211
- this.resolvedPromise = Promise.resolve(null);
212
- this.timeRangeValidateFn = noop;
213
- this.incompleteValidator = noop;
214
- this._min = cloneDate(MIN_TIME);
215
- this._max = cloneDate(MAX_TIME);
216
- this._popupSettings = { animate: true };
217
- this._show = false;
218
- this._steps = {};
219
- this._value = null;
220
- this._active = false;
221
- this.domEvents = [];
222
- this._size = DEFAULT_SIZE;
223
- this._rounded = DEFAULT_ROUNDED;
224
- this._fillMode = DEFAULT_FILL_MODE;
225
- validatePackage(packageMetadata);
226
- this.pickerSubscriptions = this.pickerService.onFocus.subscribe(this.handleFocus.bind(this));
227
- this.pickerSubscriptions.add(this.pickerService.onBlur.subscribe(this.handleBlur.bind(this)));
228
- this.pickerSubscriptions.add(this.pickerService.dateCompletenessChange.subscribe(this.handleDateCompletenessChange.bind(this)));
229
- }
50
+ bus;
51
+ zone;
52
+ localization;
53
+ cdr;
54
+ popupService;
55
+ wrapper;
56
+ renderer;
57
+ injector;
58
+ pickerService;
59
+ intl;
60
+ /**
61
+ * @hidden
62
+ */
63
+ clockIcon = clockIcon;
64
+ container;
65
+ popupTemplate;
66
+ toggleButton;
67
+ actionSheet;
68
+ /**
69
+ * @hidden
70
+ */
71
+ focusableId;
72
+ /**
73
+ * Sets or gets the `disabled` property of the TimePicker and
74
+ * determines whether the component is active
75
+ * ([see example]({% slug disabled_timepicker %})).
76
+ * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_timepicker#toc-managing-the-timepicker-disabled-state-in-reactive-forms).
77
+ */
78
+ disabled = false;
79
+ /**
80
+ * Sets the read-only state of the TimePicker
81
+ * ([see example]({% slug readonly_timepicker %}#toc-read-only-timepicker)).
82
+ *
83
+ * @default false
84
+ */
85
+ readonly = false;
86
+ /**
87
+ * Sets the read-only state of the TimePicker input field
88
+ * ([see example]({% slug readonly_timepicker %}#toc-read-only-input)).
89
+ *
90
+ * > Note that if you set the [`readonly`]({% slug api_dateinputs_timepickercomponent %}#toc-readonly) property value to `true`,
91
+ * the input will be rendered in a read-only state regardless of the `readOnlyInput` value.
92
+ */
93
+ readOnlyInput = false;
94
+ /**
95
+ * If set to `true`, renders a clear button after the input text or TimePicker value has been changed.
96
+ * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
97
+ * @default false
98
+ */
99
+ clearButton = false;
100
+ /**
101
+ * Specifies the time format that is used to display the input value
102
+ * ([see example]({% slug formats_timepicker %})).
103
+ */
104
+ format = 't';
105
+ /**
106
+ * Defines the descriptions of the format sections in the input field.
107
+ * For more information, refer to the article on
108
+ * [placeholders]({% slug placeholders_timepicker %}).
109
+ *
110
+ * @example
111
+ * ```ts
112
+ * _@Component({
113
+ * selector: 'my-app',
114
+ * template: `
115
+ * <div class="row example-wrapper" [style.min-height.px]="450">
116
+ * <div class="col-xs-12 col-md-6 example-col">
117
+ * <p>Full-length format description:</p>
118
+ * <kendo-timepicker formatPlaceholder="wide"></kendo-timepicker>
119
+ * </div>
120
+ *
121
+ * <div class="col-xs-12 col-md-6 example-col">
122
+ * <p>Narrow-length format description:</p>
123
+ * <kendo-timepicker formatPlaceholder="narrow"></kendo-timepicker>
124
+ * </div>
125
+ *
126
+ * <div class="col-xs-12 col-md-6 example-col">
127
+ * <p>Short-length format description:</p>
128
+ * <kendo-timepicker formatPlaceholder="short"></kendo-timepicker>
129
+ * </div>
130
+ *
131
+ * <div class="col-xs-12 col-md-6 example-col">
132
+ * <p>Display defined format:</p>
133
+ * <kendo-timepicker format="HH:mm:ss" formatPlaceholder="formatPattern"></kendo-timepicker>
134
+ * </div>
135
+ *
136
+ * <div class="col-xs-12 col-md-6 example-col">
137
+ * <p>Custom defined format descriptions</p>
138
+ * <kendo-timepicker format="HH:mm:ss"
139
+ * [formatPlaceholder]="{ hour: 'H', minute: 'm', second: 's' }"
140
+ * ></kendo-timepicker>
141
+ * </div>
142
+ * </div>
143
+ * `
144
+ * })
145
+ * export class AppComponent { }
146
+ * ```
147
+ */
148
+ formatPlaceholder;
149
+ /**
150
+ * Specifies the hint the TimePicker displays when its value is `null`.
151
+ * For more information, refer to the article on
152
+ * [placeholders]({% slug placeholders_timepicker %}).
153
+ *
154
+ * @example
155
+ * ```ts
156
+ * _@Component({
157
+ * selector: 'my-app',
158
+ * template: `
159
+ * <kendo-timepicker placeholder="Enter start..."></kendo-timepicker>
160
+ * `
161
+ * })
162
+ * export class AppComponent { }
163
+ * ```
164
+ */
165
+ placeholder = null;
230
166
  /**
231
167
  * Specifies the smallest valid time value
232
168
  * ([see example]({% slug timeranges_timepicker %})).
@@ -247,6 +183,42 @@ export class TimePickerComponent extends MultiTabStop {
247
183
  get max() {
248
184
  return this._max;
249
185
  }
186
+ /**
187
+ * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
188
+ */
189
+ incompleteDateValidation = false;
190
+ /**
191
+ * Determines whether to automatically move to the next segment after the user completes the current one.
192
+ *
193
+ * @default true
194
+ */
195
+ autoSwitchParts = true;
196
+ /**
197
+ * A string array representing custom keys, which will move the focus to the next date format segment.
198
+ */
199
+ autoSwitchKeys = [];
200
+ /**
201
+ * Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
202
+ *
203
+ * @default true
204
+ */
205
+ enableMouseWheel = true;
206
+ /**
207
+ * Determines if the users should see a blinking caret inside the Date Input when possible.
208
+ *
209
+ * @default false
210
+ */
211
+ allowCaretMode = false;
212
+ /**
213
+ * Determines whether to display the **Cancel** button in the popup.
214
+ */
215
+ cancelButton = true;
216
+ /**
217
+ * Determines whether to display the **Now** button in the popup.
218
+ *
219
+ * > If the current time is out of range or the incremental step is greater than `1`, the **Now** button will be hidden.
220
+ */
221
+ nowButton = true;
250
222
  /**
251
223
  * Configures the incremental steps of the TimePicker.
252
224
  * For more information, refer to the article on
@@ -288,6 +260,10 @@ export class TimePickerComponent extends MultiTabStop {
288
260
  get popupSettings() {
289
261
  return this._popupSettings;
290
262
  }
263
+ /**
264
+ * Sets or gets the `tabindex` property of the TimePicker.
265
+ */
266
+ tabindex = 0;
291
267
  /**
292
268
  * @hidden
293
269
  */
@@ -297,6 +273,11 @@ export class TimePickerComponent extends MultiTabStop {
297
273
  get tabIndex() {
298
274
  return this.tabindex;
299
275
  }
276
+ /**
277
+ * Sets the title of the input element of the TimePicker and the title text rendered
278
+ * in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
279
+ */
280
+ title = "";
300
281
  /**
301
282
  * Sets the subtitle text rendered in the header of the popup(action sheet).
302
283
  * Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
@@ -307,6 +288,15 @@ export class TimePickerComponent extends MultiTabStop {
307
288
  get subtitle() {
308
289
  return this._subtitle || this.placeholder;
309
290
  }
291
+ _subtitle;
292
+ /**
293
+ * Determines whether the built-in min or max validators are enforced when a form is being validated.
294
+ */
295
+ rangeValidation = true;
296
+ /**
297
+ * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
298
+ */
299
+ adaptiveMode = 'none';
310
300
  /**
311
301
  * Specifies the value of the TimePicker component.
312
302
  *
@@ -389,6 +379,45 @@ export class TimePickerComponent extends MultiTabStop {
389
379
  get fillMode() {
390
380
  return this._fillMode;
391
381
  }
382
+ /**
383
+ * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
384
+ */
385
+ inputAttributes;
386
+ /**
387
+ * Fires each time the user selects a new value
388
+ * ([see example](slug:events_timepicker)).
389
+ */
390
+ valueChange = new EventEmitter();
391
+ /**
392
+ * Fires each time the user focuses the input element
393
+ * ([see example](slug:events_timepicker)).
394
+ */
395
+ onFocus = new EventEmitter();
396
+ /**
397
+ * Fires each time the input element gets blurred
398
+ * ([see example](slug:events_timepicker)).
399
+ */
400
+ onBlur = new EventEmitter();
401
+ /**
402
+ * Fires each time the popup is about to open
403
+ * ([see example](slug:events_timepicker)).
404
+ * This event is preventable. If you cancel the event, the popup will remain closed.
405
+ */
406
+ open = new EventEmitter();
407
+ /**
408
+ * Fires each time the popup is about to close
409
+ * ([see example](slug:events_timepicker)).
410
+ * This event is preventable. If you cancel the event, the popup will remain open.
411
+ */
412
+ close = new EventEmitter();
413
+ /**
414
+ * @hidden
415
+ */
416
+ escape = new EventEmitter();
417
+ /**
418
+ * @hidden
419
+ */
420
+ wrapperClasses = true;
392
421
  /**
393
422
  * @hidden
394
423
  */
@@ -398,6 +427,11 @@ export class TimePickerComponent extends MultiTabStop {
398
427
  get popupUID() {
399
428
  return `k-timepicker-popup-${this.bus.calendarId}-`;
400
429
  }
430
+ popupRef;
431
+ /**
432
+ * @hidden
433
+ */
434
+ xIcon = xIcon;
401
435
  get isActive() {
402
436
  return this._active;
403
437
  }
@@ -462,6 +496,45 @@ export class TimePickerComponent extends MultiTabStop {
462
496
  get inputElement() {
463
497
  return this.wrapper.nativeElement.querySelector('input');
464
498
  }
499
+ onControlChange = noop;
500
+ onControlTouched = noop;
501
+ onValidatorChange = noop;
502
+ resolvedPromise = Promise.resolve(null);
503
+ timeRangeValidateFn = noop;
504
+ incompleteValidator = noop;
505
+ _min = cloneDate(MIN_TIME);
506
+ _max = cloneDate(MAX_TIME);
507
+ _popupSettings = { animate: true };
508
+ _show = false;
509
+ _steps = {};
510
+ _value = null;
511
+ _active = false;
512
+ localizationChangeSubscription;
513
+ pickerSubscriptions;
514
+ windowBlurSubscription;
515
+ control;
516
+ domEvents = [];
517
+ _size = DEFAULT_SIZE;
518
+ _rounded = DEFAULT_ROUNDED;
519
+ _fillMode = DEFAULT_FILL_MODE;
520
+ windowSize;
521
+ constructor(bus, zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, intl) {
522
+ super();
523
+ this.bus = bus;
524
+ this.zone = zone;
525
+ this.localization = localization;
526
+ this.cdr = cdr;
527
+ this.popupService = popupService;
528
+ this.wrapper = wrapper;
529
+ this.renderer = renderer;
530
+ this.injector = injector;
531
+ this.pickerService = pickerService;
532
+ this.intl = intl;
533
+ validatePackage(packageMetadata);
534
+ this.pickerSubscriptions = this.pickerService.onFocus.subscribe(this.handleFocus.bind(this));
535
+ this.pickerSubscriptions.add(this.pickerService.onBlur.subscribe(this.handleBlur.bind(this)));
536
+ this.pickerSubscriptions.add(this.pickerService.dateCompletenessChange.subscribe(this.handleDateCompletenessChange.bind(this)));
537
+ }
465
538
  /**
466
539
  * @hidden
467
540
  * Used by the TextBoxContainer to determine if the component is empty
@@ -974,21 +1047,20 @@ export class TimePickerComponent extends MultiTabStop {
974
1047
  this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
975
1048
  }
976
1049
  }
977
- }
978
- 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 }], target: i0.ɵɵFactoryTarget.Component });
979
- TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimePickerComponent, isStandalone: true, 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", 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", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
980
- { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimePickerComponent), multi: true },
981
- { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
982
- { provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
983
- { provide: MultiTabStop, useExisting: forwardRef(() => TimePickerComponent) },
984
- LocalizationService,
985
- BusViewService,
986
- {
987
- provide: L10N_PREFIX,
988
- useValue: 'kendo.timepicker'
989
- },
990
- PickerService
991
- ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-timepicker"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
1050
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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 }], target: i0.ɵɵFactoryTarget.Component });
1051
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimePickerComponent, isStandalone: true, 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", 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", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
1052
+ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimePickerComponent), multi: true },
1053
+ { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
1054
+ { provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
1055
+ { provide: MultiTabStop, useExisting: forwardRef(() => TimePickerComponent) },
1056
+ LocalizationService,
1057
+ BusViewService,
1058
+ {
1059
+ provide: L10N_PREFIX,
1060
+ useValue: 'kendo.timepicker'
1061
+ },
1062
+ PickerService
1063
+ ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-timepicker"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
992
1064
  <ng-container kendoTimePickerLocalizedMessages
993
1065
  i18n-accept="kendo.timepicker.accept|The Accept button text in the timepicker component"
994
1066
  accept="Set"
@@ -1193,7 +1265,8 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
1193
1265
  </kendo-timeselector>
1194
1266
  </ng-template>
1195
1267
  `, isInline: true, dependencies: [{ kind: "directive", type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "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: "component", type: 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: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1196
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerComponent, decorators: [{
1268
+ }
1269
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerComponent, decorators: [{
1197
1270
  type: Component,
1198
1271
  args: [{
1199
1272
  changeDetection: ChangeDetectionStrategy.OnPush,
@@ -22,21 +22,21 @@ import * as i2 from "./timepicker.component";
22
22
  * definition for the TimePicker component.
23
23
  */
24
24
  export class TimePickerModule {
25
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
26
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TimePickerModule, imports: [i1.TimePickerCustomMessagesComponent, i2.TimePickerComponent], exports: [i1.TimePickerCustomMessagesComponent, i2.TimePickerComponent] });
27
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerModule, providers: [
28
+ IconsService,
29
+ PopupService,
30
+ ResizeBatchService,
31
+ TimePickerDOMService,
32
+ HoursService,
33
+ MinutesService,
34
+ SecondsService,
35
+ MillisecondsService,
36
+ DayPeriodService,
37
+ ], imports: [i2.TimePickerComponent] });
25
38
  }
26
- TimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
27
- TimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TimePickerModule, imports: [i1.TimePickerCustomMessagesComponent, i2.TimePickerComponent], exports: [i1.TimePickerCustomMessagesComponent, i2.TimePickerComponent] });
28
- TimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerModule, providers: [
29
- IconsService,
30
- PopupService,
31
- ResizeBatchService,
32
- TimePickerDOMService,
33
- HoursService,
34
- MinutesService,
35
- SecondsService,
36
- MillisecondsService,
37
- DayPeriodService,
38
- ], imports: [KENDO_TIMEPICKER] });
39
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimePickerModule, decorators: [{
39
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimePickerModule, decorators: [{
40
40
  type: NgModule,
41
41
  args: [{
42
42
  exports: [...KENDO_TIMEPICKER],