@progress/kendo-angular-gantt 0.3.0-dev.202201131518 → 1.0.1-dev.202201201207

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];
@@ -96,17 +114,38 @@ var GanttTaskBase = /** @class */ (function () {
         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.viewChangesSubscription.unsubscribe();
+        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)
@@ -115,10 +154,22 @@ var GanttTaskBase = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", Object)
     ], GanttTaskBase.prototype, "dataItem", void 0);
+    tslib_1.__decorate([
+        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)

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

@@ -5,19 +5,20 @@
 import * as tslib_1 from "tslib";
 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(editService, touchEnabled, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
-        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;
@@ -25,7 +26,7 @@ var GanttTaskComponent = /** @class */ (function (_super) {
     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([
@@ -45,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            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\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        <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    "
+            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.__param(1, Inject(TOUCH_ENABLED)),
         tslib_1.__metadata("design:paramtypes", [EditService, Boolean, MappingService,
             TimelineViewService,
             DependencyDomService,
             OptionChangesService,
-            ChangeDetectorRef])
+            ChangeDetectorRef,
+            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,7 +66,7 @@ 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)
@@ -74,7 +78,7 @@ var GanttTasksTableBodyComponent = /** @class */ (function () {
     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                    [attr.data-task-index]=\"index\"\n                    [renderDependencyDragClues]=\"renderDependencyDragClues\"\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                        [attr.data-task-index]=\"index\"\n                        [renderDependencyDragClues]=\"renderDependencyDragClues\"\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                        [attr.data-task-index]=\"index\"\n                        [renderDependencyDragClues]=\"renderDependencyDragClues\"\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/timeline/gantt-timeline.component.js

@@ -125,10 +125,6 @@ var GanttTimelineComponent = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", Function)
     ], GanttTimelineComponent.prototype, "taskClass", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Function)
-    ], GanttTimelineComponent.prototype, "isTaskSelected", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Boolean)
@@ -137,10 +133,18 @@ var GanttTimelineComponent = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", Object)
     ], GanttTimelineComponent.prototype, "dragScrollSettings", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], GanttTimelineComponent.prototype, "selectable", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Function)
