@progress/kendo-angular-dateinputs 17.0.0-develop.21 → 17.0.0-develop.22

package/{esm2020 → esm2022}/daterange/date-range-popup.component.mjs

@@ -45,140 +45,158 @@ import * as i3 from "@progress/kendo-angular-l10n";
  * ```
  */
 export class DateRangePopupComponent {
-    constructor(popupService, dateRangeService, zone, renderer, localization, cdr, rtl) {
-        this.popupService = popupService;
-        this.dateRangeService = dateRangeService;
-        this.zone = zone;
-        this.renderer = renderer;
-        this.localization = localization;
-        this.cdr = cdr;
-        this.rtl = rtl;
-        /**
-         * @hidden
-         *
-         * Determines whether to display the MultiViewCalendar header.
-         */
-        this.showCalendarHeader = true;
-        /**
-         * Defines the active view that the MultiViewCalendar initially renders
-         * ([see example]({% slug viewoptions_multiviewcalendar %})).
-         * By default, the active view is `month`.
-         *
-         * > You have to set `activeView` within the `topView`-`bottomView` range.
-         */
-        this.activeView = CalendarViewEnum[CalendarViewEnum.month];
-        /**
-         * Defines the bottommost view, to which the user can navigate
-         * ([see example](slug:viewdepth_multiviewcalendar)).
-         */
-        this.bottomView = CalendarViewEnum[CalendarViewEnum.month];
-        /**
-         * Defines the topmost view, to which the user can navigate.
-         */
-        this.topView = CalendarViewEnum[CalendarViewEnum.century];
-        /**
-         * Allows reverse selection.
-         * If `allowReverse` is set to `true`, the component skips the validation of whether the start date is after the end date.
-         *
-         * @default false
-         */
-        this.allowReverse = false;
-        /**
-         * Determines whether to enable animation when navigating to previous/next view.
-         * @default false
-         */
-        this.animateNavigation = false;
-        /**
-         * Sets or gets the `disabled` property of the MultiViewCalendar and
-         * determines whether the component is active
-         * ([see example]({% slug disabled_multiviewcalendar %})).
-         */
-        this.disabled = false;
-        /**
-         * Sets or gets the `views` property of the MultiViewCalendar and
-         * defines the number of rendered months.
-         *
-         * @default 2
-         */
-        this.views = 2;
-        /**
-         * Determines whether to display a week number column in the `month` view
-         * ([see example]({% slug weeknumcolumn_multiviewcalendar %})).
-         */
-        this.weekNumber = false;
-        /**
-         * Controls the popup animation.
-         * By default, the opening and closing animations are enabled.
-         * For more information about controlling the popup animations,
-         * refer to the article on [animations]({% slug animations_popup %}).
-         */
-        this.animate = true;
-        /**
-         * Determines whether to display a header for every view (for example the month name).
-         *
-         * @default false
-         */
-        this.showViewHeader = false;
-        /**
-         * Displays the days that fall out of the current month ([see example]({% slug viewoptions_multiviewcalendar %}#toc-displaying-other-month-days)).
-         * @default false
-         */
-        this.showOtherMonthDays = false;
-        /**
-         * Configures the collision behavior of the popup.
-         * For more information, refer to the article on
-         * [viewport boundary detection]({% slug viewportboundarydetection_popup %}).
-         */
-        this.collision = { horizontal: 'fit', vertical: 'flip' };
-        /**
-         * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
-         */
-        this.adaptiveMode = 'none';
-        /**
-         * Sets the title of the input element of the DateRangePopup and the title text rendered
-         * in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
-         */
-        this.title = "";
-        /**
-         * Fires each time the popup is about to open
-         * ([see example](slug:popup_daterange#toc-events)).
-         * This event is preventable. If you cancel the event, the popup will remain closed.
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires each time the popup is about to close
-         * ([see example](slug:popup_daterange#toc-events)).
-         * This event is preventable. If you cancel the event, the popup will remain open.
-         */
-        this.close = new EventEmitter();
-        /**
-         * Fires each time the calendar element is blurred
-         * ([see example](slug:popup_daterange#toc-events)).
-         */
-        this.onBlur = new EventEmitter();
-        /**
-         * Fires each time the calendar element is focused
-         * ([see example](slug:popup_daterange#toc-events)).
-         */
-        this.onFocus = new EventEmitter();
-        /**
-         * Fires each time the popup is closed either on `ESC` keypress or on leaving the viewport
-         * ([see example](slug:popup_daterange#toc-events)).
-         */
-        this.cancel = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.popupUID = guid();
-        /**
-         * @hidden
-         */
-        this.xIcon = xIcon;
-        this.calendarSubscriptions = new Subscription();
-        this.popupSubscriptions = new Subscription();
-        this.localizationSubscriptions = new Subscription();
-        this.resolvedPromise = Promise.resolve();
-    }
+    popupService;
+    dateRangeService;
+    zone;
+    renderer;
+    localization;
+    cdr;
+    rtl;
+    container;
+    actionSheet;
+    defaultTemplate;
+    contentTemplate;
+    dateRangeSelectionDirective;
+    viewCalendar;
+    contentCalendar;
+    /**
+     * @hidden
+     *
+     * Determines whether to display the MultiViewCalendar header.
+     */
+    showCalendarHeader = true;
+    /**
+     * Sets or gets the `focusedDate` property of the MultiViewCalendar and
+     * defines the focused date of the component
+     * ([see example]({% slug dates_multiviewcalendar %}#toc-focused-dates)).
+     *
+     * > If the MultiViewCalendar is out of the min or max range, it normalizes the defined `focusedDate`.
+     */
+    focusedDate;
+    /**
+     * Sets the dates of the MultiViewCalendar that will be disabled
+     * ([see example]({% slug disabled_dates_multiviewcalendar %})).
+     */
+    disabledDates;
+    /**
+     * Defines the active view that the MultiViewCalendar initially renders
+     * ([see example]({% slug viewoptions_multiviewcalendar %})).
+     * By default, the active view is `month`.
+     *
+     * > You have to set `activeView` within the `topView`-`bottomView` range.
+     */
+    activeView = CalendarViewEnum[CalendarViewEnum.month];
+    /**
+     * Defines the bottommost view, to which the user can navigate
+     * ([see example](slug:viewdepth_multiviewcalendar)).
+     */
+    bottomView = CalendarViewEnum[CalendarViewEnum.month];
+    /**
+     * Defines the topmost view, to which the user can navigate.
+     */
+    topView = CalendarViewEnum[CalendarViewEnum.century];
+    /**
+     * Sets or gets the `min` property of the MultiViewCalendar and
+     * defines the minimum allowed date value.
+     * By default, the `min` value is `1900-1-1`.
+     */
+    min;
+    /**
+     * Sets or gets the `max` property of the MultiViewCalendar and
+     * defines the maximum allowed date value.
+     * By default, the `max` value is `2099-12-31`.
+     */
+    max;
+    /**
+     * Allows reverse selection.
+     * If `allowReverse` is set to `true`, the component skips the validation of whether the start date is after the end date.
+     *
+     * @default false
+     */
+    allowReverse = false;
+    /**
+     * Determines whether to enable animation when navigating to previous/next view.
+     * @default false
+     */
+    animateNavigation = false;
+    /**
+     * Sets or gets the `disabled` property of the MultiViewCalendar and
+     * determines whether the component is active
+     * ([see example]({% slug disabled_multiviewcalendar %})).
+     */
+    disabled = false;
+    /**
+     * Sets or gets the `views` property of the MultiViewCalendar and
+     * defines the number of rendered months.
+     *
+     * @default 2
+     */
+    views = 2;
+    /**
+     * Determines whether to display a week number column in the `month` view
+     * ([see example]({% slug weeknumcolumn_multiviewcalendar %})).
+     */
+    weekNumber = false;
+    /**
+     * Controls the popup animation.
+     * By default, the opening and closing animations are enabled.
+     * For more information about controlling the popup animations,
+     * refer to the article on [animations]({% slug animations_popup %}).
+     */
+    animate = true;
+    /**
+     * Specifies the element that will be used as an anchor. The popup opens next to that element.
+     * For more information, refer to the section on
+     * [aligning to specific components]({% slug alignmentpositioning_popup %}#toc-aligning-to-components).
+     */
+    anchor;
+    /**
+     * Specifies the anchor pivot point.
+     * For more information, refer to the section on
+     * [positioning]({% slug alignmentpositioning_popup %}#toc-positioning).
+     */
+    anchorAlign;
+    /**
+     * Determines whether to display a header for every view (for example the month name).
+     *
+     * @default false
+     */
+    showViewHeader = false;
+    /**
+     * Displays the days that fall out of the current month ([see example]({% slug viewoptions_multiviewcalendar %}#toc-displaying-other-month-days)).
+     * @default false
+     */
+    showOtherMonthDays = false;
+    /**
+     * Controls the popup container. By default, the popup is appended to the root component.
+     */
+    appendTo;
+    /**
+     * Configures the collision behavior of the popup.
+     * For more information, refer to the article on
+     * [viewport boundary detection]({% slug viewportboundarydetection_popup %}).
+     */
+    collision = { horizontal: 'fit', vertical: 'flip' };
+    /**
+     * Specifies the pivot point of the popup.
+     * For more information, refer to the section on
+     * [positioning]({% slug alignmentpositioning_popup %}#toc-positioning).
+     */
+    popupAlign;
+    /**
+     * Specifies the margin value that will be added to the popup dimensions in pixels
+     * and leaves a blank space between the popup and the anchor.
+     */
+    margin;
+    /**
+     * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
+     */
+    adaptiveMode = 'none';
+    /**
+     * Sets the title of the input element of the DateRangePopup and the title text rendered
+     * in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     */
+    title = "";
     /**
      * Sets the subtitle text rendered in the header of the popup(action sheet).
      * Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
@@ -189,6 +207,48 @@ export class DateRangePopupComponent {
     get subtitle() {
         return this._subtitle;
     }
+    _subtitle;
+    /**
+     * @hidden
+     *
+     * TODO: Make visible when the Infinite Calendar is fixed to set properly the size option.
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `none`
+     *
+     */
+    size;
+    /**
+     * Fires each time the popup is about to open
+     * ([see example](slug:popup_daterange#toc-events)).
+     * This event is preventable. If you cancel the event, the popup will remain closed.
+     */
+    open = new EventEmitter();
+    /**
+     * Fires each time the popup is about to close
+     * ([see example](slug:popup_daterange#toc-events)).
+     * This event is preventable. If you cancel the event, the popup will remain open.
+     */
+    close = new EventEmitter();
+    /**
+     * Fires each time the calendar element is blurred
+     * ([see example](slug:popup_daterange#toc-events)).
+     */
+    onBlur = new EventEmitter();
+    /**
+     * Fires each time the calendar element is focused
+     * ([see example](slug:popup_daterange#toc-events)).
+     */
+    onFocus = new EventEmitter();
+    /**
+     * Fires each time the popup is closed either on `ESC` keypress or on leaving the viewport
+     * ([see example](slug:popup_daterange#toc-events)).
+     */
+    cancel = new EventEmitter();
     /**
      * The active calendar that is visible in the popup
      *
@@ -224,6 +284,18 @@ export class DateRangePopupComponent {
     get isAdaptive() {
         return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
     }
+    /**
+     * @hidden
+     */
+    popupRef;
+    /**
+     * @hidden
+     */
+    popupUID = guid();
+    /**
+     * @hidden
+     */
+    xIcon = xIcon;
     /**
      * Gets or sets the visibility state of the component.
      */
@@ -246,6 +318,27 @@ export class DateRangePopupComponent {
     get show() {
         return this._show;
     }
+    activateSubscription;
+    blurSubscription;
+    focusSubscription;
+    calendarSubscriptions = new Subscription();
+    popupSubscriptions = new Subscription();
+    windowBlurSubscription;
+    localizationSubscriptions = new Subscription();
+    resolvedPromise = Promise.resolve();
+    _calendar;
+    _show;
+    _rangeSelection;
+    windowSize;
+    constructor(popupService, dateRangeService, zone, renderer, localization, cdr, rtl) {
+        this.popupService = popupService;
+        this.dateRangeService = dateRangeService;
+        this.zone = zone;
+        this.renderer = renderer;
+        this.localization = localization;
+        this.cdr = cdr;
+        this.rtl = rtl;
+    }
     ngOnInit() {
         this.dateRangeService.registerPopup(this);
         if (this.localization) {
@@ -556,15 +649,14 @@ export class DateRangePopupComponent {
             this.renderer.setStyle(animationContainer, 'bottom', '0px');
         }
     }
-}
-DateRangePopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1.PopupService }, { token: i2.DateRangeService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateRangePopupComponent, isStandalone: true, selector: "kendo-daterange-popup", inputs: { showCalendarHeader: "showCalendarHeader", focusedDate: "focusedDate", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", min: "min", max: "max", allowReverse: "allowReverse", animateNavigation: "animateNavigation", disabled: "disabled", views: "views", weekNumber: "weekNumber", animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", showViewHeader: "showViewHeader", showOtherMonthDays: "showOtherMonthDays", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", size: "size" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, providers: [
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.daterangepopup'
-        }
-    ], 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: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "dateRangeSelectionDirective", first: true, predicate: DateRangeSelectionDirective, descendants: true }, { propertyName: "viewCalendar", predicate: MultiViewCalendarComponent, descendants: true }], exportAs: ["kendo-daterange-popup"], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1.PopupService }, { token: i2.DateRangeService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateRangePopupComponent, isStandalone: true, selector: "kendo-daterange-popup", inputs: { showCalendarHeader: "showCalendarHeader", focusedDate: "focusedDate", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", min: "min", max: "max", allowReverse: "allowReverse", animateNavigation: "animateNavigation", disabled: "disabled", views: "views", weekNumber: "weekNumber", animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", showViewHeader: "showViewHeader", showOtherMonthDays: "showOtherMonthDays", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", size: "size" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, providers: [
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.daterangepopup'
+            }
+        ], 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: "actionSheet", first: true, predicate: ["actionSheet"], descendants: true }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "dateRangeSelectionDirective", first: true, predicate: DateRangeSelectionDirective, descendants: true }, { propertyName: "viewCalendar", predicate: MultiViewCalendarComponent, descendants: true }], exportAs: ["kendo-daterange-popup"], ngImport: i0, template: `
         <ng-container kendoDateRangePopupLocalizedMessages
             i18n-accept="kendo.daterangepopup.accept|The Accept button text in the timepicker component"
             accept="Set"
