@progress/kendo-angular-dateinputs 21.1.1-develop.2 → 21.2.0-develop.2
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.
- package/esm2022/calendar/calendar.component.mjs +222 -221
- package/esm2022/calendar/footer.component.mjs +31 -29
- package/esm2022/calendar/header.component.mjs +157 -145
- package/esm2022/calendar/horizontal-view-list.component.mjs +139 -123
- package/esm2022/calendar/multiview-calendar.component.mjs +110 -107
- package/esm2022/calendar/navigation.component.mjs +55 -49
- package/esm2022/calendar/view-list.component.mjs +148 -135
- package/esm2022/calendar/view.component.mjs +107 -89
- package/esm2022/dateinput/dateinput.component.mjs +142 -137
- package/esm2022/datepicker/datepicker.component.mjs +315 -303
- package/esm2022/daterange/date-range-popup.component.mjs +264 -253
- package/esm2022/daterange/date-range.component.mjs +10 -7
- package/esm2022/datetimepicker/datetimepicker.component.mjs +677 -657
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/timepicker/timelist.component.mjs +55 -51
- package/esm2022/timepicker/timepicker.component.mjs +379 -367
- package/esm2022/timepicker/timeselector.component.mjs +138 -123
- package/fesm2022/progress-kendo-angular-dateinputs.mjs +2943 -2783
- package/package.json +11 -11
|
@@ -28,7 +28,7 @@ import { checkIcon, clockIcon } from '@progress/kendo-svg-icons';
|
|
|
28
28
|
import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/kendo-angular-navigation';
|
|
29
29
|
import { TimeSelectorCustomMessagesComponent } from './localization/timeselector-custom-messages.component';
|
|
30
30
|
import { ButtonComponent } from '@progress/kendo-angular-buttons';
|
|
31
|
-
import { NgTemplateOutlet
|
|
31
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
32
32
|
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
33
33
|
import { DateInputCustomMessagesComponent } from '../dateinput/localization/dateinput-custom-messages.component';
|
|
34
34
|
import { TimePickerLocalizedMessagesDirective } from './localization/timepicker-localized-messages.directive';
|
|
@@ -1010,7 +1010,7 @@ export class TimePickerComponent extends MultiTabStop {
|
|
|
1010
1010
|
}
|
|
1011
1011
|
}
|
|
1012
1012
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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: i6.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1013
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1013
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", 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: [
|
|
1014
1014
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimePickerComponent), multi: true },
|
|
1015
1015
|
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
|
|
1016
1016
|
{ provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
|
|
@@ -1024,119 +1024,121 @@ export class TimePickerComponent extends MultiTabStop {
|
|
|
1024
1024
|
PickerService
|
|
1025
1025
|
], 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: `
|
|
1026
1026
|
<ng-container kendoTimePickerLocalizedMessages
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1027
|
+
i18n-accept="kendo.timepicker.accept|The Accept button text in the timepicker component"
|
|
1028
|
+
accept="Set"
|
|
1029
|
+
|
|
1030
|
+
i18n-acceptLabel="kendo.timepicker.acceptLabel|The label for the Accept button in the timepicker component"
|
|
1031
|
+
acceptLabel="Set time"
|
|
1032
|
+
|
|
1033
|
+
i18n-cancel="kendo.timepicker.cancel|The Cancel button text in the timepicker component"
|
|
1034
|
+
cancel="Cancel"
|
|
1035
|
+
|
|
1036
|
+
i18n-cancelLabel="kendo.timepicker.cancelLabel|The label for the Cancel button in the timepicker component"
|
|
1037
|
+
cancelLabel="Cancel changes"
|
|
1038
|
+
|
|
1039
|
+
i18n-now="kendo.timepicker.now|The Now button text in the timepicker component"
|
|
1040
|
+
now="Now"
|
|
1041
|
+
|
|
1042
|
+
i18n-nowLabel="kendo.timepicker.nowLabel|The label for the Now button in the timepicker component"
|
|
1043
|
+
nowLabel="Select now"
|
|
1044
|
+
|
|
1045
|
+
i18n-toggle="kendo.timepicker.toggle|The label for the toggle button in the timepicker component"
|
|
1046
|
+
toggle="Toggle time list"
|
|
1047
|
+
|
|
1048
|
+
i18n-hour="kendo.timepicker.hour|The label for the hour part in the timepicker component"
|
|
1049
|
+
hour="Hour"
|
|
1050
|
+
|
|
1051
|
+
i18n-minute="kendo.timepicker.minute|The label for the minute part in the timepicker component"
|
|
1052
|
+
minute="Minute"
|
|
1053
|
+
|
|
1054
|
+
i18n-second="kendo.timepicker.second|The label for the second part in the timepicker component"
|
|
1055
|
+
second="Second"
|
|
1056
|
+
|
|
1057
|
+
i18n-millisecond="kendo.timepicker.millisecond|The label for the millisecond part in the timepicker component"
|
|
1058
|
+
millisecond="Millisecond"
|
|
1059
|
+
|
|
1060
|
+
i18n-dayperiod="kendo.timepicker.dayperiod|The label for the dayperiod part in the timepicker component"
|
|
1061
|
+
dayperiod="Dayperiod"
|
|
1062
|
+
|
|
1063
|
+
i18n-clearTitle="kendo.timepicker.clearTitle|The title of the clear button"
|
|
1064
|
+
clearTitle="clear"
|
|
1065
|
+
|
|
1066
|
+
i18n-adaptiveCloseButtonTitle="kendo.timepicker.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"
|
|
1067
|
+
adaptiveCloseButtonTitle="Close"
|
|
1068
|
+
>
|
|
1069
1069
|
</ng-container>
|
|
1070
1070
|
<kendo-dateinput
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1071
|
+
#input
|
|
1072
|
+
pickerType="timepicker"
|
|
1073
|
+
hasPopup="dialog"
|
|
1074
|
+
[isPopupOpen]="show"
|
|
1075
|
+
[disabled]="disabled"
|
|
1076
|
+
[clearButton]="clearButton"
|
|
1077
|
+
[readonly]="readonly || readOnlyInput"
|
|
1078
|
+
[role]="'combobox'"
|
|
1079
|
+
[ariaReadOnly]="readonly"
|
|
1080
|
+
[format]="format"
|
|
1081
|
+
[formatPlaceholder]="formatPlaceholder"
|
|
1082
|
+
[placeholder]="placeholder"
|
|
1083
|
+
[focusableId]="focusableId"
|
|
1084
|
+
[min]="normalizeTime(min)"
|
|
1085
|
+
[max]="normalizeTime(max)"
|
|
1086
|
+
[incompleteDateValidation]="incompleteDateValidation"
|
|
1087
|
+
[autoSwitchParts]="autoSwitchParts"
|
|
1088
|
+
[autoSwitchKeys]="autoSwitchKeys"
|
|
1089
|
+
[enableMouseWheel]="enableMouseWheel"
|
|
1090
|
+
[allowCaretMode]="allowCaretMode"
|
|
1091
|
+
fillMode="none"
|
|
1092
|
+
rounded="none"
|
|
1093
|
+
size="none"
|
|
1094
|
+
[steps]="steps"
|
|
1095
|
+
[tabindex]="!show ? tabindex : -1"
|
|
1096
|
+
[isRequired]="isControlRequired"
|
|
1097
|
+
[title]="adaptiveTitle"
|
|
1098
|
+
[inputAttributes]="inputAttributes"
|
|
1099
|
+
[value]="value"
|
|
1100
|
+
(valueChange)="handleInputChange($event)"
|
|
1101
|
+
(click)="handleDateInputClick()"
|
|
1102
|
+
>
|
|
1103
|
+
<kendo-dateinput-messages
|
|
1104
|
+
[clearTitle]="localization.get('clearTitle')"
|
|
1105
1105
|
>
|
|
1106
|
-
|
|
1106
|
+
</kendo-dateinput-messages>
|
|
1107
1107
|
</kendo-dateinput>
|
|
1108
1108
|
<button
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1109
|
+
#toggleButton
|
|
1110
|
+
type="button"
|
|
1111
|
+
tabindex="-1"
|
|
1112
|
+
class="k-input-button k-button k-icon-button"
|
|
1113
|
+
[attr.title]="localization.get('toggle')"
|
|
1114
|
+
[attr.aria-label]="localization.get('toggle')"
|
|
1115
|
+
[attr.disabled]="disabled ? '' : null"
|
|
1116
1116
|
[kendoEventsOutsideAngular]="{
|
|
1117
1117
|
click: handleIconClick,
|
|
1118
1118
|
mousedown: handleMousedown
|
|
1119
1119
|
}"
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1120
|
+
[scope]="this"
|
|
1121
|
+
>
|
|
1122
|
+
<kendo-icon-wrapper
|
|
1123
|
+
name="clock"
|
|
1124
|
+
[svgIcon]="clockIcon"
|
|
1125
|
+
innerCssClass="k-button-icon"
|
|
1126
1126
|
>
|
|
1127
|
-
|
|
1127
|
+
</kendo-icon-wrapper>
|
|
1128
1128
|
</button>
|
|
1129
1129
|
<ng-template #popupTemplate>
|
|
1130
|
-
|
|
1130
|
+
<ng-container *ngTemplateOutlet="timeSelectorTemplate"></ng-container>
|
|
1131
1131
|
</ng-template>
|
|
1132
1132
|
<ng-container #container></ng-container>
|
|
1133
|
-
|
|
1134
|
-
|
|
1133
|
+
|
|
1134
|
+
@if (isAdaptiveModeEnabled) {
|
|
1135
|
+
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
1136
|
+
}
|
|
1135
1137
|
<kendo-actionsheet
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1138
|
+
#actionSheet
|
|
1139
|
+
(overlayClick)="show=false"
|
|
1140
|
+
(collapse)="handleActionSheetCollapse()"
|
|
1141
|
+
[titleId]="focusableId"
|
|
1140
1142
|
[cssClass]="{
|
|
1141
1143
|
'k-adaptive-actionsheet': true,
|
|
1142
1144
|
'k-actionsheet-fullscreen': windowSize === 'small',
|
|
@@ -1145,100 +1147,104 @@ export class TimePickerComponent extends MultiTabStop {
|
|
|
1145
1147
|
[cssStyle]="{
|
|
1146
1148
|
height: windowSize === 'small' ? '100vh' : '60vh'
|
|
1147
1149
|
}"
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
type="button"
|
|
1160
|
-
icon="check"
|
|
1161
|
-
[attr.title]="localization.get('adaptiveCloseButtonTitle')"
|
|
1162
|
-
[svgIcon]="checkIcon"
|
|
1163
|
-
fillMode="flat"
|
|
1164
|
-
size="large"
|
|
1165
|
-
[tabIndex]="-1"
|
|
1166
|
-
(click)="show = false">
|
|
1167
|
-
</button>
|
|
1168
|
-
</div>
|
|
1169
|
-
</div>
|
|
1170
|
-
</div>
|
|
1171
|
-
<div class="k-actionsheet-content">
|
|
1172
|
-
<ng-container *ngTemplateOutlet="timeSelectorTemplate"></ng-container>
|
|
1150
|
+
>
|
|
1151
|
+
<ng-template kendoActionSheetTemplate>
|
|
1152
|
+
<div class="k-actionsheet-titlebar">
|
|
1153
|
+
<div class="k-actionsheet-titlebar-group">
|
|
1154
|
+
<div class="k-actionsheet-title">
|
|
1155
|
+
@if (adaptiveTitle) {
|
|
1156
|
+
<div class="k-text-center">{{ adaptiveTitle }}</div>
|
|
1157
|
+
}
|
|
1158
|
+
@if (adaptiveSubtitle) {
|
|
1159
|
+
<div class="k-actionsheet-subtitle k-text-center">{{ adaptiveSubtitle }}</div>
|
|
1160
|
+
}
|
|
1173
1161
|
</div>
|
|
1174
|
-
<div class="k-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
<button kendoButton
|
|
1187
|
-
type="button"
|
|
1188
|
-
(click)="handleActionSheetAccept()"
|
|
1189
|
-
size="large"
|
|
1190
|
-
class="k-time-accept"
|
|
1191
|
-
themeColor="primary"
|
|
1192
|
-
[attr.title]="localization.get('acceptLabel')"
|
|
1193
|
-
[attr.aria-label]="localization.get('acceptLabel')"
|
|
1194
|
-
>
|
|
1195
|
-
{{localization.get('accept')}}
|
|
1196
|
-
</button>
|
|
1162
|
+
<div class="k-actionsheet-actions">
|
|
1163
|
+
<button
|
|
1164
|
+
kendoButton
|
|
1165
|
+
type="button"
|
|
1166
|
+
icon="check"
|
|
1167
|
+
[attr.title]="localization.get('adaptiveCloseButtonTitle')"
|
|
1168
|
+
[svgIcon]="checkIcon"
|
|
1169
|
+
fillMode="flat"
|
|
1170
|
+
size="large"
|
|
1171
|
+
[tabIndex]="-1"
|
|
1172
|
+
(click)="show = false">
|
|
1173
|
+
</button>
|
|
1197
1174
|
</div>
|
|
1198
|
-
|
|
1175
|
+
</div>
|
|
1176
|
+
</div>
|
|
1177
|
+
<div class="k-actionsheet-content">
|
|
1178
|
+
<ng-container *ngTemplateOutlet="timeSelectorTemplate"></ng-container>
|
|
1179
|
+
</div>
|
|
1180
|
+
<div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
|
|
1181
|
+
<button kendoButton
|
|
1182
|
+
type="button"
|
|
1183
|
+
(click)="handleReject()"
|
|
1184
|
+
size="large"
|
|
1185
|
+
class="k-time-cancel"
|
|
1186
|
+
[attr.title]="localization.get('cancelLabel')"
|
|
1187
|
+
[attr.aria-label]="localization.get('cancelLabel')"
|
|
1188
|
+
>
|
|
1189
|
+
{{localization.get('cancel')}}
|
|
1190
|
+
</button>
|
|
1191
|
+
|
|
1192
|
+
<button kendoButton
|
|
1193
|
+
type="button"
|
|
1194
|
+
(click)="handleActionSheetAccept()"
|
|
1195
|
+
size="large"
|
|
1196
|
+
class="k-time-accept"
|
|
1197
|
+
themeColor="primary"
|
|
1198
|
+
[attr.title]="localization.get('acceptLabel')"
|
|
1199
|
+
[attr.aria-label]="localization.get('acceptLabel')"
|
|
1200
|
+
>
|
|
1201
|
+
{{localization.get('accept')}}
|
|
1202
|
+
</button>
|
|
1203
|
+
</div>
|
|
1204
|
+
</ng-template>
|
|
1199
1205
|
</kendo-actionsheet>
|
|
1200
|
-
|
|
1206
|
+
|
|
1201
1207
|
<ng-template #timeSelectorTemplate>
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1208
|
+
<kendo-timeselector
|
|
1209
|
+
#timeSelector
|
|
1210
|
+
[class.k-timeselector-lg]="isAdaptive"
|
|
1211
|
+
[cancelButton]="cancelButton && !this.isAdaptive"
|
|
1212
|
+
[setButton]="!isAdaptive"
|
|
1213
|
+
[nowButton]="nowButton"
|
|
1214
|
+
[format]="format"
|
|
1215
|
+
[min]="min"
|
|
1216
|
+
[max]="max"
|
|
1217
|
+
[steps]="steps"
|
|
1218
|
+
[value]="value"
|
|
1219
|
+
[isAdaptiveEnabled]="isAdaptiveModeEnabled"
|
|
1214
1220
|
[kendoEventsOutsideAngular]="{
|
|
1215
1221
|
keydown: handleKeydown,
|
|
1216
1222
|
mousedown: handleMousedown
|
|
1217
1223
|
}"
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
+
[scope]="this"
|
|
1225
|
+
(valueChange)="handleChange($event)"
|
|
1226
|
+
(valueReject)="handleReject()"
|
|
1227
|
+
(tabOutLastPart)="onTabOutLastPart()"
|
|
1228
|
+
(tabOutFirstPart)="onTabOutFirstPart()"
|
|
1229
|
+
(tabOutNow)="onTabOutNow()"
|
|
1224
1230
|
>
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1231
|
+
<kendo-timeselector-messages
|
|
1232
|
+
[acceptLabel]="localization.get('acceptLabel')"
|
|
1233
|
+
[accept]="localization.get('accept')"
|
|
1234
|
+
[cancelLabel]="localization.get('cancelLabel')"
|
|
1235
|
+
[cancel]="localization.get('cancel')"
|
|
1236
|
+
[nowLabel]="localization.get('nowLabel')"
|
|
1237
|
+
[now]="localization.get('now')"
|
|
1238
|
+
[hour]="localization.get('hour')"
|
|
1239
|
+
[minute]="localization.get('minute')"
|
|
1240
|
+
[second]="localization.get('second')"
|
|
1241
|
+
[millisecond]="localization.get('millisecond')"
|
|
1242
|
+
[dayperiod]="localization.get('dayperiod')"
|
|
1243
|
+
>
|
|
1244
|
+
</kendo-timeselector-messages>
|
|
1245
|
+
</kendo-timeselector>
|
|
1240
1246
|
</ng-template>
|
|
1241
|
-
|
|
1247
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart", "tabOutFirstPart", "tabOutNow"], exportAs: ["kendo-timeselector"] }, { kind: "component", type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1242
1248
|
}
|
|
1243
1249
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimePickerComponent, decorators: [{
|
|
1244
1250
|
type: Component,
|
|
@@ -1261,119 +1267,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1261
1267
|
selector: 'kendo-timepicker',
|
|
1262
1268
|
template: `
|
|
1263
1269
|
<ng-container kendoTimePickerLocalizedMessages
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1270
|
+
i18n-accept="kendo.timepicker.accept|The Accept button text in the timepicker component"
|
|
1271
|
+
accept="Set"
|
|
1272
|
+
|
|
1273
|
+
i18n-acceptLabel="kendo.timepicker.acceptLabel|The label for the Accept button in the timepicker component"
|
|
1274
|
+
acceptLabel="Set time"
|
|
1275
|
+
|
|
1276
|
+
i18n-cancel="kendo.timepicker.cancel|The Cancel button text in the timepicker component"
|
|
1277
|
+
cancel="Cancel"
|
|
1278
|
+
|
|
1279
|
+
i18n-cancelLabel="kendo.timepicker.cancelLabel|The label for the Cancel button in the timepicker component"
|
|
1280
|
+
cancelLabel="Cancel changes"
|
|
1281
|
+
|
|
1282
|
+
i18n-now="kendo.timepicker.now|The Now button text in the timepicker component"
|
|
1283
|
+
now="Now"
|
|
1284
|
+
|
|
1285
|
+
i18n-nowLabel="kendo.timepicker.nowLabel|The label for the Now button in the timepicker component"
|
|
1286
|
+
nowLabel="Select now"
|
|
1287
|
+
|
|
1288
|
+
i18n-toggle="kendo.timepicker.toggle|The label for the toggle button in the timepicker component"
|
|
1289
|
+
toggle="Toggle time list"
|
|
1290
|
+
|
|
1291
|
+
i18n-hour="kendo.timepicker.hour|The label for the hour part in the timepicker component"
|
|
1292
|
+
hour="Hour"
|
|
1293
|
+
|
|
1294
|
+
i18n-minute="kendo.timepicker.minute|The label for the minute part in the timepicker component"
|
|
1295
|
+
minute="Minute"
|
|
1296
|
+
|
|
1297
|
+
i18n-second="kendo.timepicker.second|The label for the second part in the timepicker component"
|
|
1298
|
+
second="Second"
|
|
1299
|
+
|
|
1300
|
+
i18n-millisecond="kendo.timepicker.millisecond|The label for the millisecond part in the timepicker component"
|
|
1301
|
+
millisecond="Millisecond"
|
|
1302
|
+
|
|
1303
|
+
i18n-dayperiod="kendo.timepicker.dayperiod|The label for the dayperiod part in the timepicker component"
|
|
1304
|
+
dayperiod="Dayperiod"
|
|
1305
|
+
|
|
1306
|
+
i18n-clearTitle="kendo.timepicker.clearTitle|The title of the clear button"
|
|
1307
|
+
clearTitle="clear"
|
|
1308
|
+
|
|
1309
|
+
i18n-adaptiveCloseButtonTitle="kendo.timepicker.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"
|
|
1310
|
+
adaptiveCloseButtonTitle="Close"
|
|
1311
|
+
>
|
|
1306
1312
|
</ng-container>
|
|
1307
1313
|
<kendo-dateinput
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1314
|
+
#input
|
|
1315
|
+
pickerType="timepicker"
|
|
1316
|
+
hasPopup="dialog"
|
|
1317
|
+
[isPopupOpen]="show"
|
|
1318
|
+
[disabled]="disabled"
|
|
1319
|
+
[clearButton]="clearButton"
|
|
1320
|
+
[readonly]="readonly || readOnlyInput"
|
|
1321
|
+
[role]="'combobox'"
|
|
1322
|
+
[ariaReadOnly]="readonly"
|
|
1323
|
+
[format]="format"
|
|
1324
|
+
[formatPlaceholder]="formatPlaceholder"
|
|
1325
|
+
[placeholder]="placeholder"
|
|
1326
|
+
[focusableId]="focusableId"
|
|
1327
|
+
[min]="normalizeTime(min)"
|
|
1328
|
+
[max]="normalizeTime(max)"
|
|
1329
|
+
[incompleteDateValidation]="incompleteDateValidation"
|
|
1330
|
+
[autoSwitchParts]="autoSwitchParts"
|
|
1331
|
+
[autoSwitchKeys]="autoSwitchKeys"
|
|
1332
|
+
[enableMouseWheel]="enableMouseWheel"
|
|
1333
|
+
[allowCaretMode]="allowCaretMode"
|
|
1334
|
+
fillMode="none"
|
|
1335
|
+
rounded="none"
|
|
1336
|
+
size="none"
|
|
1337
|
+
[steps]="steps"
|
|
1338
|
+
[tabindex]="!show ? tabindex : -1"
|
|
1339
|
+
[isRequired]="isControlRequired"
|
|
1340
|
+
[title]="adaptiveTitle"
|
|
1341
|
+
[inputAttributes]="inputAttributes"
|
|
1342
|
+
[value]="value"
|
|
1343
|
+
(valueChange)="handleInputChange($event)"
|
|
1344
|
+
(click)="handleDateInputClick()"
|
|
1345
|
+
>
|
|
1346
|
+
<kendo-dateinput-messages
|
|
1347
|
+
[clearTitle]="localization.get('clearTitle')"
|
|
1342
1348
|
>
|
|
1343
|
-
|
|
1349
|
+
</kendo-dateinput-messages>
|
|
1344
1350
|
</kendo-dateinput>
|
|
1345
1351
|
<button
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1352
|
+
#toggleButton
|
|
1353
|
+
type="button"
|
|
1354
|
+
tabindex="-1"
|
|
1355
|
+
class="k-input-button k-button k-icon-button"
|
|
1356
|
+
[attr.title]="localization.get('toggle')"
|
|
1357
|
+
[attr.aria-label]="localization.get('toggle')"
|
|
1358
|
+
[attr.disabled]="disabled ? '' : null"
|
|
1353
1359
|
[kendoEventsOutsideAngular]="{
|
|
1354
1360
|
click: handleIconClick,
|
|
1355
1361
|
mousedown: handleMousedown
|
|
1356
1362
|
}"
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
+
[scope]="this"
|
|
1364
|
+
>
|
|
1365
|
+
<kendo-icon-wrapper
|
|
1366
|
+
name="clock"
|
|
1367
|
+
[svgIcon]="clockIcon"
|
|
1368
|
+
innerCssClass="k-button-icon"
|
|
1363
1369
|
>
|
|
1364
|
-
|
|
1370
|
+
</kendo-icon-wrapper>
|
|
1365
1371
|
</button>
|
|
1366
1372
|
<ng-template #popupTemplate>
|
|
1367
|
-
|
|
1373
|
+
<ng-container *ngTemplateOutlet="timeSelectorTemplate"></ng-container>
|
|
1368
1374
|
</ng-template>
|
|
1369
1375
|
<ng-container #container></ng-container>
|
|
1370
|
-
|
|
1371
|
-
|
|
1376
|
+
|
|
1377
|
+
@if (isAdaptiveModeEnabled) {
|
|
1378
|
+
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
1379
|
+
}
|
|
1372
1380
|
<kendo-actionsheet
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1381
|
+
#actionSheet
|
|
1382
|
+
(overlayClick)="show=false"
|
|
1383
|
+
(collapse)="handleActionSheetCollapse()"
|
|
1384
|
+
[titleId]="focusableId"
|
|
1377
1385
|
[cssClass]="{
|
|
1378
1386
|
'k-adaptive-actionsheet': true,
|
|
1379
1387
|
'k-actionsheet-fullscreen': windowSize === 'small',
|
|
@@ -1382,102 +1390,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1382
1390
|
[cssStyle]="{
|
|
1383
1391
|
height: windowSize === 'small' ? '100vh' : '60vh'
|
|
1384
1392
|
}"
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
type="button"
|
|
1397
|
-
icon="check"
|
|
1398
|
-
[attr.title]="localization.get('adaptiveCloseButtonTitle')"
|
|
1399
|
-
[svgIcon]="checkIcon"
|
|
1400
|
-
fillMode="flat"
|
|
1401
|
-
size="large"
|
|
1402
|
-
[tabIndex]="-1"
|
|
1403
|
-
(click)="show = false">
|
|
1404
|
-
</button>
|
|
1405
|
-
</div>
|
|
1406
|
-
</div>
|
|
1407
|
-
</div>
|
|
1408
|
-
<div class="k-actionsheet-content">
|
|
1409
|
-
<ng-container *ngTemplateOutlet="timeSelectorTemplate"></ng-container>
|
|
1393
|
+
>
|
|
1394
|
+
<ng-template kendoActionSheetTemplate>
|
|
1395
|
+
<div class="k-actionsheet-titlebar">
|
|
1396
|
+
<div class="k-actionsheet-titlebar-group">
|
|
1397
|
+
<div class="k-actionsheet-title">
|
|
1398
|
+
@if (adaptiveTitle) {
|
|
1399
|
+
<div class="k-text-center">{{ adaptiveTitle }}</div>
|
|
1400
|
+
}
|
|
1401
|
+
@if (adaptiveSubtitle) {
|
|
1402
|
+
<div class="k-actionsheet-subtitle k-text-center">{{ adaptiveSubtitle }}</div>
|
|
1403
|
+
}
|
|
1410
1404
|
</div>
|
|
1411
|
-
<div class="k-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
<button kendoButton
|
|
1424
|
-
type="button"
|
|
1425
|
-
(click)="handleActionSheetAccept()"
|
|
1426
|
-
size="large"
|
|
1427
|
-
class="k-time-accept"
|
|
1428
|
-
themeColor="primary"
|
|
1429
|
-
[attr.title]="localization.get('acceptLabel')"
|
|
1430
|
-
[attr.aria-label]="localization.get('acceptLabel')"
|
|
1431
|
-
>
|
|
1432
|
-
{{localization.get('accept')}}
|
|
1433
|
-
</button>
|
|
1405
|
+
<div class="k-actionsheet-actions">
|
|
1406
|
+
<button
|
|
1407
|
+
kendoButton
|
|
1408
|
+
type="button"
|
|
1409
|
+
icon="check"
|
|
1410
|
+
[attr.title]="localization.get('adaptiveCloseButtonTitle')"
|
|
1411
|
+
[svgIcon]="checkIcon"
|
|
1412
|
+
fillMode="flat"
|
|
1413
|
+
size="large"
|
|
1414
|
+
[tabIndex]="-1"
|
|
1415
|
+
(click)="show = false">
|
|
1416
|
+
</button>
|
|
1434
1417
|
</div>
|
|
1435
|
-
|
|
1418
|
+
</div>
|
|
1419
|
+
</div>
|
|
1420
|
+
<div class="k-actionsheet-content">
|
|
1421
|
+
<ng-container *ngTemplateOutlet="timeSelectorTemplate"></ng-container>
|
|
1422
|
+
</div>
|
|
1423
|
+
<div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
|
|
1424
|
+
<button kendoButton
|
|
1425
|
+
type="button"
|
|
1426
|
+
(click)="handleReject()"
|
|
1427
|
+
size="large"
|
|
1428
|
+
class="k-time-cancel"
|
|
1429
|
+
[attr.title]="localization.get('cancelLabel')"
|
|
1430
|
+
[attr.aria-label]="localization.get('cancelLabel')"
|
|
1431
|
+
>
|
|
1432
|
+
{{localization.get('cancel')}}
|
|
1433
|
+
</button>
|
|
1434
|
+
|
|
1435
|
+
<button kendoButton
|
|
1436
|
+
type="button"
|
|
1437
|
+
(click)="handleActionSheetAccept()"
|
|
1438
|
+
size="large"
|
|
1439
|
+
class="k-time-accept"
|
|
1440
|
+
themeColor="primary"
|
|
1441
|
+
[attr.title]="localization.get('acceptLabel')"
|
|
1442
|
+
[attr.aria-label]="localization.get('acceptLabel')"
|
|
1443
|
+
>
|
|
1444
|
+
{{localization.get('accept')}}
|
|
1445
|
+
</button>
|
|
1446
|
+
</div>
|
|
1447
|
+
</ng-template>
|
|
1436
1448
|
</kendo-actionsheet>
|
|
1437
|
-
|
|
1449
|
+
|
|
1438
1450
|
<ng-template #timeSelectorTemplate>
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
+
<kendo-timeselector
|
|
1452
|
+
#timeSelector
|
|
1453
|
+
[class.k-timeselector-lg]="isAdaptive"
|
|
1454
|
+
[cancelButton]="cancelButton && !this.isAdaptive"
|
|
1455
|
+
[setButton]="!isAdaptive"
|
|
1456
|
+
[nowButton]="nowButton"
|
|
1457
|
+
[format]="format"
|
|
1458
|
+
[min]="min"
|
|
1459
|
+
[max]="max"
|
|
1460
|
+
[steps]="steps"
|
|
1461
|
+
[value]="value"
|
|
1462
|
+
[isAdaptiveEnabled]="isAdaptiveModeEnabled"
|
|
1451
1463
|
[kendoEventsOutsideAngular]="{
|
|
1452
1464
|
keydown: handleKeydown,
|
|
1453
1465
|
mousedown: handleMousedown
|
|
1454
1466
|
}"
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1467
|
+
[scope]="this"
|
|
1468
|
+
(valueChange)="handleChange($event)"
|
|
1469
|
+
(valueReject)="handleReject()"
|
|
1470
|
+
(tabOutLastPart)="onTabOutLastPart()"
|
|
1471
|
+
(tabOutFirstPart)="onTabOutFirstPart()"
|
|
1472
|
+
(tabOutNow)="onTabOutNow()"
|
|
1461
1473
|
>
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1474
|
+
<kendo-timeselector-messages
|
|
1475
|
+
[acceptLabel]="localization.get('acceptLabel')"
|
|
1476
|
+
[accept]="localization.get('accept')"
|
|
1477
|
+
[cancelLabel]="localization.get('cancelLabel')"
|
|
1478
|
+
[cancel]="localization.get('cancel')"
|
|
1479
|
+
[nowLabel]="localization.get('nowLabel')"
|
|
1480
|
+
[now]="localization.get('now')"
|
|
1481
|
+
[hour]="localization.get('hour')"
|
|
1482
|
+
[minute]="localization.get('minute')"
|
|
1483
|
+
[second]="localization.get('second')"
|
|
1484
|
+
[millisecond]="localization.get('millisecond')"
|
|
1485
|
+
[dayperiod]="localization.get('dayperiod')"
|
|
1486
|
+
>
|
|
1487
|
+
</kendo-timeselector-messages>
|
|
1488
|
+
</kendo-timeselector>
|
|
1477
1489
|
</ng-template>
|
|
1478
|
-
|
|
1490
|
+
`,
|
|
1479
1491
|
standalone: true,
|
|
1480
|
-
imports: [TimePickerLocalizedMessagesDirective, DateInputComponent, DateInputCustomMessagesComponent, EventsOutsideAngularDirective, IconWrapperComponent, NgTemplateOutlet,
|
|
1492
|
+
imports: [TimePickerLocalizedMessagesDirective, DateInputComponent, DateInputCustomMessagesComponent, EventsOutsideAngularDirective, IconWrapperComponent, NgTemplateOutlet, ResizeSensorComponent, ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, TimeSelectorComponent, TimeSelectorCustomMessagesComponent]
|
|
1481
1493
|
}]
|
|
1482
1494
|
}], ctorParameters: () => [{ type: i1.BusViewService }, { type: i0.NgZone }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i4.PickerService }, { type: i5.IntlService }, { type: i6.AdaptiveService }], propDecorators: { container: [{
|
|
1483
1495
|
type: ViewChild,
|