@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).
1,042 lines (1,029 loc) • 45 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 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 } 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 { NgIf } from '@angular/common';
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, keyCode } = event;
if (keyCode === Keys.Escape || (altKey && keyCode === 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.map(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: "16.2.12", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1.PopupService }, { token: i2.DateRangeService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }, { token: i4.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateRangePopupComponent, isStandalone: true, selector: "kendo-daterange-popup", inputs: { showCalendarHeader: "showCalendarHeader", focusedDate: "focusedDate", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", min: "min", max: "max", allowReverse: "allowReverse", animateNavigation: "animateNavigation", disabled: "disabled", views: "views", weekNumber: "weekNumber", animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", showViewHeader: "showViewHeader", showOtherMonthDays: "showOtherMonthDays", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin", adaptiveMode: "adaptiveMode", 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 -->
<kendo-resize-sensor *ngIf="isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
<div class="k-actionsheet-titlebar">
<div class="k-actionsheet-titlebar-group">
<div class="k-actionsheet-title">
<div class="k-text-center" *ngIf="adaptiveTitle">{{ adaptiveTitle }}</div>
<div class="k-actionsheet-subtitle k-text-center" *ngIf="adaptiveSubtitle">{{ 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"
aria-hidden="true"
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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.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"
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 -->
<kendo-resize-sensor *ngIf="isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
<div class="k-actionsheet-titlebar">
<div class="k-actionsheet-titlebar-group">
<div class="k-actionsheet-title">
<div class="k-text-center" *ngIf="adaptiveTitle">{{ adaptiveTitle }}</div>
<div class="k-actionsheet-subtitle k-text-center" *ngIf="adaptiveSubtitle">{{ 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"
aria-hidden="true"
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, NgIf, ResizeSensorComponent, ButtonComponent]
}]
}], ctorParameters: function () { return [{ 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
}] } });