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

package/dist/es/navigation/utils.js

@@ -0,0 +1,77 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Keys } from '@progress/kendo-angular-common';
+// TODO: add those keys to `import { Keys } from '@progress/kendo-angular-common';`
+var NumpadKeys;
+(function (NumpadKeys) {
+    NumpadKeys[NumpadKeys["Digit1"] = 97] = "Digit1";
+    NumpadKeys[NumpadKeys["Digit2"] = 98] = "Digit2";
+    NumpadKeys[NumpadKeys["Digit3"] = 99] = "Digit3";
+    NumpadKeys[NumpadKeys["Digit4"] = 100] = "Digit4";
+})(NumpadKeys || (NumpadKeys = {}));
+/**
+ * @hidden
+ */
+export var isArrowUpDownKey = function (keyCode) { return [
+    Keys.ArrowUp,
+    Keys.ArrowDown
+].some(function (arrowKeyCode) {
+    return keyCode === arrowKeyCode;
+}); };
+/**
+ * @hidden
+ */
+export var isNavigationKey = function (keyCode) { return [
+    Keys.ArrowUp,
+    Keys.ArrowDown,
+    Keys.Home,
+    Keys.End
+].some(function (navigationKeyCode) {
+    return keyCode === navigationKeyCode;
+}); };
+/**
+ * @hidden
+ */
+export var isExpandCollapseKey = function (keyCode, altKey) {
+    return altKey && [
+        Keys.ArrowLeft,
+        Keys.ArrowRight
+    ].some(function (navigationKeyCode) {
+        return keyCode === navigationKeyCode;
+    });
+};
+/**
+ * @hidden
+ */
+export var isViewDigitKey = function (keyCode) { return [
+    Keys.Digit1,
+    NumpadKeys.Digit1,
+    Keys.Digit2,
+    NumpadKeys.Digit2,
+    Keys.Digit3,
+    NumpadKeys.Digit3,
+    Keys.Digit4,
+    NumpadKeys.Digit4
+].some(function (digitKeyCode) {
+    return keyCode === digitKeyCode;
+}); };
+/**
+ * @hidden
+ *
+ * Returns the corresponding view index for the pressed digit key (Digit 1 => 0, Digit 2 => 1, etc.).
+ */
+export var getIndexFromViewDigitKeyCode = function (keyCode) {
+    switch (keyCode) {
+        case NumpadKeys.Digit1:
+        case Keys.Digit1: return 0;
+        case NumpadKeys.Digit2:
+        case Keys.Digit2: return 1;
+        case NumpadKeys.Digit3:
+        case Keys.Digit3: return 2;
+        case NumpadKeys.Digit4:
+        case Keys.Digit4: return 3;
+        default: return null;
+    }
+};

package/dist/es/package-metadata.js

@@ -9,7 +9,7 @@ export var packageMetadata = {
     name: '@progress/kendo-angular-gantt',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1639143747,
+    publishDate: 1642580546,
     version: '',
     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'
 };

package/dist/es/rendering/gantt-milestone-task.component.js

@@ -3,8 +3,10 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Component, forwardRef, HostBinding, ChangeDetectorRef } from '@angular/core';
+import { Component, forwardRef, HostBinding, ChangeDetectorRef, Inject } from '@angular/core';
 import { MappingService } from '../common/mapping.service';
+import { NavigationService } from '../navigation/navigation.service';
+import { TOUCH_ENABLED } from '../common/touch-enabled';
 import { DependencyDomService } from '../dependencies/dependency-dom.service';
 import { OptionChangesService } from '../common/option-changes.service';
 import { TimelineViewService } from './../timeline/timeline-view.service';
