@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).
226 lines (225 loc) • 8.52 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 { Injectable, Renderer2, Optional } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { EMPTY_SELECTIONRANGE } from '../calendar/models/selection-range.interface';
import { isEqual } from '@progress/kendo-date-math';
import { attributeNames } from '../common/utils';
import * as i0 from "@angular/core";
const isActive = (cmp) => (cmp && cmp.isActive) || false;
const hasActiveContent = (popup) => popup && popup.hasActiveContent();
/**
* Manages communication between components inside the DateRangeComponent.
* For example, handles interactions between the start and end DateInput components and the DateRangePopup component.
*/
export class DateRangeService {
renderer;
/**
* Notifies when the `activeRangeEnd` state changes.
*/
activeRangeEnd$ = new BehaviorSubject(null);
/**
* Notifies when the `focusedDate` changes.
*/
focusedDate$ = new BehaviorSubject(null);
/**
* Notifies when the end DateInput component changes.
* For example, when you attach a new end `DateInput` or detach the old one.
*/
endInput$ = new BehaviorSubject(null);
/**
* Notifies when the start DateInput component changes.
* For example, when you attach a new start `DateInput` or detach the old one.
*/
startInput$ = new BehaviorSubject(null);
/**
* Notifies when the `DateRangePopup` component changes.
*/
dateRangePopup$ = new BehaviorSubject(null);
/**
* Notifies when the selection range state changes.
*/
range$ = new BehaviorSubject(EMPTY_SELECTIONRANGE);
/**
* Gets the current `activeRangeEnd` value.
*/
get activeRangeEnd() {
return this.activeRangeEnd$.value;
}
/**
* Gets the current `focusedDate` value.
*/
get focusedDate() {
return this.focusedDate$.value;
}
/**
* Gets the minimum range value.
* Takes the `min` value from the start DateInput component or the `min` value of the calendar.
*/
get min() {
return (this.startInput$.value || {}).min || null;
}
/**
* Gets the maximum range value.
* Takes the `max` value from the end DateInput component or the `max` value of the calendar.
*/
get max() {
return (this.endInput$.value || {}).max || null;
}
/**
* Gets the current `selectionRange` value.
*/
get selectionRange() {
return this.range$.value;
}
/**
* @hidden
* Gets the start input element.
*/
get inputStartElement() {
return this.startInput$.value.inputElement;
}
/**
* @hidden
* Gets the end input element.
*/
get inputEndElement() {
return this.endInput$.value.inputElement;
}
/** @hidden */
constructor(renderer) {
this.renderer = renderer;
}
/**
* Opens the registered DateRangePopup component.
* Opens the popup and focuses the calendar.
*/
activatePopup() {
const dateRangePopup = this.dateRangePopup$.value;
if (!dateRangePopup) {
return;
}
if (this.startInput$.value) {
this.renderer.setAttribute(this.inputStartElement, attributeNames.ariaControls, dateRangePopup.popupUID);
this.renderer.setAttribute(this.inputStartElement, attributeNames.ariaExpanded, 'true');
this.renderer.setAttribute(this.inputEndElement, attributeNames.ariaControls, dateRangePopup.popupUID);
this.renderer.setAttribute(this.inputEndElement, attributeNames.ariaExpanded, 'true');
}
dateRangePopup.activate();
}
/**
* Deactivates the registered `DateRangePopup` component.
* The method closes the popup.
*/
deactivatePopup() {
const dateRangePopup = this.dateRangePopup$.value;
if (this.startInput$.value) {
this.renderer.removeAttribute(this.inputStartElement, attributeNames.ariaControls);
this.renderer.setAttribute(this.inputStartElement, attributeNames.ariaExpanded, 'false');
this.renderer.removeAttribute(this.inputStartElement, attributeNames.ariaActiveDescendant);
this.renderer.removeAttribute(this.inputEndElement, attributeNames.ariaControls);
this.renderer.setAttribute(this.inputEndElement, attributeNames.ariaExpanded, 'false');
this.renderer.removeAttribute(this.inputEndElement, attributeNames.ariaActiveDescendant);
}
if (!(dateRangePopup && dateRangePopup.show)) {
return;
}
dateRangePopup.show = false;
}
/**
* @hidden
*/
setActiveDescendent(id) {
this.renderer.setAttribute(this.inputStartElement, attributeNames.ariaActiveDescendant, id);
this.renderer.setAttribute(this.inputEndElement, attributeNames.ariaActiveDescendant, id);
}
/**
* @hidden
*
* Deactivates the registered `DateRangePopup` component and fires the `cancel` event.
* The method closes the popup.
*/
cancelPopup() {
const dateRangePopup = this.dateRangePopup$.value;
if (!(dateRangePopup && dateRangePopup.show)) {
return;
}
dateRangePopup.cancelPopup();
}
/**
* Completes all observables to prevent memory leaks.
* Call this method when you destroy a component that uses the service.
*/
destroy() {
this.activeRangeEnd$.complete();
this.dateRangePopup$.complete();
this.focusedDate$.complete();
this.endInput$.complete();
this.startInput$.complete();
this.range$.complete();
}
/**
* Checks if any component inside the DateRangeComponent is active.
* For example, detects an open popup or a focused DateInput component.
*
* @returns {boolean} Returns `true` if an active component is present.
*/
hasActiveComponent() {
const popup = this.dateRangePopup$.value;
const isPopup = isActive(popup);
const isStart = isActive(this.startInput$.value);
const isEnd = isActive(this.endInput$.value);
return isPopup || isStart || isEnd || hasActiveContent(popup) || false;
}
/**
* Registers a new start DateInput component and notifies all `startInput$` listeners.
*/
registerStartInput(startInput) {
this.startInput$.next(startInput);
}
/**
* Registers a new end `DateInput` component and notifies all `endInput$` listeners.
*/
registerEndInput(endInput) {
this.endInput$.next(endInput);
}
/**
* Registers a new `DateRangePopup` component and notifies all `dateRangePopup$` listeners.
*/
registerPopup(dateRangePopup) {
this.dateRangePopup$.next(dateRangePopup);
}
/**
* Updates the `activeRangeEnd` value and notifies all `activeRangeEnd$` listeners.
*/
setActiveRangeEnd(activeRange) {
if (!activeRange || this.activeRangeEnd === activeRange) {
return;
}
this.activeRangeEnd$.next(activeRange);
}
/**
* Updates the focused date and notifies all `focusedDate$` listeners.
*/
setFocusedDate(value) {
if (isEqual(this.focusedDate$.value, value)) {
return;
}
this.focusedDate$.next(value);
}
/**
* Updates the selection range and notifies all `range$` listeners.
*/
setRange(range = EMPTY_SELECTIONRANGE) {
this.range$.next(range);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangeService, deps: [{ token: i0.Renderer2, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangeService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangeService, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: i0.Renderer2, decorators: [{
type: Optional
}] }]; } });