@progress/kendo-angular-dateinputs 21.4.1 → 22.0.0-develop.1

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

@@ -1,1051 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 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, 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';
-import { MultiViewCalendarComponent } from '../calendar/multiview-calendar.component';
-import { PreventableEvent } from '../preventable-event';
-import { isDocumentAvailable, guid, Keys, hasObservers, ResizeSensorComponent, normalizeKeys } from '@progress/kendo-angular-common';
-import { AdaptiveService } from '@progress/kendo-angular-utils';
-import { Subscription, fromEvent, merge } from 'rxjs';
-import { filter, map } from 'rxjs/operators';
-import { isWindowAvailable } from '../util';
-import { isPresent } from '../common/utils';
-import { checkIcon } from '@progress/kendo-svg-icons';
-import { DateRangeSelectionDirective } from './date-range-selection.directive';
-import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/kendo-angular-navigation';
-import { ButtonComponent } from '@progress/kendo-angular-buttons';
-import { DateRangePopupLocalizedMessagesDirective } from './localization/daterange-popup-localized-messages.directive';
-import { CalendarViewEnum } from '../calendar/models/view.enum';
-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 "@progress/kendo-angular-l10n";
-import * as i4 from "@progress/kendo-angular-utils";
-/**
- * Represents the Kendo UI DateRangePopup component for Angular.
- *
- * @example
- * ```ts
- * import { DateInputsModule, DateRangeService } from '@progress/kendo-angular-dateinputs';
- *
- * _@Component({
- * providers: [DateRangeService],
- * selector: 'my-app',
- * template: `
- *  <button #anchor (click)="popup.toggle()">Toggle</button>
- *  <kendo-daterange-popup [anchor]="anchor" #popup></kendo-daterange-popup>
- * `
- * })
- * export class AppComponent {
- * }
- * ```
- */
-export class DateRangePopupComponent {
-    popupService;
-    dateRangeService;
-    zone;
-    renderer;
-    localization;
-    cdr;
-    rtl;
-    adaptiveService;
-    container;
-    actionSheet;
-    defaultTemplate;
-    contentTemplate;
-    dateRangeSelectionDirective;
-    viewCalendar;
-    contentCalendar;
-    /**
-     * @hidden
-     *
-     * Determines whether to display the MultiViewCalendar header.
-     */
-    showCalendarHeader = true;
-    /**
-     * Specifies the focused date of the MultiViewCalendar component.
-     * Defines which date receives focus when the component loads ([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;
-    /**
-     * Specifies the dates in the MultiViewCalendar that you want to disable ([see example]({% slug disabled_dates_multiviewcalendar %})).
-     */
-    disabledDates;
-    /**
-     * Specifies the initial view that the MultiViewCalendar displays when it loads ([see example]({% slug viewoptions_multiviewcalendar %})).
-     * By default, the active view is `month`.
-     *
-     * You have to set `activeView` within the `topView`-`bottomView` range.
-     *
-     * @default 'month
-     */
-    activeView = CalendarViewEnum[CalendarViewEnum.month];
-    /**
-     * Specifies the lowest view level that users can navigate to ([see example](slug:viewdepth_multiviewcalendar)).
-     *
-     * @default 'month'
-     */
-    bottomView = CalendarViewEnum[CalendarViewEnum.month];
-    /**
-     * Specifies the highest view level that users can navigate to ([see example](slug:viewdepth_multiviewcalendar)).
-     *
-     * @default 'century'
-     */
-    topView = CalendarViewEnum[CalendarViewEnum.century];
-    /**
-     * Specifies the minimum date that users can select ([see example]({% slug dates_multiviewcalendar %}#toc-focused-dates)).
-     *
-     * @default '1900-01-01'
-     */
-    min;
-    /**
-     * Specifies the maximum date that users can select ([see example]({% slug dates_multiviewcalendar %}#toc-focused-dates)).
-     *
-     * @default '2099-12-31'
-     */
-    max;
-    /**
-     * Determines whether users can select dates in reverse order.
-     * When you set `allowReverse` to `true`, the component does not validate if the start date comes after the end date.
-     *
-     * @default false
-     */
-    allowReverse = false;
-    /**
-     * Determines whether to animate transitions when users navigate between views.
-     *
-     * @default false
-     */
-    animateNavigation = false;
-    /**
-     * Determines whether the MultiViewCalendar is interactive ([see example]({% slug disabled_multiviewcalendar %})).
-     * When you set `disabled` to `true`, users cannot interact with the component.
-     *
-     * @default false
-     */
-    disabled = false;
-    /**
-     * Specifies the number of calendar views to display side by side.
-     *
-     * @default 2
-     */
-    views = 2;
-    /**
-     * Determines whether to display week numbers in the `month` view ([see example]({% slug weeknumcolumn_multiviewcalendar %})).
-     *
-     * @default false
-     */
-    weekNumber = false;
-    /**
-     * Controls the popup animations.
-     * When you set `animate` to `true`, the popup displays opening and closing animations.
-     * For more information about controlling the popup animations,
-     * refer to the article on [animations]({% slug animations_popup %}).
-     *
-     * @default true
-     */
-    animate = true;
-    /**
-     * Specifies the element that serves as an anchor for the popup.
-     * The popup opens next to this element.
-     * For more information, refer to the section on
-     * [aligning to specific components]({% slug alignmentpositioning_popup %}#toc-aligning-to-components).
-     */
-    anchor;
-    /**
-     * Specifies the alignment point for the anchor element.
-     * For more information, refer to the section on
-     * [positioning]({% slug alignmentpositioning_popup %}#toc-positioning).
-     */
-    anchorAlign;
-    /**
-     * Determines whether to display a header for each view ([see example]({% slug viewheader_multiviewcalendar %})).
-     * For example, displays the month name in the month view.
-     *
-     * @default false
-     */
-    showViewHeader = false;
-    /**
-     * Determines whether to display days from adjacent months in the current month view ([see example]({% slug viewoptions_multiviewcalendar %}#toc-displaying-other-month-days)).
-     *
-     * @default false
-     */
-    showOtherMonthDays = false;
-    /**
-     * Specifies where to render the popup container.
-     * By default, the popup renders in the root component.
-     *
-     * @default 'root'
-     */
-    appendTo;
-    /**
-     * Configures how the popup behaves when it encounters viewport boundaries.
-     * For more information, refer to the article on
-     * [viewport boundary detection]({% slug viewportboundarydetection_popup %}).
-     *
-     * @default { horizontal: 'fit', vertical: 'flip' }
-     */
-    collision = { horizontal: 'fit', vertical: 'flip' };
-    /**
-     * Specifies the alignment point for the popup element.
-     * For more information, refer to the section on
-     * [positioning]({% slug alignmentpositioning_popup %}#toc-positioning).
-     */
-    popupAlign;
-    /**
-     * Specifies the margin around the popup in pixels.
-     * Creates empty space between the popup and its anchor element.
-     */
-    margin;
-    /**
-     * Determines whether the component uses adaptive rendering for different screen sizes.
-     * By default, adaptive rendering is disabled.
-     *
-     * @default 'none'
-     */
-    adaptiveMode = 'none';
-    /**
-     * Specifies the title text for the input element and the header of the action sheet.
-     * Applies only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
-     *
-     * @default ""
-     */
-    adaptiveTitle = "";
-    /**
-     * Specifies the subtitle text displayed in the header of the action sheet.
-     * Applies only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
-     *
-     * @default ""
-     */
-    adaptiveSubtitle = "";
-    /**
-     * @hidden
-     *
-     * TODO: Make visible when the Infinite Calendar is fixed to set properly the size option.
-     * Sets the size of the component.
-     * @default 'medium'
-     */
-    size;
-    /**
-     * Fires when the popup is about to open ([see example](slug:popup_daterange#toc-events)).
-     * You can prevent this event to keep the popup closed.
-     */
-    open = new EventEmitter();
-    /**
-     * Fires when the popup is about to close ([see example](slug:popup_daterange#toc-events)).
-     * You can prevent this event to keep the popup open.
-     */
-    close = new EventEmitter();
-    /**
-     * Fires when the calendar element loses focus ([see example](slug:popup_daterange#toc-events)).
-     */
-    onBlur = new EventEmitter();
-    /**
-     * Fires when the calendar element receives focus ([see example](slug:popup_daterange#toc-events)).
-     */
-    onFocus = new EventEmitter();
-    /**
-     * Fires when the popup closes due to an `ESC` keypress or when it leaves the viewport ([see example](slug:popup_daterange#toc-events)).
-     */
-    cancel = new EventEmitter();
-    /**
-     * Gets the active calendar that displays in the popup.
-     *
-     * When the popup is closed, the property returns `null`.
-     */
-    get calendar() {
-        return this._calendar;
-    }
-    set calendar(calendar) {
-        this._calendar = calendar;
-        this.subscribeFocusBlur(calendar);
-    }
-    /**
-     * Gets the active state of the component.
-     * Returns `true` when the opened calendar is active.
-     */
-    get 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';
-    }
-    /**
-     * @hidden
-     */
-    popupRef;
-    /**
-     * @hidden
-     */
-    popupUID = guid();
-    /**
-     * @hidden
-     */
-    checkIcon = checkIcon;
-    /**
-     * @hidden
-     */
-    windowSize;
-    /**
-     * Gets or sets the visibility state of the component.
-     */
-    set show(show) {
-        if (this._show === show) {
-            return;
-        }
-        const event = new PreventableEvent();
-        if (show) {
-            this.open.emit(event);
-        }
-        else {
-            this.close.emit(event);
-        }
-        if (event.isDefaultPrevented()) {
-            return;
-        }
-        this.toggleDateRange(show);
-    }
-    get show() {
-        return this._show;
-    }
-    /**
-     * @hidden
-     */
-    handleAccept() {
-        this.dateRangeService.setRange(this._rangeSelection);
-        this.show = false;
-    }
-    activateSubscription;
-    blurSubscription;
-    focusSubscription;
-    calendarSubscriptions = new Subscription();
-    popupSubscriptions = new Subscription();
-    windowBlurSubscription;
-    localizationSubscriptions = new Subscription();
-    resolvedPromise = Promise.resolve();
-    _calendar;
-    _show;
-    _rangeSelection;
-    constructor(popupService, dateRangeService, zone, renderer, localization, cdr, rtl, adaptiveService) {
-        this.popupService = popupService;
-        this.dateRangeService = dateRangeService;
-        this.zone = zone;
-        this.renderer = renderer;
-        this.localization = localization;
-        this.cdr = cdr;
-        this.rtl = rtl;
-        this.adaptiveService = adaptiveService;
-    }
-    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;
-            this.actionSheet.titleId = changes.first?.headerId;
-            this.cdr.detectChanges();
-        }));
-        this.calendarSubscriptions.add(this.viewCalendar.changes.subscribe((changes) => {
-            this.calendar = changes.first;
-            this.actionSheet.titleId = changes.first?.headerId;
-            this.cdr.detectChanges();
-        }));
-        this.calendarSubscriptions.add(this.dateRangeService.startInput$?.value?.valueChange.subscribe((res) => {
-            if (this.calendar) {
-                if (!res && this.dateRangeService.selectionRange.end) {
-                    this.calendar.shouldHoverWhenNoStart = true;
-                }
-                else {
-                    this.calendar.shouldHoverWhenNoStart = false;
-                }
-            }
-        }));
-        if (isWindowAvailable()) {
-            this.zone.runOutsideAngular(() => this.windowBlurSubscription = fromEvent(window, 'blur').subscribe(this.handleWindowBlur.bind(this)));
-        }
-    }
-    ngOnDestroy() {
-        this.destroyPopup();
-        this.calendarSubscriptions.unsubscribe();
-        if (this.activateSubscription) {
-            this.activateSubscription.unsubscribe();
-        }
-        if (this.blurSubscription) {
-            this.blurSubscription.unsubscribe();
-            this.focusSubscription.unsubscribe();
-        }
-        if (this.windowBlurSubscription) {
-            this.windowBlurSubscription.unsubscribe();
-        }
-    }
-    /**
-     * @hidden
-     *
-     */
-    onRangeSelectionChange(rangeSelection) {
-        this.dateRangeService.setActiveRangeEnd(rangeSelection.activeRangeEnd);
-        if (!this.isAdaptive) {
-            this.dateRangeService.setRange(rangeSelection.selectionRange);
-        }
-        else {
-            this._rangeSelection = rangeSelection.selectionRange;
-        }
-    }
-    /**
-     * Opens the popup component and focuses the calendar.
-     */
-    activate() {
-        if (this.show === true) {
-            return;
-        }
-        if (this.activateSubscription) {
-            this.activateSubscription.unsubscribe();
-        }
-        this.show = true;
-        this.cdr.markForCheck();
-        this.zone.runOutsideAngular(() => {
-            this.activateSubscription = merge(this.contentCalendar.changes, this.viewCalendar.changes).pipe(filter(changes => changes && changes.first), map(changes => changes.first)).subscribe((calendar) => setTimeout(() => {
-                calendar.focus();
-                this.addCalendarSubscription(calendar);
-            }));
-        });
-    }
-    /**
-     * Focuses the calendar if it is available.
-     */
-    focus() {
-        if (this.calendar) {
-            this.calendar.focus();
-        }
-    }
-    /**
-     * Checks if a focused element is inside the popup.
-     *
-     * @returns {boolean} Returns `true` if the focused element is inside the popup.
-     */
-    hasActiveContent() {
-        if (!isDocumentAvailable() || !this.popupRef) {
-            return false;
-        }
-        return this.popupRef.popupElement.contains(document.activeElement);
-    }
-    /**
-     * Toggles the visibility of the popup or action sheet.
-     * When you use the `toggle` method to show or hide the popup or action sheet,
-     * the `open` and `close` events do not fire.
-     *
-     * @param {boolean} show The state of the popup.
-     */
-    toggle(show) {
-        this.resolvedPromise.then(() => {
-            this.toggleDateRange((show === undefined) ? !this.show : show);
-        });
-    }
-    /**
-     * @hidden
-     *
-     * Closes the popup and triggers the `cancel` event.
-     */
-    cancelPopup() {
-        this.show = false;
-        this.cancel.emit();
-    }
-    /**
-     * @hidden
-     */
-    onResize() {
-        const currentWindowSize = this.adaptiveService.size;
-        if (!this.show || this.windowSize === currentWindowSize) {
-            return;
-        }
-        if (this.actionSheet.expanded) {
-            this.toggleActionSheet(false);
-        }
-        else {
-            this.togglePopup(false);
-        }
-        this.windowSize = currentWindowSize;
-    }
-    /**
-     * @hidden
-     */
-    closePopup(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.toggle(false);
-        if (this.dateRangeService.activeRangeEnd === 'start' || !this.dateRangeService.activeRangeEnd) {
-            this.dateRangeService.startInput$.value.focus();
-        }
-        else {
-            this.dateRangeService.endInput$.value.focus();
-        }
-    }
-    /**
-     * @hidden
-     */
-    handleTab(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (this.dateRangeService.activeRangeEnd === 'start' || !this.dateRangeService.activeRangeEnd) {
-            this.dateRangeService.setActiveRangeEnd('end');
-        }
-        else {
-            this.dateRangeService.endInput$.value.focus();
-        }
-    }
-    /**
-     * @hidden
-     */
-    handleShiftTab(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (this.dateRangeService.activeRangeEnd === 'end') {
-            this.dateRangeService.setActiveRangeEnd('start');
-        }
-        else {
-            this.dateRangeService.startInput$.value.focus();
-        }
-    }
-    handleWindowBlur() {
-        if (!this.show || this.actionSheet.expanded) {
-            return;
-        }
-        if (hasObservers(this.close)) {
-            this.zone.run(() => this.show = false);
-        }
-        else {
-            this.show = false;
-        }
-    }
-    handleMouseLeave() {
-        this.dateRangeService.setRange(this.dateRangeService.selectionRange);
-    }
-    handleKeydown(event) {
-        const { altKey } = event;
-        const code = normalizeKeys(event);
-        if (code === Keys.Escape || (altKey && code === Keys.ArrowUp)) {
-            this.zone.run(() => this.cancelPopup());
-        }
-    }
-    subscribeFocusBlur(calendar) {
-        if (this.blurSubscription) {
-            this.blurSubscription.unsubscribe();
-            this.focusSubscription.unsubscribe();
-        }
-        if (!calendar) {
-            return;
-        }
-        const calendarElement = calendar.element.nativeElement.querySelector('.k-calendar-view');
-        this.blurSubscription = fromEvent(calendarElement, 'blur').subscribe(() => this.onBlur.emit());
-        this.focusSubscription = fromEvent(calendarElement, 'focus').subscribe(() => this.onFocus.emit());
-    }
-    addPopupSubscriptions(...subscriptions) {
-        if (!isPresent(this.popupSubscriptions)) {
-            this.popupSubscriptions = new Subscription();
-        }
-        subscriptions.forEach(s => this.popupSubscriptions.add(s));
-    }
-    get _appendTo() {
-        const appendTo = this.appendTo;
-        if (!appendTo || appendTo === 'root') {
-            return undefined;
-        }
-        return appendTo === 'component' ? this.container : appendTo;
-    }
-    togglePopup(show) {
-        this._show = show;
-        if (this.popupRef) {
-            this.destroyPopup();
-        }
-        if (this._show) {
-            const direction = this.rtl ? 'right' : 'left';
-            this.popupRef = this.popupService.open({
-                anchor: this.anchor,
-                anchorAlign: this.anchorAlign || { vertical: 'bottom', horizontal: direction },
-                animate: this.animate,
-                appendTo: this._appendTo,
-                collision: this.collision,
-                content: (this.contentTemplate || {}).templateRef || this.defaultTemplate,
-                margin: this.margin,
-                popupClass: 'k-calendar-container k-daterangepicker-popup',
-                popupAlign: this.popupAlign || { vertical: 'top', horizontal: direction },
-                positionMode: 'absolute'
-            });
-            const { popupElement, popupAnchorViewportLeave } = this.popupRef;
-            this.renderer.setAttribute(popupElement.querySelector('.k-popup'), 'id', this.popupUID);
-            this.addPopupSubscriptions(this.zone.runOutsideAngular(() => fromEvent(popupElement, 'keydown').subscribe(this.handleKeydown.bind(this))), fromEvent(popupElement, 'mouseleave').subscribe(this.handleMouseLeave.bind(this)), popupAnchorViewportLeave.subscribe(() => this.cancelPopup()));
-        }
-    }
-    destroyPopup() {
-        if (isPresent(this.popupRef)) {
-            this.popupRef.close();
-            this.popupRef = null;
-        }
-        if (isPresent(this.popupSubscriptions)) {
-            this.popupSubscriptions.unsubscribe();
-        }
-    }
-    toggleDateRange(show) {
-        this.windowSize = this.adaptiveService.size;
-        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.renderer.setAttribute(this.actionSheet.element.nativeElement, 'id', this.popupUID);
-        }
-        else if (!show && this.actionSheet.expanded) {
-            this.actionSheet.toggle();
-        }
-        this._show = show;
-    }
-    addCalendarSubscription = (calendar) => {
-        this.calendarSubscriptions.add(calendar.viewList.focusedCellChange.subscribe((id) => {
-            this.dateRangeService.setActiveDescendent(id);
-        }));
-    };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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 }, { token: i4.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", 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"
-        
-          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"
-        
-          i18n-adaptiveCloseButtonTitle="kendo.daterangepopup.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
-          adaptiveCloseButtonTitle="Close"
-          >
-        </ng-container>
-        <ng-container #container></ng-container>
-        <ng-template #defaultTemplate>
-          <kendo-multiviewcalendar
-            [activeView]="activeView"
-            [bottomView]="bottomView"
-            [animateNavigation]="animateNavigation"
-            [disabled]="disabled"
-            orientation="horizontal"
-            [views]="views"
-            [weekNumber]="weekNumber"
-            [topView]="topView"
-            [disabledDates]="disabledDates"
-            [min]="min"
-            [max]="max"
-            [showCalendarHeader]="showCalendarHeader"
-            [focusedDate]="focusedDate"
-            [allowReverse]="allowReverse"
-            [showViewHeader]="showViewHeader"
-            [showOtherMonthDays]="showOtherMonthDays"
-            selection="range"
-            [size]="size"
-            [value]="dateRangeService.selectionRange"
-            (onClosePopup)="closePopup($event)"
-            (onTabPress)="handleTab($event)"
-            (onShiftTabPress)="handleShiftTab($event)"
-            (rangeSelectionChange)="onRangeSelectionChange($event)"
-          ></kendo-multiviewcalendar>
-        </ng-template>
-        
-        <kendo-actionsheet
-          #actionSheet
-          (overlayClick)="show=false"
-          (collapse)="onBlur.emit()"
-            [cssClass]="{
-                'k-adaptive-actionsheet': true,
-                'k-actionsheet-fullscreen': windowSize === 'small',
-                'k-actionsheet-bottom': windowSize === 'medium'
-            }"
-            [cssStyle]="{
-                height: windowSize === 'small' ? '100vh' : '60vh'
-            }"
-          >
-          <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 -->
-            @if (isAdaptiveModeEnabled) {
-              <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-            }
-            <div class="k-actionsheet-titlebar">
-              <div class="k-actionsheet-titlebar-group">
-                <div class="k-actionsheet-title">
-                  @if (adaptiveTitle) {
-                    <div class="k-text-center">{{ adaptiveTitle }}</div>
-                  }
-                  @if (adaptiveSubtitle) {
-                    <div class="k-actionsheet-subtitle k-text-center">{{ adaptiveSubtitle }}</div>
-                  }
-                </div>
-                <div class="k-actionsheet-actions">
-                  <button
-                    kendoButton
-                    type="button"
-                    icon="check"
-                    [attr.title]="localization.get('adaptiveCloseButtonTitle')"
-                    [svgIcon]="checkIcon"
-                    fillMode="flat"
-                    themeColor="primary"
-                    [tabIndex]="-1"
-                    size="large"
-                    innerCssClass="k-button-icon"
-                    (click)="handleAccept()">
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div class="k-actionsheet-content">
-              <div class="k-scrollable-wrap">
-                <kendo-multiviewcalendar
-                  size="large"
-                  [animateNavigation]="animateNavigation"
-                  [disabled]="disabled"
-                  orientation="vertical"
-                  [views]="views"
-                  [weekNumber]="weekNumber"
-                  [disabledDates]="disabledDates"
-                  [activeView]="activeView"
-                  [bottomView]="bottomView"
-                  [topView]="topView"
-                  [min]="min"
-                  [max]="max"
-                  [showCalendarHeader]="showCalendarHeader"
-                  [focusedDate]="focusedDate"
-                  [allowReverse]="allowReverse"
-                  [showViewHeader]="showViewHeader"
-                  [showOtherMonthDays]="showOtherMonthDays"
-                  [focusedDate]="dateRangeService.focusedDate"
-                  [value]="dateRangeService.selectionRange"
-                  selection="range"
-                  (rangeSelectionChange)="onRangeSelectionChange($event)"
-                  >
-                </kendo-multiviewcalendar>
-              </div>
-            </div>
-            <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
-              <button kendoButton
-                class="k-time-cancel"
-                type="button"
-                size="large"
-                [attr.title]="localization.get('cancelLabel')"
-                [attr.aria-label]="localization.get('cancelLabel')"
-                (click)="show=false"
-                >
-                {{localization.get('cancel')}}
-              </button>
-        
-              <button kendoButton
-                class="k-time-accept"
-                type="button"
-                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, 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: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { 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: "18.2.14", 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"
-        
-          i18n-adaptiveCloseButtonTitle="kendo.daterangepopup.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
-          adaptiveCloseButtonTitle="Close"
-          >
-        </ng-container>
-        <ng-container #container></ng-container>
-        <ng-template #defaultTemplate>
-          <kendo-multiviewcalendar
-            [activeView]="activeView"
-            [bottomView]="bottomView"
-            [animateNavigation]="animateNavigation"
-            [disabled]="disabled"
-            orientation="horizontal"
-            [views]="views"
-            [weekNumber]="weekNumber"
-            [topView]="topView"
-            [disabledDates]="disabledDates"
-            [min]="min"
-            [max]="max"
-            [showCalendarHeader]="showCalendarHeader"
-            [focusedDate]="focusedDate"
-            [allowReverse]="allowReverse"
-            [showViewHeader]="showViewHeader"
-            [showOtherMonthDays]="showOtherMonthDays"
-            selection="range"
-            [size]="size"
-            [value]="dateRangeService.selectionRange"
-            (onClosePopup)="closePopup($event)"
-            (onTabPress)="handleTab($event)"
-            (onShiftTabPress)="handleShiftTab($event)"
-            (rangeSelectionChange)="onRangeSelectionChange($event)"
-          ></kendo-multiviewcalendar>
-        </ng-template>
-        
-        <kendo-actionsheet
-          #actionSheet
-          (overlayClick)="show=false"
-          (collapse)="onBlur.emit()"
-            [cssClass]="{
-                'k-adaptive-actionsheet': true,
-                'k-actionsheet-fullscreen': windowSize === 'small',
-                'k-actionsheet-bottom': windowSize === 'medium'
-            }"
-            [cssStyle]="{
-                height: windowSize === 'small' ? '100vh' : '60vh'
-            }"
-          >
-          <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 -->
-            @if (isAdaptiveModeEnabled) {
-              <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-            }
-            <div class="k-actionsheet-titlebar">
-              <div class="k-actionsheet-titlebar-group">
-                <div class="k-actionsheet-title">
-                  @if (adaptiveTitle) {
-                    <div class="k-text-center">{{ adaptiveTitle }}</div>
-                  }
-                  @if (adaptiveSubtitle) {
-                    <div class="k-actionsheet-subtitle k-text-center">{{ adaptiveSubtitle }}</div>
-                  }
-                </div>
-                <div class="k-actionsheet-actions">
-                  <button
-                    kendoButton
-                    type="button"
-                    icon="check"
-                    [attr.title]="localization.get('adaptiveCloseButtonTitle')"
-                    [svgIcon]="checkIcon"
-                    fillMode="flat"
-                    themeColor="primary"
-                    [tabIndex]="-1"
-                    size="large"
-                    innerCssClass="k-button-icon"
-                    (click)="handleAccept()">
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div class="k-actionsheet-content">
-              <div class="k-scrollable-wrap">
-                <kendo-multiviewcalendar
-                  size="large"
-                  [animateNavigation]="animateNavigation"
-                  [disabled]="disabled"
-                  orientation="vertical"
-                  [views]="views"
-                  [weekNumber]="weekNumber"
-                  [disabledDates]="disabledDates"
-                  [activeView]="activeView"
-                  [bottomView]="bottomView"
-                  [topView]="topView"
-                  [min]="min"
-                  [max]="max"
-                  [showCalendarHeader]="showCalendarHeader"
-                  [focusedDate]="focusedDate"
-                  [allowReverse]="allowReverse"
-                  [showViewHeader]="showViewHeader"
-                  [showOtherMonthDays]="showOtherMonthDays"
-                  [focusedDate]="dateRangeService.focusedDate"
-                  [value]="dateRangeService.selectionRange"
-                  selection="range"
-                  (rangeSelectionChange)="onRangeSelectionChange($event)"
-                  >
-                </kendo-multiviewcalendar>
-              </div>
-            </div>
-            <div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
-              <button kendoButton
-                class="k-time-cancel"
-                type="button"
-                size="large"
-                [attr.title]="localization.get('cancelLabel')"
-                [attr.aria-label]="localization.get('cancelLabel')"
-                (click)="show=false"
-                >
-                {{localization.get('cancel')}}
-              </button>
-        
-              <button kendoButton
-                class="k-time-accept"
-                type="button"
-                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>
-        `,
-                    standalone: true,
-                    imports: [DateRangePopupLocalizedMessagesDirective, MultiViewCalendarComponent, ActionSheetComponent, ActionSheetTemplateDirective, ResizeSensorComponent, ButtonComponent]
-                }]
-        }], ctorParameters: () => [{ type: i1.PopupService }, { type: i2.DateRangeService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i3.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [RTL]
-                }] }, { type: i4.AdaptiveService }], 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]
-            }], contentCalendar: [{
-                type: ContentChildren,
-                args: [MultiViewCalendarComponent]
-            }], showCalendarHeader: [{
-                type: Input
-            }], focusedDate: [{
-                type: Input
-            }], disabledDates: [{
-                type: Input
-            }], activeView: [{
-                type: Input
-            }], bottomView: [{
-                type: Input
-            }], topView: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], allowReverse: [{
-                type: Input
-            }], animateNavigation: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], views: [{
-                type: Input
-            }], weekNumber: [{
-                type: Input
-            }], animate: [{
-                type: Input
-            }], anchor: [{
-                type: Input
-            }], anchorAlign: [{
-                type: Input
-            }], showViewHeader: [{
-                type: Input
-            }], showOtherMonthDays: [{
-                type: Input
-            }], appendTo: [{
-                type: Input
-            }], collision: [{
-                type: Input
-            }], popupAlign: [{
-                type: Input
-            }], margin: [{
-                type: Input
-            }], adaptiveMode: [{
-                type: Input
-            }], adaptiveTitle: [{
-                type: Input
-            }], adaptiveSubtitle: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], open: [{
-                type: Output
-            }], close: [{
-                type: Output
-            }], onBlur: [{
-                type: Output,
-                args: ['blur']
-            }], onFocus: [{
-                type: Output,
-                args: ['focus']
-            }], cancel: [{
-                type: Output
-            }] } });