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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/directives.d.ts +3 -1
  2. package/dragging/task-drag.directive.d.ts +29 -0
  3. package/dragging/task-drag.service.d.ts +49 -0
  4. package/esm2022/directives.mjs +5 -1
  5. package/esm2022/dragging/task-drag.directive.mjs +81 -0
  6. package/esm2022/dragging/task-drag.service.mjs +231 -0
  7. package/esm2022/gantt.component.mjs +49 -9
  8. package/esm2022/gantt.module.mjs +3 -1
  9. package/esm2022/index.mjs +2 -0
  10. package/esm2022/localization/messages.mjs +13 -1
  11. package/esm2022/models/events/{task-move-start-event.interface.mjs → index.mjs} +1 -1
  12. package/esm2022/models/models.mjs +2 -1
  13. package/esm2022/package-metadata.mjs +2 -2
  14. package/esm2022/rendering/gantt-task-base.mjs +9 -1
  15. package/esm2022/rendering/gantt-task.component.mjs +20 -7
  16. package/esm2022/rendering/gantt-tasks-table-body.component.mjs +35 -12
  17. package/esm2022/template-directives/task-tooltip-template.directive.mjs +49 -0
  18. package/esm2022/timeline/gantt-timeline.component.mjs +205 -13
  19. package/fesm2022/progress-kendo-angular-gantt.mjs +681 -66
  20. package/gantt.component.d.ts +18 -2
  21. package/gantt.module.d.ts +3 -1
  22. package/index.d.ts +2 -0
  23. package/localization/messages.d.ts +9 -1
  24. package/models/events/index.d.ts +21 -0
  25. package/models/events/task-drag-event.interface.d.ts +67 -0
  26. package/models/models.d.ts +4 -24
  27. package/models/tooltip-options.interface.d.ts +28 -0
  28. package/package.json +16 -15
  29. package/rendering/gantt-task-base.d.ts +7 -1
  30. package/rendering/gantt-task.component.d.ts +1 -0
  31. package/rendering/gantt-tasks-table-body.component.d.ts +7 -2
  32. package/schematics/ngAdd/index.js +7 -7
  33. package/template-directives/task-tooltip-template.directive.d.ts +38 -0
  34. package/timeline/gantt-timeline.component.d.ts +31 -6
  35. package/esm2022/models/events/task-resize-end-event.interface.mjs +0 -5
  36. package/esm2022/models/events/task-resize-event.interface.mjs +0 -5
  37. package/esm2022/models/events/task-resize-start-event.interface.mjs +0 -5
  38. package/models/events/task-move-end-event.interface.d.ts +0 -12
  39. package/models/events/task-move-event.interface.d.ts +0 -23
  40. package/models/events/task-move-start-event.interface.d.ts +0 -15
  41. package/models/events/task-resize-end-event.interface.d.ts +0 -12
  42. package/models/events/task-resize-event.interface.d.ts +0 -23
  43. package/models/events/task-resize-start-event.interface.d.ts +0 -15
  44. /package/esm2022/models/events/{task-move-end-event.interface.mjs → task-drag-event.interface.mjs} +0 -0
  45. /package/esm2022/models/{events/task-move-event.interface.mjs → tooltip-options.interface.mjs} +0 -0
@@ -293,8 +293,16 @@ export class Messages extends ComponentMessages {
293
293
  * for the **Reset** button of the columns.
294
294
  */
295
295
  columnsReset;
296
+ /**
297
+ * The text shown in the task tooltip before the task start date.
298
+ */
299
+ tooltipStartDateText;
300
+ /**
301
+ * The text shown in the task tooltip before the task end date.
302
+ */
303
+ tooltipEndDateText;
296
304
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
297
- 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 });
305
+ 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 });
298
306
  }
299
307
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, decorators: [{
300
308
  type: Directive,
@@ -438,4 +446,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
438
446
  type: Input
439
447
  }], columnsReset: [{
440
448
  type: Input
449
+ }], tooltipStartDateText: [{
450
+ type: Input
451
+ }], tooltipEndDateText: [{
452
+ type: Input
441
453
  }] } });
