@progress/kendo-angular-gantt 17.2.1-develop.2 → 17.3.0-develop.1

package/esm2022/timeline/gantt-timeline.component.mjs

@@ -2,7 +2,7 @@
 * 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, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
+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';
@@ -12,13 +12,21 @@ 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 { NgFor } from '@angular/common';
+import { NgFor, NgIf, 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
  */
@@ -28,6 +36,8 @@ export class GanttTimelineComponent {
     renderer;
     zone;
     currentTimeMarkerService;
+    localization;
+    taskDragService;
     /**
      * Represents the scrollable container of the timeline content.
      * Used externally by the DependencyDragCreateDirective.
@@ -36,6 +46,7 @@ export class GanttTimelineComponent {
     timelineColumns;
     timelineHeaderWrap;
     tasksContainer;
+    tooltip;
     /**
      * Represents the view container ref used for rendering the dependency drag popop.
      * Used externally by the DependencyDragCreateDirective.
@@ -58,6 +69,8 @@ export class GanttTimelineComponent {
     renderDependencyDragClues;
     dragScrollSettings;
     currentTimeMarker;
+    customTooltipTemplate;
+    tooltipOptions;
     selectable;
     isTaskSelected;
     isExpanded;
@@ -72,13 +85,26 @@ export class GanttTimelineComponent {
     get draggableEnabled() {
         return this.renderDependencyDragClues;
     }
+    task;
+    dragResult;
+    dragging = false;
+    completion = false;
+    marquee = {
+        show: false,
+        left: 0,
+        width: 0
+    };
+    dragOffset;
     subscriptions = new Subscription();
-    constructor(scrollSyncService, dependencyDomService, renderer, zone, currentTimeMarkerService) {
+    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
@@ -94,6 +120,73 @@ export class GanttTimelineComponent {
             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);
+                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']) {
@@ -109,6 +202,13 @@ export class GanttTimelineComponent {
         this.scrollSyncService.registerElement(rightContainer, 'timeline');
         this.scrollSyncService.registerElement(timelineHeader, 'header');
         this.dependencyDomService.registerContentContainer(this.tasksContainer.nativeElement);
+        if (this.taskDragService) {
+            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();
@@ -116,6 +216,9 @@ export class GanttTimelineComponent {
     isNonWorking(item) {
         return item.hasOwnProperty('isWorking') && !item.isWorking;
     }
+    messageFor(token) {
+        return this.localization.get(token);
+    }
     createTimeMarker() {
         this.zone.runOutsideAngular(() => {
             this.currentTimeMarkerService.removeTimeMarker();
@@ -124,8 +227,8 @@ export class GanttTimelineComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GanttTimelineComponent, deps: [{ token: i1.ScrollSyncService }, { token: i2.DependencyDomService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.CurrentTimeMarkerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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", 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: "dragPopupContainer", first: true, predicate: ["dragPopupContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "dependencyDragCreatePolyline", first: true, predicate: ["dependencyDragCreatePolyline"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "14.0.0", version: "16.2.12", 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">
@@ -191,7 +294,14 @@ export class GanttTimelineComponent {
                         </tbody>
                     </table>
 
-                    <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"
@@ -211,10 +321,39 @@ export class GanttTimelineComponent {
                             [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">
                     <polyline
                         *ngFor="let dependency of dependencies"
@@ -223,12 +362,15 @@ export class GanttTimelineComponent {
                     />
                     <polyline #dependencyDragCreatePolyline />
                 </svg>
-
+                <div class="k-marquee k-gantt-marquee" *ngIf="marquee.show" 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: GanttTasksTableBodyComponent, selector: "[kendoGanttTasksTableBody]", inputs: ["selectable", "rows", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "isExpanded", "isTaskSelected", "renderDependencyDragClues"] }, { kind: "directive", type: GanttDependencyDirective, selector: "[kendoGanttDependency]", inputs: ["dependency"] }] });
+
+    `, 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "16.2.12", ngImport: i0, type: GanttTimelineComponent, decorators: [{
             type: Component,
@@ -300,7 +442,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         </tbody>
                     </table>
 
-                    <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"
@@ -320,10 +469,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             [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">
                     <polyline
                         *ngFor="let dependency of dependencies"
@@ -332,16 +510,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     />
                     <polyline #dependencyDragCreatePolyline />
                 </svg>
-
+                <div class="k-marquee k-gantt-marquee" *ngIf="marquee.show" 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,
-                    imports: [GanttHeaderTableBodyComponent, TimelineScrollableDirective, DraggableDirective, NgFor, GanttTasksTableBodyComponent, GanttDependencyDirective]
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [GanttHeaderTableBodyComponent, TimelineScrollableDirective, DraggableDirective, NgFor, GanttTasksTableBodyComponent,
+                        GanttDependencyDirective, KENDO_TOOLTIP, NgIf, DatePipe, NumberPipe, NgTemplateOutlet],
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ScrollSyncService }, { type: i2.DependencyDomService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.CurrentTimeMarkerService }]; }, propDecorators: { timelineContent: [{
+        }], ctorParameters: function () { return [{ 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: [{
@@ -353,12 +538,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], 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', { static: false }]
+                args: ['dependencyDragCreatePolyline']
             }], rows: [{
                 type: Input
             }], slots: [{
@@ -383,6 +571,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], currentTimeMarker: [{
                 type: Input
+            }], customTooltipTemplate: [{
+                type: Input
+            }], tooltipOptions: [{
+                type: Input
             }], selectable: [{
                 type: Input
             }], isTaskSelected: [{