@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).
113 lines (112 loc) • 5.41 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, ContentChildren, QueryList, HostBinding, HostListener, Input } from '@angular/core';
import { validatePackage } from '@progress/kendo-licensing';
import { packageMetadata } from '../package-metadata';
import { DateRangePopupComponent } from './date-range-popup.component';
import { DateRangeService } from './date-range.service';
import { Keys } from '@progress/kendo-angular-common';
import { NgIf } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "./date-range.service";
/**
* Represents the Kendo UI DateRange component for Angular.
*
* @example
* ```ts
* _@Component({
* selector: 'my-app',
* template: `
* <kendo-daterange>
* <kendo-dateinput kendoDateRangeStartInput [(value)]="dateRange.start"></kendo-dateinput>
* <kendo-dateinput kendoDateRangeEndInput [(value)]="dateRange.end"></kendo-dateinput>
* </kendo-daterange>
* `
* })
* export class AppComponent {
* public dateRange: any = { start: null, end: null };
* }
* ```
*
* @remarks
* Supported children components are: {@link DateRangePopupComponent}, {@link DateRangePopupCustomMessagesComponent}, {@link DateInputComponent}.
*/
export class DateRangeComponent {
dateRangeService;
/**
* @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;
/**
* @hidden
*/
keydown(event) {
const shouldOpenPopup = event.keyCode === Keys.ArrowDown && event.altKey;
if (shouldOpenPopup) {
this.dateRangeService.activatePopup();
}
const shouldClosePopup = (event.keyCode === Keys.ArrowUp && event.altKey) || event.keyCode === Keys.Escape;
if (shouldClosePopup) {
this.dateRangeService.deactivatePopup();
}
}
wrapperClass = true;
/**
* @hidden
*/
showDefault = false;
contentPopup;
get hasContentPopup() {
return this.contentPopup.length > 0;
}
subscription;
constructor(dateRangeService) {
this.dateRangeService = dateRangeService;
validatePackage(packageMetadata);
}
ngAfterContentInit() {
this.showDefault = !this.hasContentPopup;
this.subscription = this.contentPopup.changes.subscribe(() => {
this.showDefault = !this.hasContentPopup;
});
}
ngOnDestroy() {
this.subscription?.unsubscribe();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangeComponent, deps: [{ token: i1.DateRangeService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateRangeComponent, isStandalone: true, selector: "kendo-daterange", inputs: { size: "size" }, host: { listeners: { "keydown": "keydown($event)" }, properties: { "class.k-daterangepicker": "this.wrapperClass" } }, providers: [DateRangeService], queries: [{ propertyName: "contentPopup", predicate: DateRangePopupComponent }], ngImport: i0, template: `
<ng-content></ng-content>
<kendo-daterange-popup *ngIf="showDefault" [size]="size"></kendo-daterange-popup>
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["showCalendarHeader", "focusedDate", "disabledDates", "activeView", "bottomView", "topView", "min", "max", "allowReverse", "animateNavigation", "disabled", "views", "weekNumber", "animate", "anchor", "anchorAlign", "showViewHeader", "showOtherMonthDays", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "size"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangeComponent, decorators: [{
type: Component,
args: [{
providers: [DateRangeService],
selector: 'kendo-daterange',
template: `
<ng-content></ng-content>
<kendo-daterange-popup *ngIf="showDefault" [size]="size"></kendo-daterange-popup>
`,
standalone: true,
imports: [NgIf, DateRangePopupComponent]
}]
}], ctorParameters: function () { return [{ type: i1.DateRangeService }]; }, propDecorators: { size: [{
type: Input
}], keydown: [{
type: HostListener,
args: ['keydown', ['$event']]
}], wrapperClass: [{
type: HostBinding,
args: ['class.k-daterangepicker']
}], contentPopup: [{
type: ContentChildren,
args: [DateRangePopupComponent]
}] } });