@@ -2,4 +2,4 @@
2
2
  * Copyright © 2025 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- export {};
5
+ export { CellCloseEvent } from './cell-close-event.interface';
@@ -4,4 +4,5 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  export * from './slot.interface';
6
6
  export { DependencyType } from './dependency-type.enum';
7
- export { CellCloseEvent } from './events/cell-close-event.interface';
7
+ // Events models
8
+ export * from './events';
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-gantt',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1736177768,
13
- version: '17.2.1-develop.2',
12
+ publishDate: 1736179553,
13
+ version: '17.3.0-develop.1',
14
14
  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'
15
15
  };
@@ -2,7 +2,7 @@
2
2
  * Copyright © 2025 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import { ChangeDetectorRef, Directive, ElementRef, HostBinding, Input, isDevMode, ViewChild } from '@angular/core';
5
+ import { ChangeDetectorRef, Directive, ElementRef, HostBinding, inject, Input, isDevMode, ViewChild } from '@angular/core';
6
6
  import { MS_PER_HOUR, MS_PER_DAY, firstDayOfMonth } from '@progress/kendo-date-math';
7
7
  import { Subscription } from 'rxjs';
8
8
  import { NavigationService } from '../navigation/navigation.service';
@@ -11,6 +11,7 @@ import { TimelineViewService } from '../timeline/timeline-view.service';
11
11
  import { DependencyDomService } from '../dependencies/dependency-dom.service';
12
12
  import { MappingService } from '../common/mapping.service';
13
13
  import { getTotalDaysInMonth, getTotalMonthsInBetween, isNumber, isPresent } from '../utils';
14
+ import { TaskDragService } from '../dragging/task-drag.service';
14
15
  import * as i0 from "@angular/core";
15
16
  import * as i1 from "../common/mapping.service";
16
17
  import * as i2 from "../timeline/timeline-view.service";
@@ -116,6 +117,9 @@ export class GanttTaskBase {
116
117
  // fall-back to 0 in case no completionRatio is provided
117
118
  return isNumber(overlayWidth) ? overlayWidth : 0;
118
119
  }
120
+ draggedCompletionWidth;
121
+ taskDragService;
122
+ completionDragResult;
119
123
  subscriptions = new Subscription();
