@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).
356 lines (355 loc) • 14.9 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, ChangeDetectorRef, EventEmitter, HostBinding, Input, Output, TemplateRef } from '@angular/core';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { IntlService } from '@progress/kendo-angular-intl';
import { getDate } from '@progress/kendo-date-math';
import { CalendarViewEnum } from './models/view.enum';
import { MIN_DATE, MAX_DATE } from '../defaults';
import { dateInRange, getToday, isInRange } from '../util';
import { BusViewService } from './services/bus-view.service';
import { DisabledDatesService } from './services/disabled-dates.service';
import { Subscription } from 'rxjs';
import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
import { EventsOutsideAngularDirective } from '@progress/kendo-angular-common';
import { ButtonComponent } from '@progress/kendo-angular-buttons';
import { NgIf, NgTemplateOutlet } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "./services/bus-view.service";
import * as i2 from "@progress/kendo-angular-l10n";
import * as i3 from "@progress/kendo-angular-intl";
import * as i4 from "./services/disabled-dates.service";
/**
* @hidden
*/
export class HeaderComponent {
bus;
cdr;
localization;
intl;
disabledDatesService;
/**
* @hidden
*/
chevronRightIcon = chevronRightIcon;
/**
* @hidden
*/
chevronLeftIcon = chevronLeftIcon;
navigate = true;
todayAvailable = true;
activeViewValue;
todayMessage;
title;
prevButtonTitle;
nextButtonTitle;
parentViewButtonTitle;
activeView;
currentDate;
min = new Date(MIN_DATE);
max = new Date(MAX_DATE);
rangeLength = 1;
titleTemplateRef;
headerTemplateRef;
isPrevDisabled = true;
isNextDisabled = true;
showNavigationButtons = false;
orientation = 'horizontal';
id;
size;
todayButtonClick = new EventEmitter();
prevButtonClick = new EventEmitter();
nextButtonClick = new EventEmitter();
getComponentClass = true;
get verticalHostClass() {
return this.orientation === 'vertical';
}
subscriptions = new Subscription();
constructor(bus, cdr, localization, intl, disabledDatesService) {
this.bus = bus;
this.cdr = cdr;
this.localization = localization;
this.intl = intl;
this.disabledDatesService = disabledDatesService;
}
ngOnInit() {
this.subscriptions.add(this.intl.changes.subscribe(this.intlChange.bind(this)));
this.subscriptions.add(this.localization.changes.subscribe(this.l10nChange.bind(this)));
this.subscriptions.add(this.disabledDatesService.changes.subscribe(this.setTodayAvailability.bind(this)));
}
ngOnChanges() {
const service = this.bus.service(this.activeView);
if (!service) {
return;
}
this.activeViewValue = CalendarViewEnum[this.activeView];
this.todayMessage = this.localization.get('today');
this.parentViewButtonTitle = this.localization.get('parentViewButtonTitle');
this.setTodayAvailability();
this.navigate = this.bus.canMoveUp(this.activeView);
this.title = this.getTitle();
}
ngOnDestroy() {
this.subscriptions.unsubscribe();
}
handleTodayClick() {
if (!this.todayAvailable) {
return;
}
this.bus.moveToBottom(this.activeView);
this.todayButtonClick.emit(dateInRange(getToday(), this.min, this.max));
}
handleNavigation() {
if (!this.navigate) {
return;
}
this.bus.moveUp(this.activeView);
}
isDisabled() {
return this.navigate ? null : '';
}
intlChange() {
if (this.currentDate && this.bus.service(this.activeView)) {
this.title = this.getTitle();
this.cdr.markForCheck();
}
}
l10nChange() {
this.prevButtonTitle = this.localization.get('prevButtonTitle');
this.nextButtonTitle = this.localization.get('nextButtonTitle');
this.parentViewButtonTitle = this.localization.get('parentViewButtonTitle');
this.todayMessage = this.localization.get('today');
this.cdr.markForCheck();
}
getTitle() {
if (!this.currentDate) {
return '';
}
const service = this.bus.service(this.activeView);
const take = this.rangeLength - 1;
const title = service.title(this.currentDate);
const nextDate = service.addToDate(this.currentDate, take);
if (take < 1 || !service.isInRange(nextDate, this.min, this.max)) {
return title;
}
return `${title} - ${service.title(nextDate)}`;
}
setTodayAvailability() {
const today = getToday();
const isTodayInRange = isInRange(today, getDate(this.min), getDate(this.max));
const isDisabled = this.disabledDatesService.isDateDisabled(today);
this.todayAvailable = isTodayInRange && !isDisabled;
this.cdr.markForCheck();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderComponent, deps: [{ token: i1.BusViewService }, { token: i0.ChangeDetectorRef }, { token: i2.LocalizationService }, { token: i3.IntlService }, { token: i4.DisabledDatesService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeaderComponent, isStandalone: true, selector: "kendo-calendar-header", inputs: { activeView: "activeView", currentDate: "currentDate", min: "min", max: "max", rangeLength: "rangeLength", titleTemplateRef: "titleTemplateRef", headerTemplateRef: "headerTemplateRef", isPrevDisabled: "isPrevDisabled", isNextDisabled: "isNextDisabled", showNavigationButtons: "showNavigationButtons", orientation: "orientation", id: "id", size: "size" }, outputs: { todayButtonClick: "todayButtonClick", prevButtonClick: "prevButtonClick", nextButtonClick: "nextButtonClick" }, host: { properties: { "class.k-calendar-header": "this.getComponentClass", "class.k-vstack": "this.verticalHostClass" } }, usesOnChanges: true, ngImport: i0, template: `
<ng-template *ngIf="headerTemplateRef; else defaultRendering"
[ngTemplateOutlet]="headerTemplateRef"
[ngTemplateOutletContext]="{ title: title, activeView: activeViewValue, date: currentDate }">
</ng-template>
<ng-template #defaultRendering>
<button
kendoButton
class="k-calendar-title"
role="button"
[id]="id"
type="button"
fillMode="flat"
[size]="size"
themeColor="primary"
tabindex="-1"
[disabled]="!navigate"
[kendoEventsOutsideAngular]="{
click: handleNavigation
}"
[title]="parentViewButtonTitle"
[scope]="this">
<ng-template [ngIf]="!titleTemplateRef">{{title}}</ng-template>
<ng-template
[ngIf]="titleTemplateRef"
[ngTemplateOutlet]="titleTemplateRef"
[ngTemplateOutletContext]="{ $implicit: title, activeView: activeViewValue, date: currentDate }"
></ng-template>
</button>
<span class="k-spacer"></span>
<span class="k-calendar-nav">
<button
*ngIf="showNavigationButtons"
kendoButton
fillMode="flat"
[size]="size"
[svgIcon]="chevronLeftIcon"
icon="chevron-left"
tabindex="-1"
type="button"
class="k-calendar-nav-prev"
[attr.aria-disabled]="isPrevDisabled"
[disabled]="isPrevDisabled"
[title]="prevButtonTitle"
(click)="prevButtonClick.emit()"
>
</button>
<button
kendoButton
class="k-calendar-nav-today"
fillMode="flat"
role="link"
[size]="size"
[disabled]="!todayAvailable"
[kendoEventsOutsideAngular]="{
click: handleTodayClick
}"
[scope]="this"
type="button"
>
{{ todayMessage }}
</button>
<button
*ngIf="showNavigationButtons"
kendoButton
fillMode="flat"
[size]="size"
[svgIcon]="chevronRightIcon"
icon="chevron-right"
class="k-calendar-nav-next"
tabindex="-1"
type="button"
[attr.aria-disabled]="isNextDisabled"
[disabled]="isNextDisabled"
[title]="nextButtonTitle"
(click)="nextButtonClick.emit()"
>
</button>
</span>
</ng-template>
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-calendar-header',
template: `
<ng-template *ngIf="headerTemplateRef; else defaultRendering"
[ngTemplateOutlet]="headerTemplateRef"
[ngTemplateOutletContext]="{ title: title, activeView: activeViewValue, date: currentDate }">
</ng-template>
<ng-template #defaultRendering>
<button
kendoButton
class="k-calendar-title"
role="button"
[id]="id"
type="button"
fillMode="flat"
[size]="size"
themeColor="primary"
tabindex="-1"
[disabled]="!navigate"
[kendoEventsOutsideAngular]="{
click: handleNavigation
}"
[title]="parentViewButtonTitle"
[scope]="this">
<ng-template [ngIf]="!titleTemplateRef">{{title}}</ng-template>
<ng-template
[ngIf]="titleTemplateRef"
[ngTemplateOutlet]="titleTemplateRef"
[ngTemplateOutletContext]="{ $implicit: title, activeView: activeViewValue, date: currentDate }"
></ng-template>
</button>
<span class="k-spacer"></span>
<span class="k-calendar-nav">
<button
*ngIf="showNavigationButtons"
kendoButton
fillMode="flat"
[size]="size"
[svgIcon]="chevronLeftIcon"
icon="chevron-left"
tabindex="-1"
type="button"
class="k-calendar-nav-prev"
[attr.aria-disabled]="isPrevDisabled"
[disabled]="isPrevDisabled"
[title]="prevButtonTitle"
(click)="prevButtonClick.emit()"
>
</button>
<button
kendoButton
class="k-calendar-nav-today"
fillMode="flat"
role="link"
[size]="size"
[disabled]="!todayAvailable"
[kendoEventsOutsideAngular]="{
click: handleTodayClick
}"
[scope]="this"
type="button"
>
{{ todayMessage }}
</button>
<button
*ngIf="showNavigationButtons"
kendoButton
fillMode="flat"
[size]="size"
[svgIcon]="chevronRightIcon"
icon="chevron-right"
class="k-calendar-nav-next"
tabindex="-1"
type="button"
[attr.aria-disabled]="isNextDisabled"
[disabled]="isNextDisabled"
[title]="nextButtonTitle"
(click)="nextButtonClick.emit()"
>
</button>
</span>
</ng-template>
`,
standalone: true,
imports: [NgIf, NgTemplateOutlet, ButtonComponent, EventsOutsideAngularDirective]
}]
}], ctorParameters: function () { return [{ type: i1.BusViewService }, { type: i0.ChangeDetectorRef }, { type: i2.LocalizationService }, { type: i3.IntlService }, { type: i4.DisabledDatesService }]; }, propDecorators: { activeView: [{
type: Input
}], currentDate: [{
type: Input
}], min: [{
type: Input
}], max: [{
type: Input
}], rangeLength: [{
type: Input
}], titleTemplateRef: [{
type: Input
}], headerTemplateRef: [{
type: Input
}], isPrevDisabled: [{
type: Input
}], isNextDisabled: [{
type: Input
}], showNavigationButtons: [{
type: Input
}], orientation: [{
type: Input
}], id: [{
type: Input
}], size: [{
type: Input
}], todayButtonClick: [{
type: Output
}], prevButtonClick: [{
type: Output
}], nextButtonClick: [{
type: Output
}], getComponentClass: [{
type: HostBinding,
args: ["class.k-calendar-header"]
}], verticalHostClass: [{
type: HostBinding,
args: ["class.k-vstack"]
}] } });