@@ -14,8 +16,9 @@ import { GanttTaskBase } from './gantt-task-base';
  */
 var GanttMilestoneTaskComponent = /** @class */ (function (_super) {
     tslib_1.__extends(GanttMilestoneTaskComponent, _super);
-    function GanttMilestoneTaskComponent(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
-        var _this = _super.call(this, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) || this;
+    function GanttMilestoneTaskComponent(touchEnabled, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
+        var _this = _super.call(this, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) || this;
+        _this.touchEnabled = touchEnabled;
         _this.milestoneWrapperClass = true;
         return _this;
     }
@@ -34,13 +37,16 @@ var GanttMilestoneTaskComponent = /** @class */ (function (_super) {
                     useExisting: forwardRef(function () { return GanttMilestoneTaskComponent_1; })
                 }
             ],
-            template: "\n        <div\n            #task\n            class=\"k-task k-task-milestone\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [style.left.px]=\"taskOffset\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [class.k-state-selected]=\"isSelected(dataItem)\"\n            [attr.data-task-index]=\"index\"\n        >\n        </div>\n    "
+            template: "\n        <div\n            #task\n            role=\"treeitem\"\n            class=\"k-task k-task-milestone\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [class.k-state-selected]=\"isSelected(dataItem)\"\n            [attr.aria-selected]=\"ariaSelected\"\n            [attr.aria-level]=\"level + 1\"\n        >\n        </div>\n        <ng-container *ngIf=\"renderDependencyDragClues\">\n            <div\n                class=\"k-task-dot k-task-start k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n            <div\n                class=\"k-task-dot k-task-end k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n        </ng-container>\n    ",
+            styles: ["\n        .k-task.k-focus {\n            box-shadow: 0 0 4px 3px grey;\n            outline: none;\n        }\n        .k-task.k-focus.k-state-selected {\n            box-shadow: 0 0 4px 3px #ffaea8;\n        }\n    "]
         }),
-        tslib_1.__metadata("design:paramtypes", [MappingService,
+        tslib_1.__param(0, Inject(TOUCH_ENABLED)),
+        tslib_1.__metadata("design:paramtypes", [Boolean, MappingService,
             TimelineViewService,
             DependencyDomService,
             OptionChangesService,
-            ChangeDetectorRef])
+            ChangeDetectorRef,
+            NavigationService])
     ], GanttMilestoneTaskComponent);
     return GanttMilestoneTaskComponent;
 }(GanttTaskBase));

package/dist/es/rendering/gantt-summary-task.component.js

@@ -3,23 +3,37 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { ChangeDetectorRef, Component, forwardRef, HostBinding, Input, TemplateRef } from '@angular/core';
+import { ChangeDetectorRef, Component, forwardRef, HostBinding, Inject, Input, TemplateRef } from '@angular/core';
 import { MappingService } from '../common/mapping.service';
+import { NavigationService } from '../navigation/navigation.service';
+import { TOUCH_ENABLED } from '../common/touch-enabled';
 import { DependencyDomService } from '../dependencies/dependency-dom.service';
 import { OptionChangesService } from '../common/option-changes.service';
 import { TimelineViewService } from './../timeline/timeline-view.service';
 import { GanttTaskBase } from './gantt-task-base';