120
124
  constructor(mapper, // left public to be available for usage in the templates
121
125
  timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
@@ -125,6 +129,7 @@ export class GanttTaskBase {
125
129
  this.optionChangesService = optionChangesService;
126
130
  this.cdr = cdr;
127
131
  this.navigationService = navigationService;
132
+ this.taskDragService = inject(TaskDragService, { optional: true });
128
133
  this.subscriptions.add(this.optionChangesService.viewChanges
129
134
  .subscribe(() => this.cdr.markForCheck()));
130
135
  this.subscriptions.add(this.navigationService.taskStatusChanges
@@ -143,6 +148,9 @@ export class GanttTaskBase {
143
148
  }
144
149
  }
145
150
  }
151
+ ngAfterViewInit() {
152
+ this.taskDragService?.registerTask(this);
153
+ }
146
154
  ngOnChanges(changes) {
147
155
  if (isPresent(changes['dataItem'])) {
148
156
  if (isPresent(changes['dataItem'].previousValue)) {
@@ -12,7 +12,7 @@ import { TimelineViewService } from './../timeline/timeline-view.service';
12
12
  import { GanttTaskBase } from './gantt-task-base';
13
13
  import { xIcon } from '@progress/kendo-svg-icons';
14
14
  import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
15
- import { EventsOutsideAngularDirective } from '@progress/kendo-angular-common';
15
+ import { EventsOutsideAngularDirective, isPresent } from '@progress/kendo-angular-common';
16
16
  import { IconWrapperComponent } from '@progress/kendo-angular-icons';
17
17
  import { touchEnabled } from '@progress/kendo-common';
18
18
  import * as i0 from "@angular/core";
@@ -31,6 +31,9 @@ export class GanttTaskComponent extends GanttTaskBase {
31
31
  taskTemplate;
32
32
  xIcon = xIcon;
33
33
  touchEnabled = touchEnabled;
34
+ get showDragHandles() {
35
+ return isPresent(this.taskDragService);
36
+ }
34
37
  constructor(editService, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
35
38
  super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService);
36
39
  this.editService = editService;
@@ -60,7 +63,7 @@ export class GanttTaskComponent extends GanttTaskBase {
60
63
  <ng-container *ngIf="!taskTemplate">
61
64
  <div
62
65
  class="k-task-complete"
63
- [style.width.px]="completionOverlayWidth"
66
+ [style.width.px]="draggedCompletionWidth ?? completionOverlayWidth"
64
67
  aria-hidden="true"
65
68
  >
66
69
  </div>
@@ -92,6 +95,10 @@ export class GanttTaskComponent extends GanttTaskBase {
92
95
  [svgIcon]="xIcon"></kendo-icon-wrapper>
93
96
  </span>
94
97
  </span>
98
+ <ng-container *ngIf="showDragHandles">
99
+ <span class="k-resize-handle k-resize-w"></span>
100
+ <span class="k-resize-handle k-resize-e"></span>
101
+ </ng-container>
95
102
  </div>
96
103
  </ng-container>
97
104
  <ng-template
@@ -101,9 +108,10 @@ export class GanttTaskComponent extends GanttTaskBase {
101
108
  $implicit: dataItem,
102
109
  elementWidth: taskWidth
103
110
  }"
104
- >
105
- </ng-template>
111
+ ></ng-template>
106
112
  </div>
113
+ <div class="k-task-draghandle" *ngIf="showDragHandles"
114
+ [style.left.px]="draggedCompletionWidth ?? completionOverlayWidth"></div>
107
115
  <ng-container *ngIf="renderDependencyDragClues">
108
116
  <div
109
117
  class="k-task-dot k-task-start k-touch-action-none"
@@ -143,7 +151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
143
151
  <ng-container *ngIf="!taskTemplate">
144
152
  <div
145
153
  class="k-task-complete"
146
- [style.width.px]="completionOverlayWidth"
154
+ [style.width.px]="draggedCompletionWidth ?? completionOverlayWidth"
147
155
  aria-hidden="true"
148
156
  >
149
157
  </div>
@@ -175,6 +183,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
175
183
  [svgIcon]="xIcon"></kendo-icon-wrapper>
176
184
  </span>
177
185
  </span>
186
+ <ng-container *ngIf="showDragHandles">
187
+ <span class="k-resize-handle k-resize-w"></span>
188
+ <span class="k-resize-handle k-resize-e"></span>
189
+ </ng-container>
178
190
  </div>
179
191
  </ng-container>
180
192
  <ng-template
@@ -184,9 +196,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
184
196
  $implicit: dataItem,
185
197
  elementWidth: taskWidth
186
198
  }"
187
- >
188
- </ng-template>
199
+ ></ng-template>
189
200
  </div>
201
+ <div class="k-task-draghandle" *ngIf="showDragHandles"
202
+ [style.left.px]="draggedCompletionWidth ?? completionOverlayWidth"></div>
190
203
  <ng-container *ngIf="renderDependencyDragClues">
191
204
  <div
192
205
  class="k-task-dot k-task-start k-touch-action-none"
@@ -2,7 +2,7 @@
2
2
  * Copyright © 2025 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import { Component, Input, TemplateRef, ViewChild, ElementRef } from '@angular/core';
5
+ import { Component, Input, TemplateRef, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core';
6
6
  import { isEqual } from '@progress/kendo-date-math';
7
7
  import { DependencyDomService } from '../dependencies/dependency-dom.service';
8
8
  import { MappingService } from '../common/mapping.service';
@@ -37,16 +37,27 @@ export class GanttTasksTableBodyComponent {
37
37
  isExpanded;
38
38
  isTaskSelected;
39
39
  renderDependencyDragClues;
40
+ taskPointerEnter = new EventEmitter();
41
+ taskPointerLeave = new EventEmitter();
40
42
  constructor(dependencyDomService, mapper) {
41
43
  this.dependencyDomService = dependencyDomService;
42
44
  this.mapper = mapper;
43
45
  }
46
+ trackBy = (_, item) => this.mapper.extractFromTask(item, 'id');
44
47
  isMileStone(item) {
45
48
  return !item.hasChildren && isEqual(this.mapper.extractFromTask(item.data, 'start'), this.mapper.extractFromTask(item.data, 'end'));
46
49
  }
50
+ mapItemToTask(item) {
51
+ const mappedItem = ['id', 'title', 'completionRatio', 'start', 'end']
52
+ .reduce((acc, curr) => {
53
+ acc[curr] = this.mapper.extractFromTask(item.data, curr);
54
+ return acc;
55
+ }, {});
56
+ return mappedItem;
57
+ }
47
58
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GanttTasksTableBodyComponent, deps: [{ token: i1.DependencyDomService }, { token: i2.MappingService }], target: i0.ɵɵFactoryTarget.Component });
48
- 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: `
49
- <tr class="k-table-row" #timelineRow *ngFor="let item of rows; let index = index">
59
+ 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: `
60
+ <tr class="k-table-row" #timelineRow *ngFor="let item of rows; let index = index; trackBy: trackBy ">
50
61
  <td class="k-table-td">
51
62
  <kendo-gantt-milestone-task
52
63
  *ngIf="isMileStone(item); else task"
@@ -58,6 +69,8 @@ export class GanttTasksTableBodyComponent {
58
69
  [isSelected]="isTaskSelected"
59
70
  [index]="index"
60
71
  [renderDependencyDragClues]="renderDependencyDragClues"
72
+ (pointerenter)="taskPointerEnter.emit(mapItemToTask(item))"
73
+ (pointerleave)="taskPointerLeave.emit()"
61
74
  >
62
75
  </kendo-gantt-milestone-task>
63
76
  <ng-template #task>
@@ -73,8 +86,9 @@ export class GanttTasksTableBodyComponent {
73
86
  [isExpanded]="isExpanded"
74
87
  [index]="index"
75
88
  [renderDependencyDragClues]="renderDependencyDragClues"
76
- >
77
- </kendo-gantt-summary-task>
89
+ (pointerenter)="taskPointerEnter.emit(mapItemToTask(item))"
90
+ (pointerleave)="taskPointerLeave.emit()"
91
+ ></kendo-gantt-summary-task>
78
92
  <kendo-gantt-task
79
93
  *ngIf="!item.hasChildren"
80
94
  [dataItem]="item.data"
@@ -87,8 +101,9 @@ export class GanttTasksTableBodyComponent {
87
101
  [isSelected]="isTaskSelected"
88
102
  [index]="index"
89
103
  [renderDependencyDragClues]="renderDependencyDragClues"
90
- >
91
- </kendo-gantt-task>
104
+ (pointerenter)="taskPointerEnter.emit(mapItemToTask(item))"
105
+ (pointerleave)="taskPointerLeave.emit()"
106
+ ></kendo-gantt-task>
92
107
  </ng-template>
93
108
  </td>
94
109
  </tr>
@@ -100,7 +115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
100
115
  // eslint-disable-next-line @angular-eslint/component-selector
101
116
  selector: '[kendoGanttTasksTableBody]',
102
117
  template: `
103
- <tr class="k-table-row" #timelineRow *ngFor="let item of rows; let index = index">
118
+ <tr class="k-table-row" #timelineRow *ngFor="let item of rows; let index = index; trackBy: trackBy ">
104
119
  <td class="k-table-td">
105
120
  <kendo-gantt-milestone-task
106
121
  *ngIf="isMileStone(item); else task"
@@ -112,6 +127,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
112
127
  [isSelected]="isTaskSelected"
113
128
  [index]="index"
114
129
  [renderDependencyDragClues]="renderDependencyDragClues"
130
+ (pointerenter)="taskPointerEnter.emit(mapItemToTask(item))"
131
+ (pointerleave)="taskPointerLeave.emit()"
115
132
  >
116
133
  </kendo-gantt-milestone-task>
117
134
  <ng-template #task>
@@ -127,8 +144,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
127
144
  [isExpanded]="isExpanded"
128
145
  [index]="index"
129
146
  [renderDependencyDragClues]="renderDependencyDragClues"
130
- >
131
- </kendo-gantt-summary-task>
147
+ (pointerenter)="taskPointerEnter.emit(mapItemToTask(item))"
148
+ (pointerleave)="taskPointerLeave.emit()"
149
+ ></kendo-gantt-summary-task>
132
150
  <kendo-gantt-task
133
151
  *ngIf="!item.hasChildren"
134
152
  [dataItem]="item.data"
@@ -141,8 +159,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
141
159
  [isSelected]="isTaskSelected"
142
160
  [index]="index"
143
161
  [renderDependencyDragClues]="renderDependencyDragClues"
144
- >
145
- </kendo-gantt-task>
162
+ (pointerenter)="taskPointerEnter.emit(mapItemToTask(item))"
163
+ (pointerleave)="taskPointerLeave.emit()"
164
+ ></kendo-gantt-task>
146
165
  </ng-template>
147
166
  </td>
148
167
  </tr>
@@ -173,4 +192,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
173
192
  type: Input
174
193
  }], renderDependencyDragClues: [{
175
194
  type: Input
195
+ }], taskPointerEnter: [{
196
+ type: Output
197
+ }], taskPointerLeave: [{
198
+ type: Output
176
199
  }] } });
@@ -0,0 +1,49 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import { Directive, Optional, TemplateRef } from '@angular/core';
6
+ import * as i0 from "@angular/core";
7
+ /**
8
+ * Represents a template that defines the whole content of the Task tooltip.
9
+ * To define the template, nest an `<ng-template>` tag
10
+ * with the `kendoGanttTaskTooltipTemplate` directive inside the `<kendo-gantt>` tag.
11
+ *
12
+ * The template context is set to the respective data item.
13
+ *
14
+ * @example
15
+ * ```ts-preview
16
+ * _@Component({
17
+ * selector: 'my-app',
18
+ * template: `
19
+ * <kendo-gantt [kendoGanttHierarchyBinding]="data">
20
+ * <ng-template kendoGanttTaskTooltipTemplate let-dataItem>
21
+ * <div [style]="'color: white; font-size: 8px;'">
22
+ * {{ dataItem.title }} - {{ dataItem.completionRatio * 100 }}% complete;
23
+ * </div>
24
+ * </ng-template>
25
+ * </kendo-gantt>
26
+ * `
27
+ * })
28
+ * class AppComponent {
29
+ * public data: any[] = sampleTasks;
30
+ * }
31
+ * ```
32
+ */
33
+ export class GanttTaskTooltipTemplateDirective {
34
+ templateRef;
35
+ constructor(templateRef) {
36
+ this.templateRef = templateRef;
37
+ }
38
+ 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 });
39
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GanttTaskTooltipTemplateDirective, isStandalone: true, selector: "[kendoGanttTaskTooltipTemplate]", ngImport: i0 });
40
+ }
41
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GanttTaskTooltipTemplateDirective, decorators: [{
42
+ type: Directive,
43
+ args: [{
44
+ selector: '[kendoGanttTaskTooltipTemplate]',
45
+ standalone: true
46
+ }]
47
+ }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
48
+ type: Optional
49
+ }] }]; } });