@progress/kendo-angular-dateinputs 7.0.0-next.202204010857 → 7.0.0-next.202204081436

package/esm2015/daterange/date-range-input.js

@@ -11,10 +11,9 @@ import { isPresent } from '../common/utils';
  * @hidden
  */
 export class DateRangeInput {
-    constructor(activeRangeEnd, dateRangeService, dateRangePopupService, input, element, renderer, zone) {
+    constructor(activeRangeEnd, dateRangeService, input, element, renderer, zone) {
         this.activeRangeEnd = activeRangeEnd;
         this.dateRangeService = dateRangeService;
-        this.dateRangePopupService = dateRangePopupService;
         this.input = input;
         this.element = element;
         this.renderer = renderer;
@@ -27,7 +26,7 @@ export class DateRangeInput {
         return this.dateRangeService.activeRangeEnd === this.activeRangeEnd;
     }
     get popupCalendarActivated() {
-        const popup = this.dateRangePopupService.dateRangePopup$.value;
+        const popup = this.dateRangeService.dateRangePopup$.value;
         return isPresent(popup) && isPresent(popup.calendar);
     }
     init() {
@@ -44,7 +43,7 @@ export class DateRangeInput {
                 }
                 this.toggleActiveClass(this.isActiveEnd);
             }),
-            this.dateRangePopupService.dateRangePopup$.subscribe(popup => this.initPopup(popup)),
+            this.dateRangeService.dateRangePopup$.subscribe(popup => this.initPopup(popup)),
             this.dateRangeService.range$.subscribe(range => this.updateInputValue(range)),
             fromEvent(this.element.nativeElement, 'click').subscribe(() => this.activate()),
             fromEvent(this.element.nativeElement, 'keydown').subscribe((event) => this.togglePopup(event || {}))
@@ -74,19 +73,17 @@ export class DateRangeInput {
     }
     activate() {
         this.dateRangeService.setActiveRangeEnd(this.activeRangeEnd);
-        this.dateRangePopupService.activatePopup();
+        this.dateRangeService.activatePopup();
     }
     deactivate() {
         this.zone.runOutsideAngular(() => {
             setTimeout(() => {
                 this.updateRange(this.input.value, 'blur');
-                const startInputValue = this.dateRangeService.startInput$.value;
-                const endInputValue = this.dateRangeService.endInput$.value;
-                if (this.dateRangePopupService.hasActiveComponent(startInputValue, endInputValue)) {
+                if (this.dateRangeService.hasActiveComponent()) {
                     return;
                 }
                 this.toggleActiveClass(false);
-                this.zone.run(() => this.dateRangePopupService.deactivatePopup());
+                this.zone.run(() => this.dateRangeService.deactivatePopup());
             });
         });
     }
@@ -99,10 +96,10 @@ export class DateRangeInput {
     }
     togglePopup({ altKey, keyCode }) {
         if (keyCode === Keys.Escape) {
-            this.dateRangePopupService.cancelPopup();
+            this.dateRangeService.cancelPopup();
         }
         else if (altKey && keyCode === Keys.ArrowDown) {
-            this.dateRangePopupService.activatePopup();
+            this.dateRangeService.activatePopup();
         }
     }
     focusActiveDate() {

package/esm2015/daterange/date-range-popup.component.js

@@ -15,9 +15,8 @@ import { isPresent } from '../common/utils';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-popup";
 import * as i2 from "./date-range.service";
-import * as i3 from "./date-range-popup.service";
-import * as i4 from "../calendar/multiview-calendar.component";
-import * as i5 from "./date-range-selection.directive";
+import * as i3 from "../calendar/multiview-calendar.component";
+import * as i4 from "./date-range-selection.directive";
 /**
  * Represents the Kendo UI DateRangePopup component for Angular.
  *
@@ -38,10 +37,9 @@ import * as i5 from "./date-range-selection.directive";
  * ```
  */
 export class DateRangePopupComponent {
-    constructor(popupService, dateRangeService, dateRangePopupService, ref, zone, rtl) {
+    constructor(popupService, dateRangeService, ref, zone, rtl) {
         this.popupService = popupService;
         this.dateRangeService = dateRangeService;
-        this.dateRangePopupService = dateRangePopupService;
         this.ref = ref;
         this.zone = zone;
         this.rtl = rtl;
@@ -134,7 +132,7 @@ export class DateRangePopupComponent {
         return this._show;
     }
     ngOnInit() {
-        this.dateRangePopupService.registerPopup(this);
+        this.dateRangeService.registerPopup(this);
     }
     ngAfterViewInit() {
         this.calendarSubscriptions.add(this.contentCalendar.changes.subscribe((changes) => this.calendar = changes.first));
@@ -293,13 +291,13 @@ export class DateRangePopupComponent {
         }
     }
 }
-DateRangePopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1.PopupService }, { token: i2.DateRangeService }, { token: i3.DateRangePopupService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+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 });
 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: `
         <ng-container #container></ng-container>
         <ng-template #defaultTemplate>
             <kendo-multiviewcalendar kendoDateRangeSelection></kendo-multiviewcalendar>
         </ng-template>
-    `, isInline: true, components: [{ type: i4.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: i5.DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }] });
+    `, 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangePopupComponent, decorators: [{
             type: Component,
             args: [{
@@ -312,7 +310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.PopupService }, { type: i2.DateRangeService }, { type: i3.DateRangePopupService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1.PopupService }, { type: i2.DateRangeService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,

package/esm2015/daterange/date-range-start-input.directive.js

@@ -10,15 +10,14 @@ import { clampRange, isInRange } from '../util';
 import * as i0 from "@angular/core";
 import * as i1 from "./date-range.service";
 import * as i2 from "../dateinput/dateinput.component";
-import * as i3 from "./date-range-popup.service";
 /**
  * A directive which manages the start selection range.
  *
  * > You can use the DateRangeStartInputDirective only with a DateInput component.
  */
 export class DateRangeStartInputDirective extends DateRangeInput {
-    constructor(rangeService, dateInput, rangePopupService, element, renderer, zone) {
-        super('start', rangeService, rangePopupService, dateInput, element, renderer, zone);
+    constructor(rangeService, dateInput, element, renderer, zone) {
+        super('start', rangeService, dateInput, element, renderer, zone);
         this.rangeService = rangeService;
         this.dateInput = dateInput;
         /**
@@ -74,14 +73,14 @@ export class DateRangeStartInputDirective extends DateRangeInput {
         this.dateInput.notify();
     }
 }
-DateRangeStartInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeStartInputDirective, deps: [{ token: i1.DateRangeService }, { token: i2.DateInputComponent }, { token: i3.DateRangePopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+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 });
 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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeStartInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDateRangeStartInput]'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.DateRangeService }, { type: i2.DateInputComponent }, { type: i3.DateRangePopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { autoCorrectOn: [{
+        }], ctorParameters: function () { return [{ type: i1.DateRangeService }, { type: i2.DateInputComponent }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { autoCorrectOn: [{
                 type: Input
             }], navigateCalendarOnFocus: [{
                 type: Input

package/esm2015/daterange/date-range.component.js

@@ -7,7 +7,6 @@ import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { DateRangePopupComponent } from './date-range-popup.component';
 import { DateRangeService } from './date-range.service';
-import { DateRangePopupService } from './date-range-popup.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./date-range-popup.component";
 import * as i2 from "@angular/common";
@@ -54,14 +53,14 @@ export class DateRangeComponent {
     }
 }
 DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeComponent, selector: "kendo-daterange", providers: [DateRangeService, DateRangePopupService], queries: [{ propertyName: "contentPopup", predicate: DateRangePopupComponent }], ngImport: i0, template: `
+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: `
         <ng-content></ng-content>
         <kendo-daterange-popup *ngIf="showDefault"></kendo-daterange-popup>
     `, 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
             args: [{
-                    providers: [DateRangeService, DateRangePopupService],
+                    providers: [DateRangeService],
                     selector: 'kendo-daterange',
                     template: `
         <ng-content></ng-content>

package/esm2015/daterange/date-range.service.js

@@ -7,6 +7,8 @@ import { BehaviorSubject } from 'rxjs';
 import { EMPTY_SELECTIONRANGE } from '../calendar/models/selection-range.interface';
 import { isEqual } from '@progress/kendo-date-math';
 import * as i0 from "@angular/core";
+const isActive = (cmp) => (cmp && cmp.isActive) || false;
+const hasActiveContent = (popup) => popup && popup.hasActiveContent();
 /**
  * A service that handles the communication between the components that are placed inside the DateRangeComponent.
  * For example, the start and end `DateInput` and `DateRangePopup` components.
@@ -31,6 +33,10 @@ export class DateRangeService {
          * For example, when a new start `DateInput` is attached or the old one is detached.
          */
         this.startInput$ = new BehaviorSubject(null);
+        /**
+         * An Observable instance that notifies when the `DateRangePopup` component is changed.
+         */
+        this.dateRangePopup$ = new BehaviorSubject(null);
         /**
          * An Observable instance that notifies when the state of the selection range is changed.
          */
@@ -68,17 +74,66 @@ export class DateRangeService {
     get selectionRange() {
         return this.range$.value;
     }
+    /**
+     * Activates the registered `DateRangePopup` component.
+     * The method opens the popup and focuses the calendar.
+     */
+    activatePopup() {
+        const dateRangePopup = this.dateRangePopup$.value;
+        if (!dateRangePopup) {
+            return;
+        }
+        dateRangePopup.activate();
+    }
+    /**
+     * Deactivates the registered `DateRangePopup` component.
+     * The method closes the popup.
+     */
+    deactivatePopup() {
+        const dateRangePopup = this.dateRangePopup$.value;
+        if (!(dateRangePopup && dateRangePopup.show)) {
+            return;
+        }
+        dateRangePopup.show = false;
+    }
+    /**
+     * @hidden
+     *
+     * Deactivates the registered `DateRangePopup` component and fires the `cancel` event.
+     * The method closes the popup.
+     */
+    cancelPopup() {
+        const dateRangePopup = this.dateRangePopup$.value;
+        if (!(dateRangePopup && dateRangePopup.show)) {
+            return;
+        }
+        dateRangePopup.cancelPopup();
+    }
     /**
      * Completes all observables to mitigate possible memory leaks.
      * Calls the method when a component that uses it is destroyed.
      */
     destroy() {
         this.activeRangeEnd$.complete();
+        this.dateRangePopup$.complete();
         this.focusedDate$.complete();
         this.endInput$.complete();
         this.startInput$.complete();
         this.range$.complete();
     }
+    /**
+     * Returns `true` when an active component that is placed inside the `DateRangeComponent` is detected.
+     * For example, the opened popup or the focused DateInput.
+     *
+     * @returns `true` if an active component is present.
+     */
+    hasActiveComponent() {
+        const popup = this.dateRangePopup$.value;
+        const isPopup = isActive(popup);
+        const isStart = isActive(this.startInput$.value);
+        const isEnd = isActive(this.endInput$.value);
+        return isPopup || isStart || isEnd || hasActiveContent(popup) || false;
+    }
     /**
      * Registers a new start `DateInput` component. Notifies all `startInput$` listeners.
      */
@@ -91,6 +146,12 @@ export class DateRangeService {
     registerEndInput(endInput) {
         this.endInput$.next(endInput);
     }
+    /**
+     * Registers a new `DateRangePopup` component. Notifies all `dateRangePopup$` listeners.
+     */
+    registerPopup(dateRangePopup) {
+        this.dateRangePopup$.next(dateRangePopup);
+    }
     /**
      * Updates the `activeRangeEnd` value. Notifies all `activeRangeEnd$` listeners.
      */

package/esm2015/main.js

@@ -42,7 +42,6 @@ export { DateTimePickerModule } from './datetimepicker/datetimepicker.module';
 export { MultiViewCalendarModule } from './calendar/multiview-calendar.module';
 export { DateRangeModule } from './daterange/date-range.module';
 export { DateRangeService } from './daterange/date-range.service';
-export { DateRangePopupService } from './daterange/date-range-popup.service';
 export { CalendarCustomMessagesComponent } from './calendar/localization/calendar-custom-messages.component';
 export { DateInputCustomMessagesComponent } from './dateinput/localization/dateinput-custom-messages.component';
 export { DatePickerCustomMessagesComponent } from './datepicker/localization/datepicker-custom-messages.component';

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1648803322,
+    publishDate: 1649428453,
     version: '',
     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'
 };

package/esm2015/util.js

@@ -382,3 +382,15 @@ export const getFillModeClass = (component, fillMode) => {
     };
     return FILLMODE_CLASSES[fillMode];
 };
+/**
+ * @hidden
+ */
+export const DEFAULT_ROUNDED = 'medium';
+/**
+ * @hidden
+ */
+export const DEFAULT_SIZE = 'medium';
+/**
+ * @hidden
+ */
+export const DEFAULT_FILL_MODE = 'solid';