+    ], GanttTimelineComponent.prototype, "isTaskSelected", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Function)
-    ], GanttTimelineComponent.prototype, "hasChildren", void 0);
+    ], GanttTimelineComponent.prototype, "isExpanded", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Array)
@@ -160,7 +164,7 @@ var GanttTimelineComponent = /** @class */ (function () {
     GanttTimelineComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-gantt-timeline',
-            template: "\n        <div class=\"k-timeline k-grid k-widget\">\n            <div class=\"k-grid-header\">\n                <div #timelineHeaderWrap class=\"k-grid-header-wrap\">\n                    <table\n                        role=\"presentation\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <tbody\n                            kendoGanttHeaderTableBody\n                            [groupSlots]=\"groupSlots\"\n                            [slots]=\"slots\">\n                        </tbody>\n                    </table>\n                </div>\n            </div>\n            <div\n                #timelineContent\n                class=\"k-grid-content\"\n                kendoGanttTimelineScrollable\n                [scrollSettings]=\"dragScrollSettings\"\n                kendoDraggable\n                [enableDrag]=\"draggableEnabled\"\n                (kendoPress)=\"timelineContainerPress.emit($event)\"\n                (kendoDrag)=\"timelineContainerDrag.emit($event)\"\n                (kendoRelease)=\"timelineContainerRelease.emit($event)\"\n            >\n                <div class=\"k-gantt-tables\">\n                    <table\n                        class=\"k-gantt-rows\"\n                        [style.width.px]=\"tableWidth\"\n                        role=\"presentation\"\n                    >\n                        <tbody>\n                            <tr *ngFor=\"let item of rows; let i = index;\"\n                                [class.k-alt]=\"i % 2\"\n                            >\n                                <td></td>\n                            </tr>\n                        </tbody>\n                    </table>\n\n                    <table\n                        #timelineColumns\n                        class=\"k-gantt-columns\"\n                        role=\"presentation\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <colgroup>\n                            <col *ngFor=\"let item of slots\">\n                        </colgroup>\n\n                        <tbody>\n                            <tr>\n                                <td *ngFor=\"let item of slots\"\n                                    [class.k-nonwork-hour]=\"isNonWorking(item)\"\n                                >\n                                </td>\n                            </tr>\n                        </tbody>\n                    </table>\n\n                    <table\n                        #tasksContainer\n                        class=\"k-gantt-tasks\"\n                        role=\"presentation\"\n                        style=\"border-collapse: collapse;\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <tbody\n                            kendoGanttTasksTableBody\n                            [rows]=\"rows\"\n                            [activeView]=\"activeView\"\n                            [taskContentTemplate]=\"taskContentTemplate\"\n                            [taskTemplate]=\"taskTemplate\"\n                            [summaryTaskTemplate]=\"summaryTaskTemplate\"\n                            [taskClass]=\"taskClass\"\n                            [hasChildren]=\"hasChildren\"\n                            [isTaskSelected]=\"isTaskSelected\"\n                            [renderDependencyDragClues]=\"renderDependencyDragClues\"\n                        >\n                        </tbody>\n                    </table>\n                </div>\n                <svg class=\"k-gantt-dependencies-svg\">\n                    <polyline\n                        *ngFor=\"let dependency of dependencies\"\n                        kendoGanttDependency\n                        [dependency]=\"dependency\"\n                    />\n                    <polyline #dependencyDragCreatePolyline />\n                </svg>\n\n                <!-- placeholder for the dependency drag popup; its position is not arbitrary - the popup is intended to be absolutely positioned inside the .k-grid-content element -->\n                <ng-container #dragPopupContainer></ng-container>\n            </div>\n        </div>\n    "
+            template: "\n        <div class=\"k-timeline k-grid k-widget\">\n            <div class=\"k-grid-header\">\n                <div #timelineHeaderWrap class=\"k-grid-header-wrap\">\n                    <table\n                        role=\"presentation\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <tbody\n                            kendoGanttHeaderTableBody\n                            [groupSlots]=\"groupSlots\"\n                            [slots]=\"slots\">\n                        </tbody>\n                    </table>\n                </div>\n            </div>\n            <!-- tabindex=\"-1\" required for https://bugzilla.mozilla.org/show_bug.cgi?id=1069739 -->\n            <div\n                #timelineContent\n                class=\"k-grid-content\"\n                tabindex=\"-1\"\n                role=\"tree\"\n                aria-roledescription=\"Timeline\"\n                kendoGanttTimelineScrollable\n                [scrollSettings]=\"dragScrollSettings\"\n                kendoDraggable\n                [enableDrag]=\"draggableEnabled\"\n                (kendoPress)=\"timelineContainerPress.emit($event)\"\n                (kendoDrag)=\"timelineContainerDrag.emit($event)\"\n                (kendoRelease)=\"timelineContainerRelease.emit($event)\"\n            >\n                <div class=\"k-gantt-tables\">\n                    <table\n                        class=\"k-gantt-rows\"\n                        [style.width.px]=\"tableWidth\"\n                        role=\"presentation\"\n                    >\n                        <tbody>\n                            <tr *ngFor=\"let item of rows; let i = index;\"\n                                [class.k-alt]=\"i % 2\"\n                            >\n                                <td></td>\n                            </tr>\n                        </tbody>\n                    </table>\n\n                    <table\n                        #timelineColumns\n                        class=\"k-gantt-columns\"\n                        role=\"presentation\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <colgroup>\n                            <col *ngFor=\"let item of slots\">\n                        </colgroup>\n\n                        <tbody>\n                            <tr>\n                                <td *ngFor=\"let item of slots\"\n                                    [class.k-nonwork-hour]=\"isNonWorking(item)\"\n                                >\n                                </td>\n                            </tr>\n                        </tbody>\n                    </table>\n\n                    <table\n                        #tasksContainer\n                        class=\"k-gantt-tasks\"\n                        role=\"presentation\"\n                        style=\"border-collapse: collapse;\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <tbody\n                            kendoGanttTasksTableBody\n                            [rows]=\"rows\"\n                            [activeView]=\"activeView\"\n                            [taskContentTemplate]=\"taskContentTemplate\"\n                            [taskTemplate]=\"taskTemplate\"\n                            [summaryTaskTemplate]=\"summaryTaskTemplate\"\n                            [taskClass]=\"taskClass\"\n                            [isExpanded]=\"isExpanded\"\n                            [selectable]=\"selectable\"\n                            [isTaskSelected]=\"isTaskSelected\"\n                            [renderDependencyDragClues]=\"renderDependencyDragClues\"\n                        >\n                        </tbody>\n                    </table>\n                </div>\n                <svg class=\"k-gantt-dependencies-svg\">\n                    <polyline\n                        *ngFor=\"let dependency of dependencies\"\n                        kendoGanttDependency\n                        [dependency]=\"dependency\"\n                    />\n                    <polyline #dependencyDragCreatePolyline />\n                </svg>\n\n                <!-- placeholder for the dependency drag popup; its position is not arbitrary - the popup is intended to be absolutely positioned inside the .k-grid-content element -->\n                <ng-container #dragPopupContainer></ng-container>\n            </div>\n        </div>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [ScrollSyncService,
             DependencyDomService,

package/dist/es/toolbar/toolbar.component.js

@@ -3,17 +3,16 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Component, Input } from '@angular/core';
-import { GanttComponent } from "../gantt.component";
-import { ScrollSyncService } from '../scrolling/scroll-sync.service';
+import { Component, Input, HostBinding } from '@angular/core';
+import { GanttComponent } from '../gantt.component';
 /**
  * @hidden
  */
 var ToolbarComponent = /** @class */ (function () {
-    function ToolbarComponent(gantt, scrollSyncService) {
+    function ToolbarComponent(gantt) {
         this.gantt = gantt;
-        this.scrollSyncService = scrollSyncService;
         this.context = {};
+        this.role = 'toolbar';
     }
     Object.defineProperty(ToolbarComponent.prototype, "position", {
         get: function () {
@@ -41,12 +40,13 @@ var ToolbarComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    ToolbarComponent.prototype.onViewChange = function (e) {
-        this.gantt.activeView = e; // TODO: may be load the timeline data directly in an activeView setter?
-        this.gantt.loadTimelineData();
-        this.gantt.activeViewChange.emit(e);
-        this.scrollSyncService.resetTimelineScrollLeft();
+    ToolbarComponent.prototype.handleViewChange = function (view) {
+        this.gantt.changeActiveView(view);
     };
+    tslib_1.__decorate([
+        HostBinding('attr.role'),
+        tslib_1.__metadata("design:type", String)
+    ], ToolbarComponent.prototype, "role", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Boolean)
@@ -63,10 +63,9 @@ var ToolbarComponent = /** @class */ (function () {
     ToolbarComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-gantt-toolbar',
-            template: "\n        <ng-container *ngIf=\"!renderTemplate\">\n            <kendo-gantt-add-task *ngIf=\"showAddTask\"></kendo-gantt-add-task>\n            <span class=\"k-spacer k-toolbar-spacer\"></span>\n            <kendo-gantt-view-selector\n                *ngIf=\"showViewSelector\"\n                [views]=\"gantt.viewTypes\"\n                [activeView]=\"gantt.activeView\"\n                (activeViewChange)=\"onViewChange($event)\"></kendo-gantt-view-selector>\n        </ng-container>\n        <ng-template\n            *ngIf=\"renderTemplate\"\n            [ngTemplateOutlet]=\"toolbarTemplateRef\"\n            [ngTemplateOutletContext]=\"context\"\n            >\n        </ng-template>\n    "
+            template: "\n        <ng-container *ngIf=\"!renderTemplate\">\n            <kendo-gantt-add-task *ngIf=\"showAddTask\"></kendo-gantt-add-task>\n            <span class=\"k-spacer k-toolbar-spacer\"></span>\n            <kendo-gantt-view-selector\n                *ngIf=\"showViewSelector\"\n                [views]=\"gantt.viewTypes\"\n                [activeView]=\"gantt.activeView\"\n                (activeViewChange)=\"handleViewChange($event)\"></kendo-gantt-view-selector>\n        </ng-container>\n        <ng-template\n            *ngIf=\"renderTemplate\"\n            [ngTemplateOutlet]=\"toolbarTemplateRef\"\n            [ngTemplateOutletContext]=\"context\"\n            >\n        </ng-template>\n    "
         }),
-        tslib_1.__metadata("design:paramtypes", [GanttComponent,
-            ScrollSyncService])
+        tslib_1.__metadata("design:paramtypes", [GanttComponent])
     ], ToolbarComponent);
     return ToolbarComponent;
 }());

package/dist/es/toolbar/view-selector.component.js

@@ -55,7 +55,7 @@ var ViewSelectorComponent = /** @class */ (function () {
     ViewSelectorComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-gantt-view-selector',
-            template: "\n        <select class=\"k-dropdown k-views-dropdown\"\n            [value]=\"activeView\"\n            (change)=\"activeViewChange.emit($event.target.value)\">\n            <option *ngFor=\"let view of views\" [value]=\"view\">{{getViewTypeText(view)}}</option>\n        </select>\n        <kendo-buttongroup class=\"k-gantt-views\" selection=\"single\">\n            <button *ngFor=\"let view of views\"\n                kendoButton\n                type=\"button\"\n                [selected]=\"view === activeView\"\n                (click)=\"onClick(view)\">{{getViewTypeText(view)}}</button>\n        </kendo-buttongroup>\n    "
+            template: "\n        <select\n            class=\"k-dropdownlist k-picker k-rounded-md k-views-dropdown\"\n            aria-label=\"View Selector\"\n            [value]=\"activeView\"\n            (change)=\"activeViewChange.emit($event.target.value)\">\n            <option *ngFor=\"let view of views\" [value]=\"view\">{{getViewTypeText(view)}}</option>\n        </select>\n        <kendo-buttongroup class=\"k-gantt-views\" selection=\"single\">\n            <button *ngFor=\"let view of views\"\n                kendoButton\n                type=\"button\"\n                [selected]=\"view === activeView\"\n                (click)=\"onClick(view)\">{{getViewTypeText(view)}}</button>\n        </kendo-buttongroup>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService])
     ], ViewSelectorComponent);

package/dist/es/utils.js

@@ -163,6 +163,16 @@ export var isTask = function (contender, parentScope) {
     var task = closestInScope(contender, matchesClasses('k-task'), parentScope);
     return isPresent(task);
 };
+/**
+ * @hidden
+ *
+ * Checks whether the queried item or its parent items has a `k-toolbar` selector.
+ * Restricts the search up to the provided parent element from the second param.
+ */
+export var isToolbar = function (contender, parentScope) {
+    var toolbar = closestInScope(contender, matchesClasses('k-gantt-toolbar'), parentScope);
+    return isPresent(toolbar);
+};
 /**
  * @hidden
  *
@@ -237,12 +247,12 @@ export var sameTaskClues = function (fromTaskClue, toTaskClue, parentScope) {
  * If the contender is above the max value, the max value is returned.
  */
 export var fitToRange = function (contender, min, max) {
-    if (contender > max) {
-        return max;
-    }
-    else if (contender < min) {
+    if (!isPresent(contender) || contender < min) {
         return min;
     }
+    else if (contender > max) {
+        return max;
+    }
     else {
         return contender;
     }

package/dist/es2015/editing/dependencies-table.component.js

@@ -116,7 +116,7 @@ DependenciesTableComponent = tslib_1.__decorate([
             [selectable]="{ mode: 'single' }"
             [(selectedKeys)]="selectedKeys"
             kendoGridSelectBy
-            [height]="295"
+            [height]="275"
         >
             <ng-template kendoGridToolbarTemplate>
                 <button kendoButton (click)="addHandler()">

package/dist/es2015/editing/edit-dialog.component.d.ts

@@ -24,5 +24,5 @@ export declare class EditDialogComponent {
     getText(token: string): string;
     getDependencyType(typeId: number): string;
     handleEditingResult(editResultType: 'save' | 'cancel'): void;
-    onTaskDelete(): void;
+    handleTaskDelete(): void;
 }

package/dist/es2015/editing/edit-dialog.component.js

@@ -44,8 +44,8 @@ let EditDialogComponent = class EditDialogComponent {
     handleEditingResult(editResultType) {
         this.editService.triggerEditEvent(editResultType);
     }
-    onTaskDelete() {
-        this.editService.showConfirmationDialog.next();
+    handleTaskDelete() {
+        this.editService.taskDelete.next(this.editService.dataItem);
     }
 };
 tslib_1.__decorate([
@@ -64,7 +64,7 @@ EditDialogComponent = tslib_1.__decorate([
             <kendo-dialog-messages
                 [closeTitle]="getText('taskEditingDialogCloseTitle')"></kendo-dialog-messages>
 
-            <kendo-tabstrip [keepTabContent]="true">
+            <kendo-tabstrip [keepTabContent]="true" style="height: 345px;">
                 <kendo-tabstrip-tab [title]="getText('taskEditingGeneralTabTitle')" [selected]="true">
                     <ng-template kendoTabContent>
                     <kendo-gantt-task-fields></kendo-gantt-task-fields>
@@ -92,7 +92,15 @@ EditDialogComponent = tslib_1.__decorate([
             </kendo-tabstrip>
 
             <kendo-dialog-actions layout="normal">
-                <button kendoButton (click)="onTaskDelete()">{{ getText('deleteButtonText') }}</button>
+                <button
+                    kendoButton
+                    [kendoEventsOutsideAngular]="{
+                        click: handleTaskDelete
+                    }"
+                    [scope]="this"
+                >
+                    {{ getText('deleteButtonText') }}
+                </button>
                 <kendo-treelist-spacer></kendo-treelist-spacer>
                 <button kendoButton [primary]="true" (click)="handleEditingResult('save')">{{ getText('saveButtonText') }}</button>
                 <button kendoButton (click)="handleEditingResult('cancel')">{{ getText('cancelButtonText') }}</button>

package/dist/es2015/editing/edit.service.d.ts

@@ -4,8 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { FormGroup } from '@angular/forms';
 import { Observable, Subject } from 'rxjs';
-import { TaskAddEvent } from '../models/events/task-add-event.interface';
-import { GanttDependency } from '../main';
+import { GanttDependency, TaskAddEvent } from '../models/models';
 import { EditEvent, EditResultType } from '../models/events/task-edit-event.interface';
 import { MappingService } from '../common/mapping.service';
 /**
@@ -14,7 +13,7 @@ import { MappingService } from '../common/mapping.service';
 export declare class EditService {
     private mapper;
     showEditingDialog: Subject<boolean>;
-    showConfirmationDialog: Subject<any>;
+    taskDelete: Subject<object>;
     editEvent: Subject<EditEvent>;
     addEvent: Subject<TaskAddEvent>;
     taskFormGroup: FormGroup;

package/dist/es2015/editing/edit.service.js

@@ -5,8 +5,8 @@
 import * as tslib_1 from "tslib";
 import { Injectable } from '@angular/core';
 import { EMPTY, forkJoin, isObservable, of, Subject } from 'rxjs';
-import { MappingService } from '../common/mapping.service';
 import { map, expand, reduce } from 'rxjs/operators';
+import { MappingService } from '../common/mapping.service';
 import { isPresent, normalizeGanttData } from '../utils';
 /**
  * @hidden
@@ -15,9 +15,11 @@ let EditService = class EditService {
     constructor(mapper) {
         this.mapper = mapper;
         this.showEditingDialog = new Subject();
-        this.showConfirmationDialog = new Subject();
+        this.taskDelete = new Subject();
         this.editEvent = new Subject();
         this.addEvent = new Subject();
+        this.predecessors = [];
+        this.successors = [];
         this.updatedItems = [];
         this.deletedItems = [];
         this.itemIndex = (item, data) => {

package/dist/es2015/editing/task-fields.component.js

@@ -33,7 +33,7 @@ TaskFieldsComponent = tslib_1.__decorate([
         <form class="k-form" [formGroup]="formGroup">
             <kendo-formfield *ngIf="formGroup.contains(mapper.taskFields.title)">
                 <kendo-label [for]="mapper.taskFields.title" [text]="getText('titleFieldInputLabel')"></kendo-label>
-                <input class="k-textbox" [formControlName]="mapper.taskFields.title" />
+                <input kendoTextBox [formControlName]="mapper.taskFields.title" />
             </kendo-formfield>
             <div class="k-hstack">
                 <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.start)">

package/dist/es2015/editing/utils.d.ts

@@ -2,8 +2,8 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { MappingService } from "../common/mapping.service";
-import { TaskEditItem } from "../models/events/task-edit-event.interface";
+import { MappingService } from '../common/mapping.service';
+import { TaskEditItem } from '../models/events/task-edit-event.interface';
 /**
  * @hidden
  */