+import { isPresent } from '../utils';
 /**
  * @hidden
  */
 var GanttSummaryTaskComponent = /** @class */ (function (_super) {
     tslib_1.__extends(GanttSummaryTaskComponent, _super);
-    function GanttSummaryTaskComponent(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
-        var _this = _super.call(this, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) || this;
+    function GanttSummaryTaskComponent(touchEnabled, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
+        var _this = _super.call(this, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) || this;
+        _this.touchEnabled = touchEnabled;
         _this.summaryWrapperClass = true;
         return _this;
     }
     GanttSummaryTaskComponent_1 = GanttSummaryTaskComponent;
+    Object.defineProperty(GanttSummaryTaskComponent.prototype, "ariaExpanded", {
+        get: function () {
+            // if no callback is provided, all child items are displayed and the item is regarded as expanded
+            // replicates the TreeList aria-expanded behavior
+            var isExpanded = !isPresent(this.isExpanded) || this.isExpanded(this.dataItem);
+            return String(isExpanded);
+        },
+        enumerable: true,
+        configurable: true
+    });
     var GanttSummaryTaskComponent_1;
     tslib_1.__decorate([
         HostBinding('class.k-summary-wrap'),
@@ -29,6 +43,10 @@ var GanttSummaryTaskComponent = /** @class */ (function (_super) {
         Input(),
         tslib_1.__metadata("design:type", TemplateRef)
     ], GanttSummaryTaskComponent.prototype, "template", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Function)
+    ], GanttSummaryTaskComponent.prototype, "isExpanded", void 0);
     GanttSummaryTaskComponent = GanttSummaryTaskComponent_1 = tslib_1.__decorate([
         Component({
             selector: 'kendo-gantt-summary-task',
@@ -38,13 +56,16 @@ var GanttSummaryTaskComponent = /** @class */ (function (_super) {
                     useExisting: forwardRef(function () { return GanttSummaryTaskComponent_1; })
                 }
             ],
-            template: "\n        <div\n            #task\n            class=\"k-task k-task-summary\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [style.width.px]=\"taskWidth\"\n            [style.left.px]=\"taskOffset\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [attr.data-task-index]=\"index\"\n            [class.k-state-selected]=\"isSelected(dataItem)\"\n        >\n            <div *ngIf=\"!template; else summaryTemplate\"\n                class=\"k-task-summary-progress\"\n                [style.width.px]=\"taskWidth\">\n                <div\n                    class=\"k-task-summary-complete\"\n                    [style.width.px]=\"completionOverlayWidth\"\n                >\n                </div>\n            </div>\n            <ng-template\n                #summaryTemplate\n                [ngTemplateOutlet]=\"template\"\n                [ngTemplateOutletContext]=\"{\n                    $implicit: dataItem,\n                    elementWidth: taskWidth\n                }\"\n            >\n            </ng-template>\n        </div>\n    "
+            template: "\n        <div\n            #task\n            role=\"treeitem\"\n            class=\"k-task k-task-summary\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [style.width.px]=\"taskWidth\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [class.k-state-selected]=\"isSelected(dataItem)\"\n            [attr.aria-selected]=\"ariaSelected\"\n            [attr.aria-expanded]=\"ariaExpanded\"\n            [attr.aria-level]=\"level + 1\"\n        >\n            <div *ngIf=\"!template; else summaryTemplate\"\n                class=\"k-task-summary-progress\"\n                [style.width.px]=\"taskWidth\">\n                <div\n                    class=\"k-task-summary-complete\"\n                    [style.width.px]=\"completionOverlayWidth\"\n                >\n                </div>\n            </div>\n            <ng-template\n                #summaryTemplate\n                [ngTemplateOutlet]=\"template\"\n                [ngTemplateOutletContext]=\"{\n                    $implicit: dataItem,\n                    elementWidth: taskWidth\n                }\"\n            >\n            </ng-template>\n        </div>\n        <ng-container *ngIf=\"renderDependencyDragClues\">\n            <div\n                class=\"k-task-dot k-task-start k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n            <div\n                class=\"k-task-dot k-task-end k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n        </ng-container>\n    ",
+            styles: ["\n        .k-task.k-focus {\n            box-shadow: 0 0 4px 3px grey;\n            outline: none;\n        }\n        .k-task.k-focus.k-state-selected {\n            box-shadow: 0 0 4px 3px #ffaea8;\n        }\n    "]
         }),
-        tslib_1.__metadata("design:paramtypes", [MappingService,
+        tslib_1.__param(0, Inject(TOUCH_ENABLED)),
+        tslib_1.__metadata("design:paramtypes", [Boolean, MappingService,
             TimelineViewService,
             DependencyDomService,
             OptionChangesService,
-            ChangeDetectorRef])
+            ChangeDetectorRef,
+            NavigationService])
     ], GanttSummaryTaskComponent);
     return GanttSummaryTaskComponent;
 }(GanttTaskBase));

package/dist/es/rendering/gantt-task-base.js

@@ -12,24 +12,42 @@ var slotUnitDuration = {
     week: MS_PER_DAY,
     month: MS_PER_DAY * 7
 };
+var FOCUSED_CLASS = 'k-focus';
 /**
  * @hidden
  */
 var GanttTaskBase = /** @class */ (function () {
     function GanttTaskBase(mapper, // left public to be available for usage in the templates
-    timelineViewService, dependencyDomService, optionChangesService, cdr) {
+    timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
         var _this = this;
         this.mapper = mapper;
         this.timelineViewService = timelineViewService;
         this.dependencyDomService = dependencyDomService;
         this.optionChangesService = optionChangesService;
         this.cdr = cdr;
+        this.navigationService = navigationService;
         this.wrapperClass = true;
-        this.viewChangesSubscription = new Subscription();
-        this.viewChangesSubscription.add(this.optionChangesService.viewChanges.subscribe(function () {
-            _this.cdr.markForCheck();
-        }));
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(this.optionChangesService.viewChanges
+            .subscribe(function () { return _this.cdr.markForCheck(); }));
+        this.subscriptions.add(this.navigationService.taskStatusChanges
+            .subscribe(this.updateActiveState.bind(this)));
     }
+    Object.defineProperty(GanttTaskBase.prototype, "taskIndexAttribute", {
+        get: function () {
+            return this.index;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(GanttTaskBase.prototype, "ariaSelected", {
+        get: function () {
+            // assinging null will not render the attribute at all (desired in selectable="false" mode)
+            return this.selectable ? String(this.isSelected(this.dataItem)) : null;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(GanttTaskBase.prototype, "slotUnitDuration", {
         get: function () {
             return slotUnitDuration[this.activeView];
@@ -51,23 +69,6 @@ var GanttTaskBase = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    GanttTaskBase.prototype.ngOnChanges = function (changes) {
-        if (isPresent(changes.dataItem)) {
-            if (isPresent(changes.dataItem.previousValue)) {
-                this.dependencyDomService.unregisterTask(changes.dataItem.previousValue);
-            }
-            this.dependencyDomService.registerTask(this.dataItem, this.taskElement.nativeElement);
-        }
-        else if (isPresent(changes.activeView)) {
-            this.dependencyDomService.notifyChanges();
-        }
-    };
-    GanttTaskBase.prototype.ngOnDestroy = function () {
-        if (isPresent(this.dataItem)) {
-            this.dependencyDomService.unregisterTask(this.dataItem);
-        }
-        this.viewChangesSubscription.unsubscribe();
-    };
     Object.defineProperty(GanttTaskBase.prototype, "taskWidth", {
         get: function () {
             var itemDuration = this.mapper.extractFromTask(this.dataItem, 'end') - this.mapper.extractFromTask(this.dataItem, 'start');
@@ -79,6 +80,12 @@ var GanttTaskBase = /** @class */ (function () {
         configurable: true
     });
     Object.defineProperty(GanttTaskBase.prototype, "taskOffset", {
+        /**
+         * 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.
+         * 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
+         * and hovering just the .k-task element doesn't expose the drag clues.
+         * Additionally, positioning the entire container takes care of positioning the hints as well.
+         */
         get: function () {
             var timeAfterViewStart = this.mapper.extractFromTask(this.dataItem, 'start') - this.viewService.viewStart;
             var offsetInSlotUnits = timeAfterViewStart / this.slotUnitDuration;
@@ -97,10 +104,48 @@ var GanttTaskBase = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    GanttTaskBase.prototype.ngOnChanges = function (changes) {
+        if (isPresent(changes.dataItem)) {
+            if (isPresent(changes.dataItem.previousValue)) {
+                this.dependencyDomService.unregisterTask(changes.dataItem.previousValue);
+            }
+            this.dependencyDomService.registerTask(this.dataItem, this.taskElement.nativeElement);
+        }
+        else if (isPresent(changes.activeView)) {
+            this.dependencyDomService.notifyChanges();
+        }
+        if (this.navigationService.enabled && isPresent(changes.index)) {
+            this.updateActiveState(this.navigationService.activeTask);
+        }
+    };
+    GanttTaskBase.prototype.ngOnDestroy = function () {
+        if (isPresent(this.dataItem)) {
+            this.dependencyDomService.unregisterTask(this.dataItem);
+        }
+        this.subscriptions.unsubscribe();
+    };
+    GanttTaskBase.prototype.updateActiveState = function (_a) {
+        var activeIndex = _a.activeIndex, isFocused = _a.isFocused;
+        var isActive = activeIndex === this.index;
+        var tabindex = isActive ? '0' : '-1';
+        this.taskElement.nativeElement.setAttribute('tabindex', tabindex);
+        if (isActive && isFocused) {
+            this.taskElement.nativeElement.focus();
+            this.taskElement.nativeElement.classList.add(FOCUSED_CLASS);
+        }
+        else {
+            this.taskElement.nativeElement.classList.remove(FOCUSED_CLASS);
+        }
+    };
     tslib_1.__decorate([
         HostBinding('class.k-task-wrap'),
         tslib_1.__metadata("design:type", Boolean)
     ], GanttTaskBase.prototype, "wrapperClass", void 0);
+    tslib_1.__decorate([
+        HostBinding('attr.data-task-index'),
+        tslib_1.__metadata("design:type", Number),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], GanttTaskBase.prototype, "taskIndexAttribute", null);
     tslib_1.__decorate([
         ViewChild('task', { static: true }),
         tslib_1.__metadata("design:type", ElementRef)
@@ -113,6 +158,18 @@ var GanttTaskBase = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", Number)
     ], GanttTaskBase.prototype, "index", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Number)
+    ], GanttTaskBase.prototype, "level", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], GanttTaskBase.prototype, "renderDependencyDragClues", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], GanttTaskBase.prototype, "selectable", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Function)
@@ -125,6 +182,11 @@ var GanttTaskBase = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", Function)
     ], GanttTaskBase.prototype, "taskClass", void 0);
+    tslib_1.__decorate([
+        HostBinding('style.left.px'),
+        tslib_1.__metadata("design:type", Number),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], GanttTaskBase.prototype, "taskOffset", null);
     return GanttTaskBase;
 }());
 export { GanttTaskBase };

package/dist/es/rendering/gantt-task.component.js

@@ -3,27 +3,30 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { ChangeDetectorRef, Component, forwardRef, Input, TemplateRef } from '@angular/core';
+import { ChangeDetectorRef, Component, forwardRef, Inject, Input, TemplateRef } from '@angular/core';
 import { MappingService } from '../common/mapping.service';
+import { NavigationService } from '../navigation/navigation.service';
+import { EditService } from '../editing/edit.service';
+import { TOUCH_ENABLED } from '../common/touch-enabled';
 import { DependencyDomService } from '../dependencies/dependency-dom.service';
 import { OptionChangesService } from '../common/option-changes.service';
 import { TimelineViewService } from './../timeline/timeline-view.service';
 import { GanttTaskBase } from './gantt-task-base';
-import { EditService } from '../editing/edit.service';
 /**
  * @hidden
  */
 var GanttTaskComponent = /** @class */ (function (_super) {
     tslib_1.__extends(GanttTaskComponent, _super);
-    function GanttTaskComponent(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, editService) {
-        var _this = _super.call(this, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) || this;
+    function GanttTaskComponent(editService, touchEnabled, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
+        var _this = _super.call(this, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) || this;
         _this.editService = editService;
+        _this.touchEnabled = touchEnabled;
         return _this;
     }
     GanttTaskComponent_1 = GanttTaskComponent;
     GanttTaskComponent.prototype.onTaskDelete = function () {
         this.editService.dataItem = this.dataItem;
-        this.editService.showConfirmationDialog.next();
+        this.editService.taskDelete.next(this.dataItem);
     };
     var GanttTaskComponent_1;
     tslib_1.__decorate([
@@ -43,14 +46,16 @@ var GanttTaskComponent = /** @class */ (function (_super) {
                     useExisting: forwardRef(function () { return GanttTaskComponent_1; })
                 }
             ],
-            template: "\n        <div\n            #task\n            class=\"k-task k-task-single\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [style.width.px]=\"taskWidth\"\n            [style.left.px]=\"taskOffset\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [attr.data-task-index]=\"index\"\n            [class.k-state-selected]=\"isSelected(dataItem)\"\n        >\n            <ng-container *ngIf=\"!taskTemplate\">\n                <div\n                    class=\"k-task-complete\"\n                    [style.width.px]=\"completionOverlayWidth\"\n                >\n                </div>\n                <div class=\"k-task-content\">\n                    <div class=\"k-task-template\">\n                        <ng-container *ngIf=\"!taskContentTemplate; else taskContent\">\n                            {{ mapper.extractFromTask(dataItem, 'title') }}\n                        </ng-container>\n                        <ng-template\n                            #taskContent\n                            [ngTemplateOutlet]=\"taskContentTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"\n                        >\n                        </ng-template>\n                    </div>\n                    <span class=\"k-task-actions\">\n                        <span\n                            (click)=\"onTaskDelete()\"\n                            class=\"k-link k-task-delete\">\n                            <span class=\"k-icon k-i-close\"></span>\n                        </span>\n                    </span>\n                </div>\n            </ng-container>\n            <ng-template\n                *ngIf=\"taskTemplate\"\n                [ngTemplateOutlet]=\"taskTemplate\"\n                [ngTemplateOutletContext]=\"{\n                    $implicit: dataItem,\n                    elementWidth: taskWidth\n                }\"\n            >\n            </ng-template>\n        </div>\n    "
+            template: "\n        <div\n            #task\n            class=\"k-task k-task-single\"\n            role=\"treeitem\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [style.width.px]=\"taskWidth\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [class.k-state-selected]=\"isSelected(dataItem)\"\n            [attr.aria-selected]=\"ariaSelected\"\n            [attr.aria-level]=\"level + 1\"\n        >\n            <ng-container *ngIf=\"!taskTemplate\">\n                <div\n                    class=\"k-task-complete\"\n                    [style.width.px]=\"completionOverlayWidth\"\n                        aria-hidden=\"true\"\n                >\n                </div>\n                <div class=\"k-task-content\">\n                    <div class=\"k-task-template\">\n                        <ng-container *ngIf=\"!taskContentTemplate; else taskContent\">\n                            {{ mapper.extractFromTask(dataItem, 'title') }}\n                        </ng-container>\n                        <ng-template\n                            #taskContent\n                            [ngTemplateOutlet]=\"taskContentTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"\n                        >\n                        </ng-template>\n                    </div>\n                    <span\n                        class=\"k-task-actions\"\n                        aria-hidden=\"true\"\n                    >\n                        <span\n                            class=\"k-link k-task-delete\"\n                            [kendoEventsOutsideAngular]=\"{\n                                click: onTaskDelete\n                            }\"\n                            [scope]=\"this\"\n                        >\n                            <span class=\"k-icon k-i-close\"></span>\n                        </span>\n                    </span>\n                </div>\n            </ng-container>\n            <ng-template\n                *ngIf=\"taskTemplate\"\n                [ngTemplateOutlet]=\"taskTemplate\"\n                [ngTemplateOutletContext]=\"{\n                    $implicit: dataItem,\n                    elementWidth: taskWidth\n                }\"\n            >\n            </ng-template>\n        </div>\n        <ng-container *ngIf=\"renderDependencyDragClues\">\n            <div\n                class=\"k-task-dot k-task-start k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n            <div\n                class=\"k-task-dot k-task-end k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n        </ng-container>\n    ",
+            styles: ["\n        .k-task.k-focus {\n            box-shadow: 0 0 4px 3px grey;\n            outline: none;\n        }\n        .k-task.k-focus.k-state-selected {\n            box-shadow: 0 0 4px 3px #ffaea8;\n        }\n    "]
         }),
-        tslib_1.__metadata("design:paramtypes", [MappingService,
+        tslib_1.__param(1, Inject(TOUCH_ENABLED)),
+        tslib_1.__metadata("design:paramtypes", [EditService, Boolean, MappingService,
             TimelineViewService,
             DependencyDomService,
             OptionChangesService,
             ChangeDetectorRef,
-            EditService])
+            NavigationService])
     ], GanttTaskComponent);
     return GanttTaskComponent;
 }(GanttTaskBase));

package/dist/es/rendering/gantt-tasks-table-body.component.js

@@ -6,8 +6,8 @@ import * as tslib_1 from "tslib";
 import { Component, Input, TemplateRef, ViewChild, ElementRef } from '@angular/core';
 import { isEqual } from '@progress/kendo-date-math';
 import { DependencyDomService } from '../dependencies/dependency-dom.service';
-import { isPresent } from '../utils';
 import { MappingService } from '../common/mapping.service';
+import { isPresent } from '../utils';
 /**
  * @hidden
  */
@@ -27,14 +27,18 @@ var GanttTasksTableBodyComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    GanttTasksTableBodyComponent.prototype.isMileStone = function (task) {
-        return !this.hasChildren(task) && isEqual(this.mapper.extractFromTask(task, 'start'), this.mapper.extractFromTask(task, 'end'));
+    GanttTasksTableBodyComponent.prototype.isMileStone = function (item) {
+        return !item.hasChildren && isEqual(this.mapper.extractFromTask(item.data, 'start'), this.mapper.extractFromTask(item.data, 'end'));
     };
     tslib_1.__decorate([
         ViewChild('timelineRow', { static: false }),
         tslib_1.__metadata("design:type", ElementRef),
         tslib_1.__metadata("design:paramtypes", [ElementRef])
     ], GanttTasksTableBodyComponent.prototype, "timelineRow", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], GanttTasksTableBodyComponent.prototype, "selectable", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Array)
@@ -62,15 +66,19 @@ var GanttTasksTableBodyComponent = /** @class */ (function () {
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Function)
-    ], GanttTasksTableBodyComponent.prototype, "hasChildren", void 0);
+    ], GanttTasksTableBodyComponent.prototype, "isExpanded", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Function)
     ], GanttTasksTableBodyComponent.prototype, "isTaskSelected", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], GanttTasksTableBodyComponent.prototype, "renderDependencyDragClues", void 0);
     GanttTasksTableBodyComponent = tslib_1.__decorate([
         Component({
             selector: '[kendoGanttTasksTableBody]',
-            template: "\n        <tr #timelineRow *ngFor=\"let item of rows; let index = index\">\n            <td>\n                <kendo-gantt-milestone-task\n                    *ngIf=\"isMileStone(item); else task\"\n                    [dataItem]=\"item\"\n                    [activeView]=\"activeView\"\n                    [taskClass]=\"taskClass\"\n                    [isSelected]=\"isTaskSelected\"\n                    [index]=\"index\"\n                >\n                </kendo-gantt-milestone-task>\n                <ng-template #task>\n                    <kendo-gantt-summary-task\n                        *ngIf=\"hasChildren(item)\"\n                        [dataItem]=\"item\"\n                        [template]=\"summaryTaskTemplate\"\n                        [activeView]=\"activeView\"\n                        [taskClass]=\"taskClass\"\n                        [isSelected]=\"isTaskSelected\"\n                        [index]=\"index\"\n                    >\n                    </kendo-gantt-summary-task>\n                    <kendo-gantt-task\n                        *ngIf=\"!hasChildren(item)\"\n                        [dataItem]=\"item\"\n                        [taskContentTemplate]=\"taskContentTemplate\"\n                        [taskTemplate]=\"taskTemplate\"\n                        [activeView]=\"activeView\"\n                        [taskClass]=\"taskClass\"\n                        [isSelected]=\"isTaskSelected\"\n                        [index]=\"index\"\n                    >\n                    </kendo-gantt-task>\n                </ng-template>\n            </td>\n        </tr>\n    "
+            template: "\n        <tr #timelineRow *ngFor=\"let item of rows; let index = index\">\n            <td>\n                <kendo-gantt-milestone-task\n                    *ngIf=\"isMileStone(item); else task\"\n                    [dataItem]=\"item.data\"\n                    [level]=\"item.level\"\n                    [activeView]=\"activeView\"\n                    [taskClass]=\"taskClass\"\n                    [selectable]=\"selectable\"\n                    [isSelected]=\"isTaskSelected\"\n                    [index]=\"index\"\n                    [renderDependencyDragClues]=\"renderDependencyDragClues\"\n                >\n                </kendo-gantt-milestone-task>\n                <ng-template #task>\n                    <kendo-gantt-summary-task\n                        *ngIf=\"item.hasChildren\"\n                        [dataItem]=\"item.data\"\n                        [level]=\"item.level\"\n                        [template]=\"summaryTaskTemplate\"\n                        [activeView]=\"activeView\"\n                        [taskClass]=\"taskClass\"\n                        [selectable]=\"selectable\"\n                        [isSelected]=\"isTaskSelected\"\n                        [isExpanded]=\"isExpanded\"\n                        [index]=\"index\"\n                        [renderDependencyDragClues]=\"renderDependencyDragClues\"\n                    >\n                    </kendo-gantt-summary-task>\n                    <kendo-gantt-task\n                        *ngIf=\"!item.hasChildren\"\n                        [dataItem]=\"item.data\"\n                        [level]=\"item.level\"\n                        [taskContentTemplate]=\"taskContentTemplate\"\n                        [taskTemplate]=\"taskTemplate\"\n                        [activeView]=\"activeView\"\n                        [taskClass]=\"taskClass\"\n                        [selectable]=\"selectable\"\n                        [isSelected]=\"isTaskSelected\"\n                        [index]=\"index\"\n                        [renderDependencyDragClues]=\"renderDependencyDragClues\"\n                    >\n                    </kendo-gantt-task>\n                </ng-template>\n            </td>\n        </tr>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [DependencyDomService,
             MappingService])

package/dist/es/scrolling/drag-scroll-settings.js

@@ -0,0 +1,20 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export var ScrollDirection;
+(function (ScrollDirection) {
+    ScrollDirection[ScrollDirection["Backwards"] = -1] = "Backwards";
+    ScrollDirection[ScrollDirection["Forward"] = 1] = "Forward";
+})(ScrollDirection || (ScrollDirection = {}));
+/**
+ * @hidden
+ */
+export var ScrollAxis;
+(function (ScrollAxis) {
+    ScrollAxis["Vertical"] = "scrollTop";
+    ScrollAxis["Horizontal"] = "scrollLeft";
+})(ScrollAxis || (ScrollAxis = {}));

package/dist/es/scrolling/timeline-scroll.directive.js

@@ -0,0 +1,89 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, ElementRef, Input, NgZone } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { isPresent } from '../utils';
+import { ScrollAxis, ScrollDirection } from './drag-scroll-settings';
+import { TimelineScrollService } from './timeline-scroll.service';
+import { getViewportBoundaries, scrollElement } from './utils';
+/**
+ * @hidden
+ */
+var TimelineScrollableDirective = /** @class */ (function () {
+    function TimelineScrollableDirective(timelineScrollableContainer, scrollService, zone) {
+        this.timelineScrollableContainer = timelineScrollableContainer;
+        this.scrollService = scrollService;
+        this.zone = zone;
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(this.scrollService.horizontalScroll
+            .subscribe(this.scrollHorizontallyTo.bind(this)));
+        this.subscriptions.add(this.scrollService.verticalScroll
+            .subscribe(this.scrollVerticallyTo.bind(this)));
+        this.subscriptions.add(this.scrollService.scrollCancel
+            .subscribe(this.cancelScroll.bind(this)));
+    }
+    TimelineScrollableDirective.prototype.ngOnDestroy = function () {
+        this.subscriptions.unsubscribe();
+    };
+    TimelineScrollableDirective.prototype.scrollHorizontallyTo = function (left) {
+        var _this = this;
+        this.zone.runOutsideAngular(function () {
+            var container = _this.timelineScrollableContainer.nativeElement;
+            var visibleBoundaries = getViewportBoundaries(container);
+            if (left < visibleBoundaries.left + _this.scrollSettings.threshold) {
+                _this.horizontalScrollInterval = setInterval(function () {
+                    return scrollElement(container, _this.scrollSettings.step, ScrollDirection.Backwards, ScrollAxis.Horizontal);
+                }, _this.scrollSettings.interval);
+            }
+            else if (left > visibleBoundaries.right - _this.scrollSettings.threshold) {
+                _this.horizontalScrollInterval = setInterval(function () {
+                    return scrollElement(container, _this.scrollSettings.step, ScrollDirection.Forward, ScrollAxis.Horizontal);
+                }, _this.scrollSettings.interval);
+            }
+        });
+    };
+    TimelineScrollableDirective.prototype.scrollVerticallyTo = function (top) {
+        var _this = this;
+        this.zone.runOutsideAngular(function () {
+            var container = _this.timelineScrollableContainer.nativeElement;
+            var visibleBoundaries = getViewportBoundaries(container);
+            if (top < visibleBoundaries.top + _this.scrollSettings.threshold) {
+                _this.verticalScrollInterval = setInterval(function () {
+                    return scrollElement(container, _this.scrollSettings.step, ScrollDirection.Backwards, ScrollAxis.Vertical);
+                }, _this.scrollSettings.interval);
+            }
+            else if (top > visibleBoundaries.bottom - _this.scrollSettings.threshold) {
+                _this.verticalScrollInterval = setInterval(function () {
+                    return scrollElement(container, _this.scrollSettings.step, ScrollDirection.Forward, ScrollAxis.Vertical);
+                }, _this.scrollSettings.interval);
+            }
+        });
+    };
+    TimelineScrollableDirective.prototype.cancelScroll = function () {
+        if (isPresent(this.verticalScrollInterval)) {
+            clearInterval(this.verticalScrollInterval);
+            this.verticalScrollInterval = null;
+        }
+        if (isPresent(this.horizontalScrollInterval)) {
+            clearInterval(this.horizontalScrollInterval);
+            this.horizontalScrollInterval = null;
+        }
+    };
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], TimelineScrollableDirective.prototype, "scrollSettings", void 0);
+    TimelineScrollableDirective = tslib_1.__decorate([
+        Directive({
+            selector: '[kendoGanttTimelineScrollable]'
+        }),
+        tslib_1.__metadata("design:paramtypes", [ElementRef,
+            TimelineScrollService,
+            NgZone])
+    ], TimelineScrollableDirective);
+    return TimelineScrollableDirective;
+}());
+export { TimelineScrollableDirective };