@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
|
@@ -6,7 +6,7 @@ import { Component, ChangeDetectorRef, ChangeDetectionStrategy, ElementRef, Even
|
|
|
6
6
|
import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
|
|
7
7
|
import { IntlService } from '@progress/kendo-angular-intl';
|
|
8
8
|
import { cloneDate, getDate } from '@progress/kendo-date-math';
|
|
9
|
-
import { Keys, EventsOutsideAngularDirective,
|
|
9
|
+
import { Keys, EventsOutsideAngularDirective, normalizeKeys } from '@progress/kendo-angular-common';
|
|
10
10
|
import { MIDNIGHT_DATE, MIN_TIME, MAX_TIME } from '../defaults';
|
|
11
11
|
import { TimeListComponent } from './timelist.component';
|
|
12
12
|
import { TimePickerDOMService } from './services/dom.service';
|
|
@@ -15,7 +15,6 @@ import { generateGetters, generateSnappers, snapTime, valueMerger } from './util
|
|
|
15
15
|
import { PickerService } from '../common/picker.service';
|
|
16
16
|
import { closest } from '../common/dom-queries';
|
|
17
17
|
import { currentFocusTarget, isPresent } from '../common/utils';
|
|
18
|
-
import { NgIf, NgFor } from '@angular/common';
|
|
19
18
|
import { TimeSelectorLocalizedMessagesDirective } from './localization/timeselector-localized-messages.directive';
|
|
20
19
|
import * as i0 from "@angular/core";
|
|
21
20
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
@@ -378,7 +377,7 @@ export class TimeSelectorComponent {
|
|
|
378
377
|
}
|
|
379
378
|
handleKeydown(args) {
|
|
380
379
|
const { altKey } = args;
|
|
381
|
-
const code =
|
|
380
|
+
const code = normalizeKeys(args);
|
|
382
381
|
// reserve the alt + arrow key commands for the picker
|
|
383
382
|
const arrowKeyPressed = [Keys.ArrowLeft, Keys.ArrowRight].indexOf(code) !== -1;
|
|
384
383
|
if (isPresent(this.pickerService) && arrowKeyPressed && altKey) {
|
|
@@ -413,7 +412,7 @@ export class TimeSelectorComponent {
|
|
|
413
412
|
return listIdx;
|
|
414
413
|
}
|
|
415
414
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimeSelectorComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i2.IntlService }, { token: i3.TimePickerDOMService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i4.PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
416
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
415
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimeSelectorComponent, isStandalone: true, selector: "kendo-timeselector", inputs: { format: "format", min: "min", max: "max", cancelButton: "cancelButton", setButton: "setButton", nowButton: "nowButton", disabled: "disabled", isAdaptiveEnabled: "isAdaptiveEnabled", isDateTimePicker: "isDateTimePicker", steps: "steps", value: "value" }, outputs: { valueChange: "valueChange", valueReject: "valueReject", tabOutLastPart: "tabOutLastPart", tabOutFirstPart: "tabOutFirstPart", tabOutNow: "tabOutNow" }, host: { properties: { "class.k-disabled": "this.disabledClass" } }, providers: [
|
|
417
416
|
LocalizationService,
|
|
418
417
|
{
|
|
419
418
|
provide: L10N_PREFIX,
|
|
@@ -421,84 +420,89 @@ export class TimeSelectorComponent {
|
|
|
421
420
|
}
|
|
422
421
|
], viewQueries: [{ propertyName: "accept", first: true, predicate: ["accept"], descendants: true }, { propertyName: "cancel", first: true, predicate: ["cancel"], descendants: true }, { propertyName: "now", first: true, predicate: ["now"], descendants: true }, { propertyName: "timeLists", predicate: TimeListComponent, descendants: true }, { propertyName: "timeListWrappers", predicate: ["listWrapper"], descendants: true }], exportAs: ["kendo-timeselector"], usesOnChanges: true, ngImport: i0, template: `
|
|
423
422
|
<ng-container kendoTimeSelectorLocalizedMessages
|
|
424
|
-
|
|
425
|
-
|
|
423
|
+
i18n-accept="kendo.timeselector.accept|The Accept button text in the timeselector component"
|
|
424
|
+
accept="Set"
|
|
426
425
|
|
|
427
|
-
|
|
428
|
-
|
|
426
|
+
i18n-acceptLabel="kendo.timeselector.acceptLabel|The label for the Accept button in the timeselector component"
|
|
427
|
+
acceptLabel="Set time"
|
|
429
428
|
|
|
430
|
-
|
|
431
|
-
|
|
429
|
+
i18n-cancel="kendo.timeselector.cancel|The Cancel button text in the timeselector component"
|
|
430
|
+
cancel="Cancel"
|
|
432
431
|
|
|
433
|
-
|
|
434
|
-
|
|
432
|
+
i18n-cancelLabel="kendo.timeselector.cancelLabel|The label for the Cancel button in the timeselector component"
|
|
433
|
+
cancelLabel="Cancel changes"
|
|
435
434
|
|
|
436
|
-
|
|
437
|
-
|
|
435
|
+
i18n-now="kendo.timeselector.now|The Now button text in the timeselector component"
|
|
436
|
+
now="Now"
|
|
438
437
|
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
438
|
+
i18n-nowLabel="kendo.timeselector.nowLabel|The label for the Now button in the timeselector component"
|
|
439
|
+
nowLabel="Select now"
|
|
440
|
+
>
|
|
442
441
|
</ng-container>
|
|
443
442
|
<div class="k-time-header">
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
443
|
+
<span class="k-title k-timeselector-title">
|
|
444
|
+
{{ intl.formatDate(current, format) }}
|
|
445
|
+
</span>
|
|
446
|
+
@if (showNowButton) {
|
|
447
447
|
<button
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
[attr.aria-label]="localization.get('nowLabel')"
|
|
448
|
+
#now
|
|
449
|
+
type="button"
|
|
450
|
+
class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary k-time-now"
|
|
451
|
+
[attr.title]="localization.get('nowLabel')"
|
|
452
|
+
[attr.aria-label]="localization.get('nowLabel')"
|
|
454
453
|
[kendoEventsOutsideAngular]="{
|
|
455
454
|
click: handleNow,
|
|
456
455
|
focus: handleFocus,
|
|
457
456
|
blur: handleBlur,
|
|
458
457
|
keydown: handleTabOut
|
|
459
458
|
}"
|
|
460
|
-
|
|
461
|
-
|
|
459
|
+
[scope]="this"
|
|
460
|
+
[disabled]="disabled"
|
|
462
461
|
>{{localization.get('now')}}</button>
|
|
462
|
+
}
|
|
463
463
|
</div>
|
|
464
464
|
<div class="k-time-list-container">
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
465
|
+
<span class="k-time-highlight"></span>
|
|
466
|
+
@for (part of dateFormatParts; track $index; let idx = $index) {
|
|
467
|
+
@if (part.type !== 'literal') {
|
|
468
|
+
<div
|
|
469
|
+
#listWrapper
|
|
470
|
+
class="k-time-list-wrapper"
|
|
471
|
+
role="presentation" tabindex="-1"
|
|
472
472
|
>
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
473
|
+
<span class="k-title k-timeselector-title">{{intl.dateFieldName(part)}}</span>
|
|
474
|
+
<kendo-timelist
|
|
475
|
+
[isLast]="idx === dateFormatParts.length - 1"
|
|
476
|
+
[isFirst]="idx === 0"
|
|
477
|
+
[min]="min"
|
|
478
|
+
[max]="max"
|
|
479
|
+
[part]="part"
|
|
480
|
+
[step]="partStep(part)"
|
|
481
|
+
[disabled]="disabled"
|
|
482
|
+
[(value)]="current"
|
|
483
|
+
(tabOutLastPart)="tabOutLastPart.emit()"
|
|
484
|
+
(tabOutFirstPart)="tabOutFirstPart.emit()"
|
|
485
485
|
[kendoEventsOutsideAngular]="{
|
|
486
486
|
focus: handleListFocus,
|
|
487
487
|
blur: handleBlur
|
|
488
488
|
}"
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
489
|
+
[scope]="this"
|
|
490
|
+
[attr.data-timelist-index]="idx"
|
|
491
|
+
></kendo-timelist>
|
|
492
|
+
</div>
|
|
493
|
+
}
|
|
494
|
+
@if (part.type === 'literal') {
|
|
495
|
+
<div class="k-time-separator">
|
|
496
|
+
{{part.pattern}}
|
|
497
|
+
</div>
|
|
498
|
+
}
|
|
499
|
+
}
|
|
497
500
|
</div>
|
|
498
|
-
|
|
499
|
-
|
|
501
|
+
@if (setButton || cancelButton) {
|
|
502
|
+
<div class="k-time-footer k-actions k-actions-stretched k-actions-horizontal">
|
|
503
|
+
@if (setButton) {
|
|
504
|
+
<button
|
|
500
505
|
#accept
|
|
501
|
-
*ngIf="setButton"
|
|
502
506
|
type="button"
|
|
503
507
|
class="k-button k-time-accept k-button-md k-rounded-md k-button-solid k-button-solid-primary"
|
|
504
508
|
[attr.title]="localization.get('acceptLabel')"
|
|
@@ -511,10 +515,11 @@ export class TimeSelectorComponent {
|
|
|
511
515
|
}"
|
|
512
516
|
[scope]="this"
|
|
513
517
|
[disabled]="disabled"
|
|
514
|
-
|
|
515
|
-
|
|
518
|
+
>{{localization.get('accept')}}</button>
|
|
519
|
+
}
|
|
520
|
+
@if (cancelButton) {
|
|
521
|
+
<button
|
|
516
522
|
#cancel
|
|
517
|
-
*ngIf="cancelButton"
|
|
518
523
|
class="k-button k-time-cancel k-button-md k-rounded-md k-button-solid k-button-solid-base"
|
|
519
524
|
type="button"
|
|
520
525
|
[attr.title]="localization.get('cancelLabel')"
|
|
@@ -527,9 +532,11 @@ export class TimeSelectorComponent {
|
|
|
527
532
|
}"
|
|
528
533
|
[scope]="this"
|
|
529
534
|
[disabled]="disabled"
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
535
|
+
>{{localization.get('cancel')}}</button>
|
|
536
|
+
}
|
|
537
|
+
</div>
|
|
538
|
+
}
|
|
539
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: TimeListComponent, selector: "kendo-timelist", inputs: ["min", "max", "part", "step", "disabled", "value", "isLast", "isFirst"], outputs: ["valueChange", "tabOutLastPart", "tabOutFirstPart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
533
540
|
}
|
|
534
541
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimeSelectorComponent, decorators: [{
|
|
535
542
|
type: Component,
|
|
@@ -546,84 +553,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
546
553
|
selector: 'kendo-timeselector',
|
|
547
554
|
template: `
|
|
548
555
|
<ng-container kendoTimeSelectorLocalizedMessages
|
|
549
|
-
|
|
550
|
-
|
|
556
|
+
i18n-accept="kendo.timeselector.accept|The Accept button text in the timeselector component"
|
|
557
|
+
accept="Set"
|
|
551
558
|
|
|
552
|
-
|
|
553
|
-
|
|
559
|
+
i18n-acceptLabel="kendo.timeselector.acceptLabel|The label for the Accept button in the timeselector component"
|
|
560
|
+
acceptLabel="Set time"
|
|
554
561
|
|
|
555
|
-
|
|
556
|
-
|
|
562
|
+
i18n-cancel="kendo.timeselector.cancel|The Cancel button text in the timeselector component"
|
|
563
|
+
cancel="Cancel"
|
|
557
564
|
|
|
558
|
-
|
|
559
|
-
|
|
565
|
+
i18n-cancelLabel="kendo.timeselector.cancelLabel|The label for the Cancel button in the timeselector component"
|
|
566
|
+
cancelLabel="Cancel changes"
|
|
560
567
|
|
|
561
|
-
|
|
562
|
-
|
|
568
|
+
i18n-now="kendo.timeselector.now|The Now button text in the timeselector component"
|
|
569
|
+
now="Now"
|
|
563
570
|
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
571
|
+
i18n-nowLabel="kendo.timeselector.nowLabel|The label for the Now button in the timeselector component"
|
|
572
|
+
nowLabel="Select now"
|
|
573
|
+
>
|
|
567
574
|
</ng-container>
|
|
568
575
|
<div class="k-time-header">
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
576
|
+
<span class="k-title k-timeselector-title">
|
|
577
|
+
{{ intl.formatDate(current, format) }}
|
|
578
|
+
</span>
|
|
579
|
+
@if (showNowButton) {
|
|
572
580
|
<button
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
[attr.aria-label]="localization.get('nowLabel')"
|
|
581
|
+
#now
|
|
582
|
+
type="button"
|
|
583
|
+
class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary k-time-now"
|
|
584
|
+
[attr.title]="localization.get('nowLabel')"
|
|
585
|
+
[attr.aria-label]="localization.get('nowLabel')"
|
|
579
586
|
[kendoEventsOutsideAngular]="{
|
|
580
587
|
click: handleNow,
|
|
581
588
|
focus: handleFocus,
|
|
582
589
|
blur: handleBlur,
|
|
583
590
|
keydown: handleTabOut
|
|
584
591
|
}"
|
|
585
|
-
|
|
586
|
-
|
|
592
|
+
[scope]="this"
|
|
593
|
+
[disabled]="disabled"
|
|
587
594
|
>{{localization.get('now')}}</button>
|
|
595
|
+
}
|
|
588
596
|
</div>
|
|
589
597
|
<div class="k-time-list-container">
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
598
|
+
<span class="k-time-highlight"></span>
|
|
599
|
+
@for (part of dateFormatParts; track $index; let idx = $index) {
|
|
600
|
+
@if (part.type !== 'literal') {
|
|
601
|
+
<div
|
|
602
|
+
#listWrapper
|
|
603
|
+
class="k-time-list-wrapper"
|
|
604
|
+
role="presentation" tabindex="-1"
|
|
597
605
|
>
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
606
|
+
<span class="k-title k-timeselector-title">{{intl.dateFieldName(part)}}</span>
|
|
607
|
+
<kendo-timelist
|
|
608
|
+
[isLast]="idx === dateFormatParts.length - 1"
|
|
609
|
+
[isFirst]="idx === 0"
|
|
610
|
+
[min]="min"
|
|
611
|
+
[max]="max"
|
|
612
|
+
[part]="part"
|
|
613
|
+
[step]="partStep(part)"
|
|
614
|
+
[disabled]="disabled"
|
|
615
|
+
[(value)]="current"
|
|
616
|
+
(tabOutLastPart)="tabOutLastPart.emit()"
|
|
617
|
+
(tabOutFirstPart)="tabOutFirstPart.emit()"
|
|
610
618
|
[kendoEventsOutsideAngular]="{
|
|
611
619
|
focus: handleListFocus,
|
|
612
620
|
blur: handleBlur
|
|
613
621
|
}"
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
+
[scope]="this"
|
|
623
|
+
[attr.data-timelist-index]="idx"
|
|
624
|
+
></kendo-timelist>
|
|
625
|
+
</div>
|
|
626
|
+
}
|
|
627
|
+
@if (part.type === 'literal') {
|
|
628
|
+
<div class="k-time-separator">
|
|
629
|
+
{{part.pattern}}
|
|
630
|
+
</div>
|
|
631
|
+
}
|
|
632
|
+
}
|
|
622
633
|
</div>
|
|
623
|
-
|
|
624
|
-
|
|
634
|
+
@if (setButton || cancelButton) {
|
|
635
|
+
<div class="k-time-footer k-actions k-actions-stretched k-actions-horizontal">
|
|
636
|
+
@if (setButton) {
|
|
637
|
+
<button
|
|
625
638
|
#accept
|
|
626
|
-
*ngIf="setButton"
|
|
627
639
|
type="button"
|
|
628
640
|
class="k-button k-time-accept k-button-md k-rounded-md k-button-solid k-button-solid-primary"
|
|
629
641
|
[attr.title]="localization.get('acceptLabel')"
|
|
@@ -636,10 +648,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
636
648
|
}"
|
|
637
649
|
[scope]="this"
|
|
638
650
|
[disabled]="disabled"
|
|
639
|
-
|
|
640
|
-
|
|
651
|
+
>{{localization.get('accept')}}</button>
|
|
652
|
+
}
|
|
653
|
+
@if (cancelButton) {
|
|
654
|
+
<button
|
|
641
655
|
#cancel
|
|
642
|
-
*ngIf="cancelButton"
|
|
643
656
|
class="k-button k-time-cancel k-button-md k-rounded-md k-button-solid k-button-solid-base"
|
|
644
657
|
type="button"
|
|
645
658
|
[attr.title]="localization.get('cancelLabel')"
|
|
@@ -652,11 +665,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
652
665
|
}"
|
|
653
666
|
[scope]="this"
|
|
654
667
|
[disabled]="disabled"
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
668
|
+
>{{localization.get('cancel')}}</button>
|
|
669
|
+
}
|
|
670
|
+
</div>
|
|
671
|
+
}
|
|
672
|
+
`,
|
|
658
673
|
standalone: true,
|
|
659
|
-
imports: [TimeSelectorLocalizedMessagesDirective,
|
|
674
|
+
imports: [TimeSelectorLocalizedMessagesDirective, EventsOutsideAngularDirective, TimeListComponent]
|
|
660
675
|
}]
|
|
661
676
|
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i2.IntlService }, { type: i3.TimePickerDOMService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i4.PickerService, decorators: [{
|
|
662
677
|
type: Optional
|