@progress/kendo-angular-dateinputs 7.0.0-next.202204010857 → 7.0.0-next.202204011538
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/bundles/kendo-angular-dateinputs.umd.js +1 -1
- package/calendar/calendar.component.d.ts +3 -0
- package/daterange/date-range-end-input.directive.d.ts +1 -2
- package/daterange/date-range-input.d.ts +1 -3
- package/daterange/date-range-popup.component.d.ts +2 -4
- package/daterange/date-range-start-input.directive.d.ts +1 -2
- package/daterange/date-range.service.d.ts +33 -0
- package/esm2015/calendar/calendar.component.js +3 -0
- package/esm2015/daterange/date-range-end-input.directive.js +4 -5
- package/esm2015/daterange/date-range-input.js +8 -11
- package/esm2015/daterange/date-range-popup.component.js +7 -9
- package/esm2015/daterange/date-range-start-input.directive.js +4 -5
- package/esm2015/daterange/date-range.component.js +2 -3
- package/esm2015/daterange/date-range.service.js +61 -0
- package/esm2015/main.js +0 -1
- package/esm2015/package-metadata.js +1 -1
- package/fesm2015/kendo-angular-dateinputs.js +84 -105
- package/main.d.ts +0 -1
- package/package.json +2 -2
- package/daterange/date-range-popup.service.d.ts +0 -52
- package/esm2015/daterange/date-range-popup.service.js +0 -87
|
@@ -496,6 +496,9 @@ export declare class CalendarComponent implements ControlValueAccessor, OnChange
|
|
|
496
496
|
* @hidden
|
|
497
497
|
*/
|
|
498
498
|
handleFocus(): void;
|
|
499
|
+
/**
|
|
500
|
+
* @hidden
|
|
501
|
+
*/
|
|
499
502
|
handleMultiViewCalendarKeydown(args: any): void;
|
|
500
503
|
private setClasses;
|
|
501
504
|
private verifyChanges;
|
|
@@ -7,7 +7,6 @@ import { DateInputComponent } from '../dateinput/dateinput.component';
|
|
|
7
7
|
import { AutoCorrectOn } from './auto-correct-on.type';
|
|
8
8
|
import { DateRangeInput } from './date-range-input';
|
|
9
9
|
import { DateRangeService } from './date-range.service';
|
|
10
|
-
import { DateRangePopupService } from './date-range-popup.service';
|
|
11
10
|
import { SelectionRange } from '../calendar/models/selection-range.interface';
|
|
12
11
|
import * as i0 from "@angular/core";
|
|
13
12
|
/**
|
|
@@ -51,7 +50,7 @@ export declare class DateRangeEndInputDirective extends DateRangeInput implement
|
|
|
51
50
|
* ```
|
|
52
51
|
*/
|
|
53
52
|
navigateCalendarOnFocus: boolean;
|
|
54
|
-
constructor(rangeService: DateRangeService, dateInput: DateInputComponent,
|
|
53
|
+
constructor(rangeService: DateRangeService, dateInput: DateInputComponent, element: ElementRef, renderer: Renderer2, zone: NgZone);
|
|
55
54
|
ngOnInit(): void;
|
|
56
55
|
ngOnDestroy(): void;
|
|
57
56
|
protected getRange(value: Date, correctOn: AutoCorrectOn): SelectionRange;
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
import { ElementRef, Renderer2, NgZone } from '@angular/core';
|
|
6
6
|
import { DateInputComponent } from '../dateinput/dateinput.component';
|
|
7
7
|
import { DateRangeService } from './date-range.service';
|
|
8
|
-
import { DateRangePopupService } from './date-range-popup.service';
|
|
9
8
|
import { AutoCorrectOn } from './auto-correct-on.type';
|
|
10
9
|
import { SelectionRange } from '../calendar/models/selection-range.interface';
|
|
11
10
|
import { SelectionRangeEnd } from '../calendar/models/selection-range-end.type';
|
|
@@ -15,7 +14,6 @@ import { SelectionRangeEnd } from '../calendar/models/selection-range-end.type';
|
|
|
15
14
|
export declare abstract class DateRangeInput {
|
|
16
15
|
private activeRangeEnd;
|
|
17
16
|
private dateRangeService;
|
|
18
|
-
private dateRangePopupService;
|
|
19
17
|
private input;
|
|
20
18
|
private element;
|
|
21
19
|
private renderer;
|
|
@@ -25,7 +23,7 @@ export declare abstract class DateRangeInput {
|
|
|
25
23
|
private popupSubscriptions;
|
|
26
24
|
private subscriptions;
|
|
27
25
|
private get popupCalendarActivated();
|
|
28
|
-
constructor(activeRangeEnd: SelectionRangeEnd, dateRangeService: DateRangeService,
|
|
26
|
+
constructor(activeRangeEnd: SelectionRangeEnd, dateRangeService: DateRangeService, input: DateInputComponent, element: ElementRef, renderer: Renderer2, zone: NgZone);
|
|
29
27
|
protected init(): void;
|
|
30
28
|
protected destroy(): void;
|
|
31
29
|
protected abstract getRange(value: Date, correctOn?: AutoCorrectOn): SelectionRange;
|
|
@@ -6,7 +6,6 @@ import { ChangeDetectorRef, ElementRef, EventEmitter, TemplateRef, NgZone, OnIni
|
|
|
6
6
|
import { Align, Collision, Margin, PopupAnimation, PopupService, PopupRef } from '@progress/kendo-angular-popup';
|
|
7
7
|
import { DateRangePopupTemplateDirective } from './date-range-popup-template.directive';
|
|
8
8
|
import { DateRangeService } from './date-range.service';
|
|
9
|
-
import { DateRangePopupService } from './date-range-popup.service';
|
|
10
9
|
import { MultiViewCalendarComponent } from '../calendar/multiview-calendar.component';
|
|
11
10
|
import { PreventableEvent } from '../preventable-event';
|
|
12
11
|
import * as i0 from "@angular/core";
|
|
@@ -32,7 +31,6 @@ import * as i0 from "@angular/core";
|
|
|
32
31
|
export declare class DateRangePopupComponent implements OnInit, OnDestroy {
|
|
33
32
|
private popupService;
|
|
34
33
|
private dateRangeService;
|
|
35
|
-
private dateRangePopupService;
|
|
36
34
|
private ref;
|
|
37
35
|
private zone;
|
|
38
36
|
private rtl;
|
|
@@ -141,7 +139,7 @@ export declare class DateRangePopupComponent implements OnInit, OnDestroy {
|
|
|
141
139
|
private resolvedPromise;
|
|
142
140
|
private _calendar;
|
|
143
141
|
private _show;
|
|
144
|
-
constructor(popupService: PopupService, dateRangeService: DateRangeService,
|
|
142
|
+
constructor(popupService: PopupService, dateRangeService: DateRangeService, ref: ChangeDetectorRef, zone: NgZone, rtl: boolean);
|
|
145
143
|
ngOnInit(): void;
|
|
146
144
|
ngAfterViewInit(): void;
|
|
147
145
|
ngOnDestroy(): void;
|
|
@@ -181,6 +179,6 @@ export declare class DateRangePopupComponent implements OnInit, OnDestroy {
|
|
|
181
179
|
private get _appendTo();
|
|
182
180
|
private _toggle;
|
|
183
181
|
private destroyPopup;
|
|
184
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePopupComponent, [null, null, null, null,
|
|
182
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePopupComponent, [null, null, null, null, { optional: true; }]>;
|
|
185
183
|
static ɵcmp: i0.ɵɵComponentDeclaration<DateRangePopupComponent, "kendo-daterange-popup", ["kendo-daterange-popup"], { "animate": "animate"; "anchor": "anchor"; "anchorAlign": "anchorAlign"; "appendTo": "appendTo"; "collision": "collision"; "popupAlign": "popupAlign"; "margin": "margin"; }, { "open": "open"; "close": "close"; "onBlur": "blur"; "onFocus": "focus"; "cancel": "cancel"; }, ["contentTemplate", "contentCalendar"], never>;
|
|
186
184
|
}
|
|
@@ -7,7 +7,6 @@ import { DateInputComponent } from '../dateinput/dateinput.component';
|
|
|
7
7
|
import { AutoCorrectOn } from './auto-correct-on.type';
|
|
8
8
|
import { DateRangeInput } from './date-range-input';
|
|
9
9
|
import { DateRangeService } from './date-range.service';
|
|
10
|
-
import { DateRangePopupService } from './date-range-popup.service';
|
|
11
10
|
import { SelectionRange } from '../calendar/models/selection-range.interface';
|
|
12
11
|
import * as i0 from "@angular/core";
|
|
13
12
|
/**
|
|
@@ -52,7 +51,7 @@ export declare class DateRangeStartInputDirective extends DateRangeInput impleme
|
|
|
52
51
|
* ```
|
|
53
52
|
*/
|
|
54
53
|
navigateCalendarOnFocus: boolean;
|
|
55
|
-
constructor(rangeService: DateRangeService, dateInput: DateInputComponent,
|
|
54
|
+
constructor(rangeService: DateRangeService, dateInput: DateInputComponent, element: ElementRef, renderer: Renderer2, zone: NgZone);
|
|
56
55
|
ngOnInit(): void;
|
|
57
56
|
ngOnDestroy(): void;
|
|
58
57
|
protected getRange(value: Date, correctOn: AutoCorrectOn): SelectionRange;
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { BehaviorSubject } from 'rxjs';
|
|
6
6
|
import { DateInputComponent } from '../dateinput/dateinput.component';
|
|
7
|
+
import type { DateRangePopupComponent } from './date-range-popup.component';
|
|
7
8
|
import { SelectionRangeEnd } from '../calendar/models/selection-range-end.type';
|
|
8
9
|
import { SelectionRange } from '../calendar/models/selection-range.interface';
|
|
9
10
|
import * as i0 from "@angular/core";
|
|
@@ -30,6 +31,10 @@ export declare class DateRangeService {
|
|
|
30
31
|
* For example, when a new start `DateInput` is attached or the old one is detached.
|
|
31
32
|
*/
|
|
32
33
|
startInput$: BehaviorSubject<DateInputComponent>;
|
|
34
|
+
/**
|
|
35
|
+
* An Observable instance that notifies when the `DateRangePopup` component is changed.
|
|
36
|
+
*/
|
|
37
|
+
dateRangePopup$: BehaviorSubject<DateRangePopupComponent>;
|
|
33
38
|
/**
|
|
34
39
|
* An Observable instance that notifies when the state of the selection range is changed.
|
|
35
40
|
*/
|
|
@@ -56,11 +61,35 @@ export declare class DateRangeService {
|
|
|
56
61
|
* Gets the current `selectionRange` value.
|
|
57
62
|
*/
|
|
58
63
|
get selectionRange(): SelectionRange;
|
|
64
|
+
/**
|
|
65
|
+
* Activates the registered `DateRangePopup` component.
|
|
66
|
+
* The method opens the popup and focuses the calendar.
|
|
67
|
+
*/
|
|
68
|
+
activatePopup(): void;
|
|
69
|
+
/**
|
|
70
|
+
* Deactivates the registered `DateRangePopup` component.
|
|
71
|
+
* The method closes the popup.
|
|
72
|
+
*/
|
|
73
|
+
deactivatePopup(): void;
|
|
74
|
+
/**
|
|
75
|
+
* @hidden
|
|
76
|
+
*
|
|
77
|
+
* Deactivates the registered `DateRangePopup` component and fires the `cancel` event.
|
|
78
|
+
* The method closes the popup.
|
|
79
|
+
*/
|
|
80
|
+
cancelPopup(): void;
|
|
59
81
|
/**
|
|
60
82
|
* Completes all observables to mitigate possible memory leaks.
|
|
61
83
|
* Calls the method when a component that uses it is destroyed.
|
|
62
84
|
*/
|
|
63
85
|
destroy(): void;
|
|
86
|
+
/**
|
|
87
|
+
* Returns `true` when an active component that is placed inside the `DateRangeComponent` is detected.
|
|
88
|
+
* For example, the opened popup or the focused DateInput.
|
|
89
|
+
*
|
|
90
|
+
* @returns `true` if an active component is present.
|
|
91
|
+
*/
|
|
92
|
+
hasActiveComponent(): boolean;
|
|
64
93
|
/**
|
|
65
94
|
* Registers a new start `DateInput` component. Notifies all `startInput$` listeners.
|
|
66
95
|
*/
|
|
@@ -69,6 +98,10 @@ export declare class DateRangeService {
|
|
|
69
98
|
* Registers a new end `DateInput` component. Notifies all `endInput$` listeners.
|
|
70
99
|
*/
|
|
71
100
|
registerEndInput(endInput: DateInputComponent): void;
|
|
101
|
+
/**
|
|
102
|
+
* Registers a new `DateRangePopup` component. Notifies all `dateRangePopup$` listeners.
|
|
103
|
+
*/
|
|
104
|
+
registerPopup(dateRangePopup: DateRangePopupComponent): void;
|
|
72
105
|
/**
|
|
73
106
|
* Updates the `activeRangeEnd` value. Notifies all `activeRangeEnd$` listeners.
|
|
74
107
|
*/
|
|
@@ -753,6 +753,9 @@ export class CalendarComponent {
|
|
|
753
753
|
}
|
|
754
754
|
this.emitFocus();
|
|
755
755
|
}
|
|
756
|
+
/**
|
|
757
|
+
* @hidden
|
|
758
|
+
*/
|
|
756
759
|
handleMultiViewCalendarKeydown(args) {
|
|
757
760
|
// Prevent form from submitting on enter if used in datepicker (classic view)
|
|
758
761
|
if (isPresent(this.pickerService) && args.keyCode === Keys.Enter) {
|
|
@@ -11,15 +11,14 @@ import { isPresent } from '../common/utils';
|
|
|
11
11
|
import * as i0 from "@angular/core";
|
|
12
12
|
import * as i1 from "./date-range.service";
|
|
13
13
|
import * as i2 from "../dateinput/dateinput.component";
|
|
14
|
-
import * as i3 from "./date-range-popup.service";
|
|
15
14
|
/**
|
|
16
15
|
* A directive which manages the end range selection.
|
|
17
16
|
*
|
|
18
17
|
* > You can use the DateRangeEndInputDirective only with a DateInput component.
|
|
19
18
|
*/
|
|
20
19
|
export class DateRangeEndInputDirective extends DateRangeInput {
|
|
21
|
-
constructor(rangeService, dateInput,
|
|
22
|
-
super('end', rangeService,
|
|
20
|
+
constructor(rangeService, dateInput, element, renderer, zone) {
|
|
21
|
+
super('end', rangeService, dateInput, element, renderer, zone);
|
|
23
22
|
this.rangeService = rangeService;
|
|
24
23
|
this.dateInput = dateInput;
|
|
25
24
|
/**
|
|
@@ -74,14 +73,14 @@ export class DateRangeEndInputDirective extends DateRangeInput {
|
|
|
74
73
|
this.dateInput.notify();
|
|
75
74
|
}
|
|
76
75
|
}
|
|
77
|
-
DateRangeEndInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeEndInputDirective, deps: [{ token: i1.DateRangeService }, { token: i2.DateInputComponent }, { token:
|
|
76
|
+
DateRangeEndInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeEndInputDirective, deps: [{ token: i1.DateRangeService }, { token: i2.DateInputComponent }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
|
78
77
|
DateRangeEndInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeEndInputDirective, selector: "[kendoDateRangeEndInput]", inputs: { autoCorrectOn: "autoCorrectOn", navigateCalendarOnFocus: "navigateCalendarOnFocus" }, usesInheritance: true, ngImport: i0 });
|
|
79
78
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeEndInputDirective, decorators: [{
|
|
80
79
|
type: Directive,
|
|
81
80
|
args: [{
|
|
82
81
|
selector: '[kendoDateRangeEndInput]'
|
|
83
82
|
}]
|
|
84
|
-
}], ctorParameters: function () { return [{ type: i1.DateRangeService }, { type: i2.DateInputComponent }, { type:
|
|
83
|
+
}], ctorParameters: function () { return [{ type: i1.DateRangeService }, { type: i2.DateInputComponent }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { autoCorrectOn: [{
|
|
85
84
|
type: Input
|
|
86
85
|
}], navigateCalendarOnFocus: [{
|
|
87
86
|
type: Input
|
|
@@ -11,10 +11,9 @@ import { isPresent } from '../common/utils';
|
|
|
11
11
|
* @hidden
|
|
12
12
|
*/
|
|
13
13
|
export class DateRangeInput {
|
|
14
|
-
constructor(activeRangeEnd, dateRangeService,
|
|
14
|
+
constructor(activeRangeEnd, dateRangeService, input, element, renderer, zone) {
|
|
15
15
|
this.activeRangeEnd = activeRangeEnd;
|
|
16
16
|
this.dateRangeService = dateRangeService;
|
|
17
|
-
this.dateRangePopupService = dateRangePopupService;
|
|
18
17
|
this.input = input;
|
|
19
18
|
this.element = element;
|
|
20
19
|
this.renderer = renderer;
|
|
@@ -27,7 +26,7 @@ export class DateRangeInput {
|
|
|
27
26
|
return this.dateRangeService.activeRangeEnd === this.activeRangeEnd;
|
|
28
27
|
}
|
|
29
28
|
get popupCalendarActivated() {
|
|
30
|
-
const popup = this.
|
|
29
|
+
const popup = this.dateRangeService.dateRangePopup$.value;
|
|
31
30
|
return isPresent(popup) && isPresent(popup.calendar);
|
|
32
31
|
}
|
|
33
32
|
init() {
|
|
@@ -44,7 +43,7 @@ export class DateRangeInput {
|
|
|
44
43
|
}
|
|
45
44
|
this.toggleActiveClass(this.isActiveEnd);
|
|
46
45
|
}),
|
|
47
|
-
this.
|
|
46
|
+
this.dateRangeService.dateRangePopup$.subscribe(popup => this.initPopup(popup)),
|
|
48
47
|
this.dateRangeService.range$.subscribe(range => this.updateInputValue(range)),
|
|
49
48
|
fromEvent(this.element.nativeElement, 'click').subscribe(() => this.activate()),
|
|
50
49
|
fromEvent(this.element.nativeElement, 'keydown').subscribe((event) => this.togglePopup(event || {}))
|
|
@@ -74,19 +73,17 @@ export class DateRangeInput {
|
|
|
74
73
|
}
|
|
75
74
|
activate() {
|
|
76
75
|
this.dateRangeService.setActiveRangeEnd(this.activeRangeEnd);
|
|
77
|
-
this.
|
|
76
|
+
this.dateRangeService.activatePopup();
|
|
78
77
|
}
|
|
79
78
|
deactivate() {
|
|
80
79
|
this.zone.runOutsideAngular(() => {
|
|
81
80
|
setTimeout(() => {
|
|
82
81
|
this.updateRange(this.input.value, 'blur');
|
|
83
|
-
|
|
84
|
-
const endInputValue = this.dateRangeService.endInput$.value;
|
|
85
|
-
if (this.dateRangePopupService.hasActiveComponent(startInputValue, endInputValue)) {
|
|
82
|
+
if (this.dateRangeService.hasActiveComponent()) {
|
|
86
83
|
return;
|
|
87
84
|
}
|
|
88
85
|
this.toggleActiveClass(false);
|
|
89
|
-
this.zone.run(() => this.
|
|
86
|
+
this.zone.run(() => this.dateRangeService.deactivatePopup());
|
|
90
87
|
});
|
|
91
88
|
});
|
|
92
89
|
}
|
|
@@ -99,10 +96,10 @@ export class DateRangeInput {
|
|
|
99
96
|
}
|
|
100
97
|
togglePopup({ altKey, keyCode }) {
|
|
101
98
|
if (keyCode === Keys.Escape) {
|
|
102
|
-
this.
|
|
99
|
+
this.dateRangeService.cancelPopup();
|
|
103
100
|
}
|
|
104
101
|
else if (altKey && keyCode === Keys.ArrowDown) {
|
|
105
|
-
this.
|
|
102
|
+
this.dateRangeService.activatePopup();
|
|
106
103
|
}
|
|
107
104
|
}
|
|
108
105
|
focusActiveDate() {
|
|
@@ -15,9 +15,8 @@ import { isPresent } from '../common/utils';
|
|
|
15
15
|
import * as i0 from "@angular/core";
|
|
16
16
|
import * as i1 from "@progress/kendo-angular-popup";
|
|
17
17
|
import * as i2 from "./date-range.service";
|
|
18
|
-
import * as i3 from "
|
|
19
|
-
import * as i4 from "
|
|
20
|
-
import * as i5 from "./date-range-selection.directive";
|
|
18
|
+
import * as i3 from "../calendar/multiview-calendar.component";
|
|
19
|
+
import * as i4 from "./date-range-selection.directive";
|
|
21
20
|
/**
|
|
22
21
|
* Represents the Kendo UI DateRangePopup component for Angular.
|
|
23
22
|
*
|
|
@@ -38,10 +37,9 @@ import * as i5 from "./date-range-selection.directive";
|
|
|
38
37
|
* ```
|
|
39
38
|
*/
|
|
40
39
|
export class DateRangePopupComponent {
|
|
41
|
-
constructor(popupService, dateRangeService,
|
|
40
|
+
constructor(popupService, dateRangeService, ref, zone, rtl) {
|
|
42
41
|
this.popupService = popupService;
|
|
43
42
|
this.dateRangeService = dateRangeService;
|
|
44
|
-
this.dateRangePopupService = dateRangePopupService;
|
|
45
43
|
this.ref = ref;
|
|
46
44
|
this.zone = zone;
|
|
47
45
|
this.rtl = rtl;
|
|
@@ -134,7 +132,7 @@ export class DateRangePopupComponent {
|
|
|
134
132
|
return this._show;
|
|
135
133
|
}
|
|
136
134
|
ngOnInit() {
|
|
137
|
-
this.
|
|
135
|
+
this.dateRangeService.registerPopup(this);
|
|
138
136
|
}
|
|
139
137
|
ngAfterViewInit() {
|
|
140
138
|
this.calendarSubscriptions.add(this.contentCalendar.changes.subscribe((changes) => this.calendar = changes.first));
|
|
@@ -293,13 +291,13 @@ export class DateRangePopupComponent {
|
|
|
293
291
|
}
|
|
294
292
|
}
|
|
295
293
|
}
|
|
296
|
-
DateRangePopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1.PopupService }, { token: i2.DateRangeService }, { token:
|
|
294
|
+
DateRangePopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1.PopupService }, { token: i2.DateRangeService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
297
295
|
DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: { animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: DateRangePopupTemplateDirective, descendants: true }, { propertyName: "contentCalendar", predicate: MultiViewCalendarComponent }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "viewCalendar", predicate: MultiViewCalendarComponent, descendants: true }], exportAs: ["kendo-daterange-popup"], ngImport: i0, template: `
|
|
298
296
|
<ng-container #container></ng-container>
|
|
299
297
|
<ng-template #defaultTemplate>
|
|
300
298
|
<kendo-multiviewcalendar kendoDateRangeSelection></kendo-multiviewcalendar>
|
|
301
299
|
</ng-template>
|
|
302
|
-
`, isInline: true, components: [{ type:
|
|
300
|
+
`, isInline: true, components: [{ type: i3.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur"], exportAs: ["kendo-multiviewcalendar"] }], directives: [{ type: i4.DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }] });
|
|
303
301
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangePopupComponent, decorators: [{
|
|
304
302
|
type: Component,
|
|
305
303
|
args: [{
|
|
@@ -312,7 +310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
312
310
|
</ng-template>
|
|
313
311
|
`
|
|
314
312
|
}]
|
|
315
|
-
}], ctorParameters: function () { return [{ type: i1.PopupService }, { type: i2.DateRangeService }, { type:
|
|
313
|
+
}], ctorParameters: function () { return [{ type: i1.PopupService }, { type: i2.DateRangeService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
|
|
316
314
|
type: Optional
|
|
317
315
|
}, {
|
|
318
316
|
type: Inject,
|
|
@@ -10,15 +10,14 @@ import { clampRange, isInRange } from '../util';
|
|
|
10
10
|
import * as i0 from "@angular/core";
|
|
11
11
|
import * as i1 from "./date-range.service";
|
|
12
12
|
import * as i2 from "../dateinput/dateinput.component";
|
|
13
|
-
import * as i3 from "./date-range-popup.service";
|
|
14
13
|
/**
|
|
15
14
|
* A directive which manages the start selection range.
|
|
16
15
|
*
|
|
17
16
|
* > You can use the DateRangeStartInputDirective only with a DateInput component.
|
|
18
17
|
*/
|
|
19
18
|
export class DateRangeStartInputDirective extends DateRangeInput {
|
|
20
|
-
constructor(rangeService, dateInput,
|
|
21
|
-
super('start', rangeService,
|
|
19
|
+
constructor(rangeService, dateInput, element, renderer, zone) {
|
|
20
|
+
super('start', rangeService, dateInput, element, renderer, zone);
|
|
22
21
|
this.rangeService = rangeService;
|
|
23
22
|
this.dateInput = dateInput;
|
|
24
23
|
/**
|
|
@@ -74,14 +73,14 @@ export class DateRangeStartInputDirective extends DateRangeInput {
|
|
|
74
73
|
this.dateInput.notify();
|
|
75
74
|
}
|
|
76
75
|
}
|
|
77
|
-
DateRangeStartInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeStartInputDirective, deps: [{ token: i1.DateRangeService }, { token: i2.DateInputComponent }, { token:
|
|
76
|
+
DateRangeStartInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeStartInputDirective, deps: [{ token: i1.DateRangeService }, { token: i2.DateInputComponent }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
|
78
77
|
DateRangeStartInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeStartInputDirective, selector: "[kendoDateRangeStartInput]", inputs: { autoCorrectOn: "autoCorrectOn", navigateCalendarOnFocus: "navigateCalendarOnFocus" }, usesInheritance: true, ngImport: i0 });
|
|
79
78
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeStartInputDirective, decorators: [{
|
|
80
79
|
type: Directive,
|
|
81
80
|
args: [{
|
|
82
81
|
selector: '[kendoDateRangeStartInput]'
|
|
83
82
|
}]
|
|
84
|
-
}], ctorParameters: function () { return [{ type: i1.DateRangeService }, { type: i2.DateInputComponent }, { type:
|
|
83
|
+
}], ctorParameters: function () { return [{ type: i1.DateRangeService }, { type: i2.DateInputComponent }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { autoCorrectOn: [{
|
|
85
84
|
type: Input
|
|
86
85
|
}], navigateCalendarOnFocus: [{
|
|
87
86
|
type: Input
|
|
@@ -7,7 +7,6 @@ import { validatePackage } from '@progress/kendo-licensing';
|
|
|
7
7
|
import { packageMetadata } from '../package-metadata';
|
|
8
8
|
import { DateRangePopupComponent } from './date-range-popup.component';
|
|
9
9
|
import { DateRangeService } from './date-range.service';
|
|
10
|
-
import { DateRangePopupService } from './date-range-popup.service';
|
|
11
10
|
import * as i0 from "@angular/core";
|
|
12
11
|
import * as i1 from "./date-range-popup.component";
|
|
13
12
|
import * as i2 from "@angular/common";
|
|
@@ -54,14 +53,14 @@ export class DateRangeComponent {
|
|
|
54
53
|
}
|
|
55
54
|
}
|
|
56
55
|
DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
57
|
-
DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeComponent, selector: "kendo-daterange", providers: [DateRangeService
|
|
56
|
+
DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeComponent, selector: "kendo-daterange", providers: [DateRangeService], queries: [{ propertyName: "contentPopup", predicate: DateRangePopupComponent }], ngImport: i0, template: `
|
|
58
57
|
<ng-content></ng-content>
|
|
59
58
|
<kendo-daterange-popup *ngIf="showDefault"></kendo-daterange-popup>
|
|
60
59
|
`, isInline: true, components: [{ type: i1.DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
61
60
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeComponent, decorators: [{
|
|
62
61
|
type: Component,
|
|
63
62
|
args: [{
|
|
64
|
-
providers: [DateRangeService
|
|
63
|
+
providers: [DateRangeService],
|
|
65
64
|
selector: 'kendo-daterange',
|
|
66
65
|
template: `
|
|
67
66
|
<ng-content></ng-content>
|
|
@@ -7,6 +7,8 @@ import { BehaviorSubject } from 'rxjs';
|
|
|
7
7
|
import { EMPTY_SELECTIONRANGE } from '../calendar/models/selection-range.interface';
|
|
8
8
|
import { isEqual } from '@progress/kendo-date-math';
|
|
9
9
|
import * as i0 from "@angular/core";
|
|
10
|
+
const isActive = (cmp) => (cmp && cmp.isActive) || false;
|
|
11
|
+
const hasActiveContent = (popup) => popup && popup.hasActiveContent();
|
|
10
12
|
/**
|
|
11
13
|
* A service that handles the communication between the components that are placed inside the DateRangeComponent.
|
|
12
14
|
* For example, the start and end `DateInput` and `DateRangePopup` components.
|
|
@@ -31,6 +33,10 @@ export class DateRangeService {
|
|
|
31
33
|
* For example, when a new start `DateInput` is attached or the old one is detached.
|
|
32
34
|
*/
|
|
33
35
|
this.startInput$ = new BehaviorSubject(null);
|
|
36
|
+
/**
|
|
37
|
+
* An Observable instance that notifies when the `DateRangePopup` component is changed.
|
|
38
|
+
*/
|
|
39
|
+
this.dateRangePopup$ = new BehaviorSubject(null);
|
|
34
40
|
/**
|
|
35
41
|
* An Observable instance that notifies when the state of the selection range is changed.
|
|
36
42
|
*/
|
|
@@ -68,17 +74,66 @@ export class DateRangeService {
|
|
|
68
74
|
get selectionRange() {
|
|
69
75
|
return this.range$.value;
|
|
70
76
|
}
|
|
77
|
+
/**
|
|
78
|
+
* Activates the registered `DateRangePopup` component.
|
|
79
|
+
* The method opens the popup and focuses the calendar.
|
|
80
|
+
*/
|
|
81
|
+
activatePopup() {
|
|
82
|
+
const dateRangePopup = this.dateRangePopup$.value;
|
|
83
|
+
if (!dateRangePopup) {
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
dateRangePopup.activate();
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* Deactivates the registered `DateRangePopup` component.
|
|
90
|
+
* The method closes the popup.
|
|
91
|
+
*/
|
|
92
|
+
deactivatePopup() {
|
|
93
|
+
const dateRangePopup = this.dateRangePopup$.value;
|
|
94
|
+
if (!(dateRangePopup && dateRangePopup.show)) {
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
97
|
+
dateRangePopup.show = false;
|
|
98
|
+
}
|
|
99
|
+
/**
|
|
100
|
+
* @hidden
|
|
101
|
+
*
|
|
102
|
+
* Deactivates the registered `DateRangePopup` component and fires the `cancel` event.
|
|
103
|
+
* The method closes the popup.
|
|
104
|
+
*/
|
|
105
|
+
cancelPopup() {
|
|
106
|
+
const dateRangePopup = this.dateRangePopup$.value;
|
|
107
|
+
if (!(dateRangePopup && dateRangePopup.show)) {
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
110
|
+
dateRangePopup.cancelPopup();
|
|
111
|
+
}
|
|
71
112
|
/**
|
|
72
113
|
* Completes all observables to mitigate possible memory leaks.
|
|
73
114
|
* Calls the method when a component that uses it is destroyed.
|
|
74
115
|
*/
|
|
75
116
|
destroy() {
|
|
76
117
|
this.activeRangeEnd$.complete();
|
|
118
|
+
this.dateRangePopup$.complete();
|
|
77
119
|
this.focusedDate$.complete();
|
|
78
120
|
this.endInput$.complete();
|
|
79
121
|
this.startInput$.complete();
|
|
80
122
|
this.range$.complete();
|
|
81
123
|
}
|
|
124
|
+
/**
|
|
125
|
+
* Returns `true` when an active component that is placed inside the `DateRangeComponent` is detected.
|
|
126
|
+
* For example, the opened popup or the focused DateInput.
|
|
127
|
+
*
|
|
128
|
+
* @returns `true` if an active component is present.
|
|
129
|
+
*/
|
|
130
|
+
hasActiveComponent() {
|
|
131
|
+
const popup = this.dateRangePopup$.value;
|
|
132
|
+
const isPopup = isActive(popup);
|
|
133
|
+
const isStart = isActive(this.startInput$.value);
|
|
134
|
+
const isEnd = isActive(this.endInput$.value);
|
|
135
|
+
return isPopup || isStart || isEnd || hasActiveContent(popup) || false;
|
|
136
|
+
}
|
|
82
137
|
/**
|
|
83
138
|
* Registers a new start `DateInput` component. Notifies all `startInput$` listeners.
|
|
84
139
|
*/
|
|
@@ -91,6 +146,12 @@ export class DateRangeService {
|
|
|
91
146
|
registerEndInput(endInput) {
|
|
92
147
|
this.endInput$.next(endInput);
|
|
93
148
|
}
|
|
149
|
+
/**
|
|
150
|
+
* Registers a new `DateRangePopup` component. Notifies all `dateRangePopup$` listeners.
|
|
151
|
+
*/
|
|
152
|
+
registerPopup(dateRangePopup) {
|
|
153
|
+
this.dateRangePopup$.next(dateRangePopup);
|
|
154
|
+
}
|
|
94
155
|
/**
|
|
95
156
|
* Updates the `activeRangeEnd` value. Notifies all `activeRangeEnd$` listeners.
|
|
96
157
|
*/
|
package/esm2015/main.js
CHANGED
|
@@ -42,7 +42,6 @@ export { DateTimePickerModule } from './datetimepicker/datetimepicker.module';
|
|
|
42
42
|
export { MultiViewCalendarModule } from './calendar/multiview-calendar.module';
|
|
43
43
|
export { DateRangeModule } from './daterange/date-range.module';
|
|
44
44
|
export { DateRangeService } from './daterange/date-range.service';
|
|
45
|
-
export { DateRangePopupService } from './daterange/date-range-popup.service';
|
|
46
45
|
export { CalendarCustomMessagesComponent } from './calendar/localization/calendar-custom-messages.component';
|
|
47
46
|
export { DateInputCustomMessagesComponent } from './dateinput/localization/dateinput-custom-messages.component';
|
|
48
47
|
export { DatePickerCustomMessagesComponent } from './datepicker/localization/datepicker-custom-messages.component';
|
|
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-dateinputs',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
12
|
+
publishDate: 1648827368,
|
|
13
13
|
version: '',
|
|
14
14
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
|
|
15
15
|
};
|