@progress/kendo-angular-dateinputs
Version:
Kendo UI for Angular Date Inputs Package - Everything you need to add date selection functionality to apps (DatePicker, TimePicker, DateInput, DateRangePicker, DateTimePicker, Calendar, and MultiViewCalendar).
374 lines (373 loc) • 14.8 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 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 { KeyDown } from '../calendar/models/keydown.interface';
import { DateInputSize } from '../common/models/size';
import { CalendarView } from '../calendar/models/view.type';
import { Day } from '@progress/kendo-date-math';
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: `
* <button #anchor (click)="popup.toggle()">Toggle</button>
* <kendo-daterange-popup [anchor]="anchor" #popup></kendo-daterange-popup>
* `
* })
* 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<any>;
contentTemplate: DateRangePopupTemplateDirective;
dateRangeSelectionDirective: DateRangeSelectionDirective;
viewCalendar: QueryList<MultiViewCalendarComponent>;
contentCalendar: QueryList<MultiViewCalendarComponent>;
/**
* @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]({% slug dates_multiviewcalendar %}#toc-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]({% slug disabled_dates_multiviewcalendar %})).
*/
disabledDates: ((date: Date) => boolean) | Date[] | Day[];
/**
* 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: CalendarView;
/**
* Specifies the lowest view level that users can navigate to ([see example](slug:viewdepth_multiviewcalendar)).
*
* @default 'month'
*/
bottomView: CalendarView;
/**
* Specifies the highest view level that users can navigate to ([see example](slug:viewdepth_multiviewcalendar)).
*
* @default 'century'
*/
topView: CalendarView;
/**
* Specifies the minimum date that users can select ([see example]({% slug dates_multiviewcalendar %}#toc-focused-dates)).
*
* @default '1900-01-01'
*/
min: Date;
/**
* Specifies the maximum date that users can select ([see example]({% slug dates_multiviewcalendar %}#toc-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]({% slug disabled_multiviewcalendar %})).
* 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]({% slug weeknumcolumn_multiviewcalendar %})).
*
* @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]({% slug animations_popup %}).
*
* @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]({% slug alignmentpositioning_popup %}#toc-aligning-to-components).
*/
anchor: ElementRef;
/**
* Specifies the alignment point for the anchor element.
* For more information, refer to the section on
* [positioning]({% slug alignmentpositioning_popup %}#toc-positioning).
*/
anchorAlign: Align;
/**
* 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: boolean;
/**
* 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: 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]({% slug viewportboundarydetection_popup %}).
*
* @default { horizontal: 'fit', vertical: 'flip' }
*/
collision: Collision;
/**
* Specifies the alignment point for the popup element.
* For more information, refer to the section on
* [positioning]({% slug alignmentpositioning_popup %}#toc-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`](slug:api_dateinputs_adaptivemode).
*
* @default ""
*/
adaptiveTitle: string;
/**
* 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: string;
/**
* @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: DateInputSize;
/**
* 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: EventEmitter<PreventableEvent>;
/**
* 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: EventEmitter<PreventableEvent>;
/**
* Fires when the calendar element loses focus ([see example](slug:popup_daterange#toc-events)).
*/
onBlur: EventEmitter<null>;
/**
* Fires when the calendar element receives focus ([see example](slug:popup_daterange#toc-events)).
*/
onFocus: EventEmitter<null>;
/**
* Fires when the popup closes due to an `ESC` keypress or when it leaves the viewport ([see example](slug:popup_daterange#toc-events)).
*/
cancel: EventEmitter<null>;
/**
* 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;
/**
* 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;
private _rangeSelection;
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: KeyDown): void;
/**
* @hidden
*/
handleTab(event: KeyDown): void;
/**
* @hidden
*/
handleShiftTab(event: KeyDown): 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<DateRangePopupComponent, [null, null, null, null, null, null, { optional: true; }, null]>;
static ɵcmp: i0.ɵɵComponentDeclaration<DateRangePopupComponent, "kendo-daterange-popup", ["kendo-daterange-popup"], { "showCalendarHeader": { "alias": "showCalendarHeader"; "required": false; }; "focusedDate": { "alias": "focusedDate"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "bottomView": { "alias": "bottomView"; "required": false; }; "topView": { "alias": "topView"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "allowReverse": { "alias": "allowReverse"; "required": false; }; "animateNavigation": { "alias": "animateNavigation"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "views": { "alias": "views"; "required": false; }; "weekNumber": { "alias": "weekNumber"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "anchor": { "alias": "anchor"; "required": false; }; "anchorAlign": { "alias": "anchorAlign"; "required": false; }; "showViewHeader": { "alias": "showViewHeader"; "required": false; }; "showOtherMonthDays": { "alias": "showOtherMonthDays"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "collision": { "alias": "collision"; "required": false; }; "popupAlign": { "alias": "popupAlign"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "adaptiveTitle": { "alias": "adaptiveTitle"; "required": false; }; "adaptiveSubtitle": { "alias": "adaptiveSubtitle"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "open": "open"; "close": "close"; "onBlur": "blur"; "onFocus": "focus"; "cancel": "cancel"; }, ["contentTemplate", "contentCalendar"], never, true, never>;
}