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

package/fesm2022/progress-kendo-angular-gantt.mjs

@@ -3,21 +3,23 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, Directive, Input, EventEmitter, Inject, LOCALE_ID, isDevMode, HostBinding, ViewChild, forwardRef, Component, ViewContainerRef, Output, Optional, QueryList, SkipSelf, Host, ContentChildren, ContentChild, HostListener, NgModule } from '@angular/core';
+import { Injectable, Directive, Input, EventEmitter, Inject, LOCALE_ID, inject, isDevMode, HostBinding, ViewChild, forwardRef, Component, Output, Optional, ViewContainerRef, ViewEncapsulation, QueryList, SkipSelf, Host, ContentChildren, ContentChild, HostListener, NgModule } from '@angular/core';
 import { ColumnBase, ColumnComponent, ColumnGroupComponent, SpanColumnComponent, TreeListSpacerComponent, DataBoundTreeComponent, ExpandableTreeComponent, TreeListComponent, CustomMessagesComponent as CustomMessagesComponent$2, FlatBindingDirective, HierarchyBindingDirective, ExpandableDirective, ColumnResizingService } from '@progress/kendo-angular-treelist';
 import { cloneDate, addWeeks, firstDayInWeek, addDays, lastDayOfMonth, getDate, firstDayOfMonth, addMonths, lastMonthOfYear, MS_PER_HOUR, MS_PER_DAY, isEqual } from '@progress/kendo-date-math';
 import { Subject, Subscription, fromEvent, forkJoin, EMPTY, isObservable, of } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
