/**----------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the project root for more information *-------------------------------------------------------------------------------------------*/ import { ChangeDetectorRef, ElementRef, EventEmitter, TemplateRef, NgZone, OnInit, OnDestroy, ViewContainerRef, QueryList, Renderer2 } from '@angular/core'; import { LocalizationService } from '@progress/kendo-angular-l10n'; import { Align, Collision, Margin, PopupAnimation, PopupService, PopupRef } 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 { AdaptiveSize, AdaptiveService } from '@progress/kendo-angular-utils'; import { AdaptiveMode } from '../util'; import { SVGIcon } from '@progress/kendo-svg-icons'; import { DateRangeSelectionDirective } from './date-range-selection.directive'; import { ActionSheetComponent } from '@progress/kendo-angular-navigation'; import { DateInputSize } from '../common/models/size'; import { CalendarView } from '../calendar/models/view.type'; import { Day } from '@progress/kendo-date-math'; import { SelectionRange } from '../calendar/models/selection-range.interface'; import * as i0 from "@angular/core"; /** * 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: ` * * * ` * }) * export class AppComponent { * } * ``` */ export declare class DateRangePopupComponent implements OnInit, OnDestroy { private popupService; dateRangeService: DateRangeService; private zone; private renderer; localization: LocalizationService; private cdr; private rtl; private adaptiveService; container: ViewContainerRef; actionSheet: ActionSheetComponent; defaultTemplate: TemplateRef; contentTemplate: DateRangePopupTemplateDirective; dateRangeSelectionDirective: DateRangeSelectionDirective; viewCalendar: QueryList; contentCalendar: QueryList; /** * @hidden * * Determines whether to display the MultiViewCalendar header. */ showCalendarHeader: boolean; /** * Specifies the focused date of the MultiViewCalendar component. * Defines which date receives focus when the component loads ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/dates#focused-dates)). * * If the MultiViewCalendar is out of the min or max range, it normalizes the defined `focusedDate`. */ focusedDate: Date; /** * Specifies the dates in the MultiViewCalendar that you want to disable ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/disabled-dates)). */ disabledDates: ((date: Date) => boolean) | Date[] | Day[]; /** * Specifies the initial view that the MultiViewCalendar displays when it loads ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/view-options)). * By default, the active view is `month`. * * You have to set `activeView` within the `topView`-`bottomView` range. * * @default 'month */ activeView: CalendarView; /** * Specifies the lowest view level that users can navigate to ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/view-depth)). * * @default 'month' */ bottomView: CalendarView; /** * Specifies the highest view level that users can navigate to ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/view-depth)). * * @default 'century' */ topView: CalendarView; /** * Specifies the minimum date that users can select ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/dates#focused-dates)). * * @default '1900-01-01' */ min: Date; /** * Specifies the maximum date that users can select ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/dates#focused-dates)). * * @default '2099-12-31' */ max: Date; /** * 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: boolean; /** * Determines whether to animate transitions when users navigate between views. * * @default false */ animateNavigation: boolean; /** * Determines whether the MultiViewCalendar is interactive ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/disabled-state)). * When you set `disabled` to `true`, users cannot interact with the component. * * @default false */ disabled: boolean; /** * Specifies the number of calendar views to display side by side. * * @default 2 */ views: number; /** * Determines whether to display week numbers in the `month` view ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/week-num-column)). * * @default false */ weekNumber: boolean; /** * 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](https://www.telerik.com/kendo-angular-ui/components/popup/animations). * * @default true */ animate: boolean | PopupAnimation; /** * 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](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#aligning-to-components). */ anchor: ElementRef; /** * Specifies the alignment point for the anchor element. * For more information, refer to the section on * [positioning](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning). */ anchorAlign: Align; /** * Determines whether to display a header for each view ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/view-header)). * For example, displays the month name in the month view. * * @default false */ showViewHeader: boolean; /** * Determines whether to display days from adjacent months in the current month view ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/view-options#displaying-other-month-days)). * * @default false */ showOtherMonthDays: boolean; /** * Specifies where to render the popup container. * By default, the popup renders in the root component. * * @default 'root' */ appendTo: 'root' | 'component' | ViewContainerRef; /** * Configures how the popup behaves when it encounters viewport boundaries. * For more information, refer to the article on * [viewport boundary detection](https://www.telerik.com/kendo-angular-ui/components/popup/viewport-boundary-detection). * * @default { horizontal: 'fit', vertical: 'flip' } */ collision: Collision; /** * Specifies the alignment point for the popup element. * For more information, refer to the section on * [positioning](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning). */ popupAlign: Align; /** * Specifies the margin around the popup in pixels. * Creates empty space between the popup and its anchor element. */ margin: Margin; /** * Determines whether the component uses adaptive rendering for different screen sizes. * By default, adaptive rendering is disabled. * * @default 'none' */ adaptiveMode: AdaptiveMode; /** * Specifies the title text for the input element and the header of the action sheet. * Applies only when [`AdaptiveMode` is set to `auto`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/adaptivemode). * * @default "" */ adaptiveTitle: string; /** * Specifies the subtitle text displayed in the header of the action sheet. * Applies only when [`AdaptiveMode` is set to `auto`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/adaptivemode). * * @default "" */ adaptiveSubtitle: string; /** * @hidden * * TODO: Make visible when the Infinite Calendar is fixed to set properly the size option. * Sets the size of the component. * @default undefined */ size: DateInputSize; /** * Fires when the popup is about to open ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/daterange/popup#events)). * You can prevent this event to keep the popup closed. */ open: EventEmitter; /** * Fires when the popup is about to close ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/daterange/popup#events)). * You can prevent this event to keep the popup open. */ close: EventEmitter; /** * Fires when the calendar element loses focus ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/daterange/popup#events)). */ onBlur: EventEmitter; /** * Fires when the calendar element receives focus ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/daterange/popup#events)). */ onFocus: EventEmitter; /** * Fires when the popup closes due to an `ESC` keypress or when it leaves the viewport ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/daterange/popup#events)). */ cancel: EventEmitter; /** * Gets the active calendar that displays in the popup. * * When the popup is closed, the property returns `null`. */ get calendar(): MultiViewCalendarComponent; set calendar(calendar: MultiViewCalendarComponent); /** * Gets the active state of the component. * Returns `true` when the opened calendar is active. */ get isActive(): boolean; /** * @hidden */ get isAdaptiveModeEnabled(): boolean; /** * @hidden */ get isAdaptive(): boolean; /** * @hidden */ popupRef: PopupRef; /** * @hidden */ popupUID: string; /** * @hidden */ checkIcon: SVGIcon; /** * @hidden */ windowSize: AdaptiveSize; /** * @hidden */ adaptiveRangeSelection: SelectionRange; /** * Gets or sets the visibility state of the component. */ set show(show: boolean); get show(): boolean; /** * @hidden */ handleAccept(): void; private activateSubscription; private blurSubscription; private focusSubscription; private calendarSubscriptions; private popupSubscriptions; private windowBlurSubscription; private localizationSubscriptions; private resolvedPromise; private _calendar; private _show; constructor(popupService: PopupService, dateRangeService: DateRangeService, zone: NgZone, renderer: Renderer2, localization: LocalizationService, cdr: ChangeDetectorRef, rtl: boolean, adaptiveService: AdaptiveService); ngOnInit(): void; ngAfterViewInit(): void; ngOnDestroy(): void; /** * @hidden * */ onRangeSelectionChange(rangeSelection: any): void; /** * Opens the popup component and focuses the calendar. */ activate(): void; /** * Focuses the calendar if it is available. */ focus(): void; /** * Checks if a focused element is inside the popup. * * @returns {boolean} Returns `true` if the focused element is inside the popup. */ hasActiveContent(): boolean; /** * 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?: boolean): void; /** * @hidden * * Closes the popup and triggers the `cancel` event. */ cancelPopup(): void; /** * @hidden */ onResize(): void; /** * @hidden */ closePopup(event: KeyboardEvent): void; /** * @hidden */ handleTab(event: KeyboardEvent): void; /** * @hidden */ handleShiftTab(event: KeyboardEvent): void; private handleWindowBlur; private handleMouseLeave; private handleKeydown; private subscribeFocusBlur; private addPopupSubscriptions; private get _appendTo(); private togglePopup; private destroyPopup; private toggleDateRange; private toggleActionSheet; private addCalendarSubscription; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; }