@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).
136 lines (135 loc) • 5.74 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 { ElementRef, Renderer2, NgZone, Directive } from '@angular/core';
import { cloneDate } from '@progress/kendo-date-math';
import { Keys } from '@progress/kendo-angular-common';
import { Subscription, fromEvent } from 'rxjs';
import { DateInputComponent } from '../dateinput/dateinput.component';
import { DateRangeService } from './date-range.service';
import { isPresent } from '../common/utils';
import * as i0 from "@angular/core";
import * as i1 from "./date-range.service";
import * as i2 from "../dateinput/dateinput.component";
/**
* @hidden
*/
export class DateRangeInput {
activeRangeEnd;
dateRangeService;
input;
element;
renderer;
zone;
navigateCalendarOnFocus = false;
get isActiveEnd() {
return this.dateRangeService.activeRangeEnd === this.activeRangeEnd;
}
popupSubscriptions = new Subscription();
subscriptions = new Subscription();
get popupCalendarActivated() {
const popup = this.dateRangeService.dateRangePopup$.value;
return isPresent(popup) && isPresent(popup.calendar);
}
constructor(activeRangeEnd, dateRangeService, input, element, renderer, zone) {
this.activeRangeEnd = activeRangeEnd;
this.dateRangeService = dateRangeService;
this.input = input;
this.element = element;
this.renderer = renderer;
this.zone = zone;
}
init() {
this.input.role = 'combobox';
this.input.hasPopup = 'grid';
if (this.input.value) {
this.dateRangeService.setRange(this.getRange(this.input.value));
}
[
this.input.onBlur.subscribe(() => this.deactivate()),
this.input.valueUpdate.subscribe(value => this.updateRange(value, 'change')),
this.dateRangeService.activeRangeEnd$.subscribe(() => {
if (this.navigateCalendarOnFocus) {
this.focusActiveDate();
}
this.toggleActiveClass(this.isActiveEnd);
}),
this.dateRangeService.dateRangePopup$.subscribe(popup => this.initPopup(popup)),
this.dateRangeService.range$.subscribe(range => this.updateInputValue(range)),
fromEvent(this.element.nativeElement, 'click').subscribe(() => this.activate()),
fromEvent(this.element.nativeElement, 'keydown').subscribe((event) => this.togglePopup(event || {}))
].map(s => this.subscriptions.add(s));
}
destroy() {
this.subscriptions.unsubscribe();
this.unsubscribePopup();
}
initPopup(popup) {
if (!popup) {
this.unsubscribePopup();
return;
}
if (!popup.anchor) {
popup.anchor = this.element.nativeElement;
}
[
popup.cancel.subscribe(() => this.isActiveEnd && this.input.focus()),
popup.onFocus.subscribe(() => this.toggleActiveClass(this.isActiveEnd)),
popup.onBlur.subscribe(() => this.deactivate())
].map(s => this.popupSubscriptions.add(s));
}
unsubscribePopup() {
this.popupSubscriptions.unsubscribe();
this.popupSubscriptions = new Subscription();
}
activate() {
this.dateRangeService.setActiveRangeEnd(this.activeRangeEnd);
this.dateRangeService.activatePopup();
}
deactivate() {
this.zone.runOutsideAngular(() => {
setTimeout(() => {
this.updateRange(this.input.value, 'blur');
if (this.dateRangeService.hasActiveComponent()) {
return;
}
this.toggleActiveClass(false);
this.zone.run(() => this.dateRangeService.deactivatePopup());
});
});
}
updateRange(value, correctOn) {
const range = this.getRange(value, correctOn);
if (range) {
this.focusActiveDate();
this.dateRangeService.setRange(range);
}
}
togglePopup({ altKey, keyCode }) {
if (keyCode === Keys.Escape) {
this.dateRangeService.cancelPopup();
}
else if (altKey && keyCode === Keys.ArrowDown) {
this.dateRangeService.activatePopup();
}
}
focusActiveDate() {
if (this.input.value && this.isActiveEnd) {
this.dateRangeService.setFocusedDate(cloneDate(this.input.value));
}
}
toggleActiveClass(show) {
const action = show ? 'addClass' : 'removeClass';
const nativeElement = this.element.nativeElement;
if (nativeElement && nativeElement.querySelector) {
this.renderer[action](nativeElement, 'k-focus');
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangeInput, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DateRangeInput, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangeInput, decorators: [{
type: Directive,
args: [{}]
}], ctorParameters: function () { return [{ type: undefined }, { type: i1.DateRangeService }, { type: i2.DateInputComponent }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; } });