@progress/kendo-angular-scheduler
Version:
Kendo UI Scheduler Angular - Outlook or Google-style angular scheduler calendar. Full-featured and customizable embedded scheduling from the creator developers trust for professional UI components.
169 lines (164 loc) • 7.87 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, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import { SchedulerView } from '../types';
import { ToolbarTemplateDirective } from './toolbar-template.directive';
import { ToolbarService } from './toolbar.service';
import { ResizeSensorComponent } from '@progress/kendo-angular-common';
import { ToolbarViewSelectorComponent } from './view-selector.component';
import { ToolbarNavigationComponent } from './navigation.component';
import { NgIf, NgTemplateOutlet } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "./toolbar.service";
/**
* @hidden
*/
export class ToolbarComponent {
service;
element;
zone;
hostClasses = true;
toolbarRole = 'toolbar';
selectedView;
views;
dateRange;
selectedDate;
template;
min;
max;
navigate = new EventEmitter();
toolbarWidthChange = new EventEmitter();
// The template context is the same as the service context,
// but with resolved values instead of observables.
templateContext = {};
toolbarWidth;
/**
* @hidden
*/
get activeView() {
return this.service.context.selectedView?.name === 'year' ? 'decade' : 'month';
}
/**
* @hidden
*/
get bottomView() {
return this.service.context.selectedView?.name === 'year' ? 'decade' : 'month';
}
subs = new Subscription();
constructor(service, element, zone) {
this.service = service;
this.element = element;
this.zone = zone;
this.subs.add(service.action.subscribe(action => this.navigate.next(action)));
}
ngOnInit() {
this.subs.add(this.selectedDate.subscribe(date => this.templateContext.selectedDate = date));
this.subs.add(this.dateRange.subscribe(dateRange => this.templateContext.dateRange = dateRange));
this.resizeHandler();
}
ngOnChanges() {
this.service.context = {
dateRange: this.dateRange,
selectedDate: this.selectedDate,
views: this.views,
selectedView: this.selectedView
};
Object.assign(this.templateContext, {
views: this.views,
selectedView: this.selectedView
// The dateRange and selectedDate context fields
// are updated through the subscriptions added in ngOnInit.
});
}
ngOnDestroy() {
this.subs.unsubscribe();
}
resizeHandler() {
const element = this.element.nativeElement;
this.zone.run(() => this.toolbarWidth = element.offsetWidth);
this.toolbarWidthChange.emit(this.toolbarWidth);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.ToolbarService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarComponent, isStandalone: true, selector: "kendo-scheduler-toolbar", inputs: { selectedView: "selectedView", views: "views", dateRange: "dateRange", selectedDate: "selectedDate", template: "template", min: "min", max: "max" }, outputs: { navigate: "navigate", toolbarWidthChange: "toolbarWidthChange" }, host: { properties: { "class.k-scheduler-toolbar": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "class.k-toolbar-solid": "this.hostClasses", "class.k-toolbar-md": "this.hostClasses", "attr.role": "this.toolbarRole" } }, usesOnChanges: true, ngImport: i0, template: `
<ng-template
*ngIf="template; else defaultTemplate"
[ngTemplateOutlet]="template.templateRef"
[ngTemplateOutletContext]="templateContext"
>
</ng-template>
<ng-template #defaultTemplate>
<div kendoSchedulerToolbarNavigation
[min]="min"
[max]="max"
[activeView]="activeView"
[bottomView]="bottomView">
</div>
<span class="k-spacer"></span>
<div kendoSchedulerToolbarViewSelector [toolbarWidth]="toolbarWidth"></div>
</ng-template>
<kendo-resize-sensor (resize)="resizeHandler()" [style]="'display: contents;'"></kendo-resize-sensor>
`, 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: ToolbarNavigationComponent, selector: "[kendoSchedulerToolbarNavigation]", inputs: ["min", "max", "activeView", "bottomView"] }, { kind: "component", type: ToolbarViewSelectorComponent, selector: "[kendoSchedulerToolbarViewSelector]", inputs: ["toolbarWidth", "responsiveBreakpoint"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-scheduler-toolbar',
template: `
<ng-template
*ngIf="template; else defaultTemplate"
[ngTemplateOutlet]="template.templateRef"
[ngTemplateOutletContext]="templateContext"
>
</ng-template>
<ng-template #defaultTemplate>
<div kendoSchedulerToolbarNavigation
[min]="min"
[max]="max"
[activeView]="activeView"
[bottomView]="bottomView">
</div>
<span class="k-spacer"></span>
<div kendoSchedulerToolbarViewSelector [toolbarWidth]="toolbarWidth"></div>
</ng-template>
<kendo-resize-sensor (resize)="resizeHandler()" [style]="'display: contents;'"></kendo-resize-sensor>
`,
standalone: true,
imports: [NgIf, NgTemplateOutlet, ToolbarNavigationComponent, ToolbarViewSelectorComponent, ResizeSensorComponent]
}]
}], ctorParameters: function () { return [{ type: i1.ToolbarService }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { hostClasses: [{
type: HostBinding,
args: ['class.k-scheduler-toolbar']
}, {
type: HostBinding,
args: ['class.k-toolbar']
}, {
type: HostBinding,
args: ['class.k-toolbar-solid']
}, {
type: HostBinding,
args: ['class.k-toolbar-md']
}], toolbarRole: [{
type: HostBinding,
args: ['attr.role']
}], selectedView: [{
type: Input
}], views: [{
type: Input
}], dateRange: [{
type: Input
}], selectedDate: [{
type: Input
}], template: [{
type: Input
}], min: [{
type: Input
}], max: [{
type: Input
}], navigate: [{
type: Output
}], toolbarWidthChange: [{
type: Output
}] } });