@progress/kendo-angular-gantt 0.2.1-dev.202112101349 → 0.3.0-dev.202201190830

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 (171) hide show
  1. package/dist/cdn/js/kendo-angular-gantt.js +2 -2
  2. package/dist/cdn/main.js +4 -4
  3. package/dist/es/common/touch-enabled.js +9 -0
  4. package/dist/es/dependencies/utils.js +40 -5
  5. package/dist/es/dragging/dependency-drag-create.directive.js +347 -0
  6. package/dist/es/dragging/drag-validation-tooltip.component.js +27 -0
  7. package/dist/es/editing/add-task.component.js +94 -0
  8. package/dist/es/editing/dependencies-table.component.js +131 -0
  9. package/dist/es/editing/edit-dialog.component.js +39 -8
  10. package/dist/es/editing/edit.service.js +92 -8
  11. package/dist/es/editing/task-fields.component.js +43 -0
  12. package/dist/es/editing/{util.js → utils.js} +0 -0
  13. package/dist/es/gantt.component.js +408 -56
  14. package/dist/es/gantt.module.js +37 -9
  15. package/dist/es/index.js +9 -0
  16. package/dist/es/localization/gantt-localization.service.js +26 -0
  17. package/dist/es/localization/messages.js +45 -1
  18. package/dist/es/main.js +1 -0
  19. package/dist/es/models/dependency-type.enum.js +16 -0
  20. package/dist/es/models/events/{add-event.interface.js → dependency-add-event.interface.js} +0 -0
  21. package/dist/es/models/events/{edit-event.interface.js → task-add-event.interface.js} +0 -0
  22. package/dist/es/models/events/{remove-event.interface.js → task-delete-event.interface.js} +0 -0
  23. package/dist/es/models/models.js +1 -0
  24. package/dist/es/models/{toolbar-position.js → toolbar-settings.js} +0 -0
  25. package/dist/{es2015/models/events/add-event.interface.js → es/models/view-item.interface.js} +0 -0
  26. package/dist/{es2015/models/events/edit-event.interface.js → es/navigation/navigation-models.js} +0 -0
  27. package/dist/es/navigation/navigation.service.js +390 -0
  28. package/dist/es/navigation/utils.js +77 -0
  29. package/dist/es/package-metadata.js +1 -1
  30. package/dist/es/rendering/gantt-milestone-task.component.js +12 -6
  31. package/dist/es/rendering/gantt-summary-task.component.js +27 -6
  32. package/dist/es/rendering/gantt-task-base.js +84 -22
  33. package/dist/es/rendering/gantt-task.component.js +13 -8
  34. package/dist/es/rendering/gantt-tasks-table-body.component.js +13 -5
  35. package/dist/es/scrolling/drag-scroll-settings.js +20 -0
  36. package/dist/es/scrolling/timeline-scroll.directive.js +89 -0
  37. package/dist/es/scrolling/timeline-scroll.service.js +39 -0
  38. package/dist/es/scrolling/utils.js +80 -0
  39. package/dist/es/timeline/gantt-timeline.component.js +50 -4
  40. package/dist/es/toolbar/toolbar.component.js +20 -13
  41. package/dist/es/toolbar/view-selector.component.js +1 -1
  42. package/dist/es/utils.js +153 -12
  43. package/dist/es2015/common/touch-enabled.d.ts +9 -0
  44. package/dist/es2015/common/touch-enabled.js +9 -0
  45. package/dist/es2015/dependencies/utils.d.ts +15 -0
  46. package/dist/es2015/dependencies/utils.js +40 -5
  47. package/dist/es2015/dragging/dependency-drag-create.directive.d.ts +72 -0
  48. package/dist/es2015/dragging/dependency-drag-create.directive.js +324 -0
  49. package/dist/es2015/dragging/drag-validation-tooltip.component.d.ts +29 -0
  50. package/dist/es2015/dragging/drag-validation-tooltip.component.js +76 -0
  51. package/dist/es2015/editing/add-task.component.d.ts +45 -0
  52. package/dist/es2015/editing/add-task.component.js +102 -0
  53. package/dist/es2015/editing/dependencies-table.component.d.ts +39 -0
  54. package/dist/es2015/editing/dependencies-table.component.js +160 -0
  55. package/dist/es2015/editing/edit-dialog.component.d.ts +11 -4
  56. package/dist/es2015/editing/edit-dialog.component.js +66 -36
  57. package/dist/es2015/editing/edit.service.d.ts +24 -4
  58. package/dist/es2015/editing/edit.service.js +81 -11
  59. package/dist/es2015/editing/task-fields.component.d.ts +22 -0
  60. package/dist/es2015/editing/task-fields.component.js +67 -0
  61. package/dist/es2015/editing/{util.d.ts → utils.d.ts} +2 -2
  62. package/dist/es2015/editing/{util.js → utils.js} +0 -0
  63. package/dist/es2015/gantt.component.d.ts +134 -31
  64. package/dist/es2015/gantt.component.js +419 -61
  65. package/dist/es2015/gantt.module.js +37 -9
  66. package/dist/es2015/index.d.ts +9 -0
  67. package/dist/es2015/index.js +9 -0
  68. package/dist/es2015/index.metadata.json +1 -1
  69. package/dist/es2015/{models/events/edit-event.interface.d.ts → localization/gantt-localization.service.d.ts} +6 -10
  70. package/dist/es2015/localization/gantt-localization.service.js +25 -0
  71. package/dist/es2015/localization/messages.d.ts +46 -2
  72. package/dist/es2015/localization/messages.js +45 -1
  73. package/dist/es2015/main.d.ts +1 -0
  74. package/dist/es2015/main.js +1 -0
  75. package/dist/es2015/models/dependency-type.enum.d.ts +1 -1
  76. package/dist/es2015/models/dependency-type.enum.js +16 -0
  77. package/dist/es2015/models/events/dependency-add-event.interface.d.ts +26 -0
  78. package/dist/es2015/models/events/{remove-event.interface.js → dependency-add-event.interface.js} +0 -0
  79. package/dist/es2015/models/events/task-add-event.interface.d.ts +31 -0
  80. package/dist/es2015/models/{toolbar-position.js → events/task-add-event.interface.js} +0 -0
  81. package/dist/es2015/models/events/task-click-event.interface.d.ts +3 -3
  82. package/dist/es2015/models/events/task-delete-event.interface.d.ts +21 -0
  83. package/dist/es2015/models/events/task-delete-event.interface.js +4 -0
  84. package/dist/es2015/models/events/task-edit-event.interface.d.ts +36 -6
  85. package/dist/es2015/models/models.d.ts +6 -3
  86. package/dist/es2015/models/models.js +1 -0
  87. package/dist/es2015/models/toolbar-settings.d.ts +29 -0
  88. package/dist/es2015/models/toolbar-settings.js +4 -0
  89. package/dist/es2015/models/view-item.interface.d.ts +35 -0
  90. package/dist/es2015/models/view-item.interface.js +4 -0
  91. package/dist/es2015/navigation/navigation-models.d.ts +34 -0
  92. package/dist/es2015/navigation/navigation-models.js +4 -0
  93. package/dist/es2015/navigation/navigation.service.d.ts +126 -0
  94. package/dist/es2015/navigation/navigation.service.js +355 -0
  95. package/dist/es2015/navigation/utils.d.ts +26 -0
  96. package/dist/es2015/navigation/utils.js +69 -0
  97. package/dist/es2015/package-metadata.js +1 -1
  98. package/dist/es2015/rendering/gantt-milestone-task.component.d.ts +3 -1
  99. package/dist/es2015/rendering/gantt-milestone-task.component.js +35 -8
  100. package/dist/es2015/rendering/gantt-summary-task.component.d.ts +5 -1
  101. package/dist/es2015/rendering/gantt-summary-task.component.js +47 -8
  102. package/dist/es2015/rendering/gantt-task-base.d.ts +20 -6
  103. package/dist/es2015/rendering/gantt-task-base.js +75 -22
  104. package/dist/es2015/rendering/gantt-task.component.d.ts +4 -2
  105. package/dist/es2015/rendering/gantt-task.component.js +47 -13
  106. package/dist/es2015/rendering/gantt-tasks-table-body.component.d.ts +6 -3
  107. package/dist/es2015/rendering/gantt-tasks-table-body.component.js +27 -9
  108. package/dist/es2015/scrolling/drag-scroll-settings.d.ts +47 -0
  109. package/dist/es2015/scrolling/drag-scroll-settings.js +20 -0
  110. package/dist/es2015/scrolling/scroll-sync.service.d.ts +1 -1
  111. package/dist/es2015/scrolling/timeline-scroll.directive.d.ts +24 -0
  112. package/dist/es2015/scrolling/timeline-scroll.directive.js +78 -0
  113. package/dist/es2015/scrolling/timeline-scroll.service.d.ts +20 -0
  114. package/dist/es2015/scrolling/timeline-scroll.service.js +44 -0
  115. package/dist/es2015/scrolling/utils.d.ts +29 -0
  116. package/dist/es2015/scrolling/utils.js +80 -0
  117. package/dist/es2015/timeline/gantt-timeline.component.d.ts +29 -4
  118. package/dist/es2015/timeline/gantt-timeline.component.js +67 -5
  119. package/dist/es2015/toolbar/toolbar-template.directive.d.ts +1 -1
  120. package/dist/es2015/toolbar/toolbar.component.d.ts +6 -5
  121. package/dist/es2015/toolbar/toolbar.component.js +22 -13
  122. package/dist/es2015/toolbar/view-selector.component.js +3 -1
  123. package/dist/es2015/utils.d.ts +77 -8
  124. package/dist/es2015/utils.js +153 -12
  125. package/dist/fesm2015/index.js +5258 -3012
  126. package/dist/fesm5/index.js +2862 -733
  127. package/dist/npm/common/touch-enabled.js +11 -0
  128. package/dist/npm/dependencies/utils.js +40 -5
  129. package/dist/npm/dragging/dependency-drag-create.directive.js +349 -0
  130. package/dist/npm/dragging/drag-validation-tooltip.component.js +29 -0
  131. package/dist/npm/editing/add-task.component.js +96 -0
  132. package/dist/npm/editing/dependencies-table.component.js +133 -0
  133. package/dist/npm/editing/edit-dialog.component.js +38 -7
  134. package/dist/npm/editing/edit.service.js +91 -7
  135. package/dist/npm/editing/task-fields.component.js +45 -0
  136. package/dist/npm/editing/{util.js → utils.js} +0 -0
  137. package/dist/npm/gantt.component.js +409 -57
  138. package/dist/npm/gantt.module.js +35 -7
  139. package/dist/npm/index.js +18 -0
  140. package/dist/npm/localization/gantt-localization.service.js +28 -0
  141. package/dist/npm/localization/messages.js +45 -1
  142. package/dist/npm/main.js +2 -0
  143. package/dist/npm/models/dependency-type.enum.js +16 -0
  144. package/dist/npm/models/events/{add-event.interface.js → dependency-add-event.interface.js} +0 -0
  145. package/dist/npm/models/events/{edit-event.interface.js → task-add-event.interface.js} +0 -0
  146. package/dist/npm/models/events/{remove-event.interface.js → task-delete-event.interface.js} +0 -0
  147. package/dist/npm/models/models.js +2 -0
  148. package/dist/npm/models/{toolbar-position.js → toolbar-settings.js} +0 -0
  149. package/dist/npm/models/view-item.interface.js +6 -0
  150. package/dist/npm/navigation/navigation-models.js +6 -0
  151. package/dist/npm/navigation/navigation.service.js +392 -0
  152. package/dist/npm/navigation/utils.js +79 -0
  153. package/dist/npm/package-metadata.js +1 -1
  154. package/dist/npm/rendering/gantt-milestone-task.component.js +11 -5
  155. package/dist/npm/rendering/gantt-summary-task.component.js +26 -5
  156. package/dist/npm/rendering/gantt-task-base.js +84 -22
  157. package/dist/npm/rendering/gantt-task.component.js +12 -7
  158. package/dist/npm/rendering/gantt-tasks-table-body.component.js +13 -5
  159. package/dist/npm/scrolling/drag-scroll-settings.js +22 -0
  160. package/dist/npm/scrolling/timeline-scroll.directive.js +91 -0
  161. package/dist/npm/scrolling/timeline-scroll.service.js +41 -0
  162. package/dist/npm/scrolling/utils.js +83 -0
  163. package/dist/npm/timeline/gantt-timeline.component.js +49 -3
  164. package/dist/npm/toolbar/toolbar.component.js +18 -11
  165. package/dist/npm/toolbar/view-selector.component.js +1 -1
  166. package/dist/npm/utils.js +153 -12
  167. package/dist/systemjs/kendo-angular-gantt.js +1 -1
  168. package/package.json +7 -4
  169. package/dist/es2015/models/events/add-event.interface.d.ts +0 -16
  170. package/dist/es2015/models/events/remove-event.interface.d.ts +0 -16
  171. package/dist/es2015/models/toolbar-position.d.ts +0 -9
