@progress/kendo-angular-dateinputs 11.4.0-develop.1 → 11.4.0-develop.10

package/esm2020/daterange/date-range-popup.component.mjs

@@ -2,8 +2,8 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ContentChild, ContentChildren, ChangeDetectorRef, ElementRef, EventEmitter, TemplateRef, NgZone, Input, Output, ViewChild, ViewChildren, ViewContainerRef, Inject, QueryList, Optional } from '@angular/core';
-import { RTL } from '@progress/kendo-angular-l10n';
+import { Component, ContentChild, ContentChildren, ChangeDetectorRef, ElementRef, EventEmitter, TemplateRef, NgZone, Input, Output, ViewChild, ViewChildren, ViewContainerRef, Inject, QueryList, Optional, Renderer2 } from '@angular/core';
+import { L10N_PREFIX, LocalizationService, RTL } from '@progress/kendo-angular-l10n';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { DateRangePopupTemplateDirective } from './date-range-popup-template.directive';
 import { DateRangeService } from './date-range.service';
@@ -12,13 +12,22 @@ import { PreventableEvent } from '../preventable-event';
 import { isDocumentAvailable, guid, Keys, hasObservers } from '@progress/kendo-angular-common';
 import { Subscription, fromEvent, merge } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
-import { isWindowAvailable } from '../util';
+import { isWindowAvailable, windowSize } from '../util';
 import { isPresent } from '../common/utils';
+import { xIcon } from '@progress/kendo-svg-icons';
+import { DateRangeSelectionDirective } from './date-range-selection.directive';
+import { ActionSheetComponent } from '@progress/kendo-angular-navigation';
 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 "../calendar/multiview-calendar.component";