@@ -694,7 +786,8 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             </ng-template>
         </kendo-actionsheet>
     `, isInline: true, dependencies: [{ kind: "directive", type: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }, { kind: "component", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "size", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangePopupComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangePopupComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendo-daterange-popup',

package/{esm2020 → esm2022}/daterange/date-range-selection.directive.mjs

@@ -18,39 +18,19 @@ import * as i2 from "./date-range.service";
  * We recommend using the MultiViewCalendar [range selection]({% slug selection_multiviewcalendar %}#toc-range-selection).
  */
 export class DateRangeSelectionDirective {
-    constructor(calendar, cdr, element, renderer, dateRangeService) {
-        this.calendar = calendar;
-        this.cdr = cdr;
-        this.element = element;
-        this.dateRangeService = dateRangeService;
-        /**
-         * Specifies the auto-correction behavior. If the start date is greater than the end date,
-         * the directive fixes the date range to a single date either on input change or on blur
-         * ([see example](slug:autocorrect_daterange#toc-calendar-selection-directive)).
-         *
-         * By default, the auto-correction is triggered on change.
-         * To disable this behavior, set the `autoCorrectOn` property to `none`.
-         */
-        this.autoCorrectOn = 'change';
-        /**
-         * @hidden
-         * When in adaptive mode range should not be set automatically on calendar value change but only on accept
-         */
-        this.shouldSetRange = true;
-        /**
-         * Fires when the active range end is changed. For more information, refer to
-         * the section on [events](slug:events_multiviewcalendar).
-         */
-        this.activeRangeEndChange = new EventEmitter();
-        /**
-         * Fires when the selection range is changed. For more information, refer to
-         * the section on [events](slug:events_multiviewcalendar).
-         */
-        this.selectionRangeChange = new EventEmitter();
-        this.calendarSubscriptions = new Subscription();
-        this.dateRangeService = this.dateRangeService || new DateRangeService(renderer);
-        renderer.setAttribute(element.nativeElement, 'aria-multiselectable', 'true');
-    }
+    calendar;
+    cdr;
+    element;
+    dateRangeService;
+    /**
+     * Specifies the auto-correction behavior. If the start date is greater than the end date,
+     * the directive fixes the date range to a single date either on input change or on blur
+     * ([see example](slug:autocorrect_daterange#toc-calendar-selection-directive)).
+     *
+     * By default, the auto-correction is triggered on change.
+     * To disable this behavior, set the `autoCorrectOn` property to `none`.
+     */
+    autoCorrectOn = 'change';
     /**
      * Gets or sets the selection range of the calendar. When a new range is set,
      * the connected DateRangeService notifies all related parties.
@@ -88,9 +68,34 @@ export class DateRangeSelectionDirective {
         this.calendar.activeRangeEnd = activeRange;
         this.dateRangeService.setActiveRangeEnd(activeRange);
     }
+    /**
+     * @hidden
+     * When in adaptive mode range should not be set automatically on calendar value change but only on accept
+     */
+    shouldSetRange = true;
+    /**
+     * Fires when the active range end is changed. For more information, refer to
+     * the section on [events](slug:events_multiviewcalendar).
+     */
+    activeRangeEndChange = new EventEmitter();
+    /**
+     * Fires when the selection range is changed. For more information, refer to
+     * the section on [events](slug:events_multiviewcalendar).
+     */
+    selectionRangeChange = new EventEmitter();
     get calendarRange() {
         return this.selectionRange || EMPTY_SELECTIONRANGE;
     }
+    calendarSubscriptions = new Subscription();
+    range;
+    constructor(calendar, cdr, element, renderer, dateRangeService) {
+        this.calendar = calendar;
+        this.cdr = cdr;
+        this.element = element;
+        this.dateRangeService = dateRangeService;
+        this.dateRangeService = this.dateRangeService || new DateRangeService(renderer);
+        renderer.setAttribute(element.nativeElement, 'aria-multiselectable', 'true');
+    }
     ngOnInit() {
         const calendar = this.calendar;
         const dateRangeService = this.dateRangeService;
@@ -191,10 +196,10 @@ export class DateRangeSelectionDirective {
         this.setSelectionRange(range);
         this.selectionRangeChange.emit(range);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangeSelectionDirective, deps: [{ token: i1.MultiViewCalendarComponent }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.DateRangeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DateRangeSelectionDirective, isStandalone: true, selector: "[kendoDateRangeSelection]", inputs: { autoCorrectOn: "autoCorrectOn", selectionRange: "selectionRange", activeRangeEnd: "activeRangeEnd", shouldSetRange: "shouldSetRange" }, outputs: { activeRangeEndChange: "activeRangeEndChange", selectionRangeChange: "selectionRangeChange" }, ngImport: i0 });
 }
-DateRangeSelectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeSelectionDirective, deps: [{ token: i1.MultiViewCalendarComponent }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.DateRangeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-DateRangeSelectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateRangeSelectionDirective, isStandalone: true, selector: "[kendoDateRangeSelection]", inputs: { autoCorrectOn: "autoCorrectOn", selectionRange: "selectionRange", activeRangeEnd: "activeRangeEnd", shouldSetRange: "shouldSetRange" }, outputs: { activeRangeEndChange: "activeRangeEndChange", selectionRangeChange: "selectionRangeChange" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeSelectionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangeSelectionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDateRangeSelection]',

package/{esm2020 → esm2022}/daterange/date-range-start-input.directive.mjs

@@ -19,37 +19,48 @@ import * as i2 from "../dateinput/dateinput.component";
  * > You can use the DateRangeStartInputDirective only with a DateInput component.
  */
 export class DateRangeStartInputDirective extends DateRangeInput {
+    rangeService;
+    dateInput;
+    renderer;
+    /**
+     * Specifies the auto-correction behavior. If the start date is greater than the end date,
+     * the directive fixes the date range to a single date either on input change or on blur
+     * ([see example](slug:autocorrect_daterange#toc-input-directives)).
+     *
+     * By default, the component does not perform any auto-correction.
+     */
+    autoCorrectOn;
+    /**
+     * Specifies the navigation behavior of the calendar when the active end is changed on input focus.
+     * When enabled, the calendar navigates to the value of the focused input. Otherwise, the calendar
+     * displays the last picked date.
+     *
+     * By default, the automatic navigation behavior on input focus is disabled.
+     *
+     * @example
+     * ```ts
+     * _@Component({
+     * selector: 'my-app',
+     * template: `
+     *  <h5>Toggle input focus to see the calendar navigating between range ends.</h5>
+     *  <kendo-daterange>
+     *      <kendo-dateinput kendoDateRangeStartInput [navigateCalendarOnFocus]="true" [(value)]="start"></kendo-dateinput>
+     *      <kendo-dateinput kendoDateRangeEndInput [navigateCalendarOnFocus]="true" [(value)]="end"></kendo-dateinput>
+     *  </kendo-daterange>
+     * `
+     * })
+     * export class AppComponent {
+     *   public start: Date = new Date(2018, 3, 10);
+     *   public end: Date = new Date(2018, 10, 20);
+     * }
+     * ```
+     */
+    navigateCalendarOnFocus = false;
     constructor(rangeService, dateInput, element, renderer, zone) {
         super('start', rangeService, dateInput, element, renderer, zone);
         this.rangeService = rangeService;
         this.dateInput = dateInput;
         this.renderer = renderer;
-        /**
-         * Specifies the navigation behavior of the calendar when the active end is changed on input focus.
-         * When enabled, the calendar navigates to the value of the focused input. Otherwise, the calendar
-         * displays the last picked date.
-         *
-         * By default, the automatic navigation behavior on input focus is disabled.
-         *
-         * @example
-         * ```ts
-         * _@Component({
-         * selector: 'my-app',
-         * template: `
-         *  <h5>Toggle input focus to see the calendar navigating between range ends.</h5>
-         *  <kendo-daterange>
-         *      <kendo-dateinput kendoDateRangeStartInput [navigateCalendarOnFocus]="true" [(value)]="start"></kendo-dateinput>
-         *      <kendo-dateinput kendoDateRangeEndInput [navigateCalendarOnFocus]="true" [(value)]="end"></kendo-dateinput>
-         *  </kendo-daterange>
-         * `
-         * })
-         * export class AppComponent {
-         *   public start: Date = new Date(2018, 3, 10);
-         *   public end: Date = new Date(2018, 10, 20);
-         * }
-         * ```
-         */
-        this.navigateCalendarOnFocus = false;
     }
     ngOnInit() {
         this.rangeService.registerStartInput(this.dateInput);
@@ -80,10 +91,10 @@ export class DateRangeStartInputDirective extends DateRangeInput {
         this.dateInput.writeValue(cloneDate(start));
         this.dateInput.notify();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangeStartInputDirective, deps: [{ token: i1.DateRangeService }, { token: i2.DateInputComponent }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DateRangeStartInputDirective, isStandalone: true, selector: "[kendoDateRangeStartInput]", inputs: { autoCorrectOn: "autoCorrectOn", navigateCalendarOnFocus: "navigateCalendarOnFocus" }, usesInheritance: true, ngImport: i0 });
 }
-DateRangeStartInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "14.0.0", version: "15.2.10", type: DateRangeStartInputDirective, isStandalone: true, selector: "[kendoDateRangeStartInput]", inputs: { autoCorrectOn: "autoCorrectOn", navigateCalendarOnFocus: "navigateCalendarOnFocus" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeStartInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangeStartInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDateRangeStartInput]',