@progress/kendo-angular-gantt
Version:
Kendo UI Angular Gantt
614 lines (603 loc) • 30.7 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, Input, NgZone, Optional, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { Subscription } from 'rxjs';
import { filter, map, switchMap, take } from 'rxjs/operators';
import { DraggableDirective, isDocumentAvailable } from '@progress/kendo-angular-common';
import { ScrollSyncService } from '../scrolling/scroll-sync.service';
import { DependencyDomService } from '../dependencies/dependency-dom.service';
import { isPresent } from '../utils';
import { CurrentTimeMarkerService } from './current-time-marker.service';
import { GanttDependencyDirective } from '../dependencies/gantt-dependency.directive';
import { GanttTasksTableBodyComponent } from '../rendering/gantt-tasks-table-body.component';
import { NgTemplateOutlet } from '@angular/common';
import { TimelineScrollableDirective } from '../scrolling/timeline-scroll.directive';
import { GanttHeaderTableBodyComponent } from '../rendering/gantt-header-table-body.component';
import { TaskDragService } from '../dragging/task-drag.service';
import { KENDO_TOOLTIP, TooltipDirective } from '@progress/kendo-angular-tooltip';
import { DatePipe, NumberPipe } from '@progress/kendo-angular-intl';
import { GanttTaskTooltipTemplateDirective } from '../template-directives/task-tooltip-template.directive';
import { GanttLocalizationService } from '../localization/gantt-localization.service';
import * as i0 from "@angular/core";
import * as i1 from "../scrolling/scroll-sync.service";
import * as i2 from "../dependencies/dependency-dom.service";
import * as i3 from "./current-time-marker.service";
import * as i4 from "../localization/gantt-localization.service";
import * as i5 from "../dragging/task-drag.service";
import * as i6 from "@progress/kendo-angular-tooltip";
/**
* @hidden
*/
export class GanttTimelineComponent {
scrollSyncService;
dependencyDomService;
renderer;
zone;
currentTimeMarkerService;
localization;
taskDragService;
/**
* Represents the scrollable container of the timeline content.
* Used externally by the DependencyDragCreateDirective.
*/
timelineContent;
timelineColumns;
timelineHeaderWrap;
tasksContainer;
tooltip;
/**
* Represents the view container ref used for rendering the dependency drag popop.
* Used externally by the DependencyDragCreateDirective.
*/
dragPopupContainer;
/**
* Represents the polyline element used for rendering the dependency drag editing interaction.
* Used externally by the DependencyDragCreateDirective.
*/
dependencyDragCreatePolyline;
rows;
slots;
groupSlots;
tableWidth;
activeView;
taskContentTemplate;
taskTemplate;
summaryTaskTemplate;
taskClass;
renderDependencyDragClues;
dragScrollSettings;
currentTimeMarker;
customTooltipTemplate;
tooltipOptions;
selectable;
isTaskSelected;
isExpanded;
dependencies = [];
// as all drag-and-drop operations are on the timeline container, use a single draggable instance
timelineContainerPress = new EventEmitter();
timelineContainerDrag = new EventEmitter();
timelineContainerRelease = new EventEmitter();
/**
* Specifies whether the draggable will attach or detach its pointer event listeners.
*/
get draggableEnabled() {
return this.renderDependencyDragClues;
}
task;
dragResult;
dragging = false;
completion = false;
marquee = {
show: false,
left: 0,
width: 0
};
dragOffset;
subscriptions = new Subscription();
popupRef;
constructor(scrollSyncService, dependencyDomService, renderer, zone, currentTimeMarkerService, localization, taskDragService) {
this.scrollSyncService = scrollSyncService;
this.dependencyDomService = dependencyDomService;
this.renderer = renderer;
this.zone = zone;
this.currentTimeMarkerService = currentTimeMarkerService;
this.localization = localization;
this.taskDragService = taskDragService;
this.subscriptions.add(
// task changes indicates change in row content, number, height, etc.
this.dependencyDomService.taskChanges
.pipe(filter(args => isPresent(args.timelineRow)), switchMap(args => this.zone.onStable.pipe(take(1), map(() => args))) // ensure the content is rendered
)
.subscribe(({ timelineRow }) => {
const timelineRowHeight = isDocumentAvailable() ? timelineRow.getBoundingClientRect().height : 0;
this.currentTimeMarkerService.rowHeight = timelineRowHeight;
this.currentTimeMarkerService.currentTimeMarker = this.currentTimeMarker;
this.currentTimeMarkerService.slots = this.slots;
this.currentTimeMarkerService.rows = this.rows;
this.currentTimeMarkerService.activeView = this.activeView;
this.createTimeMarker();
this.renderer.setStyle(this.timelineColumns.nativeElement, 'height', `${(this.rows || []).length * timelineRowHeight}px`);
}));
if (!taskDragService) {
return;
}
this.subscriptions.add(taskDragService.dragStart.subscribe((e) => {
if (e.dragTarget.classList.contains('k-task-draghandle')) {
this.completion = true;
const taskRect = this.taskDragService.currentDragTaskRect;
this.tooltip.position = 'top';
this.tooltip.callout = true;
this.tooltip.offset = taskRect.height + 6;
this.tooltip.collision = {
horizontal: 'fit',
vertical: 'fit'
};
}
else {
this.dragging = true;
}
}));
this.subscriptions.add(taskDragService.drag.subscribe((e) => {
this.dragResult = {
start: e.start,
end: e.end,
completionRatio: e.completionRatio
};
if (this.completion) {
const dragHandle = e.dragEvent.dragTarget;
this.tooltip.show(dragHandle);
}
else {
this.marquee.show = true;
this.marquee.left = e.offset;
this.marquee.width = e.width;
const taskEl = this.taskDragService.currentDragTask.taskElement;
const taskRect = this.taskDragService.currentDragTaskRect;
this.tooltip.hide();
this.tooltip.position = this.taskDragService.rightDragHandle ? 'right' : 'left';
this.tooltip.collision = {
horizontal: 'fit',
vertical: 'fit'
};
this.tooltip.show(taskEl);
this.popupRef = this.tooltip.popupRef;
const popup = this.popupRef?.popup.instance;
const popupEl = popup?.container.nativeElement;
const popupHeight = popupEl?.offsetHeight ?? 0;
const popupWidth = popupEl?.offsetWidth ?? 0;
const taskMove = !(this.taskDragService.leftDragHandle || this.taskDragService.rightDragHandle);
// the theme does not provide zIndex for the marquee tooltip, thus it is applied here as an intentional exception
this.popupRef && (this.popupRef.popupElement.style.zIndex += 1000000);
this.popupRef && (popup.margin = {
horizontal: taskMove ? taskRect.left - e.offset - this.taskDragService.tasksContainerRect.left - popupWidth / 2 : e.width - taskEl.nativeElement.clientWidth - popupWidth / 2,
vertical: (taskEl.nativeElement.clientHeight + popupHeight) / 2
});
}
}));
this.subscriptions.add(taskDragService.dragEnd.subscribe(() => {
this.marquee = {
show: false,
left: 0,
width: 0
};
this.dragging = this.completion = false;
this.tooltip.hide();
this.dragResult = null;
this.tooltip.position = this.tooltipOptions.position;
this.tooltip.offset = 6;
}));
}
ngOnChanges(changes) {
if (changes['currentTimeMarker']) {
this.createTimeMarker();
}
}
trackBySlotIndex(index, item) {
// Combine index with timestamp to ensure uniqueness
// even when multiple slots have the same start time
return `${index}-${item.start.getTime()}`;
}
ngAfterViewInit() {
this.currentTimeMarkerService.slots = this.slots;
this.currentTimeMarkerService.rows = this.rows;
this.currentTimeMarkerService.container = this.timelineContent;
const timelineHeader = this.timelineHeaderWrap.nativeElement;
const rightContainer = this.timelineContent.nativeElement;
this.scrollSyncService.registerElement(rightContainer, 'timeline');
this.scrollSyncService.registerElement(timelineHeader, 'header');
this.dependencyDomService.registerContentContainer(this.tasksContainer.nativeElement);
if (this.taskDragService && isDocumentAvailable()) {
this.zone.onStable.pipe(take(1)).subscribe(() => {
this.taskDragService.tasksContainer = this.tasksContainer.nativeElement;
this.taskDragService.scrollableContainer = this.tasksContainer.nativeElement.closest('.k-grid-content');
this.taskDragService.tasksContainerRect = this.tasksContainer.nativeElement.getBoundingClientRect();
});
}
}
ngOnDestroy() {
this.subscriptions.unsubscribe();
}
isNonWorking(item) {
return item.hasOwnProperty('isWorking') && !item.isWorking;
}
messageFor(token) {
return this.localization.get(token);
}
createTimeMarker() {
this.zone.runOutsideAngular(() => {
this.currentTimeMarkerService.removeTimeMarker();
if ((typeof this.currentTimeMarker === 'boolean' && this.currentTimeMarker) || this.currentTimeMarker?.enabled) {
this.currentTimeMarkerService.createTimeMarker();
}
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GanttTimelineComponent, deps: [{ token: i1.ScrollSyncService }, { token: i2.DependencyDomService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.CurrentTimeMarkerService }, { token: i4.GanttLocalizationService }, { token: i5.TaskDragService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GanttTimelineComponent, isStandalone: true, selector: "kendo-gantt-timeline", inputs: { rows: "rows", slots: "slots", groupSlots: "groupSlots", tableWidth: "tableWidth", activeView: "activeView", taskContentTemplate: "taskContentTemplate", taskTemplate: "taskTemplate", summaryTaskTemplate: "summaryTaskTemplate", taskClass: "taskClass", renderDependencyDragClues: "renderDependencyDragClues", dragScrollSettings: "dragScrollSettings", currentTimeMarker: "currentTimeMarker", customTooltipTemplate: "customTooltipTemplate", tooltipOptions: "tooltipOptions", selectable: "selectable", isTaskSelected: "isTaskSelected", isExpanded: "isExpanded", dependencies: "dependencies" }, outputs: { timelineContainerPress: "timelineContainerPress", timelineContainerDrag: "timelineContainerDrag", timelineContainerRelease: "timelineContainerRelease" }, viewQueries: [{ propertyName: "timelineContent", first: true, predicate: ["timelineContent"], descendants: true, static: true }, { propertyName: "timelineColumns", first: true, predicate: ["timelineColumns"], descendants: true, static: true }, { propertyName: "timelineHeaderWrap", first: true, predicate: ["timelineHeaderWrap"], descendants: true, static: true }, { propertyName: "tasksContainer", first: true, predicate: ["tasksContainer"], descendants: true, static: true }, { propertyName: "tooltip", first: true, predicate: TooltipDirective, descendants: true }, { propertyName: "dragPopupContainer", first: true, predicate: ["dragPopupContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "dependencyDragCreatePolyline", first: true, predicate: ["dependencyDragCreatePolyline"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
<div class="k-gantt-timeline k-grid k-grid-md">
<div class="k-grid-header">
<div #timelineHeaderWrap class="k-grid-header-wrap">
<table
class="k-table k-table-md k-grid-header-table"
role="presentation"
[style.width.px]="tableWidth"
>
<tbody
kendoGanttHeaderTableBody
[groupSlots]="groupSlots"
[slots]="slots">
</tbody>
</table>
</div>
</div>
<!-- tabindex="-1" required for https://bugzilla.mozilla.org/show_bug.cgi?id=1069739 -->
<div
#timelineContent
class="k-grid-content"
tabindex="-1"
role="tree"
aria-roledescription="Timeline"
kendoGanttTimelineScrollable
[scrollSettings]="dragScrollSettings"
kendoDraggable
[enableDrag]="draggableEnabled"
(kendoPress)="timelineContainerPress.emit($event)"
(kendoDrag)="timelineContainerDrag.emit($event)"
(kendoRelease)="timelineContainerRelease.emit($event)"
>
<div class="k-gantt-tables">
<table
class="k-table k-table-md k-grid-table k-gantt-rows"
[style.width.px]="tableWidth"
role="presentation"
>
<tbody class="k-table-tbody">
(item of rows; track $index; let i = $index) {
<tr
class="k-table-row{{i % 2 ? ' k-table-alt-row' : ''}}">
<td class="k-table-td"></td>
</tr>
}
</tbody>
</table>
<table
#timelineColumns
class="k-table k-table-md k-gantt-columns"
role="presentation"
[style.width.px]="tableWidth"
>
<colgroup>
(item of slots; track trackBySlotIndex($index, item)) {
<col>
}
</colgroup>
<tbody class="k-table-tbody">
<tr class="k-table-row">
(item of slots; track trackBySlotIndex($index, item)) {
<td
class="k-table-td"
[class.k-nonwork-hour]="isNonWorking(item)"></td>
}
</tr>
</tbody>
</table>
<table kendoTooltip
#tooltip="kendoTooltip"
[tooltipTemplate]="completion ? completionRatioTooltip : dragging ? resizingTooltip : customTooltipTemplate ? customTooltip : tooltipTemplate"
[position]="tooltipOptions.position"
[callout]="!dragging"
[tooltipClass]="dragging ? 'k-gantt-resize-hint' : undefined"
filter=".k-task"
[showOn]="dragging || completion ? 'none' : 'hover'"
#tasksContainer
class="k-table k-table-md k-gantt-tasks"
role="presentation"
[style.border-collapse]="'collapse'"
[style.width.px]="tableWidth"
>
<tbody
class="k-table-tbody"
kendoGanttTasksTableBody
[rows]="rows"
[activeView]="activeView"
[taskContentTemplate]="taskContentTemplate"
[taskTemplate]="taskTemplate"
[summaryTaskTemplate]="summaryTaskTemplate"
[taskClass]="taskClass"
[isExpanded]="isExpanded"
[selectable]="selectable"
[isTaskSelected]="isTaskSelected"
[renderDependencyDragClues]="renderDependencyDragClues"
(taskPointerEnter)="task = $event"
(taskPointerLeave)="task = null"
>
</tbody>
</table>
</div>
<ng-template #tooltipTemplate>
<div class="k-task-content">
<div class="k-task-details">
<strong>{{task?.title}}</strong>
<div class="k-task-pct">{{task?.completionRatio | kendoNumber: 'p'}}</div>
<ul class="k-reset">
<li>{{messageFor('tooltipStartDateText')}}: {{task?.start | kendoDate: 'HH:mm a EEE, MMM d'}}</li>
<li>{{messageFor('tooltipEndDateText')}}: {{task?.end | kendoDate: 'HH:mm a EEE, MMM d'}}</li>
</ul>
</div>
</div>
</ng-template>
<ng-template #customTooltip>
<ng-container *ngTemplateOutlet="customTooltipTemplate.templateRef; context: { $implicit: task, task }"></ng-container>
</ng-template>
<ng-template #resizingTooltip>
<div class="k-tooltip-content">
<div>{{messageFor('tooltipStartDateText')}}: {{dragResult?.start | kendoDate: 'HH:mm a EEE, MMM d'}}</div>
<div>{{messageFor('tooltipEndDateText')}}: {{dragResult?.end | kendoDate: 'HH:mm a EEE, MMM d'}}</div>
</div>
</ng-template>
<ng-template #completionRatioTooltip>
<div class="k-tooltip-content">
<div>{{dragResult?.completionRatio | kendoNumber: 'p'}}</div>
</div>
</ng-template>
<svg class="k-gantt-dependencies-svg">
(dependency of dependencies; track dependency.id) {
<polyline
kendoGanttDependency
[dependency]="dependency"
/>
}
<polyline #dependencyDragCreatePolyline />
</svg>
(marquee.show) {
<div class="k-marquee k-gantt-marquee" style="top: 0px; height: {{tasksContainer.offsetHeight}}px; left: {{marquee.left}}px; width: {{marquee.width}}px;">
<div class="k-marquee-color"></div>
</div>
}
<!-- placeholder for the dependency drag popup; its position is not arbitrary - the popup is intended to be absolutely positioned inside the .k-grid-content element -->
<ng-container #dragPopupContainer></ng-container>
</div>
</div>
`, isInline: true, dependencies: [{ kind: "component", type: GanttHeaderTableBodyComponent, selector: "[kendoGanttHeaderTableBody]", inputs: ["groupSlots", "slots"] }, { kind: "directive", type: TimelineScrollableDirective, selector: "[kendoGanttTimelineScrollable]", inputs: ["scrollSettings"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: GanttTasksTableBodyComponent, selector: "[kendoGanttTasksTableBody]", inputs: ["selectable", "rows", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "isExpanded", "isTaskSelected", "renderDependencyDragClues"], outputs: ["taskPointerEnter", "taskPointerLeave"] }, { kind: "directive", type: GanttDependencyDirective, selector: "[kendoGanttDependency]", inputs: ["dependency"] }, { kind: "directive", type: i6.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "tooltipContentClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { kind: "pipe", type: DatePipe, name: "kendoDate" }, { kind: "pipe", type: NumberPipe, name: "kendoNumber" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GanttTimelineComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-gantt-timeline',
template: `
<div class="k-gantt-timeline k-grid k-grid-md">
<div class="k-grid-header">
<div #timelineHeaderWrap class="k-grid-header-wrap">
<table
class="k-table k-table-md k-grid-header-table"
role="presentation"
[style.width.px]="tableWidth"
>
<tbody
kendoGanttHeaderTableBody
[groupSlots]="groupSlots"
[slots]="slots">
</tbody>
</table>
</div>
</div>
<!-- tabindex="-1" required for https://bugzilla.mozilla.org/show_bug.cgi?id=1069739 -->
<div
#timelineContent
class="k-grid-content"
tabindex="-1"
role="tree"
aria-roledescription="Timeline"
kendoGanttTimelineScrollable
[scrollSettings]="dragScrollSettings"
kendoDraggable
[enableDrag]="draggableEnabled"
(kendoPress)="timelineContainerPress.emit($event)"
(kendoDrag)="timelineContainerDrag.emit($event)"
(kendoRelease)="timelineContainerRelease.emit($event)"
>
<div class="k-gantt-tables">
<table
class="k-table k-table-md k-grid-table k-gantt-rows"
[style.width.px]="tableWidth"
role="presentation"
>
<tbody class="k-table-tbody">
(item of rows; track $index; let i = $index) {
<tr
class="k-table-row{{i % 2 ? ' k-table-alt-row' : ''}}">
<td class="k-table-td"></td>
</tr>
}
</tbody>
</table>
<table
#timelineColumns
class="k-table k-table-md k-gantt-columns"
role="presentation"
[style.width.px]="tableWidth"
>
<colgroup>
(item of slots; track trackBySlotIndex($index, item)) {
<col>
}
</colgroup>
<tbody class="k-table-tbody">
<tr class="k-table-row">
(item of slots; track trackBySlotIndex($index, item)) {
<td
class="k-table-td"
[class.k-nonwork-hour]="isNonWorking(item)"></td>
}
</tr>
</tbody>
</table>
<table kendoTooltip
#tooltip="kendoTooltip"
[tooltipTemplate]="completion ? completionRatioTooltip : dragging ? resizingTooltip : customTooltipTemplate ? customTooltip : tooltipTemplate"
[position]="tooltipOptions.position"
[callout]="!dragging"
[tooltipClass]="dragging ? 'k-gantt-resize-hint' : undefined"
filter=".k-task"
[showOn]="dragging || completion ? 'none' : 'hover'"
#tasksContainer
class="k-table k-table-md k-gantt-tasks"
role="presentation"
[style.border-collapse]="'collapse'"
[style.width.px]="tableWidth"
>
<tbody
class="k-table-tbody"
kendoGanttTasksTableBody
[rows]="rows"
[activeView]="activeView"
[taskContentTemplate]="taskContentTemplate"
[taskTemplate]="taskTemplate"
[summaryTaskTemplate]="summaryTaskTemplate"
[taskClass]="taskClass"
[isExpanded]="isExpanded"
[selectable]="selectable"
[isTaskSelected]="isTaskSelected"
[renderDependencyDragClues]="renderDependencyDragClues"
(taskPointerEnter)="task = $event"
(taskPointerLeave)="task = null"
>
</tbody>
</table>
</div>
<ng-template #tooltipTemplate>
<div class="k-task-content">
<div class="k-task-details">
<strong>{{task?.title}}</strong>
<div class="k-task-pct">{{task?.completionRatio | kendoNumber: 'p'}}</div>
<ul class="k-reset">
<li>{{messageFor('tooltipStartDateText')}}: {{task?.start | kendoDate: 'HH:mm a EEE, MMM d'}}</li>
<li>{{messageFor('tooltipEndDateText')}}: {{task?.end | kendoDate: 'HH:mm a EEE, MMM d'}}</li>
</ul>
</div>
</div>
</ng-template>
<ng-template #customTooltip>
<ng-container *ngTemplateOutlet="customTooltipTemplate.templateRef; context: { $implicit: task, task }"></ng-container>
</ng-template>
<ng-template #resizingTooltip>
<div class="k-tooltip-content">
<div>{{messageFor('tooltipStartDateText')}}: {{dragResult?.start | kendoDate: 'HH:mm a EEE, MMM d'}}</div>
<div>{{messageFor('tooltipEndDateText')}}: {{dragResult?.end | kendoDate: 'HH:mm a EEE, MMM d'}}</div>
</div>
</ng-template>
<ng-template #completionRatioTooltip>
<div class="k-tooltip-content">
<div>{{dragResult?.completionRatio | kendoNumber: 'p'}}</div>
</div>
</ng-template>
<svg class="k-gantt-dependencies-svg">
(dependency of dependencies; track dependency.id) {
<polyline
kendoGanttDependency
[dependency]="dependency"
/>
}
<polyline #dependencyDragCreatePolyline />
</svg>
(marquee.show) {
<div class="k-marquee k-gantt-marquee" style="top: 0px; height: {{tasksContainer.offsetHeight}}px; left: {{marquee.left}}px; width: {{marquee.width}}px;">
<div class="k-marquee-color"></div>
</div>
}
<!-- placeholder for the dependency drag popup; its position is not arbitrary - the popup is intended to be absolutely positioned inside the .k-grid-content element -->
<ng-container #dragPopupContainer></ng-container>
</div>
</div>
`,
standalone: true,
encapsulation: ViewEncapsulation.None,
imports: [GanttHeaderTableBodyComponent, TimelineScrollableDirective, DraggableDirective, GanttTasksTableBodyComponent, GanttDependencyDirective, KENDO_TOOLTIP, DatePipe, NumberPipe, NgTemplateOutlet],
}]
}], ctorParameters: () => [{ type: i1.ScrollSyncService }, { type: i2.DependencyDomService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.CurrentTimeMarkerService }, { type: i4.GanttLocalizationService }, { type: i5.TaskDragService, decorators: [{
type: Optional
}] }], propDecorators: { timelineContent: [{
type: ViewChild,
args: ['timelineContent', { static: true }]
}], timelineColumns: [{
type: ViewChild,
args: ['timelineColumns', { static: true }]
}], timelineHeaderWrap: [{
type: ViewChild,
args: ['timelineHeaderWrap', { static: true }]
}], tasksContainer: [{
type: ViewChild,
args: ['tasksContainer', { static: true }]
}], tooltip: [{
type: ViewChild,
args: [TooltipDirective]
}], dragPopupContainer: [{
type: ViewChild,
args: ['dragPopupContainer', { static: false, read: ViewContainerRef }]
}], dependencyDragCreatePolyline: [{
type: ViewChild,
args: ['dependencyDragCreatePolyline']
}], rows: [{
type: Input
}], slots: [{
type: Input
}], groupSlots: [{
type: Input
}], tableWidth: [{
type: Input
}], activeView: [{
type: Input
}], taskContentTemplate: [{
type: Input
}], taskTemplate: [{
type: Input
}], summaryTaskTemplate: [{
type: Input
}], taskClass: [{
type: Input
}], renderDependencyDragClues: [{
type: Input
}], dragScrollSettings: [{
type: Input
}], currentTimeMarker: [{
type: Input
}], customTooltipTemplate: [{
type: Input
}], tooltipOptions: [{
type: Input
}], selectable: [{
type: Input
}], isTaskSelected: [{
type: Input
}], isExpanded: [{
type: Input
}], dependencies: [{
type: Input
}], timelineContainerPress: [{
type: Output
}], timelineContainerDrag: [{
type: Output
}], timelineContainerRelease: [{
type: Output
}] } });