@progress/kendo-angular-dateinputs 21.1.1-develop.2 → 21.2.0-develop.10
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/codemods/utils.js +805 -394
- package/codemods/v19/datepicker-subtitle.js +9 -12
- package/codemods/v19/datepicker-title.js +9 -12
- package/codemods/v19/daterange-popup-subtitle.js +9 -12
- package/codemods/v19/daterange-popup-title.js +9 -12
- package/codemods/v19/datetimepicker-subtitle.js +9 -12
- package/codemods/v19/datetimepicker-title.js +9 -12
- package/codemods/v19/timepicker-subtitle.js +9 -12
- package/codemods/v19/timepicker-title.js +9 -12
- package/esm2022/calendar/calendar.component.mjs +224 -223
- 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 +112 -109
- package/esm2022/calendar/navigation.component.mjs +55 -49
- package/esm2022/calendar/services/navigation.service.mjs +2 -2
- package/esm2022/calendar/view-list.component.mjs +148 -135
- package/esm2022/calendar/view.component.mjs +107 -89
- package/esm2022/common/utils.mjs +2 -2
- package/esm2022/dateinput/dateinput.component.mjs +142 -137
- package/esm2022/datepicker/datepicker.component.mjs +317 -305
- package/esm2022/daterange/date-range-input.mjs +2 -2
- package/esm2022/daterange/date-range-popup.component.mjs +266 -255
- package/esm2022/daterange/date-range.component.mjs +12 -9
- package/esm2022/datetimepicker/datetimepicker.component.mjs +679 -659
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/timepicker/timelist.component.mjs +57 -53
- package/esm2022/timepicker/timepicker.component.mjs +381 -369
- package/esm2022/timepicker/timeselector.component.mjs +140 -125
- package/fesm2022/progress-kendo-angular-dateinputs.mjs +2956 -2796
- package/package.json +12 -13
- package/codemods/template-transformer/index.js +0 -96
|
@@ -7,7 +7,7 @@ import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
|
|
|
7
7
|
import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
|
|
8
8
|
import { PopupService } from '@progress/kendo-angular-popup';
|
|
9
9
|
import { cloneDate } from '@progress/kendo-date-math';
|
|
10
|
-
import { hasObservers, isControlRequired, KendoInput, Keys, MultiTabStop, ResizeSensorComponent, EventsOutsideAngularDirective,
|
|
10
|
+
import { hasObservers, isControlRequired, KendoInput, Keys, MultiTabStop, ResizeSensorComponent, EventsOutsideAngularDirective, normalizeKeys } from '@progress/kendo-angular-common';
|
|
11
11
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
12
12
|
import { packageMetadata } from '../package-metadata';
|
|
13
13
|
import { MIN_DATE, MAX_DATE } from '../defaults';
|
|
@@ -38,7 +38,7 @@ import { FooterTemplateDirective } from '../calendar/templates/footer-template.d
|
|
|
38
38
|
import { CalendarCustomMessagesComponent } from '../calendar/localization/calendar-custom-messages.component';
|
|
39
39
|
import { CalendarComponent } from '../calendar/calendar.component';
|
|
40
40
|
import { ButtonComponent } from '@progress/kendo-angular-buttons';
|
|
41
|
-
import { NgTemplateOutlet
|
|
41
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
42
42
|
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
43
43
|
import { DateInputCustomMessagesComponent } from '../dateinput/localization/dateinput-custom-messages.component';
|
|
44
44
|
import { DatePickerLocalizedMessagesDirective } from './localization/datepicker-localized-messages.directive';
|
|
@@ -927,7 +927,7 @@ export class DatePickerComponent extends MultiTabStop {
|
|
|
927
927
|
*/
|
|
928
928
|
handleKeydown(e) {
|
|
929
929
|
const { altKey, shiftKey, target } = e;
|
|
930
|
-
const code =
|
|
930
|
+
const code = normalizeKeys(e);
|
|
931
931
|
if (code === Keys.Escape) {
|
|
932
932
|
this.dateInput.focus();
|
|
933
933
|
this.show = false;
|
|
@@ -1145,7 +1145,7 @@ export class DatePickerComponent extends MultiTabStop {
|
|
|
1145
1145
|
}
|
|
1146
1146
|
}
|
|
1147
1147
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i3.PickerService }, { token: i4.DisabledDatesService }, { token: i5.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1148
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1148
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DatePickerComponent, isStandalone: true, selector: "kendo-datepicker", inputs: { focusableId: "focusableId", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], clearButton: "clearButton", inputAttributes: "inputAttributes", monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer", navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", bottomView: "bottomView", topView: "topView", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", popupSettings: "popupSettings", navigation: "navigation", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode", adaptiveMode: "adaptiveMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
|
|
1149
1149
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
|
|
1150
1150
|
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => DatePickerComponent), multi: true },
|
|
1151
1151
|
{ provide: KendoInput, useExisting: forwardRef(() => DatePickerComponent) },
|
|
@@ -1159,106 +1159,108 @@ export class DatePickerComponent extends MultiTabStop {
|
|
|
1159
1159
|
}
|
|
1160
1160
|
], queries: [{ propertyName: "cellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "monthCellTemplate", first: true, predicate: MonthCellTemplateDirective, descendants: true }, { propertyName: "yearCellTemplate", first: true, predicate: YearCellTemplateDirective, descendants: true }, { propertyName: "decadeCellTemplate", first: true, predicate: DecadeCellTemplateDirective, descendants: true }, { propertyName: "centuryCellTemplate", first: true, predicate: CenturyCellTemplateDirective, descendants: true }, { propertyName: "weekNumberTemplate", first: true, predicate: WeekNumberCellTemplateDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: HeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "navigationItemTemplate", first: true, predicate: NavigationItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }], exportAs: ["kendo-datepicker"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
|
|
1161
1161
|
<ng-container kendoDatePickerLocalizedMessages
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1162
|
+
i18n-today="kendo.datepicker.today|The label for the today button in the calendar header"
|
|
1163
|
+
today="Today"
|
|
1164
|
+
|
|
1165
|
+
i18n-toggle="kendo.datepicker.toggle|The title of the toggle button in the datepicker component"
|
|
1166
|
+
toggle="Toggle calendar"
|
|
1167
|
+
|
|
1168
|
+
i18n-prevButtonTitle="kendo.datepicker.prevButtonTitle|The title of the previous button in the Classic calendar"
|
|
1169
|
+
prevButtonTitle="Navigate to previous view"
|
|
1170
|
+
|
|
1171
|
+
i18n-nextButtonTitle="kendo.datepicker.nextButtonTitle|The title of the next button in the Classic calendar"
|
|
1172
|
+
nextButtonTitle="Navigate to next view"
|
|
1173
|
+
|
|
1174
|
+
i18n-parentViewButtonTitle="kendo.datepicker.parentViewButtonTitle|The title of the parent view button in the calendar header"
|
|
1175
|
+
parentViewButtonTitle="Navigate to parent view"
|
|
1176
|
+
|
|
1177
|
+
i18n-clearTitle="kendo.datepicker.clearTitle|The title of the clear button"
|
|
1178
|
+
clearTitle="clear"
|
|
1179
|
+
|
|
1180
|
+
i18n-adaptiveCloseButtonTitle="kendo.datepicker.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"
|
|
1181
|
+
adaptiveCloseButtonTitle="Close"
|
|
1182
|
+
>
|
|
1183
1183
|
</ng-container>
|
|
1184
1184
|
<kendo-dateinput
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1185
|
+
#input
|
|
1186
|
+
[role]="'combobox'"
|
|
1187
|
+
pickerType="datepicker"
|
|
1188
|
+
hasPopup="grid"
|
|
1189
|
+
[isPopupOpen]="show"
|
|
1190
|
+
[clearButton]="clearButton"
|
|
1191
|
+
[disabled]="disabled"
|
|
1192
|
+
[readonly]="readonly || readOnlyInput"
|
|
1193
|
+
[ariaReadOnly]="readonly"
|
|
1194
|
+
[tabindex]="tabindex"
|
|
1195
|
+
[isRequired]="isControlRequired"
|
|
1196
|
+
[title]="adaptiveTitle"
|
|
1197
|
+
[focusableId]="focusableId"
|
|
1198
|
+
[format]="format"
|
|
1199
|
+
[twoDigitYearMax]="twoDigitYearMax"
|
|
1200
|
+
[formatPlaceholder]="formatPlaceholder"
|
|
1201
|
+
[placeholder]="placeholder"
|
|
1202
|
+
[min]="min"
|
|
1203
|
+
[max]="max"
|
|
1204
|
+
[incompleteDateValidation]="incompleteDateValidation"
|
|
1205
|
+
[autoCorrectParts]="autoCorrectParts"
|
|
1206
|
+
[autoSwitchParts]="autoSwitchParts"
|
|
1207
|
+
[autoSwitchKeys]="autoSwitchKeys"
|
|
1208
|
+
[enableMouseWheel]="enableMouseWheel"
|
|
1209
|
+
[allowCaretMode]="allowCaretMode"
|
|
1210
|
+
[autoFill]="autoFill"
|
|
1211
|
+
fillMode="none"
|
|
1212
|
+
rounded="none"
|
|
1213
|
+
size="none"
|
|
1214
|
+
[inputAttributes]="inputAttributes"
|
|
1215
|
+
[value]="value"
|
|
1216
|
+
(valueChange)="handleInputChange($event)"
|
|
1217
|
+
(click)="handleDateInputClick()"
|
|
1218
|
+
>
|
|
1219
|
+
<kendo-dateinput-messages
|
|
1220
|
+
[clearTitle]="localization.get('clearTitle')"
|
|
1221
1221
|
>
|
|
1222
|
-
|
|
1222
|
+
</kendo-dateinput-messages>
|
|
1223
1223
|
</kendo-dateinput>
|
|
1224
1224
|
<button
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1225
|
+
#toggleButton
|
|
1226
|
+
type="button"
|
|
1227
|
+
class="k-input-button k-button k-icon-button"
|
|
1228
|
+
[tabindex]="-1"
|
|
1229
|
+
[attr.title]="localization.get('toggle')"
|
|
1230
|
+
[attr.aria-label]="localization.get('toggle')"
|
|
1231
|
+
[attr.disabled]="disabled ? '' : null"
|
|
1232
1232
|
[kendoEventsOutsideAngular]="{
|
|
1233
1233
|
click: handleIconClick,
|
|
1234
1234
|
mousedown: handleMousedown
|
|
1235
1235
|
}"
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1236
|
+
[scope]="this"
|
|
1237
|
+
>
|
|
1238
|
+
<kendo-icon-wrapper
|
|
1239
|
+
name="calendar"
|
|
1240
|
+
[svgIcon]="calendarIcon"
|
|
1241
|
+
innerCssClass="k-button-icon"
|
|
1242
1242
|
>
|
|
1243
|
-
|
|
1243
|
+
</kendo-icon-wrapper>
|
|
1244
1244
|
</button>
|
|
1245
|
-
|
|
1245
|
+
|
|
1246
1246
|
<ng-container #container></ng-container>
|
|
1247
|
-
|
|
1247
|
+
|
|
1248
1248
|
<ng-template #popupTemplate>
|
|
1249
|
-
|
|
1249
|
+
<ng-container *ngTemplateOutlet="calendarTemplate"></ng-container>
|
|
1250
1250
|
</ng-template>
|
|
1251
|
-
|
|
1252
|
-
|
|
1251
|
+
|
|
1252
|
+
@if (isAdaptiveModeEnabled) {
|
|
1253
|
+
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
1254
|
+
}
|
|
1253
1255
|
<kendo-actionsheet
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
+
#actionSheet
|
|
1257
|
+
(overlayClick)="show=false"
|
|
1256
1258
|
[kendoEventsOutsideAngular]="{
|
|
1257
1259
|
click: handleActionSheetClick
|
|
1258
1260
|
}"
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1261
|
+
[scope]="this"
|
|
1262
|
+
(collapse)="handleActionSheetCollapse()"
|
|
1263
|
+
[titleId]="calendar?.headerId"
|
|
1262
1264
|
[cssClass]="{
|
|
1263
1265
|
'k-adaptive-actionsheet': true,
|
|
1264
1266
|
'k-actionsheet-fullscreen': windowSize === 'small',
|
|
@@ -1267,83 +1269,87 @@ export class DatePickerComponent extends MultiTabStop {
|
|
|
1267
1269
|
[cssStyle]="{
|
|
1268
1270
|
height: windowSize === 'small' ? '100vh' : '60vh'
|
|
1269
1271
|
}"
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
type="button"
|
|
1282
|
-
icon="check"
|
|
1283
|
-
themeColor="primary"
|
|
1284
|
-
[attr.title]="localization.get('adaptiveCloseButtonTitle')"
|
|
1285
|
-
[svgIcon]="checkIcon"
|
|
1286
|
-
fillMode="flat"
|
|
1287
|
-
[tabIndex]="-1"
|
|
1288
|
-
size="large"
|
|
1289
|
-
innerCssClass="k-button-icon"
|
|
1290
|
-
(click)="show = false">
|
|
1291
|
-
</button>
|
|
1292
|
-
</div>
|
|
1293
|
-
</div>
|
|
1272
|
+
>
|
|
1273
|
+
<ng-template kendoActionSheetTemplate>
|
|
1274
|
+
<div class="k-actionsheet-titlebar">
|
|
1275
|
+
<div class="k-actionsheet-titlebar-group">
|
|
1276
|
+
<div class="k-actionsheet-title">
|
|
1277
|
+
@if (adaptiveTitle) {
|
|
1278
|
+
<div class="k-text-center">{{ adaptiveTitle }}</div>
|
|
1279
|
+
}
|
|
1280
|
+
@if (adaptiveSubtitle) {
|
|
1281
|
+
<div class="k-actionsheet-subtitle k-text-center">{{ adaptiveSubtitle }}</div>
|
|
1282
|
+
}
|
|
1294
1283
|
</div>
|
|
1295
|
-
<div class="k-actionsheet-
|
|
1296
|
-
|
|
1284
|
+
<div class="k-actionsheet-actions">
|
|
1285
|
+
<button
|
|
1286
|
+
kendoButton
|
|
1287
|
+
type="button"
|
|
1288
|
+
icon="check"
|
|
1289
|
+
themeColor="primary"
|
|
1290
|
+
[attr.title]="localization.get('adaptiveCloseButtonTitle')"
|
|
1291
|
+
[svgIcon]="checkIcon"
|
|
1292
|
+
fillMode="flat"
|
|
1293
|
+
[tabIndex]="-1"
|
|
1294
|
+
size="large"
|
|
1295
|
+
innerCssClass="k-button-icon"
|
|
1296
|
+
(click)="show = false">
|
|
1297
|
+
</button>
|
|
1297
1298
|
</div>
|
|
1298
|
-
|
|
1299
|
+
</div>
|
|
1300
|
+
</div>
|
|
1301
|
+
<div class="k-actionsheet-content">
|
|
1302
|
+
<ng-container *ngTemplateOutlet="calendarTemplate"></ng-container>
|
|
1303
|
+
</div>
|
|
1304
|
+
</ng-template>
|
|
1299
1305
|
</kendo-actionsheet>
|
|
1300
|
-
|
|
1306
|
+
|
|
1301
1307
|
<ng-template #calendarTemplate>
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1308
|
+
<kendo-calendar
|
|
1309
|
+
#calendar
|
|
1310
|
+
[type]="calendarType"
|
|
1311
|
+
[size]="isAdaptive ? 'large' : size"
|
|
1312
|
+
[min]="min"
|
|
1313
|
+
[max]="max"
|
|
1314
|
+
[weekDaysFormat]="weekDaysFormat"
|
|
1315
|
+
[navigation]="navigation"
|
|
1316
|
+
[animateNavigation]="animateCalendarNavigation"
|
|
1317
|
+
[activeView]="activeView"
|
|
1318
|
+
[bottomView]="bottomView"
|
|
1319
|
+
[showOtherMonthDays]="showOtherMonthDays"
|
|
1320
|
+
[topView]="topView"
|
|
1321
|
+
[weekNumber]="weekNumber"
|
|
1322
|
+
[cellTemplate]="cellTemplate"
|
|
1323
|
+
[monthCellTemplate]="monthCellTemplate"
|
|
1324
|
+
[yearCellTemplate]="yearCellTemplate"
|
|
1325
|
+
[decadeCellTemplate]="decadeCellTemplate"
|
|
1326
|
+
[centuryCellTemplate]="centuryCellTemplate"
|
|
1327
|
+
[weekNumberTemplate]="weekNumberTemplate"
|
|
1328
|
+
[headerTitleTemplate]="headerTitleTemplate"
|
|
1329
|
+
[headerTemplate]="headerTemplate"
|
|
1330
|
+
[footerTemplate]="footerTemplate"
|
|
1331
|
+
[footer]="footer"
|
|
1332
|
+
[navigationItemTemplate]="navigationItemTemplate"
|
|
1333
|
+
[focusedDate]="focusedDate"
|
|
1334
|
+
[value]="value"
|
|
1335
|
+
(closePopup)="show = false;"
|
|
1336
|
+
(valueChange)="handleChange(mergeTime($event))"
|
|
1331
1337
|
[kendoEventsOutsideAngular]="{
|
|
1332
1338
|
keydown: handleKeydown
|
|
1333
1339
|
}"
|
|
1334
|
-
|
|
1335
|
-
|
|
1340
|
+
[scope]="this"
|
|
1341
|
+
[disabledDates]="disabledDates"
|
|
1336
1342
|
>
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1343
|
+
<kendo-calendar-messages
|
|
1344
|
+
[today]="localization.get('today')"
|
|
1345
|
+
[prevButtonTitle]="localization.get('prevButtonTitle')"
|
|
1346
|
+
[nextButtonTitle]="localization.get('nextButtonTitle')"
|
|
1347
|
+
[parentViewButtonTitle]="localization.get('parentViewButtonTitle')"
|
|
1348
|
+
>
|
|
1349
|
+
</kendo-calendar-messages>
|
|
1350
|
+
</kendo-calendar>
|
|
1345
1351
|
</ng-template>
|
|
1346
|
-
|
|
1352
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["closePopup", "activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1347
1353
|
}
|
|
1348
1354
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
1349
1355
|
type: Component,
|
|
@@ -1366,106 +1372,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1366
1372
|
selector: 'kendo-datepicker',
|
|
1367
1373
|
template: `
|
|
1368
1374
|
<ng-container kendoDatePickerLocalizedMessages
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1375
|
+
i18n-today="kendo.datepicker.today|The label for the today button in the calendar header"
|
|
1376
|
+
today="Today"
|
|
1377
|
+
|
|
1378
|
+
i18n-toggle="kendo.datepicker.toggle|The title of the toggle button in the datepicker component"
|
|
1379
|
+
toggle="Toggle calendar"
|
|
1380
|
+
|
|
1381
|
+
i18n-prevButtonTitle="kendo.datepicker.prevButtonTitle|The title of the previous button in the Classic calendar"
|
|
1382
|
+
prevButtonTitle="Navigate to previous view"
|
|
1383
|
+
|
|
1384
|
+
i18n-nextButtonTitle="kendo.datepicker.nextButtonTitle|The title of the next button in the Classic calendar"
|
|
1385
|
+
nextButtonTitle="Navigate to next view"
|
|
1386
|
+
|
|
1387
|
+
i18n-parentViewButtonTitle="kendo.datepicker.parentViewButtonTitle|The title of the parent view button in the calendar header"
|
|
1388
|
+
parentViewButtonTitle="Navigate to parent view"
|
|
1389
|
+
|
|
1390
|
+
i18n-clearTitle="kendo.datepicker.clearTitle|The title of the clear button"
|
|
1391
|
+
clearTitle="clear"
|
|
1392
|
+
|
|
1393
|
+
i18n-adaptiveCloseButtonTitle="kendo.datepicker.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"
|
|
1394
|
+
adaptiveCloseButtonTitle="Close"
|
|
1395
|
+
>
|
|
1390
1396
|
</ng-container>
|
|
1391
1397
|
<kendo-dateinput
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1398
|
+
#input
|
|
1399
|
+
[role]="'combobox'"
|
|
1400
|
+
pickerType="datepicker"
|
|
1401
|
+
hasPopup="grid"
|
|
1402
|
+
[isPopupOpen]="show"
|
|
1403
|
+
[clearButton]="clearButton"
|
|
1404
|
+
[disabled]="disabled"
|
|
1405
|
+
[readonly]="readonly || readOnlyInput"
|
|
1406
|
+
[ariaReadOnly]="readonly"
|
|
1407
|
+
[tabindex]="tabindex"
|
|
1408
|
+
[isRequired]="isControlRequired"
|
|
1409
|
+
[title]="adaptiveTitle"
|
|
1410
|
+
[focusableId]="focusableId"
|
|
1411
|
+
[format]="format"
|
|
1412
|
+
[twoDigitYearMax]="twoDigitYearMax"
|
|
1413
|
+
[formatPlaceholder]="formatPlaceholder"
|
|
1414
|
+
[placeholder]="placeholder"
|
|
1415
|
+
[min]="min"
|
|
1416
|
+
[max]="max"
|
|
1417
|
+
[incompleteDateValidation]="incompleteDateValidation"
|
|
1418
|
+
[autoCorrectParts]="autoCorrectParts"
|
|
1419
|
+
[autoSwitchParts]="autoSwitchParts"
|
|
1420
|
+
[autoSwitchKeys]="autoSwitchKeys"
|
|
1421
|
+
[enableMouseWheel]="enableMouseWheel"
|
|
1422
|
+
[allowCaretMode]="allowCaretMode"
|
|
1423
|
+
[autoFill]="autoFill"
|
|
1424
|
+
fillMode="none"
|
|
1425
|
+
rounded="none"
|
|
1426
|
+
size="none"
|
|
1427
|
+
[inputAttributes]="inputAttributes"
|
|
1428
|
+
[value]="value"
|
|
1429
|
+
(valueChange)="handleInputChange($event)"
|
|
1430
|
+
(click)="handleDateInputClick()"
|
|
1431
|
+
>
|
|
1432
|
+
<kendo-dateinput-messages
|
|
1433
|
+
[clearTitle]="localization.get('clearTitle')"
|
|
1428
1434
|
>
|
|
1429
|
-
|
|
1435
|
+
</kendo-dateinput-messages>
|
|
1430
1436
|
</kendo-dateinput>
|
|
1431
1437
|
<button
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1438
|
+
#toggleButton
|
|
1439
|
+
type="button"
|
|
1440
|
+
class="k-input-button k-button k-icon-button"
|
|
1441
|
+
[tabindex]="-1"
|
|
1442
|
+
[attr.title]="localization.get('toggle')"
|
|
1443
|
+
[attr.aria-label]="localization.get('toggle')"
|
|
1444
|
+
[attr.disabled]="disabled ? '' : null"
|
|
1439
1445
|
[kendoEventsOutsideAngular]="{
|
|
1440
1446
|
click: handleIconClick,
|
|
1441
1447
|
mousedown: handleMousedown
|
|
1442
1448
|
}"
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
+
[scope]="this"
|
|
1450
|
+
>
|
|
1451
|
+
<kendo-icon-wrapper
|
|
1452
|
+
name="calendar"
|
|
1453
|
+
[svgIcon]="calendarIcon"
|
|
1454
|
+
innerCssClass="k-button-icon"
|
|
1449
1455
|
>
|
|
1450
|
-
|
|
1456
|
+
</kendo-icon-wrapper>
|
|
1451
1457
|
</button>
|
|
1452
|
-
|
|
1458
|
+
|
|
1453
1459
|
<ng-container #container></ng-container>
|
|
1454
|
-
|
|
1460
|
+
|
|
1455
1461
|
<ng-template #popupTemplate>
|
|
1456
|
-
|
|
1462
|
+
<ng-container *ngTemplateOutlet="calendarTemplate"></ng-container>
|
|
1457
1463
|
</ng-template>
|
|
1458
|
-
|
|
1459
|
-
|
|
1464
|
+
|
|
1465
|
+
@if (isAdaptiveModeEnabled) {
|
|
1466
|
+
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
1467
|
+
}
|
|
1460
1468
|
<kendo-actionsheet
|
|
1461
|
-
|
|
1462
|
-
|
|
1469
|
+
#actionSheet
|
|
1470
|
+
(overlayClick)="show=false"
|
|
1463
1471
|
[kendoEventsOutsideAngular]="{
|
|
1464
1472
|
click: handleActionSheetClick
|
|
1465
1473
|
}"
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1474
|
+
[scope]="this"
|
|
1475
|
+
(collapse)="handleActionSheetCollapse()"
|
|
1476
|
+
[titleId]="calendar?.headerId"
|
|
1469
1477
|
[cssClass]="{
|
|
1470
1478
|
'k-adaptive-actionsheet': true,
|
|
1471
1479
|
'k-actionsheet-fullscreen': windowSize === 'small',
|
|
@@ -1474,85 +1482,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1474
1482
|
[cssStyle]="{
|
|
1475
1483
|
height: windowSize === 'small' ? '100vh' : '60vh'
|
|
1476
1484
|
}"
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
type="button"
|
|
1489
|
-
icon="check"
|
|
1490
|
-
themeColor="primary"
|
|
1491
|
-
[attr.title]="localization.get('adaptiveCloseButtonTitle')"
|
|
1492
|
-
[svgIcon]="checkIcon"
|
|
1493
|
-
fillMode="flat"
|
|
1494
|
-
[tabIndex]="-1"
|
|
1495
|
-
size="large"
|
|
1496
|
-
innerCssClass="k-button-icon"
|
|
1497
|
-
(click)="show = false">
|
|
1498
|
-
</button>
|
|
1499
|
-
</div>
|
|
1500
|
-
</div>
|
|
1485
|
+
>
|
|
1486
|
+
<ng-template kendoActionSheetTemplate>
|
|
1487
|
+
<div class="k-actionsheet-titlebar">
|
|
1488
|
+
<div class="k-actionsheet-titlebar-group">
|
|
1489
|
+
<div class="k-actionsheet-title">
|
|
1490
|
+
@if (adaptiveTitle) {
|
|
1491
|
+
<div class="k-text-center">{{ adaptiveTitle }}</div>
|
|
1492
|
+
}
|
|
1493
|
+
@if (adaptiveSubtitle) {
|
|
1494
|
+
<div class="k-actionsheet-subtitle k-text-center">{{ adaptiveSubtitle }}</div>
|
|
1495
|
+
}
|
|
1501
1496
|
</div>
|
|
1502
|
-
<div class="k-actionsheet-
|
|
1503
|
-
|
|
1497
|
+
<div class="k-actionsheet-actions">
|
|
1498
|
+
<button
|
|
1499
|
+
kendoButton
|
|
1500
|
+
type="button"
|
|
1501
|
+
icon="check"
|
|
1502
|
+
themeColor="primary"
|
|
1503
|
+
[attr.title]="localization.get('adaptiveCloseButtonTitle')"
|
|
1504
|
+
[svgIcon]="checkIcon"
|
|
1505
|
+
fillMode="flat"
|
|
1506
|
+
[tabIndex]="-1"
|
|
1507
|
+
size="large"
|
|
1508
|
+
innerCssClass="k-button-icon"
|
|
1509
|
+
(click)="show = false">
|
|
1510
|
+
</button>
|
|
1504
1511
|
</div>
|
|
1505
|
-
|
|
1512
|
+
</div>
|
|
1513
|
+
</div>
|
|
1514
|
+
<div class="k-actionsheet-content">
|
|
1515
|
+
<ng-container *ngTemplateOutlet="calendarTemplate"></ng-container>
|
|
1516
|
+
</div>
|
|
1517
|
+
</ng-template>
|
|
1506
1518
|
</kendo-actionsheet>
|
|
1507
|
-
|
|
1519
|
+
|
|
1508
1520
|
<ng-template #calendarTemplate>
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
|
|
1521
|
+
<kendo-calendar
|
|
1522
|
+
#calendar
|
|
1523
|
+
[type]="calendarType"
|
|
1524
|
+
[size]="isAdaptive ? 'large' : size"
|
|
1525
|
+
[min]="min"
|
|
1526
|
+
[max]="max"
|
|
1527
|
+
[weekDaysFormat]="weekDaysFormat"
|
|
1528
|
+
[navigation]="navigation"
|
|
1529
|
+
[animateNavigation]="animateCalendarNavigation"
|
|
1530
|
+
[activeView]="activeView"
|
|
1531
|
+
[bottomView]="bottomView"
|
|
1532
|
+
[showOtherMonthDays]="showOtherMonthDays"
|
|
1533
|
+
[topView]="topView"
|
|
1534
|
+
[weekNumber]="weekNumber"
|
|
1535
|
+
[cellTemplate]="cellTemplate"
|
|
1536
|
+
[monthCellTemplate]="monthCellTemplate"
|
|
1537
|
+
[yearCellTemplate]="yearCellTemplate"
|
|
1538
|
+
[decadeCellTemplate]="decadeCellTemplate"
|
|
1539
|
+
[centuryCellTemplate]="centuryCellTemplate"
|
|
1540
|
+
[weekNumberTemplate]="weekNumberTemplate"
|
|
1541
|
+
[headerTitleTemplate]="headerTitleTemplate"
|
|
1542
|
+
[headerTemplate]="headerTemplate"
|
|
1543
|
+
[footerTemplate]="footerTemplate"
|
|
1544
|
+
[footer]="footer"
|
|
1545
|
+
[navigationItemTemplate]="navigationItemTemplate"
|
|
1546
|
+
[focusedDate]="focusedDate"
|
|
1547
|
+
[value]="value"
|
|
1548
|
+
(closePopup)="show = false;"
|
|
1549
|
+
(valueChange)="handleChange(mergeTime($event))"
|
|
1538
1550
|
[kendoEventsOutsideAngular]="{
|
|
1539
1551
|
keydown: handleKeydown
|
|
1540
1552
|
}"
|
|
1541
|
-
|
|
1542
|
-
|
|
1553
|
+
[scope]="this"
|
|
1554
|
+
[disabledDates]="disabledDates"
|
|
1543
1555
|
>
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1556
|
+
<kendo-calendar-messages
|
|
1557
|
+
[today]="localization.get('today')"
|
|
1558
|
+
[prevButtonTitle]="localization.get('prevButtonTitle')"
|
|
1559
|
+
[nextButtonTitle]="localization.get('nextButtonTitle')"
|
|
1560
|
+
[parentViewButtonTitle]="localization.get('parentViewButtonTitle')"
|
|
1561
|
+
>
|
|
1562
|
+
</kendo-calendar-messages>
|
|
1563
|
+
</kendo-calendar>
|
|
1552
1564
|
</ng-template>
|
|
1553
|
-
|
|
1565
|
+
`,
|
|
1554
1566
|
standalone: true,
|
|
1555
|
-
imports: [DatePickerLocalizedMessagesDirective, DateInputComponent, DateInputCustomMessagesComponent, EventsOutsideAngularDirective, IconWrapperComponent, NgTemplateOutlet,
|
|
1567
|
+
imports: [DatePickerLocalizedMessagesDirective, DateInputComponent, DateInputCustomMessagesComponent, EventsOutsideAngularDirective, IconWrapperComponent, NgTemplateOutlet, ResizeSensorComponent, ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, CalendarComponent, CalendarCustomMessagesComponent]
|
|
1556
1568
|
}]
|
|
1557
1569
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i3.PickerService }, { type: i4.DisabledDatesService }, { type: i5.AdaptiveService }], propDecorators: { container: [{
|
|
1558
1570
|
type: ViewChild,
|