-import * as i4 from "./date-range-selection.directive";
+import * as i3 from "@progress/kendo-angular-l10n";
+import * as i4 from "../calendar/multiview-calendar.component";
+import * as i5 from "@progress/kendo-angular-navigation";
+import * as i6 from "@progress/kendo-angular-common";
+import * as i7 from "@progress/kendo-angular-buttons";
+import * as i8 from "./localization/daterange-popup-localized-messages.directive";
+import * as i9 from "./date-range-selection.directive";
+import * as i10 from "@angular/common";
 /**
  * Represents the Kendo UI DateRangePopup component for Angular.
  *
@@ -39,11 +48,14 @@ import * as i4 from "./date-range-selection.directive";
  * ```
  */
 export class DateRangePopupComponent {
-    constructor(popupService, dateRangeService, ref, zone, rtl) {
+    constructor(popupService, dateRangeService, ref, zone, renderer, localization, cdr, rtl) {
         this.popupService = popupService;
         this.dateRangeService = dateRangeService;
         this.ref = ref;
         this.zone = zone;
+        this.renderer = renderer;
+        this.localization = localization;
+        this.cdr = cdr;
         this.rtl = rtl;
         /**
          * Controls the popup animation.
@@ -58,6 +70,15 @@ export class DateRangePopupComponent {
          * [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.
          * This event is preventable. If you cancel the event, the popup will remain closed.
@@ -88,10 +109,25 @@ export class DateRangePopupComponent {
          * @hidden
          */
         this.popupUID = guid();
+        /**
+         * @hidden
+         */
+        this.xIcon = xIcon;
         this.calendarSubscriptions = new Subscription();
         this.popupSubscriptions = new Subscription();
+        this.localizationSubscriptions = new Subscription();
         this.resolvedPromise = Promise.resolve();
     }
+    /**
+     * 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).
+     */
+    set subtitle(subtitle) {
+        this._subtitle = subtitle;
+    }
+    get subtitle() {
+        return this._subtitle;
+    }
     /**
      * The active calendar that is visible in the popup.
      *
@@ -109,7 +145,23 @@ export class DateRangePopupComponent {
      * When the opened calendar is active, returns `true`.
      */
     get isActive() {
-        return this.calendar && this.calendar.isActive;
+        // The actionsheet is expanding before the calendar gets activated
+        // and if we only check for calendar.isActive a blur event handler in the date-rage-input.ts will close the actionsheet
+        // TODO: Potentially the entire logic would need refactoring to avoid hacks like this one
+        return (this.calendar && this.calendar.isActive)
+            || (this.actionSheet && this.actionSheet.expanded);
+    }
+    /**
+     * @hidden
+     */
+    get isAdaptiveModeEnabled() {
+        return this.adaptiveMode === 'auto';
+    }
+    /**
+     * @hidden
+     */
+    get isAdaptive() {
+        return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
     }
     /**
      * Gets or sets the visibility state of the component.
@@ -128,13 +180,18 @@ export class DateRangePopupComponent {
         if (event.isDefaultPrevented()) {
             return;
         }
-        this._toggle(show);
+        this.toggleDateRange(show);
     }
     get show() {
         return this._show;
     }
     ngOnInit() {
         this.dateRangeService.registerPopup(this);
+        if (this.localization) {
+            this.localizationSubscriptions.add(this.localization
+                .changes
+                .subscribe(() => this.cdr.markForCheck()));
+        }
     }
     ngAfterViewInit() {
         this.calendarSubscriptions.add(this.contentCalendar.changes.subscribe((changes) => this.calendar = changes.first));
@@ -142,6 +199,7 @@ export class DateRangePopupComponent {
         if (isWindowAvailable()) {
             this.zone.runOutsideAngular(() => this.windowBlurSubscription = fromEvent(window, 'blur').subscribe(this.handleWindowBlur.bind(this)));
         }
+        this.renderer.setAttribute(this.actionSheet.element.nativeElement, 'style', '--kendo-actionsheet-height: 60vh; --kendo-actionsheet-max-height: none');
     }
     ngOnDestroy() {
         this.destroyPopup();
@@ -200,15 +258,15 @@ export class DateRangePopupComponent {
         return this.popupRef.popupElement.contains(document.activeElement);
     }
     /**
-     * Toggles the visibility of the popup.
-     * If you use the `toggle` method to show or hide the popup,
+     * Toggles the visibility of the popup or actionSheet.
+     * If you use the `toggle` method to show or hide the popup or actionSheet,
      * the `open` and `close` events do not fire.
      *
      * @param show The state of the popup.
      */
     toggle(show) {
         this.resolvedPromise.then(() => {
-            this._toggle((show === undefined) ? !this.show : show);
+            this.toggleDateRange((show === undefined) ? !this.show : show);
         });
     }
     /**
@@ -220,8 +278,31 @@ export class DateRangePopupComponent {
         this.show = false;
         this.cancel.emit();
     }
+    /**
+     * @hidden
+     */
+    handleAccept() {
+        this.dateRangeSelectionDirective.setRange(this.dateRangeService.selectionRange);
+        this.show = false;
+    }
+    /**
+     * @hidden
+     */
+    onResize() {
+        if (!this.show || this.windowSize === windowSize()) {
+            return;
+        }
+        ;
+        if (this.actionSheet.expanded) {
+            this.toggleActionSheet(false);
+        }
+        else {
+            this.togglePopup(false);
+        }
+        this.windowSize = windowSize();
+    }
     handleWindowBlur() {
-        if (!this.show) {
+        if (!this.show || this.actionSheet.expanded) {
             return;
         }
         if (hasObservers(this.close)) {
@@ -265,7 +346,7 @@ export class DateRangePopupComponent {
         }
         return appendTo === 'component' ? this.container : appendTo;
     }
-    _toggle(show) {
+    togglePopup(show) {
         this._show = show;
         if (this.popupRef) {
             this.destroyPopup();
@@ -297,27 +378,237 @@ export class DateRangePopupComponent {
             this.popupSubscriptions.unsubscribe();
         }
     }
+    toggleDateRange(show) {
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.toggleActionSheet(show);
+        }
+        else {
+            this.togglePopup(show);
+        }
+    }
+    toggleActionSheet(show) {
+        if (show === this._show) {
+            return;
+        }
+        if (show && !this.actionSheet.expanded) {
+            this.actionSheet.toggle();
+            this.updateActionSheetAdaptiveAppearance();
+        }
+        else if (!show && this.actionSheet.expanded) {
+            this.actionSheet.toggle();
+        }
+        this._show = show;
+    }
+    updateActionSheetAdaptiveAppearance() {
+        let element;
+        let animationContainer;
+        if (this.actionSheet) {
+            element = this.actionSheet['element'].nativeElement.querySelector('.k-actionsheet');
+            animationContainer = this.actionSheet['element'].nativeElement.querySelector('.k-child-animation-container');
+            if (this.windowSize === 'medium') {
+                this.renderer.removeClass(element, 'k-actionsheet-fullscreen');
+                this.renderer.removeStyle(animationContainer, 'height');
+            }
+            else if (this.windowSize === 'small') {
+                this.renderer.addClass(element, 'k-actionsheet-fullscreen');
+                this.renderer.setStyle(animationContainer, 'height', '100%');
+            }
+            this.renderer.addClass(element, 'k-adaptive-actionsheet');
+            this.renderer.addClass(element, 'k-actionsheet-bottom');
+            this.renderer.setStyle(animationContainer, 'bottom', '0px');
+        }
+    }
 }
-DateRangePopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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: "13.3.12", 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: `
+DateRangePopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1.PopupService }, { token: i2.DateRangeService }, { token: i0.ChangeDetectorRef }, { 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: "12.0.0", version: "13.3.12", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: { animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle" }, 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"
+
+            i18n-acceptLabel="kendo.daterangepopup.acceptLabel|The label for the Accept button in the timepicker component"
+            acceptLabel="Set time"
+
+            i18n-cancel="kendo.daterangepopup.cancel|The Cancel button text in the timepicker component"
+            cancel="Cancel"
+
+            i18n-cancelLabel="kendo.daterangepopup.cancelLabel|The label for the Cancel button in the timepicker component"
+            cancelLabel="Cancel changes"
+        >
+        </ng-container> 
         <ng-container #container></ng-container>
         <ng-template #defaultTemplate>
             <kendo-multiviewcalendar kendoDateRangeSelection></kendo-multiviewcalendar>
         </ng-template>
-    `, 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", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur", "focus", "focusCalendar"], exportAs: ["kendo-multiviewcalendar"] }], directives: [{ type: i4.DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }] });
+
+        <kendo-actionsheet 
+            #actionSheet
+            (overlayClick)="show=false"
+            (collapse)="onBlur.emit()"
+        >
+            <ng-template kendoActionSheetTemplate>
+                <!-- Resize sensor needs to be inside the template because the date-range-popup
+                element itself always has 0x0 size and does not trigger the sensor. 
+                Note: The popup in non-adaptive mode closes on window blur -->
+                <kendo-resize-sensor *ngIf="isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+                <div class="k-actionsheet-titlebar">
+                    <div class="k-actionsheet-titlebar-group k-hbox">
+                        <div class="k-actionsheet-title">
+                            <div class="k-text-center">{{ title }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
+                        </div>
+                        <div class="k-actionsheet-actions">
+                            <button
+                                kendoButton
+                                icon="x"
+                                [attr.title]="localization.get('clearTitle')"
+                                [svgIcon]="xIcon"
+                                fillMode="flat"
+                                size="large"
+                                innerCssClass="k-button-icon"
+                                (click)="show = false">
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="k-actionsheet-content !k-overflow-hidden">
+                    <div class="k-scrollable-wrap">
+                        <kendo-multiviewcalendar
+                            class="k-calendar-lg"
+                            orientation="vertical"
+                            #test
+                            kendoDateRangeSelection
+                            [shouldSetRange]="false">
+                        </kendo-multiviewcalendar>
+                    </div>
+                </div>
+                <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
+                    <button kendoButton 
+                        size="large"
+                        [attr.title]="localization.get('cancelLabel')"
+                        [attr.aria-label]="localization.get('cancelLabel')"
+                        (click)="show=false"
+                    >
+                        {{localization.get('cancel')}}
+                    </button>
+
+                    <button kendoButton
+                        size="large"
+                        themeColor="primary"
+                        [attr.title]="localization.get('acceptLabel')"
+                        [attr.aria-label]="localization.get('acceptLabel')"
+                        (click)="handleAccept()"
+                    >
+                        {{localization.get('accept')}}
+                    </button>
+                </div>
+            </ng-template>
+        </kendo-actionsheet>
+    `, 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", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur", "focus", "focusCalendar"], exportAs: ["kendo-multiviewcalendar"] }, { type: i5.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i6.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i7.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i8.DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }, { type: i9.DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd", "shouldSetRange"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }, { type: i5.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangePopupComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendo-daterange-popup',
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.daterangepopup'
+                        }
+                    ],
                     selector: 'kendo-daterange-popup',
                     template: `
+        <ng-container kendoDateRangePopupLocalizedMessages
+            i18n-accept="kendo.daterangepopup.accept|The Accept button text in the timepicker component"
+            accept="Set"
+
+            i18n-acceptLabel="kendo.daterangepopup.acceptLabel|The label for the Accept button in the timepicker component"
+            acceptLabel="Set time"
+
+            i18n-cancel="kendo.daterangepopup.cancel|The Cancel button text in the timepicker component"
+            cancel="Cancel"
+
+            i18n-cancelLabel="kendo.daterangepopup.cancelLabel|The label for the Cancel button in the timepicker component"
+            cancelLabel="Cancel changes"
+        >
+        </ng-container> 
         <ng-container #container></ng-container>
         <ng-template #defaultTemplate>
             <kendo-multiviewcalendar kendoDateRangeSelection></kendo-multiviewcalendar>
         </ng-template>
+
+        <kendo-actionsheet 
+            #actionSheet
+            (overlayClick)="show=false"
+            (collapse)="onBlur.emit()"
+        >
+            <ng-template kendoActionSheetTemplate>
+                <!-- Resize sensor needs to be inside the template because the date-range-popup
+                element itself always has 0x0 size and does not trigger the sensor. 
+                Note: The popup in non-adaptive mode closes on window blur -->
+                <kendo-resize-sensor *ngIf="isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+                <div class="k-actionsheet-titlebar">
+                    <div class="k-actionsheet-titlebar-group k-hbox">
+                        <div class="k-actionsheet-title">
+                            <div class="k-text-center">{{ title }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
+                        </div>
+                        <div class="k-actionsheet-actions">
+                            <button
+                                kendoButton
+                                icon="x"
+                                [attr.title]="localization.get('clearTitle')"
+                                [svgIcon]="xIcon"
+                                fillMode="flat"
+                                size="large"
+                                innerCssClass="k-button-icon"
+                                (click)="show = false">
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="k-actionsheet-content !k-overflow-hidden">
+                    <div class="k-scrollable-wrap">
+                        <kendo-multiviewcalendar
+                            class="k-calendar-lg"
+                            orientation="vertical"
+                            #test
+                            kendoDateRangeSelection
+                            [shouldSetRange]="false">
+                        </kendo-multiviewcalendar>
+                    </div>
+                </div>
+                <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
+                    <button kendoButton 
+                        size="large"
+                        [attr.title]="localization.get('cancelLabel')"
+                        [attr.aria-label]="localization.get('cancelLabel')"
+                        (click)="show=false"
+                    >
+                        {{localization.get('cancel')}}
+                    </button>
+
+                    <button kendoButton
+                        size="large"
+                        themeColor="primary"
+                        [attr.title]="localization.get('acceptLabel')"
+                        [attr.aria-label]="localization.get('acceptLabel')"
+                        (click)="handleAccept()"
+                    >
+                        {{localization.get('accept')}}
+                    </button>
+                </div>
+            </ng-template>
+        </kendo-actionsheet>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.PopupService }, { type: i2.DateRangeService }, { 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: i0.Renderer2 }, { type: i3.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -325,12 +616,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }] }]; }, propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container', { read: ViewContainerRef, static: false }]
+            }], actionSheet: [{
+                type: ViewChild,
+                args: ['actionSheet']
             }], defaultTemplate: [{
                 type: ViewChild,
                 args: ['defaultTemplate', { static: false }]
             }], contentTemplate: [{
                 type: ContentChild,
                 args: [DateRangePopupTemplateDirective, { static: false }]
+            }], dateRangeSelectionDirective: [{
+                type: ViewChild,
+                args: [DateRangeSelectionDirective, { static: false }]
             }], viewCalendar: [{
                 type: ViewChildren,
                 args: [MultiViewCalendarComponent]
@@ -351,6 +648,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], margin: [{
                 type: Input
+            }], adaptiveMode: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
             }], open: [{
                 type: Output
             }], close: [{

package/esm2020/daterange/date-range-selection.directive.mjs

@@ -30,6 +30,11 @@ export class DateRangeSelectionDirective {
          * 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 overview_multiviewcalendar %}#toc-events).
@@ -110,6 +115,25 @@ export class DateRangeSelectionDirective {
     ngOnDestroy() {
         this.calendarSubscriptions.unsubscribe();
     }
+    /**
+     * @hidden
+     */
+    handleChange(value) {
+        const service = this.dateRangeService;
+        const autoCorrect = this.autoCorrectOn === 'change' && this.shouldAutoCorrect(value);
+        const activeEnd = this.calendar.activeRangeEnd !== 'end' ? 'end' : (autoCorrect ? 'end' : 'start');
+        this.range = autoCorrect ? clampRange(value) : this.updateRange(value);
+        if (!isEqualRange(service.selectionRange, this.range)) {
+            this.acceptAndEmit(this.range);
+            service.setActiveRangeEnd(activeEnd);
+            if (this.shouldSetRange) {
+                this.setRange();
+            }
+        }
+    }
+    setRange(range) {
+        this.dateRangeService.setRange(this.range ? this.range : range);
+    }
     addSubscriptions(...subscriptions) {
         subscriptions.map(s => this.calendarSubscriptions.add(s));
     }
@@ -123,17 +147,6 @@ export class DateRangeSelectionDirective {
             this.dateRangeService.setRange(clampRange(start));
         }
     }
-    handleChange(value) {
-        const service = this.dateRangeService;
-        const autoCorrect = this.autoCorrectOn === 'change' && this.shouldAutoCorrect(value);
-        const activeEnd = this.calendar.activeRangeEnd !== 'end' ? 'end' : (autoCorrect ? 'end' : 'start');
-        const range = autoCorrect ? clampRange(value) : this.updateRange(value);
-        if (!isEqualRange(service.selectionRange, range)) {
-            this.acceptAndEmit(range);
-            service.setActiveRangeEnd(activeEnd);
-            service.setRange(range);
-        }
-    }
     handleHover(value) {
         if (this.hasCompleteRange()) {
             return;
@@ -178,7 +191,7 @@ export class DateRangeSelectionDirective {
     }
 }
 DateRangeSelectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.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 });
-DateRangeSelectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: { autoCorrectOn: "autoCorrectOn", selectionRange: "selectionRange", activeRangeEnd: "activeRangeEnd" }, outputs: { activeRangeEndChange: "activeRangeEndChange", selectionRangeChange: "selectionRangeChange" }, ngImport: i0 });
+DateRangeSelectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DateRangeSelectionDirective, 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: "13.3.12", ngImport: i0, type: DateRangeSelectionDirective, decorators: [{
             type: Directive,
             args: [{
@@ -192,6 +205,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], activeRangeEnd: [{
                 type: Input
+            }], shouldSetRange: [{
+                type: Input
             }], activeRangeEndChange: [{
                 type: Output
             }], selectionRangeChange: [{

package/esm2020/daterange/date-range.component.mjs

@@ -71,7 +71,7 @@ DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
 DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateRangeComponent, selector: "kendo-daterange", host: { listeners: { "keydown": "keydown($event)" }, properties: { "class.k-daterangepicker": "this.wrapperClass" } }, 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: i2.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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2.DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "title", "subtitle"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/daterange/date-range.module.mjs

@@ -14,6 +14,9 @@ import { DateRangePopupComponent } from './date-range-popup.component';
 import { DateRangePopupTemplateDirective } from './date-range-popup-template.directive';
 import { DateRangeSelectionDirective } from './date-range-selection.directive';
 import { EventsModule } from '@progress/kendo-angular-common';
+import { AdaptiveModule } from '../common/adaptive.module';
+import { DateRangePopupCustomMessagesComponent } from './localization/daterange-popup-custom-messages.component';
+import { DateRangePopupLocalizedMessagesDirective } from './localization/daterange-popup-localized-messages.directive';
 import * as i0 from "@angular/core";
 const COMPONENT_DIRECTIVES = [
     DateRangeComponent,
@@ -21,13 +24,16 @@ const COMPONENT_DIRECTIVES = [
     DateRangePopupTemplateDirective,
     DateRangeSelectionDirective,
     DateRangeStartInputDirective,
-    DateRangeEndInputDirective
+    DateRangeEndInputDirective,
+    DateRangePopupCustomMessagesComponent,
+    DateRangePopupLocalizedMessagesDirective
 ];
 const COMPONENT_MODULES = [
     MultiViewCalendarModule,
     DateInputModule,
     PopupModule,
-    EventsModule
+    EventsModule,
+    AdaptiveModule
 ];
 /**
  * The exported package module.
@@ -75,15 +81,20 @@ DateRangeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         DateRangePopupTemplateDirective,
         DateRangeSelectionDirective,
         DateRangeStartInputDirective,
-        DateRangeEndInputDirective], imports: [CommonModule, MultiViewCalendarModule,
+        DateRangeEndInputDirective,
+        DateRangePopupCustomMessagesComponent,
+        DateRangePopupLocalizedMessagesDirective], imports: [CommonModule, MultiViewCalendarModule,
         DateInputModule,
         PopupModule,
-        EventsModule], exports: [DateRangeComponent,
+        EventsModule,
+        AdaptiveModule], exports: [DateRangeComponent,
         DateRangePopupComponent,
         DateRangePopupTemplateDirective,
         DateRangeSelectionDirective,
         DateRangeStartInputDirective,
-        DateRangeEndInputDirective] });
+        DateRangeEndInputDirective,
+        DateRangePopupCustomMessagesComponent,
+        DateRangePopupLocalizedMessagesDirective] });
 DateRangeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangeModule, imports: [[CommonModule, COMPONENT_MODULES]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateRangeModule, decorators: [{
             type: NgModule,