@@ -4,6 +4,7 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { ChangeDetectorRef, TemplateRef } from '@angular/core';
6
6
  import { MappingService } from '../common/mapping.service';
7
+ import { NavigationService } from '../navigation/navigation.service';
7
8
  import { DependencyDomService } from '../dependencies/dependency-dom.service';
8
9
  import { OptionChangesService } from '../common/option-changes.service';
9
10
  import { TimelineViewService } from './../timeline/timeline-view.service';
@@ -12,7 +13,10 @@ import { GanttTaskBase } from './gantt-task-base';
12
13
  * @hidden
13
14
  */
14
15
  export declare class GanttSummaryTaskComponent extends GanttTaskBase {
16
+ touchEnabled: boolean;
15
17
  summaryWrapperClass: boolean;
16
18
  template: TemplateRef<any>;
17
- constructor(mapper: MappingService, timelineViewService: TimelineViewService, dependencyDomService: DependencyDomService, optionChangesService: OptionChangesService, cdr: ChangeDetectorRef);
19
+ isExpanded: (task: object) => boolean;
20
+ readonly ariaExpanded: string;
21
+ constructor(touchEnabled: boolean, mapper: MappingService, timelineViewService: TimelineViewService, dependencyDomService: DependencyDomService, optionChangesService: OptionChangesService, cdr: ChangeDetectorRef, navigationService: NavigationService);
18
22
  }