-import { Keys, isDocumentAvailable, closestInScope, matchesClasses, EventsOutsideAngularDirective, DraggableDirective, PreventableEvent, anyChanged, closest, isFocusable, focusableSelector, isVisible, shouldShowValidationUI, hasObservers, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
+import { Keys, isDocumentAvailable, closestInScope, matchesClasses, isPresent as isPresent$1, EventsOutsideAngularDirective, DraggableDirective, PreventableEvent, anyChanged, closest, isFocusable, focusableSelector, isVisible, shouldShowValidationUI, hasObservers, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
 import { map, distinctUntilChanged, take, switchMap, expand, reduce, filter } from 'rxjs/operators';
 import { getter, touchEnabled } from '@progress/kendo-common';
 import * as i1 from '@progress/kendo-angular-intl';
-import { IntlService } from '@progress/kendo-angular-intl';
+import { IntlService, DatePipe, NumberPipe } from '@progress/kendo-angular-intl';
 import { __decorate, __param, __metadata } from 'tslib';
 import { orderBy } from '@progress/kendo-data-query';
 import { xIcon, plusIcon, minusIcon, saveIcon, cancelOutlineIcon, trashIcon } from '@progress/kendo-svg-icons';
 import { NgClass, NgIf, NgTemplateOutlet, NgFor } from '@angular/common';
 import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
+import * as i6 from '@progress/kendo-angular-tooltip';
+import { TooltipDirective, KENDO_TOOLTIP } from '@progress/kendo-angular-tooltip';
 import * as i1$1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import * as i4 from '@angular/forms';
@@ -32,6 +34,8 @@ import { DialogComponent, CustomMessagesComponent as CustomMessagesComponent$1,
 import { TabStripComponent, TabStripTabComponent, TabContentDirective, SplitterComponent, SplitterPaneComponent } from '@progress/kendo-angular-layout';
 import * as i3 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
+import * as i3$1 from '@progress/kendo-angular-utils';
+import { DragTargetContainerDirective } from '@progress/kendo-angular-utils';
 
 /**
  * @hidden
@@ -40,8 +44,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-gantt',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1736177768,
-    version: '17.2.1-develop.2',
+    publishDate: 1736180932,
+    version: '17.3.0-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
@@ -1860,6 +1864,228 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
+/**
+ * @hidden
+ */
+class TaskDragService {
+    mapper;
+    zone;
+    taskDraggable;
+    drag = new Subject();
+    dragEnd = new Subject();
+    dragStart = new Subject();
+    tasksContainer;
+    tasksContainerRect;
+    scrollableContainer;
+    currentDragTask;
+    currentDragTaskRect;
+    leftDragHandle;
+    rightDragHandle;
+    completionRatioHandle;
+    tasks = [];
+    editedProp;
+    prevX;
+    prevWidth;
+    prevLeft;
+    prevScrollLeft;
+    newRange;
+    offsetX;
+    maxWidth;
+    newCompletionRatio;
+    constructor(mapper, zone) {
+        this.mapper = mapper;
+        this.zone = zone;
+    }
+    registerTask(task) {
+        if (!this.tasks.some(t => t === task)) {
+            this.tasks.push(task);
+        }
+    }
+    onDragStart(args) {
+        this.tasksContainerRect = this.tasksContainer.getBoundingClientRect();
+        this.currentDragTask = this.tasks.find(t => t.taskElement.nativeElement.contains(args.dragTarget) || t.taskElement.nativeElement.nextElementSibling === args.dragTarget);
+        const taskEl = this.currentDragTask.taskElement.nativeElement;
+        this.currentDragTaskRect = taskEl.getBoundingClientRect();
+        this.completionRatioHandle = args.dragTarget.classList.contains('k-task-draghandle');
+        this.leftDragHandle = args.dragTarget.classList.contains('k-resize-w');
+        this.rightDragHandle = args.dragTarget.classList.contains('k-resize-e');
+        this.editedProp = this.leftDragHandle ? 'start' : this.rightDragHandle ? 'end' : 'both';
+        this.dragStart.next(args);
+    }
+    onDrag(args) {
+        if (this.completionRatioHandle) { // completion ratio handle drag
+            const taskWidth = this.currentDragTaskRect.width;
+            const scrollLeft = this.scrollableContainer?.scrollLeft;
+            const scrollDelta = isPresent$1(this.prevScrollLeft) ? this.prevScrollLeft - scrollLeft : 0;
+            const completionWidth = Math.min(Math.max(args.dragEvent.clientX - this.currentDragTaskRect.left - scrollDelta, 0), taskWidth);
+            const newCompletionRatio = completionWidth / taskWidth;
+            this.currentDragTask.draggedCompletionWidth = completionWidth;
+            !this.prevScrollLeft && (this.prevScrollLeft = scrollLeft);
+            this.newCompletionRatio = newCompletionRatio;
+            this.drag.next({
+                start: this.mapper.extractFromTask(this.currentDragTask.dataItem, 'start'),
+                end: this.mapper.extractFromTask(this.currentDragTask.dataItem, 'end'),
+                completionRatio: newCompletionRatio,
+                dragEvent: args,
+                item: this.currentDragTask.dataItem,
+                offset: this.prevX,
+                width: this.prevWidth
+            });
+        }
+        else { // task resize or drag
+            const marquee = this.calculateMarquee(args, this.leftDragHandle, this.rightDragHandle);
+            if (!marquee) {
+                return;
+            }
+            const { left, width } = marquee;
+            this.newRange = this.calculateStartEnd(this.editedProp, width, left);
+            this.drag.next({
+                start: this.newRange.start,
+                end: this.newRange.end,
+                completionRatio: this.mapper.extractFromTask(this.currentDragTask.dataItem, 'completionRatio'),
+                dragEvent: args,
+                item: this.currentDragTask.dataItem,
+                offset: left,
+                width
+            });
+        }
+    }
+    onDragEnd(args) {
+        if (this.completionRatioHandle) {
+            this.dragEnd.next({
+                start: this.mapper.extractFromTask(this.currentDragTask.dataItem, 'start'),
+                end: this.mapper.extractFromTask(this.currentDragTask.dataItem, 'end'),
+                completionRatio: this.newCompletionRatio,
+                dragEvent: args,
+                item: this.currentDragTask.dataItem,
+                offset: this.prevX,
+                width: this.prevWidth
+            });
+        }
+        else {
+            this.dragEnd.next({
+                start: this.newRange.start,
+                end: this.newRange.end,
+                completionRatio: this.mapper.extractFromTask(this.currentDragTask.dataItem, 'completionRatio'),
+                dragEvent: args,
+                item: this.currentDragTask.dataItem,
+                offset: this.prevX,
+                width: this.prevWidth
+            });
+        }
+        this.prevWidth = this.prevX = this.prevLeft = this.prevScrollLeft = this.offsetX = this.maxWidth = this.newCompletionRatio = null;
+        this.currentDragTaskRect = this.currentDragTask = this.currentDragTask.draggedCompletionWidth = this.editedProp = this.newRange = null;
+        this.leftDragHandle = this.rightDragHandle = this.completionRatioHandle = false;
+    }
+    calculateMarquee(e, leftDragHandle, rightDragHandle) {
+        const clientX = e.dragEvent.clientX;
+        // Update container rect when dragging outside of it to avoid miscalculations
+        // coming from scrolling the whole page during dragging a task
+        if (clientX < this.tasksContainerRect.x || clientX > this.tasksContainerRect.right) {
+            this.zone.runOutsideAngular(() => {
+                this.tasksContainerRect = this.tasksContainer.getBoundingClientRect();
+                this.currentDragTaskRect = this.currentDragTask.taskElement.nativeElement.getBoundingClientRect();
+            });
+            return;
+        }
+        const scrollLeft = this.scrollableContainer?.scrollLeft;
+        const scrollDelta = isPresent$1(this.prevScrollLeft) ? this.prevScrollLeft - scrollLeft : 0;
+        let left, width;
+        if (leftDragHandle) {
+            if (!isPresent$1(this.maxWidth)) {
+                this.maxWidth = this.currentDragTaskRect.right - this.tasksContainerRect.x + scrollLeft;
+            }
+            left = Math.min(Math.max(clientX - this.tasksContainerRect.x - scrollDelta, 0), this.maxWidth);
+            width = Math.min(Math.max(this.currentDragTaskRect.right - clientX + scrollDelta, 0), this.maxWidth);
+        }
+        else if (rightDragHandle) {
+            if (!isPresent$1(this.maxWidth)) {
+                this.maxWidth = this.tasksContainerRect.right - this.currentDragTaskRect.x;
+            }
+            left = this.prevLeft ?? (this.currentDragTaskRect.x - this.tasksContainerRect.x);
+            width = Math.min(Math.max(clientX - this.tasksContainerRect.x - left - scrollDelta, 0), this.maxWidth);
+        }
+        else { // dragging the whole task
+            if (!isPresent$1(this.offsetX)) {
+                this.offsetX = e.dragEvent.offsetX;
+            }
+            left = Math.max(clientX - this.tasksContainerRect.x - this.offsetX - scrollDelta, 0);
+        }
+        const cursorLeft = clientX - this.tasksContainerRect.x;
+        // out of limits (0, max possible width) when dragging the left handle
+        if (this.leftDragHandle && (cursorLeft < 0 || this.maxWidth < cursorLeft)) {
+            return {
+                left: cursorLeft < 0 ? 0 : this.maxWidth,
+                width
+            };
+        }
+        // out of limits (0, max possible width) when dragging right handle
+        if (rightDragHandle && (clientX < this.currentDragTaskRect.x) || clientX > this.tasksContainerRect.right) {
+            return {
+                left,
+                width: clientX < this.currentDragTaskRect.x ? 0 : this.maxWidth
+            };
+        }
+        // out of limits (start < view start || end > view end) when dragging the whole task
+        if (!(this.leftDragHandle || this.rightDragHandle) && (left < 0 || (clientX + this.currentDragTaskRect.width - scrollDelta - this.offsetX > this.tasksContainerRect.right))) {
+            return {
+                left: Math.min(Math.max(left, 0), this.tasksContainerRect.width - this.currentDragTaskRect.width),
+                width: this.currentDragTaskRect.width
+            };
+        }
+        this.prevX = clientX;
+        this.prevLeft = left;
+        this.prevWidth = width;
+        !this.prevScrollLeft && (this.prevScrollLeft = scrollLeft);
+        return {
+            left,
+            width: width ?? this.currentDragTaskRect.width
+        };
+    }
+    calculateStartEnd(editedProp, width, left) {
+        const startDate = this.mapper.extractFromTask(this.currentDragTask.dataItem, 'start');
+        const endDate = this.mapper.extractFromTask(this.currentDragTask.dataItem, 'end');
+        const duration = endDate - startDate;
+        const delta = left - this.currentDragTaskRect.x + this.tasksContainerRect.x;
+        if (editedProp === 'both') {
+            if (duration) {
+                const delta = left - this.currentDragTaskRect.x + this.tasksContainerRect.left;
+                const coef = delta / this.currentDragTask.taskWidth;
+                const deltaMs = duration * coef;
+                const newStart = new Date(startDate.getTime() + deltaMs);
+                const newEnd = new Date(newStart.getTime() + duration);
+                return {
+                    start: newStart,
+                    end: newEnd
+                };
+            }
+            else { // milestone task      
+                const initialOffset = this.currentDragTaskRect.x - this.tasksContainerRect.x;
+                const msPerPx = (startDate - this.currentDragTask.viewService.viewStart) / initialOffset;
+                const deltaMs = delta * msPerPx;
+                return {
+                    start: new Date(startDate.getTime() + deltaMs),
+                    end: new Date(startDate.getTime() + deltaMs)
+                };
+            }
+        }
+        const coef = width / this.currentDragTask.taskWidth;
+        const newDuration = duration * coef;
+        const newPropDate = editedProp === 'start' ? new Date(endDate - newDuration) : new Date(startDate.getTime() + newDuration);
+        const newStart = editedProp === 'start' ? newPropDate : startDate;
+        const newEnd = editedProp === 'end' ? newPropDate : endDate;
+        return {
+            start: newStart,
+            end: newEnd
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TaskDragService, deps: [{ token: MappingService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TaskDragService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TaskDragService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: MappingService }, { type: i0.NgZone }]; } });
+
 const slotUnitDuration = {
     day: MS_PER_HOUR,
     week: MS_PER_DAY,
@@ -1959,6 +2185,9 @@ class GanttTaskBase {
         // fall-back to 0 in case no completionRatio is provided
         return isNumber(overlayWidth) ? overlayWidth : 0;
     }
+    draggedCompletionWidth;
+    taskDragService;
+    completionDragResult;
     subscriptions = new Subscription();
     constructor(mapper, // left public to be available for usage in the templates
     timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
@@ -1968,6 +2197,7 @@ class GanttTaskBase {
         this.optionChangesService = optionChangesService;
         this.cdr = cdr;
         this.navigationService = navigationService;
+        this.taskDragService = inject(TaskDragService, { optional: true });
         this.subscriptions.add(this.optionChangesService.viewChanges
             .subscribe(() => this.cdr.markForCheck()));
         this.subscriptions.add(this.navigationService.taskStatusChanges
@@ -1986,6 +2216,9 @@ class GanttTaskBase {
             }
         }
     }
+    ngAfterViewInit() {
+        this.taskDragService?.registerTask(this);
+    }
     ngOnChanges(changes) {
         if (isPresent(changes['dataItem'])) {
             if (isPresent(changes['dataItem'].previousValue)) {
@@ -2066,6 +2299,9 @@ class GanttTaskComponent extends GanttTaskBase {
     taskTemplate;
     xIcon = xIcon;
     touchEnabled = touchEnabled;
+    get showDragHandles() {
+        return isPresent$1(this.taskDragService);
+    }
     constructor(editService, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
         super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService);
         this.editService = editService;
@@ -2095,7 +2331,7 @@ class GanttTaskComponent extends GanttTaskBase {
             <ng-container *ngIf="!taskTemplate">
                 <div
                     class="k-task-complete"
-                    [style.width.px]="completionOverlayWidth"
+                    [style.width.px]="draggedCompletionWidth ?? completionOverlayWidth"
                         aria-hidden="true"
                 >
                 </div>
@@ -2127,6 +2363,10 @@ class GanttTaskComponent extends GanttTaskBase {
                                 [svgIcon]="xIcon"></kendo-icon-wrapper>
                         </span>
                     </span>
+                    <ng-container *ngIf="showDragHandles">
+                        <span class="k-resize-handle k-resize-w"></span>
+                        <span class="k-resize-handle k-resize-e"></span>
+                    </ng-container>
                 </div>
             </ng-container>
             <ng-template
@@ -2136,9 +2376,10 @@ class GanttTaskComponent extends GanttTaskBase {
                     $implicit: dataItem,
                     elementWidth: taskWidth
                 }"
-            >
-            </ng-template>
+            ></ng-template>
         </div>
+        <div class="k-task-draghandle" *ngIf="showDragHandles"
+            [style.left.px]="draggedCompletionWidth ?? completionOverlayWidth"></div>
         <ng-container *ngIf="renderDependencyDragClues">
             <div
                 class="k-task-dot k-task-start k-touch-action-none"
@@ -2178,7 +2419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <ng-container *ngIf="!taskTemplate">
                 <div
                     class="k-task-complete"
-                    [style.width.px]="completionOverlayWidth"
+                    [style.width.px]="draggedCompletionWidth ?? completionOverlayWidth"
                         aria-hidden="true"
                 >
                 </div>
@@ -2210,6 +2451,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 [svgIcon]="xIcon"></kendo-icon-wrapper>
                         </span>
                     </span>
+                    <ng-container *ngIf="showDragHandles">
+                        <span class="k-resize-handle k-resize-w"></span>
+                        <span class="k-resize-handle k-resize-e"></span>
+                    </ng-container>
                 </div>
             </ng-container>
             <ng-template
@@ -2219,9 +2464,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     $implicit: dataItem,
                     elementWidth: taskWidth
                 }"
-            >
-            </ng-template>
+            ></ng-template>
         </div>
+        <div class="k-task-draghandle" *ngIf="showDragHandles"
+            [style.left.px]="draggedCompletionWidth ?? completionOverlayWidth"></div>
         <ng-container *ngIf="renderDependencyDragClues">
             <div
                 class="k-task-dot k-task-start k-touch-action-none"
@@ -2487,16 +2733,27 @@ class GanttTasksTableBodyComponent {
     isExpanded;
     isTaskSelected;
     renderDependencyDragClues;
+    taskPointerEnter = new EventEmitter();
+    taskPointerLeave = new EventEmitter();
     constructor(dependencyDomService, mapper) {
         this.dependencyDomService = dependencyDomService;
         this.mapper = mapper;
     }
+    trackBy = (_, item) => this.mapper.extractFromTask(item, 'id');
     isMileStone(item) {
         return !item.hasChildren && isEqual(this.mapper.extractFromTask(item.data, 'start'), this.mapper.extractFromTask(item.data, 'end'));
     }
+    mapItemToTask(item) {
+        const mappedItem = ['id', 'title', 'completionRatio', 'start', 'end']
+            .reduce((acc, curr) => {
+            acc[curr] = this.mapper.extractFromTask(item.data, curr);
+            return acc;
+        }, {});
+        return mappedItem;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GanttTasksTableBodyComponent, deps: [{ token: DependencyDomService }, { token: MappingService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GanttTasksTableBodyComponent, isStandalone: true, selector: "[kendoGanttTasksTableBody]", inputs: { selectable: "selectable", rows: "rows", activeView: "activeView", taskContentTemplate: "taskContentTemplate", taskTemplate: "taskTemplate", summaryTaskTemplate: "summaryTaskTemplate", taskClass: "taskClass", isExpanded: "isExpanded", isTaskSelected: "isTaskSelected", renderDependencyDragClues: "renderDependencyDragClues" }, viewQueries: [{ propertyName: "timelineRow", first: true, predicate: ["timelineRow"], descendants: true }], ngImport: i0, template: `
-        <tr class="k-table-row" #timelineRow *ngFor="let item of rows; let index = index">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GanttTasksTableBodyComponent, isStandalone: true, selector: "[kendoGanttTasksTableBody]", inputs: { selectable: "selectable", rows: "rows", activeView: "activeView", taskContentTemplate: "taskContentTemplate", taskTemplate: "taskTemplate", summaryTaskTemplate: "summaryTaskTemplate", taskClass: "taskClass", isExpanded: "isExpanded", isTaskSelected: "isTaskSelected", renderDependencyDragClues: "renderDependencyDragClues" }, outputs: { taskPointerEnter: "taskPointerEnter", taskPointerLeave: "taskPointerLeave" }, viewQueries: [{ propertyName: "timelineRow", first: true, predicate: ["timelineRow"], descendants: true }], ngImport: i0, template: `
+        <tr class="k-table-row" #timelineRow *ngFor="let item of rows; let index = index; trackBy: trackBy ">
             <td class="k-table-td">
                 <kendo-gantt-milestone-task
                     *ngIf="isMileStone(item); else task"
@@ -2508,6 +2765,8 @@ class GanttTasksTableBodyComponent {
                     [isSelected]="isTaskSelected"
                     [index]="index"
                     [renderDependencyDragClues]="renderDependencyDragClues"
+                    (pointerenter)="taskPointerEnter.emit(mapItemToTask(item))"
+                    (pointerleave)="taskPointerLeave.emit()"
                 >
                 </kendo-gantt-milestone-task>
                 <ng-template #task>
@@ -2523,8 +2782,9 @@ class GanttTasksTableBodyComponent {
                         [isExpanded]="isExpanded"
                         [index]="index"
                         [renderDependencyDragClues]="renderDependencyDragClues"
-                    >
-                    </kendo-gantt-summary-task>
+                        (pointerenter)="taskPointerEnter.emit(mapItemToTask(item))"
+                        (pointerleave)="taskPointerLeave.emit()"
+                    ></kendo-gantt-summary-task>
                     <kendo-gantt-task
                         *ngIf="!item.hasChildren"
                         [dataItem]="item.data"
@@ -2537,8 +2797,9 @@ class GanttTasksTableBodyComponent {
                         [isSelected]="isTaskSelected"
                         [index]="index"
                         [renderDependencyDragClues]="renderDependencyDragClues"
-                    >
-                    </kendo-gantt-task>
+                        (pointerenter)="taskPointerEnter.emit(mapItemToTask(item))"
+                        (pointerleave)="taskPointerLeave.emit()"
+                    ></kendo-gantt-task>
                 </ng-template>
             </td>
         </tr>
@@ -2550,7 +2811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoGanttTasksTableBody]',
                     template: `
-        <tr class="k-table-row" #timelineRow *ngFor="let item of rows; let index = index">
+        <tr class="k-table-row" #timelineRow *ngFor="let item of rows; let index = index; trackBy: trackBy ">
             <td class="k-table-td">
                 <kendo-gantt-milestone-task
                     *ngIf="isMileStone(item); else task"
@@ -2562,6 +2823,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [isSelected]="isTaskSelected"
                     [index]="index"
                     [renderDependencyDragClues]="renderDependencyDragClues"
+                    (pointerenter)="taskPointerEnter.emit(mapItemToTask(item))"
+                    (pointerleave)="taskPointerLeave.emit()"
                 >
                 </kendo-gantt-milestone-task>
                 <ng-template #task>
@@ -2577,8 +2840,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         [isExpanded]="isExpanded"
                         [index]="index"
                         [renderDependencyDragClues]="renderDependencyDragClues"
-                    >
-                    </kendo-gantt-summary-task>
+                        (pointerenter)="taskPointerEnter.emit(mapItemToTask(item))"
+                        (pointerleave)="taskPointerLeave.emit()"
+                    ></kendo-gantt-summary-task>
                     <kendo-gantt-task
                         *ngIf="!item.hasChildren"
                         [dataItem]="item.data"
@@ -2591,8 +2855,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         [isSelected]="isTaskSelected"
                         [index]="index"
                         [renderDependencyDragClues]="renderDependencyDragClues"
-                    >
-                    </kendo-gantt-task>
+                        (pointerenter)="taskPointerEnter.emit(mapItemToTask(item))"
+                        (pointerleave)="taskPointerLeave.emit()"
+                    ></kendo-gantt-task>
                 </ng-template>
             </td>
         </tr>
@@ -2623,6 +2888,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], renderDependencyDragClues: [{
                 type: Input
+            }], taskPointerEnter: [{
+                type: Output
+            }], taskPointerLeave: [{
+                type: Output
             }] } });
 
 /**
@@ -2860,6 +3129,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Represents a template that defines the whole content of the Task tooltip.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoGanttTaskTooltipTemplate` directive inside the `<kendo-gantt>` tag.
+ *
+ * The template context is set to the respective data item.
+ *
+ * @example
+ * ```ts-preview
+ * _@Component({
+ *      selector: 'my-app',
+ *      template: `
+ *          <kendo-gantt [kendoGanttHierarchyBinding]="data">
+ *              <ng-template kendoGanttTaskTooltipTemplate let-dataItem>
+ *                  <div [style]="'color: white; font-size: 8px;'">
+ *                      {{ dataItem.title }} - {{ dataItem.completionRatio * 100 }}% complete;
+ *                  </div>
+ *              </ng-template>
+ *          </kendo-gantt>
+ *      `
+ * })
+ * class AppComponent {
+ *     public data: any[] = sampleTasks;
+ * }
+ * ```
+ */
+class GanttTaskTooltipTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GanttTaskTooltipTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GanttTaskTooltipTemplateDirective, isStandalone: true, selector: "[kendoGanttTaskTooltipTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GanttTaskTooltipTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGanttTaskTooltipTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * @hidden
+ *
+ * Needed to keep the Gantt's LocalizationService reference and be able to use it component's inside the TabStrip
+ */
+class GanttLocalizationService {
+    localizationService;
+    constructor(localizationService) {
+        this.localizationService = localizationService;
+    }
+    get(token) {
+        return this.localizationService.get(token);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GanttLocalizationService, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GanttLocalizationService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GanttLocalizationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
+
 /**
  * @hidden
  */
@@ -2869,6 +3202,8 @@ class GanttTimelineComponent {
     renderer;
     zone;
     currentTimeMarkerService;
+    localization;
+    taskDragService;
     /**
      * Represents the scrollable container of the timeline content.
      * Used externally by the DependencyDragCreateDirective.
@@ -2877,6 +3212,7 @@ class GanttTimelineComponent {
     timelineColumns;
     timelineHeaderWrap;
     tasksContainer;
+    tooltip;
     /**
      * Represents the view container ref used for rendering the dependency drag popop.
      * Used externally by the DependencyDragCreateDirective.
@@ -2899,6 +3235,8 @@ class GanttTimelineComponent {
     renderDependencyDragClues;
     dragScrollSettings;
     currentTimeMarker;
+    customTooltipTemplate;
+    tooltipOptions;
     selectable;
     isTaskSelected;
     isExpanded;
@@ -2913,13 +3251,26 @@ 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
@@ -2935,6 +3286,73 @@ 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']) {
@@ -2950,6 +3368,13 @@ 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();
@@ -2957,6 +3382,9 @@ class GanttTimelineComponent {
     isNonWorking(item) {
         return item.hasOwnProperty('isWorking') && !item.isWorking;
     }
+    messageFor(token) {
+        return this.localization.get(token);
+    }
     createTimeMarker() {
         this.zone.runOutsideAngular(() => {
             this.currentTimeMarkerService.removeTimeMarker();
@@ -2965,8 +3393,8 @@ class GanttTimelineComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GanttTimelineComponent, deps: [{ token: ScrollSyncService }, { token: DependencyDomService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: 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: ScrollSyncService }, { token: DependencyDomService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: CurrentTimeMarkerService }, { token: GanttLocalizationService }, { token: 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">
@@ -3032,7 +3460,14 @@ 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"
@@ -3052,10 +3487,39 @@ 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"
@@ -3064,12 +3528,15 @@ 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,
@@ -3141,7 +3608,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"
@@ -3161,10 +3635,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"
@@ -3173,16 +3676,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: ScrollSyncService }, { type: DependencyDomService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: CurrentTimeMarkerService }]; }, propDecorators: { timelineContent: [{
+        }], ctorParameters: function () { return [{ type: ScrollSyncService }, { type: DependencyDomService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: CurrentTimeMarkerService }, { type: GanttLocalizationService }, { type: TaskDragService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { timelineContent: [{
                 type: ViewChild,
                 args: ['timelineContent', { static: true }]
             }], timelineColumns: [{
@@ -3194,12 +3704,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: [{
@@ -3224,6 +3737,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: [{
@@ -3726,26 +4243,6 @@ class CellCloseEvent extends PreventableEvent {
     }
 }
 
-/**
- * @hidden
- *
- * Needed to keep the Gantt's LocalizationService reference and be able to use it component's inside the TabStrip
- */
-class GanttLocalizationService {
-    localizationService;
-    constructor(localizationService) {
-        this.localizationService = localizationService;
-    }
-    get(token) {
-        return this.localizationService.get(token);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GanttLocalizationService, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GanttLocalizationService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GanttLocalizationService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
-
 /**
  * @hidden
  */
@@ -5276,8 +5773,16 @@ class Messages extends ComponentMessages {
      * for the **Reset** button of the columns.
      */
     columnsReset;
+    /**
+     * The text shown in the task tooltip before the task start date.
+     */
+    tooltipStartDateText;
+    /**
+     * The text shown in the task tooltip before the task end date.
+     */
+    tooltipEndDateText;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, selector: "kendo-gantt-messages-base", inputs: { taskEditingGeneralTabTitle: "taskEditingGeneralTabTitle", taskEditingPredecessorsTabTitle: "taskEditingPredecessorsTabTitle", taskEditingSuccessorsTabTitle: "taskEditingSuccessorsTabTitle", taskEditingDependenciesAddButtonText: "taskEditingDependenciesAddButtonText", taskEditingDependenciesRemoveButtonText: "taskEditingDependenciesRemoveButtonText", taskEditingDependenciesGridNameColumnTitle: "taskEditingDependenciesGridNameColumnTitle", taskEditingDependenciesGridTypeColumnTitle: "taskEditingDependenciesGridTypeColumnTitle", deleteButtonText: "deleteButtonText", taskDeleteLabel: "taskDeleteLabel", taskEditingDialogTitle: "taskEditingDialogTitle", taskEditingDialogCloseTitle: "taskEditingDialogCloseTitle", confirmationDialogCloseTitle: "confirmationDialogCloseTitle", confirmationDialogTitle: "confirmationDialogTitle", addTaskText: "addTaskText", addChildText: "addChildText", addAboveText: "addAboveText", addBelowText: "addBelowText", cancelButtonText: "cancelButtonText", saveButtonText: "saveButtonText", titleFieldInputLabel: "titleFieldInputLabel", startFieldInputLabel: "startFieldInputLabel", endFieldInputLabel: "endFieldInputLabel", completionRatioFieldInputLabel: "completionRatioFieldInputLabel", confirmationDialogContent: "confirmationDialogContent", dayViewText: "dayViewText", weekViewText: "weekViewText", monthViewText: "monthViewText", yearViewText: "yearViewText", noRecords: "noRecords", filter: "filter", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", columnMenu: "columnMenu", columns: "columns", lock: "lock", unlock: "unlock", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, selector: "kendo-gantt-messages-base", inputs: { taskEditingGeneralTabTitle: "taskEditingGeneralTabTitle", taskEditingPredecessorsTabTitle: "taskEditingPredecessorsTabTitle", taskEditingSuccessorsTabTitle: "taskEditingSuccessorsTabTitle", taskEditingDependenciesAddButtonText: "taskEditingDependenciesAddButtonText", taskEditingDependenciesRemoveButtonText: "taskEditingDependenciesRemoveButtonText", taskEditingDependenciesGridNameColumnTitle: "taskEditingDependenciesGridNameColumnTitle", taskEditingDependenciesGridTypeColumnTitle: "taskEditingDependenciesGridTypeColumnTitle", deleteButtonText: "deleteButtonText", taskDeleteLabel: "taskDeleteLabel", taskEditingDialogTitle: "taskEditingDialogTitle", taskEditingDialogCloseTitle: "taskEditingDialogCloseTitle", confirmationDialogCloseTitle: "confirmationDialogCloseTitle", confirmationDialogTitle: "confirmationDialogTitle", addTaskText: "addTaskText", addChildText: "addChildText", addAboveText: "addAboveText", addBelowText: "addBelowText", cancelButtonText: "cancelButtonText", saveButtonText: "saveButtonText", titleFieldInputLabel: "titleFieldInputLabel", startFieldInputLabel: "startFieldInputLabel", endFieldInputLabel: "endFieldInputLabel", completionRatioFieldInputLabel: "completionRatioFieldInputLabel", confirmationDialogContent: "confirmationDialogContent", dayViewText: "dayViewText", weekViewText: "weekViewText", monthViewText: "monthViewText", yearViewText: "yearViewText", noRecords: "noRecords", filter: "filter", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", columnMenu: "columnMenu", columns: "columns", lock: "lock", unlock: "unlock", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", tooltipStartDateText: "tooltipStartDateText", tooltipEndDateText: "tooltipEndDateText" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
@@ -5421,6 +5926,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], columnsReset: [{
                 type: Input
+            }], tooltipStartDateText: [{
+                type: Input
+            }], tooltipEndDateText: [{
+                type: Input
             }] } });
 
 /**
@@ -5564,6 +6073,14 @@ class GanttComponent {
      * Therefore the `static` property needs to be set to `false`.
      */
     taskTemplate;
+    /**
+     * @hidden
+     *
+     * Queries the template for a task tooltip template declaration.
+     * In newer Angular versions the ngIf-ed value gets evaluated after the static query is resolved.
+     * Therefore the `static` property needs to be set to `false`.
+     */
+    taskTooltipTemplate;
     /**
      * @hidden
      *
@@ -5904,6 +6421,16 @@ class GanttComponent {
     get dragScrollSettings() {
         return this._dragScrollSettings;
     }
+    /**
+     * Allows setting the task tooltip `position`, `callout`, and `showAfter` options.
+     *
+     * @default { position: 'top', callout: true, showAfter: 100 }
+     */
+    taskTooltipOptions = {
+        position: 'top',
+        callout: true,
+        showAfter: 100
+    };
     /**
      * Fires when an item is expanded.
      */
@@ -6795,7 +7322,7 @@ class GanttComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GanttComponent, deps: [{ token: TimelineViewService }, { token: ScrollSyncService }, { token: i0.Renderer2 }, { token: MappingService }, { token: OptionChangesService }, { token: DependencyDomService }, { token: EditService }, { token: i1$1.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: NavigationService }, { token: CurrentTimeMarkerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GanttComponent, isStandalone: true, selector: "kendo-gantt", inputs: { roleDescription: ["aria-roledescription", "roleDescription"], role: "role", taskModelFields: "taskModelFields", dependencyModelFields: "dependencyModelFields", activeView: "activeView", data: "data", isSelected: "isSelected", validateNewDependency: "validateNewDependency", selectable: "selectable", toolbarSettings: "toolbarSettings", toolbarAriaLabel: "toolbarAriaLabel", fetchChildren: "fetchChildren", hasChildren: "hasChildren", dependencies: "dependencies", sortable: "sortable", sort: "sort", filterable: "filterable", filter: "filter", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", navigable: "navigable", timelinePaneOptions: "timelinePaneOptions", treeListPaneOptions: "treeListPaneOptions", taskClass: "taskClass", rowClass: "rowClass", isExpanded: "isExpanded", columnsAutoSize: "columnsAutoSize", currentTimeMarker: "currentTimeMarker", columnMenu: "columnMenu", columnsReorderable: "columnsReorderable", columnsResizable: "columnsResizable", dragScrollSettings: "dragScrollSettings" }, outputs: { selectionChange: "selectionChange", rowExpand: "rowExpand", taskDblClick: "taskDblClick", cellDblClick: "cellDblClick", cellClose: "cellClose", taskDelete: "taskDelete", rowCollapse: "rowCollapse", remove: "remove", cancel: "cancel", save: "save", taskAdd: "taskAdd", dependencyAdd: "dependencyAdd", sortChange: "sortChange", filterChange: "filterChange", dataStateChange: "dataStateChange", treeListPaneCollapsedChange: "treeListPaneCollapsedChange", timelinePaneCollapsedChange: "timelinePaneCollapsedChange", timelinePaneSizeChange: "timelinePaneSizeChange", activeViewChange: "activeViewChange", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", cellClick: "cellClick", taskClick: "taskClick" }, host: { properties: { "attr.aria-roledescription": "this.hostRoleDescriptionAttr", "attr.role": "this.hostRoleAttr", "class.k-gantt": "this.hostClasses", "attr.dir": "this.dir" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GanttComponent, isStandalone: true, selector: "kendo-gantt", inputs: { roleDescription: ["aria-roledescription", "roleDescription"], role: "role", taskModelFields: "taskModelFields", dependencyModelFields: "dependencyModelFields", activeView: "activeView", data: "data", isSelected: "isSelected", validateNewDependency: "validateNewDependency", selectable: "selectable", toolbarSettings: "toolbarSettings", toolbarAriaLabel: "toolbarAriaLabel", fetchChildren: "fetchChildren", hasChildren: "hasChildren", dependencies: "dependencies", sortable: "sortable", sort: "sort", filterable: "filterable", filter: "filter", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", navigable: "navigable", timelinePaneOptions: "timelinePaneOptions", treeListPaneOptions: "treeListPaneOptions", taskClass: "taskClass", rowClass: "rowClass", isExpanded: "isExpanded", columnsAutoSize: "columnsAutoSize", currentTimeMarker: "currentTimeMarker", columnMenu: "columnMenu", columnsReorderable: "columnsReorderable", columnsResizable: "columnsResizable", dragScrollSettings: "dragScrollSettings", taskTooltipOptions: "taskTooltipOptions" }, outputs: { selectionChange: "selectionChange", rowExpand: "rowExpand", taskDblClick: "taskDblClick", cellDblClick: "cellDblClick", cellClose: "cellClose", taskDelete: "taskDelete", rowCollapse: "rowCollapse", remove: "remove", cancel: "cancel", save: "save", taskAdd: "taskAdd", dependencyAdd: "dependencyAdd", sortChange: "sortChange", filterChange: "filterChange", dataStateChange: "dataStateChange", treeListPaneCollapsedChange: "treeListPaneCollapsedChange", timelinePaneCollapsedChange: "timelinePaneCollapsedChange", timelinePaneSizeChange: "timelinePaneSizeChange", activeViewChange: "activeViewChange", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", cellClick: "cellClick", taskClick: "taskClick" }, host: { properties: { "attr.aria-roledescription": "this.hostRoleDescriptionAttr", "attr.role": "this.hostRoleAttr", "class.k-gantt": "this.hostClasses", "attr.dir": "this.dir" } }, providers: [
             GanttLocalizationService,
             LocalizationService,
             {
@@ -6823,7 +7350,7 @@ class GanttComponent {
             TimelineScrollService,
             NavigationService,
             CurrentTimeMarkerService
-        ], queries: [{ propertyName: "taskContentTemplate", first: true, predicate: GanttTaskContentTemplateDirective, descendants: true }, { propertyName: "taskTemplate", first: true, predicate: GanttTaskTemplateDirective, descendants: true }, { propertyName: "summaryTaskTemplate", first: true, predicate: GanttSummaryTaskTemplateDirective, descendants: true }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columns", predicate: GanttColumnBase }, { propertyName: "views", predicate: ViewBase }], viewQueries: [{ propertyName: "treeList", first: true, predicate: TreeListComponent, descendants: true, static: true }, { propertyName: "timeline", first: true, predicate: GanttTimelineComponent, descendants: true }], exportAs: ["kendoGantt"], usesOnChanges: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "taskContentTemplate", first: true, predicate: GanttTaskContentTemplateDirective, descendants: true }, { propertyName: "taskTemplate", first: true, predicate: GanttTaskTemplateDirective, descendants: true }, { propertyName: "taskTooltipTemplate", first: true, predicate: GanttTaskTooltipTemplateDirective, descendants: true }, { propertyName: "summaryTaskTemplate", first: true, predicate: GanttSummaryTaskTemplateDirective, descendants: true }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columns", predicate: GanttColumnBase }, { propertyName: "views", predicate: ViewBase }], viewQueries: [{ propertyName: "treeList", first: true, predicate: TreeListComponent, descendants: true, static: true }, { propertyName: "timeline", first: true, predicate: GanttTimelineComponent, descendants: true }], exportAs: ["kendoGantt"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoGanttLocalizedMessages
             i18n-taskEditingGeneralTabTitle="kendo.gantt.taskEditingGeneralTabTitle|The title of the 'General' tab of the editing dialog TabStrip"
             taskEditingGeneralTabTitle="General"
@@ -7021,7 +7548,13 @@ class GanttComponent {
             columnsApply="Apply"
 
             i18n-columnsReset="kendo.gantt.columnsReset|The text shown in the column menu or column chooser for the columns reset button"
-            columnsReset="Reset"></ng-container>
+            columnsReset="Reset"
+            
+            i18n-tooltipStartDateText="kendo.gantt.tooltipStartDateText|The text shown in the task tooltip before the task start date"
+            tooltipStartDateText="Start"
+            
+            i18n-tooltipEndDateText="kendo.gantt.tooltipEndDateText|The text shown in the task tooltip before the task end date"
+            tooltipEndDateText="End"></ng-container>
         <kendo-gantt-toolbar
             *ngIf="showToolbar('top')"
             [attr.aria-label]="toolbarAriaLabel"
@@ -7160,6 +7693,8 @@ class GanttComponent {
                             dblclick: handleTimelineDblClick,
                             mousedown: handleTimelineMouseDown
                         }"
+                        [customTooltipTemplate]="taskTooltipTemplate"
+                        [tooltipOptions]="taskTooltipOptions"
                         [scope]="this"
                     ></kendo-gantt-timeline>
                 </kendo-splitter-pane>
@@ -7195,7 +7730,7 @@ class GanttComponent {
         </kendo-dialog>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-   `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGanttLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: ["showAddTask", "showViewSelector", "views", "activeView", "toolbarTemplate", "navigable", "position"], outputs: ["activeViewChange"] }, { kind: "component", type: SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "splitbarWidth", "resizeStep", "splitterBarClass"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { kind: "component", type: SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "splitterBarAttributes", "splitterBarClass", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { kind: "component", type: TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "navigatable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "rowReorderable", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange", "rowReorder"], exportAs: ["kendoTreeList"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: CustomMessagesComponent$2, selector: "kendo-treelist-messages" }, { kind: "component", type: GanttTimelineComponent, selector: "kendo-gantt-timeline", inputs: ["rows", "slots", "groupSlots", "tableWidth", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "renderDependencyDragClues", "dragScrollSettings", "currentTimeMarker", "selectable", "isTaskSelected", "isExpanded", "dependencies"], outputs: ["timelineContainerPress", "timelineContainerDrag", "timelineContainerRelease"] }, { kind: "component", type: EditDialogComponent, selector: "kendo-gantt-edit-dialog", inputs: ["data"] }, { kind: "component", type: DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: TreeListSpacerComponent, selector: "kendo-treelist-spacer", inputs: ["width"] }, { 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: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
+   `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGanttLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: ["showAddTask", "showViewSelector", "views", "activeView", "toolbarTemplate", "navigable", "position"], outputs: ["activeViewChange"] }, { kind: "component", type: SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "splitbarWidth", "resizeStep", "splitterBarClass"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { kind: "component", type: SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "splitterBarAttributes", "splitterBarClass", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { kind: "component", type: TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "navigatable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "rowReorderable", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange", "rowReorder"], exportAs: ["kendoTreeList"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: CustomMessagesComponent$2, selector: "kendo-treelist-messages" }, { kind: "component", type: GanttTimelineComponent, selector: "kendo-gantt-timeline", inputs: ["rows", "slots", "groupSlots", "tableWidth", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "renderDependencyDragClues", "dragScrollSettings", "currentTimeMarker", "customTooltipTemplate", "tooltipOptions", "selectable", "isTaskSelected", "isExpanded", "dependencies"], outputs: ["timelineContainerPress", "timelineContainerDrag", "timelineContainerRelease"] }, { kind: "component", type: EditDialogComponent, selector: "kendo-gantt-edit-dialog", inputs: ["data"] }, { kind: "component", type: DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: TreeListSpacerComponent, selector: "kendo-treelist-spacer", inputs: ["width"] }, { 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: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GanttComponent, decorators: [{
             type: Component,
@@ -7429,7 +7964,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             columnsApply="Apply"
 
             i18n-columnsReset="kendo.gantt.columnsReset|The text shown in the column menu or column chooser for the columns reset button"
-            columnsReset="Reset"></ng-container>
+            columnsReset="Reset"
+            
+            i18n-tooltipStartDateText="kendo.gantt.tooltipStartDateText|The text shown in the task tooltip before the task start date"
+            tooltipStartDateText="Start"
+            
+            i18n-tooltipEndDateText="kendo.gantt.tooltipEndDateText|The text shown in the task tooltip before the task end date"
+            tooltipEndDateText="End"></ng-container>
         <kendo-gantt-toolbar
             *ngIf="showToolbar('top')"
             [attr.aria-label]="toolbarAriaLabel"
@@ -7568,6 +8109,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             dblclick: handleTimelineDblClick,
                             mousedown: handleTimelineMouseDown
                         }"
+                        [customTooltipTemplate]="taskTooltipTemplate"
+                        [tooltipOptions]="taskTooltipOptions"
                         [scope]="this"
                     ></kendo-gantt-timeline>
                 </kendo-splitter-pane>
@@ -7612,16 +8155,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: [TreeListComponent, { static: true }]
             }], timeline: [{
                 type: ViewChild,
-                args: [GanttTimelineComponent, { static: false }]
+                args: [GanttTimelineComponent]
             }], taskContentTemplate: [{
                 type: ContentChild,
-                args: [GanttTaskContentTemplateDirective, { static: false }]
+                args: [GanttTaskContentTemplateDirective]
             }], taskTemplate: [{
                 type: ContentChild,
-                args: [GanttTaskTemplateDirective, { static: false }]
+                args: [GanttTaskTemplateDirective]
+            }], taskTooltipTemplate: [{
+                type: ContentChild,
+                args: [GanttTaskTooltipTemplateDirective]
             }], summaryTaskTemplate: [{
                 type: ContentChild,
-                args: [GanttSummaryTaskTemplateDirective, { static: false }]
+                args: [GanttSummaryTaskTemplateDirective]
             }], toolbarTemplateChildren: [{
                 type: ContentChildren,
                 args: [ToolbarTemplateDirective]
@@ -7715,6 +8261,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], dragScrollSettings: [{
                 type: Input
+            }], taskTooltipOptions: [{
+                type: Input
             }], rowExpand: [{
                 type: Output
             }], taskDblClick: [{
@@ -8528,6 +9076,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
+class TaskDragDirective {
+    /**
+     * Emitted while the end user is resizing or moving a task through dragging.
+     */
+    taskDrag = new EventEmitter();
+    /**
+     * Triggered when the dragging action associated with resizing or moving an event is finished.
+     * The event data contains all necessary information to update the task and all related tasks
+     * accordingly.
+     */
+    taskDragEnd = new EventEmitter();
+    subs = new Subscription();
+    constructor(gantt, mapper, dragTargetContainer, taskDragService) {
+        dragTargetContainer.mode = 'manual';
+        dragTargetContainer.dragTargetFilter = '.k-resize-handle, .k-task, .k-task-draghandle';
+        dragTargetContainer.cursorStyle = null;
+        dragTargetContainer.threshold = 5;
+        this.subs.add(dragTargetContainer.onDragStart.subscribe((args) => {
+            taskDragService.onDragStart(args);
+        }));
+        this.subs.add(dragTargetContainer.onDrag.subscribe((args) => {
+            taskDragService.onDrag(args);
+        }));
+        this.subs.add(dragTargetContainer.onDragEnd.subscribe((args) => {
+            taskDragService.onDragEnd(args);
+        }));
+        this.subs.add(taskDragService.drag.subscribe((args) => {
+            hasObservers(this.taskDrag) && this.taskDrag.emit({
+                start: args.start,
+                end: args.end,
+                completionRatio: args.completionRatio,
+                item: getEditItem(args.item, gantt.treeList.view.data, mapper),
+                dragEvent: args.dragEvent
+            });
+        }));
+        this.subs.add(taskDragService.dragEnd.subscribe((args) => {
+            hasObservers(this.taskDragEnd) && this.taskDragEnd.emit({
+                start: args.start,
+                end: args.end,
+                completionRatio: args.completionRatio,
+                item: getEditItem(args.item, gantt.treeList.view.data, mapper),
+                dragEvent: args.dragEvent
+            });
+        }));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TaskDragDirective, deps: [{ token: GanttComponent }, { token: MappingService }, { token: i3$1.DragTargetContainerDirective }, { token: TaskDragService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TaskDragDirective, isStandalone: true, selector: "[kendoGanttTaskDrag]", outputs: { taskDrag: "taskDrag", taskDragEnd: "taskDragEnd" }, providers: [TaskDragService], hostDirectives: [{ directive: i3$1.DragTargetContainerDirective }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TaskDragDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGanttTaskDrag]',
+                    standalone: true,
+                    providers: [TaskDragService],
+                    hostDirectives: [DragTargetContainerDirective]
+                }]
+        }], ctorParameters: function () { return [{ type: GanttComponent }, { type: MappingService }, { type: i3$1.DragTargetContainerDirective }, { type: TaskDragService }]; }, propDecorators: { taskDrag: [{
+                type: Output
+            }], taskDragEnd: [{
+                type: Output
+            }] } });
+
 /**
 * Utility array that contains all `@progress/kendo-angular-gantt` related components and directives
 */
@@ -8558,7 +9171,9 @@ const KENDO_GANTT = [
     TimelineYearViewComponent,
     SelectableDirective,
     CustomMessagesComponent,
-    GanttAddTaskComponent
+    GanttAddTaskComponent,
+    TaskDragDirective,
+    GanttTaskTooltipTemplateDirective
 ];
 
 // IMPORTANT: NgModule export kept for backwards compatibility
@@ -8595,7 +9210,7 @@ const KENDO_GANTT = [
  */
 class GanttModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GanttModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GanttModule, imports: [GanttComponent, GanttFlatBindingDirective, GanttHierarchyBindingDirective, GanttTaskContentTemplateDirective, GanttTaskTemplateDirective, GanttSummaryTaskTemplateDirective, ToolbarTemplateDirective, ViewSelectorComponent, GanttColumnComponent, GanttColumnGroupComponent, GanttSpanColumnComponent, FilterCellTemplateDirective, FilterMenuTemplateDirective, CellTemplateDirective, EditTemplateDirective, ColumnMenuTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, GanttExpandableDirective, DependencyDragCreateDirective, TimelineDayViewComponent, TimelineWeekViewComponent, TimelineMonthViewComponent, TimelineYearViewComponent, SelectableDirective, CustomMessagesComponent, GanttAddTaskComponent], exports: [GanttComponent, GanttFlatBindingDirective, GanttHierarchyBindingDirective, GanttTaskContentTemplateDirective, GanttTaskTemplateDirective, GanttSummaryTaskTemplateDirective, ToolbarTemplateDirective, ViewSelectorComponent, GanttColumnComponent, GanttColumnGroupComponent, GanttSpanColumnComponent, FilterCellTemplateDirective, FilterMenuTemplateDirective, CellTemplateDirective, EditTemplateDirective, ColumnMenuTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, GanttExpandableDirective, DependencyDragCreateDirective, TimelineDayViewComponent, TimelineWeekViewComponent, TimelineMonthViewComponent, TimelineYearViewComponent, SelectableDirective, CustomMessagesComponent, GanttAddTaskComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GanttModule, imports: [GanttComponent, GanttFlatBindingDirective, GanttHierarchyBindingDirective, GanttTaskContentTemplateDirective, GanttTaskTemplateDirective, GanttSummaryTaskTemplateDirective, ToolbarTemplateDirective, ViewSelectorComponent, GanttColumnComponent, GanttColumnGroupComponent, GanttSpanColumnComponent, FilterCellTemplateDirective, FilterMenuTemplateDirective, CellTemplateDirective, EditTemplateDirective, ColumnMenuTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, GanttExpandableDirective, DependencyDragCreateDirective, TimelineDayViewComponent, TimelineWeekViewComponent, TimelineMonthViewComponent, TimelineYearViewComponent, SelectableDirective, CustomMessagesComponent, GanttAddTaskComponent, TaskDragDirective, GanttTaskTooltipTemplateDirective], exports: [GanttComponent, GanttFlatBindingDirective, GanttHierarchyBindingDirective, GanttTaskContentTemplateDirective, GanttTaskTemplateDirective, GanttSummaryTaskTemplateDirective, ToolbarTemplateDirective, ViewSelectorComponent, GanttColumnComponent, GanttColumnGroupComponent, GanttSpanColumnComponent, FilterCellTemplateDirective, FilterMenuTemplateDirective, CellTemplateDirective, EditTemplateDirective, ColumnMenuTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, GanttExpandableDirective, DependencyDragCreateDirective, TimelineDayViewComponent, TimelineWeekViewComponent, TimelineMonthViewComponent, TimelineYearViewComponent, SelectableDirective, CustomMessagesComponent, GanttAddTaskComponent, TaskDragDirective, GanttTaskTooltipTemplateDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GanttModule, providers: [{
                 provide: L10N_PREFIX,
                 useValue: 'kendo.gantt'
@@ -8665,5 +9280,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CellCloseEvent, CellTemplateDirective, ColumnMenuTemplateDirective, CustomMessagesComponent, DependenciesTableComponent, DependencyDragCreateDirective, DependencyType, DragValidationTooltipComponent, EditDialogComponent, EditTemplateDirective, FilterCellTemplateDirective, FilterMenuTemplateDirective, FooterTemplateDirective, GanttAddTaskComponent, GanttColumnBase, GanttColumnComponent, GanttColumnGroupComponent, GanttComponent, GanttDependencyDirective, GanttExpandableDirective, GanttFlatBindingDirective, GanttHeaderTableBodyComponent, GanttHierarchyBindingDirective, GanttMilestoneTaskComponent, GanttModule, GanttSpanColumnComponent, GanttSummaryTaskComponent, GanttSummaryTaskTemplateDirective, GanttTaskComponent, GanttTaskContentTemplateDirective, GanttTaskTemplateDirective, GanttTasksTableBodyComponent, GanttTimelineComponent, HeaderTemplateDirective, KENDO_GANTT, LocalizedMessagesDirective, SelectableDirective, TaskFieldsComponent, TimelineDayViewComponent, TimelineMonthViewComponent, TimelineScrollableDirective, TimelineWeekViewComponent, TimelineYearViewComponent, ToolbarComponent, ToolbarTemplateDirective, ViewSelectorComponent };
+export { CellCloseEvent, CellTemplateDirective, ColumnMenuTemplateDirective, CustomMessagesComponent, DependenciesTableComponent, DependencyDragCreateDirective, DependencyType, DragValidationTooltipComponent, EditDialogComponent, EditTemplateDirective, FilterCellTemplateDirective, FilterMenuTemplateDirective, FooterTemplateDirective, GanttAddTaskComponent, GanttColumnBase, GanttColumnComponent, GanttColumnGroupComponent, GanttComponent, GanttDependencyDirective, GanttExpandableDirective, GanttFlatBindingDirective, GanttHeaderTableBodyComponent, GanttHierarchyBindingDirective, GanttMilestoneTaskComponent, GanttModule, GanttSpanColumnComponent, GanttSummaryTaskComponent, GanttSummaryTaskTemplateDirective, GanttTaskComponent, GanttTaskContentTemplateDirective, GanttTaskTemplateDirective, GanttTaskTooltipTemplateDirective, GanttTasksTableBodyComponent, GanttTimelineComponent, HeaderTemplateDirective, KENDO_GANTT, LocalizedMessagesDirective, SelectableDirective, TaskDragDirective, TaskFieldsComponent, TimelineDayViewComponent, TimelineMonthViewComponent, TimelineScrollableDirective, TimelineWeekViewComponent, TimelineYearViewComponent, ToolbarComponent, ToolbarTemplateDirective, ViewSelectorComponent };