@progress/kendo-angular-dateinputs 21.1.1-develop.2 → 21.2.0-develop.1
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
|
@@ -15,7 +15,7 @@ import { isDocumentAvailable } from '@progress/kendo-angular-common';
|
|
|
15
15
|
import { attributeNames, isPresent } from '../common/utils';
|
|
16
16
|
import { KForOf } from './for.directive';
|
|
17
17
|
import { ViewComponent } from './view.component';
|
|
18
|
-
import { NgClass,
|
|
18
|
+
import { NgClass, NgTemplateOutlet } from '@angular/common';
|
|
19
19
|
import * as i0 from "@angular/core";
|
|
20
20
|
import * as i1 from "./services/bus-view.service";
|
|
21
21
|
import * as i2 from "@progress/kendo-angular-intl";
|
|
@@ -283,90 +283,98 @@ export class HorizontalViewListComponent {
|
|
|
283
283
|
}
|
|
284
284
|
}
|
|
285
285
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HorizontalViewListComponent, deps: [{ token: i1.BusViewService }, { token: i2.IntlService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
286
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
286
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: HorizontalViewListComponent, isStandalone: true, selector: "kendo-calendar-horizontal", inputs: { showOtherMonthDays: "showOtherMonthDays", cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", allowReverse: "allowReverse", activeRangeEnd: "activeRangeEnd", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectionRange: "selectionRange", selectedDates: "selectedDates", views: "views", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", orientation: "orientation", activeDescendant: "activeDescendant", tabIndex: "tabIndex", disabled: "disabled", id: "id", weekDaysFormat: "weekDaysFormat", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", activeDateChange: "activeDateChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { listeners: { "focus": "handleMultiViewCalendarFocus()", "blur": "handleMultiViewCalendarBlur($event)" }, properties: { "class.k-calendar-view": "this.getComponentClass", "class.k-align-items-start": "this.getComponentClass", "class.k-justify-content-center": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass", "attr.role": "this.role", "attr.tabindex": "this.tabindex" } }, usesOnChanges: true, ngImport: i0, template: `
|
|
287
287
|
<ng-template #tableTemplate let-date="date" let-class="className">
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
288
|
+
<table
|
|
289
|
+
[attr.role]="views >= 2 ? 'none' : 'grid'"
|
|
290
|
+
class="k-calendar-table"
|
|
291
|
+
[ngClass]="class"
|
|
292
|
+
[attr.aria-labelledby]="id"
|
|
293
|
+
[attr.aria-activedescendant]="getActiveDescendant"
|
|
294
|
+
[attr.tabindex]="getTabIndex"
|
|
295
|
+
(focus)="handleClassicCalendarFocus()"
|
|
296
|
+
(blur)="handleClassicCalendarBlur($event)"
|
|
297
297
|
>
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
298
|
+
@if (showViewHeader) {
|
|
299
|
+
<caption class="k-calendar-caption">{{ getCaptionTitle(date) }}</caption>
|
|
300
|
+
}
|
|
301
|
+
@if (isMonthView()) {
|
|
302
|
+
<thead class="k-calendar-thead" role="rowgroup">
|
|
303
|
+
<tr class="k-calendar-tr" role="row">
|
|
304
|
+
@for (name of weekNames; track $index; let i = $index) {
|
|
305
|
+
<th
|
|
306
|
+
class="k-calendar-th"
|
|
307
|
+
scope="col"
|
|
308
|
+
[attr.aria-label]="wideWeekNames[i]"
|
|
309
|
+
role="columnheader"
|
|
310
|
+
>{{name}}</th>
|
|
311
|
+
}
|
|
312
|
+
</tr>
|
|
313
|
+
</thead>
|
|
314
|
+
}
|
|
315
|
+
<tbody
|
|
316
|
+
class="k-calendar-tbody"
|
|
317
|
+
kendoCalendarView
|
|
318
|
+
[allowReverse]="allowReverse"
|
|
319
|
+
[showOtherMonthDays]="showOtherMonthDays"
|
|
320
|
+
role="rowgroup"
|
|
321
|
+
direction="horizontal"
|
|
322
|
+
[activeView]="activeView"
|
|
323
|
+
[isActive]="isActive"
|
|
324
|
+
[min]="min"
|
|
325
|
+
[max]="max"
|
|
326
|
+
[cellUID]="cellUID"
|
|
327
|
+
[focusedDate]="focusedDate"
|
|
328
|
+
[selectedDates]="selectedDates"
|
|
329
|
+
[selectionRange]="selectionRange"
|
|
330
|
+
[activeRangeEnd]="activeRangeEnd"
|
|
331
|
+
[weekNumber]="weekNumber"
|
|
332
|
+
[templateRef]="cellTemplateRef"
|
|
333
|
+
[weekNumberTemplateRef]="weekNumberTemplateRef"
|
|
334
|
+
[viewDate]="date"
|
|
335
|
+
(cellClick)="cellClick.emit($event)"
|
|
336
|
+
(weekNumberCellClick)="weekNumberCellClick.emit($event)"
|
|
337
|
+
(cellEnter)="cellEnter.emit($event)"
|
|
338
|
+
(cellLeave)="cellLeave.emit($event)"
|
|
339
|
+
(focusedCellId)="focusedCellChange.emit($event)"
|
|
340
|
+
>
|
|
341
|
+
</tbody>
|
|
342
|
+
</table>
|
|
337
343
|
</ng-template>
|
|
338
344
|
|
|
339
345
|
<!-- When Next is clicked a placeholder table is rendered before the Main Table -->
|
|
340
|
-
|
|
341
|
-
|
|
346
|
+
@if (nextAnimationDate) {
|
|
347
|
+
<ng-template
|
|
342
348
|
[ngTemplateOutlet]="tableTemplate"
|
|
343
349
|
[ngTemplateOutletContext]="{
|
|
344
350
|
date: nextAnimationDate,
|
|
345
351
|
className: 'k-pointer-events-none'
|
|
346
352
|
}"
|
|
347
|
-
|
|
348
|
-
|
|
353
|
+
>
|
|
354
|
+
</ng-template>
|
|
355
|
+
}
|
|
349
356
|
|
|
350
357
|
<ng-template
|
|
351
|
-
|
|
352
|
-
|
|
358
|
+
*kFor="let date of dates"
|
|
359
|
+
[ngTemplateOutlet]="tableTemplate"
|
|
353
360
|
[ngTemplateOutletContext]="{
|
|
354
361
|
date: date
|
|
355
362
|
}"
|
|
356
|
-
|
|
363
|
+
>
|
|
357
364
|
</ng-template>
|
|
358
365
|
|
|
359
366
|
<!-- When Prev is clicked a placeholder table is rendered after the Main Table -->
|
|
360
|
-
|
|
361
|
-
|
|
367
|
+
@if (prevAnimationDate) {
|
|
368
|
+
<ng-template
|
|
362
369
|
[ngTemplateOutlet]="tableTemplate"
|
|
363
370
|
[ngTemplateOutletContext]="{
|
|
364
371
|
date: prevAnimationDate,
|
|
365
372
|
className: 'k-pointer-events-none'
|
|
366
373
|
}"
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
374
|
+
>
|
|
375
|
+
</ng-template>
|
|
376
|
+
}
|
|
377
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ViewComponent, selector: "[kendoCalendarView]", inputs: ["allowReverse", "showOtherMonthDays", "direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef", "headerTitle"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
370
378
|
}
|
|
371
379
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HorizontalViewListComponent, decorators: [{
|
|
372
380
|
type: Component,
|
|
@@ -375,90 +383,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
375
383
|
selector: 'kendo-calendar-horizontal',
|
|
376
384
|
template: `
|
|
377
385
|
<ng-template #tableTemplate let-date="date" let-class="className">
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
386
|
+
<table
|
|
387
|
+
[attr.role]="views >= 2 ? 'none' : 'grid'"
|
|
388
|
+
class="k-calendar-table"
|
|
389
|
+
[ngClass]="class"
|
|
390
|
+
[attr.aria-labelledby]="id"
|
|
391
|
+
[attr.aria-activedescendant]="getActiveDescendant"
|
|
392
|
+
[attr.tabindex]="getTabIndex"
|
|
393
|
+
(focus)="handleClassicCalendarFocus()"
|
|
394
|
+
(blur)="handleClassicCalendarBlur($event)"
|
|
387
395
|
>
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
396
|
+
@if (showViewHeader) {
|
|
397
|
+
<caption class="k-calendar-caption">{{ getCaptionTitle(date) }}</caption>
|
|
398
|
+
}
|
|
399
|
+
@if (isMonthView()) {
|
|
400
|
+
<thead class="k-calendar-thead" role="rowgroup">
|
|
401
|
+
<tr class="k-calendar-tr" role="row">
|
|
402
|
+
@for (name of weekNames; track $index; let i = $index) {
|
|
403
|
+
<th
|
|
404
|
+
class="k-calendar-th"
|
|
405
|
+
scope="col"
|
|
406
|
+
[attr.aria-label]="wideWeekNames[i]"
|
|
407
|
+
role="columnheader"
|
|
408
|
+
>{{name}}</th>
|
|
409
|
+
}
|
|
410
|
+
</tr>
|
|
411
|
+
</thead>
|
|
412
|
+
}
|
|
413
|
+
<tbody
|
|
414
|
+
class="k-calendar-tbody"
|
|
415
|
+
kendoCalendarView
|
|
416
|
+
[allowReverse]="allowReverse"
|
|
417
|
+
[showOtherMonthDays]="showOtherMonthDays"
|
|
418
|
+
role="rowgroup"
|
|
419
|
+
direction="horizontal"
|
|
420
|
+
[activeView]="activeView"
|
|
421
|
+
[isActive]="isActive"
|
|
422
|
+
[min]="min"
|
|
423
|
+
[max]="max"
|
|
424
|
+
[cellUID]="cellUID"
|
|
425
|
+
[focusedDate]="focusedDate"
|
|
426
|
+
[selectedDates]="selectedDates"
|
|
427
|
+
[selectionRange]="selectionRange"
|
|
428
|
+
[activeRangeEnd]="activeRangeEnd"
|
|
429
|
+
[weekNumber]="weekNumber"
|
|
430
|
+
[templateRef]="cellTemplateRef"
|
|
431
|
+
[weekNumberTemplateRef]="weekNumberTemplateRef"
|
|
432
|
+
[viewDate]="date"
|
|
433
|
+
(cellClick)="cellClick.emit($event)"
|
|
434
|
+
(weekNumberCellClick)="weekNumberCellClick.emit($event)"
|
|
435
|
+
(cellEnter)="cellEnter.emit($event)"
|
|
436
|
+
(cellLeave)="cellLeave.emit($event)"
|
|
437
|
+
(focusedCellId)="focusedCellChange.emit($event)"
|
|
438
|
+
>
|
|
439
|
+
</tbody>
|
|
440
|
+
</table>
|
|
427
441
|
</ng-template>
|
|
428
442
|
|
|
429
443
|
<!-- When Next is clicked a placeholder table is rendered before the Main Table -->
|
|
430
|
-
|
|
431
|
-
|
|
444
|
+
@if (nextAnimationDate) {
|
|
445
|
+
<ng-template
|
|
432
446
|
[ngTemplateOutlet]="tableTemplate"
|
|
433
447
|
[ngTemplateOutletContext]="{
|
|
434
448
|
date: nextAnimationDate,
|
|
435
449
|
className: 'k-pointer-events-none'
|
|
436
450
|
}"
|
|
437
|
-
|
|
438
|
-
|
|
451
|
+
>
|
|
452
|
+
</ng-template>
|
|
453
|
+
}
|
|
439
454
|
|
|
440
455
|
<ng-template
|
|
441
|
-
|
|
442
|
-
|
|
456
|
+
*kFor="let date of dates"
|
|
457
|
+
[ngTemplateOutlet]="tableTemplate"
|
|
443
458
|
[ngTemplateOutletContext]="{
|
|
444
459
|
date: date
|
|
445
460
|
}"
|
|
446
|
-
|
|
461
|
+
>
|
|
447
462
|
</ng-template>
|
|
448
463
|
|
|
449
464
|
<!-- When Prev is clicked a placeholder table is rendered after the Main Table -->
|
|
450
|
-
|
|
451
|
-
|
|
465
|
+
@if (prevAnimationDate) {
|
|
466
|
+
<ng-template
|
|
452
467
|
[ngTemplateOutlet]="tableTemplate"
|
|
453
468
|
[ngTemplateOutletContext]="{
|
|
454
469
|
date: prevAnimationDate,
|
|
455
470
|
className: 'k-pointer-events-none'
|
|
456
471
|
}"
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
472
|
+
>
|
|
473
|
+
</ng-template>
|
|
474
|
+
}
|
|
475
|
+
`,
|
|
460
476
|
standalone: true,
|
|
461
|
-
imports: [NgClass,
|
|
477
|
+
imports: [NgClass, ViewComponent, NgTemplateOutlet, KForOf]
|
|
462
478
|
}]
|
|
463
479
|
}], ctorParameters: () => [{ type: i1.BusViewService }, { type: i2.IntlService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { handleMultiViewCalendarFocus: [{
|
|
464
480
|
type: HostListener,
|