@@ -4,20 +4,30 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import * as tslib_1 from "tslib";
6
6
  var GanttSummaryTaskComponent_1;
7
- import { ChangeDetectorRef, Component, forwardRef, HostBinding, Input, TemplateRef } from '@angular/core';
7
+ import { ChangeDetectorRef, Component, forwardRef, HostBinding, Inject, Input, TemplateRef } from '@angular/core';
8
8
  import { MappingService } from '../common/mapping.service';
9
+ import { NavigationService } from '../navigation/navigation.service';
10
+ import { TOUCH_ENABLED } from '../common/touch-enabled';
9
11
  import { DependencyDomService } from '../dependencies/dependency-dom.service';
10
12
  import { OptionChangesService } from '../common/option-changes.service';
11
13
  import { TimelineViewService } from './../timeline/timeline-view.service';
12
14
  import { GanttTaskBase } from './gantt-task-base';
15
+ import { isPresent } from '../utils';
13
16
  /**
14
17
  * @hidden
15
18
  */
16
19
  let GanttSummaryTaskComponent = GanttSummaryTaskComponent_1 = class GanttSummaryTaskComponent extends GanttTaskBase {
17
- constructor(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
18
- super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr);
20
+ constructor(touchEnabled, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
21
+ super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService);
22
+ this.touchEnabled = touchEnabled;
19
23
  this.summaryWrapperClass = true;
20
24
  }
25
+ get ariaExpanded() {
26
+ // if no callback is provided, all child items are displayed and the item is regarded as expanded
27
+ // replicates the TreeList aria-expanded behavior
28
+ const isExpanded = !isPresent(this.isExpanded) || this.isExpanded(this.dataItem);
29
+ return String(isExpanded);
30
+ }
21
31
  };
22
32
  tslib_1.__decorate([
23
33
  HostBinding('class.k-summary-wrap'),
@@ -27,6 +37,10 @@ tslib_1.__decorate([
27
37
  Input(),
28
38
  tslib_1.__metadata("design:type", TemplateRef)
29
39
  ], GanttSummaryTaskComponent.prototype, "template", void 0);
40
+ tslib_1.__decorate([
41
+ Input(),
42
+ tslib_1.__metadata("design:type", Function)
43
+ ], GanttSummaryTaskComponent.prototype, "isExpanded", void 0);
30
44
  GanttSummaryTaskComponent = GanttSummaryTaskComponent_1 = tslib_1.__decorate([
31
45
  Component({
32
46
  selector: 'kendo-gantt-summary-task',
@@ -39,13 +53,15 @@ GanttSummaryTaskComponent = GanttSummaryTaskComponent_1 = tslib_1.__decorate([
39
53
  template: `
40
54
  <div
41
55
  #task
56
+ role="treeitem"
42
57
  class="k-task k-task-summary"
43
58
  [ngClass]="taskClass(dataItem)"
44
59
  [style.width.px]="taskWidth"
45
- [style.left.px]="taskOffset"
46
60
  [attr.title]="mapper.extractFromTask(dataItem, 'title')"
47
- [attr.data-task-index]="index"
48
61
  [class.k-state-selected]="isSelected(dataItem)"
62
+ [attr.aria-selected]="ariaSelected"
63
+ [attr.aria-expanded]="ariaExpanded"
64
+ [attr.aria-level]="level + 1"
49
65
  >
50
66
  <div *ngIf="!template; else summaryTemplate"
51
67
  class="k-task-summary-progress"
@@ -66,12 +82,35 @@ GanttSummaryTaskComponent = GanttSummaryTaskComponent_1 = tslib_1.__decorate([
66
82
  >
67
83
  </ng-template>
68
84
  </div>
69
- `
85
+ <ng-container *ngIf="renderDependencyDragClues">
86
+ <div
87
+ class="k-task-dot k-task-start k-touch-action-none"
88
+ [class.k-display-block]="touchEnabled"
89
+ >
90
+ </div>
91
+ <div
92
+ class="k-task-dot k-task-end k-touch-action-none"
93
+ [class.k-display-block]="touchEnabled"
94
+ >
95
+ </div>
96
+ </ng-container>
97
+ `,
98
+ styles: [`
99
+ .k-task.k-focus {
100
+ box-shadow: 0 0 4px 3px grey;
101
+ outline: none;
102
+ }
103
+ .k-task.k-focus.k-state-selected {
104
+ box-shadow: 0 0 4px 3px #ffaea8;
105
+ }
106
+ `]
70
107
  }),
71
- tslib_1.__metadata("design:paramtypes", [MappingService,
108
+ tslib_1.__param(0, Inject(TOUCH_ENABLED)),
109
+ tslib_1.__metadata("design:paramtypes", [Boolean, MappingService,
72
110
  TimelineViewService,
73
111
  DependencyDomService,
74
112
  OptionChangesService,
75
- ChangeDetectorRef])
113
+ ChangeDetectorRef,
114
+ NavigationService])
76
115
  ], GanttSummaryTaskComponent);
77
116
  export { GanttSummaryTaskComponent };
@@ -3,6 +3,7 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { ChangeDetectorRef, ElementRef, SimpleChanges } from '@angular/core';
6
+ import { NavigationService } from '../navigation/navigation.service';
6
7
  import { OptionChangesService } from '../common/option-changes.service';
7
8
  import { TaskClassFn } from '../models/class-callbacks';
8
9
  import { TimelineViewType } from '../models/timeline-view';
@@ -18,25 +19,38 @@ export declare abstract class GanttTaskBase {
18
19
  private dependencyDomService;
19
20
  private optionChangesService;
20
21
  private cdr;
22
+ private navigationService;
21
23
  wrapperClass: boolean;
24
+ readonly taskIndexAttribute: number;
22
25
  /**
23
- * Points to the first element of the component.
26
+ * Points to the `.k-task` element of the template (present in all three task types).
24
27
  */
25
28
  taskElement: ElementRef<HTMLElement>;
26
29
  dataItem: any;
27
30
  index: number;
31
+ level: number;
32
+ renderDependencyDragClues: boolean;
33
+ selectable: boolean;
28
34
  isSelected: (dataItem: object) => boolean;
29
35
  activeView: TimelineViewType;
30
36
  taskClass: TaskClassFn;
31
- private viewChangesSubscription;
37
+ readonly ariaSelected: string;
32
38
  readonly slotUnitDuration: number;
33
39
  private readonly viewService;
34
40
  readonly slotWidth: number;
35
- constructor(mapper: MappingService, // left public to be available for usage in the templates
36
- timelineViewService: TimelineViewService, dependencyDomService: DependencyDomService, optionChangesService: OptionChangesService, cdr: ChangeDetectorRef);
37
- ngOnChanges(changes: SimpleChanges): void;
38
- ngOnDestroy(): void;
39
41
  readonly taskWidth: number;
42
+ /**
43
+ * The `left` style prop has to be applied to the host element (.k-task-wrap), as the drag clue elements are displayed on .k-task-wrap hover.
44
+ * Applying the `left` offset to the inner .k-task element leaves the .k-task-wrap element rendered with an offset of 0 somewhere on the left
45
+ * and hovering just the .k-task element doesn't expose the drag clues.
46
+ * Additionally, positioning the entire container takes care of positioning the hints as well.
47
+ */
40
48
  readonly taskOffset: number;
41
49
  readonly completionOverlayWidth: number;
50
+ private subscriptions;
51
+ constructor(mapper: MappingService, // left public to be available for usage in the templates
52
+ timelineViewService: TimelineViewService, dependencyDomService: DependencyDomService, optionChangesService: OptionChangesService, cdr: ChangeDetectorRef, navigationService: NavigationService);
53
+ ngOnChanges(changes: SimpleChanges): void;
54
+ ngOnDestroy(): void;
55
+ private updateActiveState;
42
56
  }
@@ -12,22 +12,32 @@ const slotUnitDuration = {
12
12
  week: MS_PER_DAY,
13
13
  month: MS_PER_DAY * 7
14
14
  };
15
+ const FOCUSED_CLASS = 'k-focus';
15
16
  /**
16
17
  * @hidden
17
18
  */
18
19
  export class GanttTaskBase {
19
20
  constructor(mapper, // left public to be available for usage in the templates
20
- timelineViewService, dependencyDomService, optionChangesService, cdr) {
21
+ timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
21
22
  this.mapper = mapper;
22
23
  this.timelineViewService = timelineViewService;
23
24
  this.dependencyDomService = dependencyDomService;
24
25
  this.optionChangesService = optionChangesService;
25
26
  this.cdr = cdr;
27
+ this.navigationService = navigationService;
26
28
  this.wrapperClass = true;
27
- this.viewChangesSubscription = new Subscription();
28
- this.viewChangesSubscription.add(this.optionChangesService.viewChanges.subscribe(() => {
29
- this.cdr.markForCheck();
30
- }));
29
+ this.subscriptions = new Subscription();
30
+ this.subscriptions.add(this.optionChangesService.viewChanges
31
+ .subscribe(() => this.cdr.markForCheck()));
32
+ this.subscriptions.add(this.navigationService.taskStatusChanges
33
+ .subscribe(this.updateActiveState.bind(this)));
34
+ }
35
+ get taskIndexAttribute() {
36
+ return this.index;
37
+ }
38
+ get ariaSelected() {
39
+ // assinging null will not render the attribute at all (desired in selectable="false" mode)
40
+ return this.selectable ? String(this.isSelected(this.dataItem)) : null;
31
41
  }
32
42
  get slotUnitDuration() {
33
43
  return slotUnitDuration[this.activeView];
@@ -38,29 +48,18 @@ export class GanttTaskBase {
38
48
  get slotWidth() {
39
49
  return this.viewService.options.slotWidth;
40
50
  }
41
- ngOnChanges(changes) {
42
- if (isPresent(changes.dataItem)) {
43
- if (isPresent(changes.dataItem.previousValue)) {
44
- this.dependencyDomService.unregisterTask(changes.dataItem.previousValue);
45
- }
46
- this.dependencyDomService.registerTask(this.dataItem, this.taskElement.nativeElement);
47
- }
48
- else if (isPresent(changes.activeView)) {
49
- this.dependencyDomService.notifyChanges();
50
- }
51
- }
52
- ngOnDestroy() {
53
- if (isPresent(this.dataItem)) {
54
- this.dependencyDomService.unregisterTask(this.dataItem);
55
- }
56
- this.viewChangesSubscription.unsubscribe();
57
- }
58
51
  get taskWidth() {
59
52
  const itemDuration = this.mapper.extractFromTask(this.dataItem, 'end') - this.mapper.extractFromTask(this.dataItem, 'start');
60
53
  const durationInSlotUnits = itemDuration / this.slotUnitDuration;
61
54
  const width = durationInSlotUnits * this.slotWidth;
62
55
  return width;
63
56
  }
57
+ /**
58
+ * The `left` style prop has to be applied to the host element (.k-task-wrap), as the drag clue elements are displayed on .k-task-wrap hover.
59
+ * Applying the `left` offset to the inner .k-task element leaves the .k-task-wrap element rendered with an offset of 0 somewhere on the left
60
+ * and hovering just the .k-task element doesn't expose the drag clues.
61
+ * Additionally, positioning the entire container takes care of positioning the hints as well.
62
+ */
64
63
  get taskOffset() {
65
64
  const timeAfterViewStart = this.mapper.extractFromTask(this.dataItem, 'start') - this.viewService.viewStart;
66
65
  const offsetInSlotUnits = timeAfterViewStart / this.slotUnitDuration;
@@ -72,11 +71,48 @@ export class GanttTaskBase {
72
71
  // fall-back to 0 in case no completionRatio is provided
73
72
  return isNumber(overlayWidth) ? overlayWidth : 0;
74
73
  }
74
+ ngOnChanges(changes) {
75
+ if (isPresent(changes.dataItem)) {
76
+ if (isPresent(changes.dataItem.previousValue)) {
77
+ this.dependencyDomService.unregisterTask(changes.dataItem.previousValue);
78
+ }
79
+ this.dependencyDomService.registerTask(this.dataItem, this.taskElement.nativeElement);
80
+ }
81
+ else if (isPresent(changes.activeView)) {
82
+ this.dependencyDomService.notifyChanges();
83
+ }
84
+ if (this.navigationService.enabled && isPresent(changes.index)) {
85
+ this.updateActiveState(this.navigationService.activeTask);
86
+ }
87
+ }
88
+ ngOnDestroy() {
89
+ if (isPresent(this.dataItem)) {
90
+ this.dependencyDomService.unregisterTask(this.dataItem);
91
+ }
92
+ this.subscriptions.unsubscribe();
93
+ }
94
+ updateActiveState({ activeIndex, isFocused }) {
95
+ const isActive = activeIndex === this.index;
96
+ const tabindex = isActive ? '0' : '-1';
97
+ this.taskElement.nativeElement.setAttribute('tabindex', tabindex);
98
+ if (isActive && isFocused) {
99
+ this.taskElement.nativeElement.focus();
100
+ this.taskElement.nativeElement.classList.add(FOCUSED_CLASS);
101
+ }
102
+ else {
103
+ this.taskElement.nativeElement.classList.remove(FOCUSED_CLASS);
104
+ }
105
+ }
75
106
  }
76
107
  tslib_1.__decorate([
77
108
  HostBinding('class.k-task-wrap'),
78
109
  tslib_1.__metadata("design:type", Boolean)
79
110
  ], GanttTaskBase.prototype, "wrapperClass", void 0);
111
+ tslib_1.__decorate([
112
+ HostBinding('attr.data-task-index'),
113
+ tslib_1.__metadata("design:type", Number),
114
+ tslib_1.__metadata("design:paramtypes", [])
115
+ ], GanttTaskBase.prototype, "taskIndexAttribute", null);
80
116
  tslib_1.__decorate([
81
117
  ViewChild('task', { static: true }),
82
118
  tslib_1.__metadata("design:type", ElementRef)
@@ -89,6 +125,18 @@ tslib_1.__decorate([
89
125
  Input(),
90
126
  tslib_1.__metadata("design:type", Number)
91
127
  ], GanttTaskBase.prototype, "index", void 0);
128
+ tslib_1.__decorate([
129
+ Input(),
130
+ tslib_1.__metadata("design:type", Number)
131
+ ], GanttTaskBase.prototype, "level", void 0);
132
+ tslib_1.__decorate([
133
+ Input(),
134
+ tslib_1.__metadata("design:type", Boolean)
135
+ ], GanttTaskBase.prototype, "renderDependencyDragClues", void 0);
136
+ tslib_1.__decorate([
137
+ Input(),
138
+ tslib_1.__metadata("design:type", Boolean)
139
+ ], GanttTaskBase.prototype, "selectable", void 0);
92
140
  tslib_1.__decorate([
93
141
  Input(),
94
142
  tslib_1.__metadata("design:type", Function)
@@ -101,3 +149,8 @@ tslib_1.__decorate([
101
149
  Input(),
102
150
  tslib_1.__metadata("design:type", Function)
103
151
  ], GanttTaskBase.prototype, "taskClass", void 0);
152
+ tslib_1.__decorate([
153
+ HostBinding('style.left.px'),
154
+ tslib_1.__metadata("design:type", Number),
155
+ tslib_1.__metadata("design:paramtypes", [])
156
+ ], GanttTaskBase.prototype, "taskOffset", null);
@@ -4,18 +4,20 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { ChangeDetectorRef, TemplateRef } from '@angular/core';
6
6
  import { MappingService } from '../common/mapping.service';
7
+ import { NavigationService } from '../navigation/navigation.service';
8
+ import { EditService } from '../editing/edit.service';
7
9
  import { DependencyDomService } from '../dependencies/dependency-dom.service';
8
10
  import { OptionChangesService } from '../common/option-changes.service';
9
11
  import { TimelineViewService } from './../timeline/timeline-view.service';
10
12
  import { GanttTaskBase } from './gantt-task-base';
11
- import { EditService } from '../editing/edit.service';
12
13
  /**
13
14
  * @hidden
14
15
  */
15
16
  export declare class GanttTaskComponent extends GanttTaskBase {
16
17
  private editService;
18
+ touchEnabled: boolean;
17
19
  taskContentTemplate: TemplateRef<any>;
18
20
  taskTemplate: TemplateRef<any>;
19
- constructor(mapper: MappingService, timelineViewService: TimelineViewService, dependencyDomService: DependencyDomService, optionChangesService: OptionChangesService, cdr: ChangeDetectorRef, editService: EditService);
21
+ constructor(editService: EditService, touchEnabled: boolean, mapper: MappingService, timelineViewService: TimelineViewService, dependencyDomService: DependencyDomService, optionChangesService: OptionChangesService, cdr: ChangeDetectorRef, navigationService: NavigationService);
20
22
  onTaskDelete(): void;
21
23
  }
@@ -4,24 +4,27 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import * as tslib_1 from "tslib";
6
6
  var GanttTaskComponent_1;
7
- import { ChangeDetectorRef, Component, forwardRef, Input, TemplateRef } from '@angular/core';
7
+ import { ChangeDetectorRef, Component, forwardRef, Inject, Input, TemplateRef } from '@angular/core';
8
8
  import { MappingService } from '../common/mapping.service';
9
+ import { NavigationService } from '../navigation/navigation.service';
10
+ import { EditService } from '../editing/edit.service';
11
+ import { TOUCH_ENABLED } from '../common/touch-enabled';
9
12
  import { DependencyDomService } from '../dependencies/dependency-dom.service';
10
13
  import { OptionChangesService } from '../common/option-changes.service';
11
14
  import { TimelineViewService } from './../timeline/timeline-view.service';
12
15
  import { GanttTaskBase } from './gantt-task-base';
13
- import { EditService } from '../editing/edit.service';
14
16
  /**
15
17
  * @hidden
16
18
  */
17
19
  let GanttTaskComponent = GanttTaskComponent_1 = class GanttTaskComponent extends GanttTaskBase {
18
- constructor(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, editService) {
19
- super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr);
20
+ constructor(editService, touchEnabled, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
21
+ super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService);
20
22
  this.editService = editService;
23
+ this.touchEnabled = touchEnabled;
21
24
  }
22
25
  onTaskDelete() {
23
26
  this.editService.dataItem = this.dataItem;
24
- this.editService.showConfirmationDialog.next();
27
+ this.editService.taskDelete.next(this.dataItem);
25
28
  }
26
29
  };
27
30
  tslib_1.__decorate([
@@ -45,17 +48,19 @@ GanttTaskComponent = GanttTaskComponent_1 = tslib_1.__decorate([
45
48
  <div
46
49
  #task
47
50
  class="k-task k-task-single"
51
+ role="treeitem"
48
52
  [ngClass]="taskClass(dataItem)"
49
53
  [style.width.px]="taskWidth"
50
- [style.left.px]="taskOffset"
51
54
  [attr.title]="mapper.extractFromTask(dataItem, 'title')"
52
- [attr.data-task-index]="index"
53
55
  [class.k-state-selected]="isSelected(dataItem)"
56
+ [attr.aria-selected]="ariaSelected"
57
+ [attr.aria-level]="level + 1"
54
58
  >
55
59
  <ng-container *ngIf="!taskTemplate">
56
60
  <div
57
61
  class="k-task-complete"
58
62
  [style.width.px]="completionOverlayWidth"
63
+ aria-hidden="true"
59
64
  >
60
65
  </div>
61
66
  <div class="k-task-content">
@@ -70,10 +75,17 @@ GanttTaskComponent = GanttTaskComponent_1 = tslib_1.__decorate([
70
75
  >
71
76
  </ng-template>
72
77
  </div>
73
- <span class="k-task-actions">
78
+ <span
79
+ class="k-task-actions"
80
+ aria-hidden="true"
81
+ >
74
82
  <span
75
- (click)="onTaskDelete()"
76
- class="k-link k-task-delete">
83
+ class="k-link k-task-delete"
84
+ [kendoEventsOutsideAngular]="{
85
+ click: onTaskDelete
86
+ }"
87
+ [scope]="this"
88
+ >
77
89
  <span class="k-icon k-i-close"></span>
78
90
  </span>
79
91
  </span>
@@ -89,13 +101,35 @@ GanttTaskComponent = GanttTaskComponent_1 = tslib_1.__decorate([
89
101
  >
90
102
  </ng-template>
91
103
  </div>
92
- `
104
+ <ng-container *ngIf="renderDependencyDragClues">
105
+ <div
106
+ class="k-task-dot k-task-start k-touch-action-none"
107
+ [class.k-display-block]="touchEnabled"
108
+ >
109
+ </div>
110
+ <div
111
+ class="k-task-dot k-task-end k-touch-action-none"
112
+ [class.k-display-block]="touchEnabled"
113
+ >
114
+ </div>
115
+ </ng-container>
116
+ `,
117
+ styles: [`
118
+ .k-task.k-focus {
119
+ box-shadow: 0 0 4px 3px grey;
120
+ outline: none;
121
+ }
122
+ .k-task.k-focus.k-state-selected {
123
+ box-shadow: 0 0 4px 3px #ffaea8;
124
+ }
125
+ `]
93
126
  }),
94
- tslib_1.__metadata("design:paramtypes", [MappingService,
127
+ tslib_1.__param(1, Inject(TOUCH_ENABLED)),
128
+ tslib_1.__metadata("design:paramtypes", [EditService, Boolean, MappingService,
95
129
  TimelineViewService,
96
130
  DependencyDomService,
97
131
  OptionChangesService,
98
132
  ChangeDetectorRef,
99
- EditService])
133
+ NavigationService])
100
134
  ], GanttTaskComponent);
101
135
  export { GanttTaskComponent };
@@ -7,6 +7,7 @@ import { TaskClassFn } from '../models/class-callbacks';
7
7
  import { TimelineViewType } from '../models/timeline-view';
8
8
  import { DependencyDomService } from '../dependencies/dependency-dom.service';
9
9
  import { MappingService } from '../common/mapping.service';
10
+ import { ViewItem } from '../models/view-item.interface';
10
11
  /**
11
12
  * @hidden
12
13
  */
@@ -14,14 +15,16 @@ export declare class GanttTasksTableBodyComponent {
14
15
  private dependencyDomService;
15
16
  private mapper;
16
17
  timelineRow: ElementRef<HTMLTableRowElement>;
17
- rows: any[];
18
+ selectable: boolean;
19
+ rows: ViewItem[];
18
20
  activeView: TimelineViewType;
19
21
  taskContentTemplate: TemplateRef<any>;
20
22
  taskTemplate: TemplateRef<any>;
21
23
  summaryTaskTemplate: TemplateRef<any>;
22
24
  taskClass: TaskClassFn;
23
- hasChildren: (item: object) => boolean;
25
+ isExpanded: (item: object) => boolean;
24
26
  isTaskSelected: (item: object) => boolean;
27
+ renderDependencyDragClues: boolean;
25
28
  constructor(dependencyDomService: DependencyDomService, mapper: MappingService);
26
- isMileStone(task: any): boolean;
29
+ isMileStone(item: ViewItem): boolean;
27
30
  }
@@ -6,8 +6,8 @@ import * as tslib_1 from "tslib";
6
6
  import { Component, Input, TemplateRef, ViewChild, ElementRef } from '@angular/core';
7
7
  import { isEqual } from '@progress/kendo-date-math';
8
8
  import { DependencyDomService } from '../dependencies/dependency-dom.service';
9
- import { isPresent } from '../utils';
10
9
  import { MappingService } from '../common/mapping.service';
10
+ import { isPresent } from '../utils';
11
11
  /**
12
12
  * @hidden
13
13
  */
@@ -23,8 +23,8 @@ let GanttTasksTableBodyComponent = class GanttTasksTableBodyComponent {
23
23
  this.dependencyDomService.registerTimelineRow(timelineRow.nativeElement);
24
24
  }
25
25
  }
26
- isMileStone(task) {
27
- return !this.hasChildren(task) && isEqual(this.mapper.extractFromTask(task, 'start'), this.mapper.extractFromTask(task, 'end'));
26
+ isMileStone(item) {
27
+ return !item.hasChildren && isEqual(this.mapper.extractFromTask(item.data, 'start'), this.mapper.extractFromTask(item.data, 'end'));
28
28
  }
29
29
  };
30
30
  tslib_1.__decorate([
@@ -32,6 +32,10 @@ tslib_1.__decorate([
32
32
  tslib_1.__metadata("design:type", ElementRef),
33
33
  tslib_1.__metadata("design:paramtypes", [ElementRef])
34
34
  ], GanttTasksTableBodyComponent.prototype, "timelineRow", null);
35
+ tslib_1.__decorate([
36
+ Input(),
37
+ tslib_1.__metadata("design:type", Boolean)
38
+ ], GanttTasksTableBodyComponent.prototype, "selectable", void 0);
35
39
  tslib_1.__decorate([
36
40
  Input(),
37
41
  tslib_1.__metadata("design:type", Array)
@@ -59,11 +63,15 @@ tslib_1.__decorate([
59
63
  tslib_1.__decorate([
60
64
  Input(),
61
65
  tslib_1.__metadata("design:type", Function)
62
- ], GanttTasksTableBodyComponent.prototype, "hasChildren", void 0);
66
+ ], GanttTasksTableBodyComponent.prototype, "isExpanded", void 0);
63
67
  tslib_1.__decorate([
64
68
  Input(),
65
69
  tslib_1.__metadata("design:type", Function)
66
70
  ], GanttTasksTableBodyComponent.prototype, "isTaskSelected", void 0);
71
+ tslib_1.__decorate([
72
+ Input(),
73
+ tslib_1.__metadata("design:type", Boolean)
74
+ ], GanttTasksTableBodyComponent.prototype, "renderDependencyDragClues", void 0);
67
75
  GanttTasksTableBodyComponent = tslib_1.__decorate([
68
76
  Component({
69
77
  selector: '[kendoGanttTasksTableBody]',
@@ -72,33 +80,43 @@ GanttTasksTableBodyComponent = tslib_1.__decorate([
72
80
  <td>
73
81
  <kendo-gantt-milestone-task
74
82
  *ngIf="isMileStone(item); else task"
75
- [dataItem]="item"
83
+ [dataItem]="item.data"
84
+ [level]="item.level"
76
85
  [activeView]="activeView"
77
86
  [taskClass]="taskClass"
87
+ [selectable]="selectable"
78
88
  [isSelected]="isTaskSelected"
79
89
  [index]="index"
90
+ [renderDependencyDragClues]="renderDependencyDragClues"
80
91
  >
81
92
  </kendo-gantt-milestone-task>
82
93
  <ng-template #task>
83
94
  <kendo-gantt-summary-task
84
- *ngIf="hasChildren(item)"
85
- [dataItem]="item"
95
+ *ngIf="item.hasChildren"
96
+ [dataItem]="item.data"
97
+ [level]="item.level"
86
98
  [template]="summaryTaskTemplate"
87
99
  [activeView]="activeView"
88
100
  [taskClass]="taskClass"
101
+ [selectable]="selectable"
89
102
  [isSelected]="isTaskSelected"
103
+ [isExpanded]="isExpanded"
90
104
  [index]="index"
105
+ [renderDependencyDragClues]="renderDependencyDragClues"
91
106
  >
92
107
  </kendo-gantt-summary-task>
93
108
  <kendo-gantt-task
94
- *ngIf="!hasChildren(item)"
95
- [dataItem]="item"
109
+ *ngIf="!item.hasChildren"
110
+ [dataItem]="item.data"
111
+ [level]="item.level"
96
112
  [taskContentTemplate]="taskContentTemplate"
97
113
  [taskTemplate]="taskTemplate"
98
114
  [activeView]="activeView"
99
115
  [taskClass]="taskClass"
116
+ [selectable]="selectable"
100
117
  [isSelected]="isTaskSelected"
101
118
  [index]="index"
119
+ [renderDependencyDragClues]="renderDependencyDragClues"
102
120
  >
103
121
  </kendo-gantt-task>
104
122
  </ng-template>
@@ -0,0 +1,47 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ /**
6
+ * Specifies the settings for auto-scrolling during drag editing operations.
7
+ */
8
+ export interface DragScrollSettings {
9
+ /**
10
+ * Specifies whether auto-scrolling during drag editing operations is enabled.
11
+ *
12
+ * @default true
13
+ */
14
+ enabled?: boolean;
15
+ /**
16
+ * Specifies the scrolling step in pixels.
17
+ *
18
+ * @default: 3
19
+ */
20
+ step?: number;
21
+ /**
22
+ * Specifies the scrolling interval in milliseconds.
23
+ *
24
+ * @default: 1
25
+ */
26
+ interval?: number;
27
+ /**
28
+ * Specifies the threshold (in pixels) at each end of the scrollable container which when reached will trigger scrolling.
29
+ *
30
+ * @default: 10
31
+ */
32
+ threshold?: number;
33
+ }
34
+ /**
35
+ * @hidden
36
+ */
37
+ export declare enum ScrollDirection {
38
+ Backwards = -1,
39
+ Forward = 1
40
+ }
41
+ /**
42
+ * @hidden
43
+ */
44
+ export declare enum ScrollAxis {
45
+ Vertical = "scrollTop",
46
+ Horizontal = "scrollLeft"
47
+ }
@@ -0,0 +1,20 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ /**
6
+ * @hidden
7
+ */
8
+ export var ScrollDirection;
9
+ (function (ScrollDirection) {
10
+ ScrollDirection[ScrollDirection["Backwards"] = -1] = "Backwards";
11
+ ScrollDirection[ScrollDirection["Forward"] = 1] = "Forward";
12
+ })(ScrollDirection || (ScrollDirection = {}));
13
+ /**
14
+ * @hidden
15
+ */
16
+ export var ScrollAxis;
17
+ (function (ScrollAxis) {
18
+ ScrollAxis["Vertical"] = "scrollTop";
19
+ ScrollAxis["Horizontal"] = "scrollLeft";
20
+ })(ScrollAxis || (ScrollAxis = {}));
@@ -23,7 +23,7 @@ export declare class ScrollSyncService implements OnDestroy {
23
23
  constructor(ngZone: NgZone);
24
24
  registerElement(el: any, sourceType: SourceType): void;
25
25
  ngOnDestroy(): void;
26
- syncScrollTop(sourceType: string, targetType: string): void;
26
+ syncScrollTop(sourceType: SourceType, targetType: SourceType): void;
27
27
  resetTimelineScrollLeft(): void;
28
28
  private scroll;
29
29
  }