@progress/kendo-angular-gantt 0.3.0-dev.202201111723 → 1.0.0

package/dist/es/common/touch-enabled.js

@@ -0,0 +1,9 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { InjectionToken } from '@angular/core';
+/**
+ * @hidden
+ */
+export var TOUCH_ENABLED = new InjectionToken('gantt-touch-enabled');

package/dist/es/dependencies/utils.js

@@ -13,6 +13,9 @@ export var getOffsetRelativeToParent = function (element, targetParent) {
         top: 0,
         left: 0
     };
+    if (!targetParent.contains(element)) {
+        return offset;
+    }
     var offsetParent = element;
     while (offsetParent && offsetParent !== targetParent) {
         offset.top += offsetParent.offsetTop;
@@ -162,4 +165,35 @@ var getArrowEast = function (top, left, arrowSize) {
     return points;
 };
 var ɵ2 = getArrowEast;
+/**
+ * @hidden
+ *
+ * Translates the provided client `left` and `top` coords to coords relative to the provided container.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_View/Coordinate_systems#standard_cssom_coordinate_systems
+ */
+export var clientToOffsetCoords = function (clientLeft, clientTop, offsetContainer) {
+    // client (viewport) coordinates of the target container
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#value
+    var offsetContainerClientRect = offsetContainer.getBoundingClientRect();
+    return {
+        left: clientLeft - offsetContainerClientRect.left + offsetContainer.scrollLeft,
+        top: clientTop - offsetContainerClientRect.top + offsetContainer.scrollTop
+    };
+};
+/**
+ * @hidden
+ *
+ * Retrieves the `left` and `top` values of the center of the provided element.
+ * The retrieved values are relative to the current viewport (client values).
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_View/Coordinate_systems#standard_cssom_coordinate_systems
+ */
+export var getElementClientCenterCoords = function (element) {
+    // client (viewport) coordinates of the targeted element
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#value
+    var _a = element.getBoundingClientRect(), left = _a.left, top = _a.top, width = _a.width, height = _a.height;
+    return {
+        left: left + (width / 2),
+        top: top + (height / 2)
+    };
+};
 export { ɵ0, ɵ1, ɵ2 };

package/dist/es/dragging/dependency-drag-create.directive.js

@@ -0,0 +1,347 @@
+/**-----------------------------------------------------------------------------------------
+* 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, Input, NgZone, Renderer2 } from '@angular/core';
+import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import { PopupService } from '@progress/kendo-angular-popup';
+import { GanttComponent } from '../gantt.component';
+import { MappingService } from '../common/mapping.service';
+import { TimelineScrollService } from '../scrolling/timeline-scroll.service';
+import { DragValidationTooltipComponent } from './drag-validation-tooltip.component';
+import { clientToOffsetCoords, getElementClientCenterCoords } from '../dependencies/utils';
+import { isPresent, isDependencyDragClue, getClosestTaskWrapper, getDependencyTypeFromTargetTasks, getClosestTaskIndex, sameTaskClues, isTaskWrapper, fitToRange } from '../utils';
+import { elementFromPoint } from '../utils';
+/**
+ * When added to the .k-task-dot, the element will be kept with hover styles.
+ * Used for the drag clue from which the dragging has started.
+ */
+var DRAG_CLUE_HOVER_CLASS = 'k-state-hover';
+/**
+ * Add the selection disabling class to the enitre container.
+ * Otherwise existing selection on a given task text prevents dragging the clue even if the clue has `user-select: none` styles.
+ */
+var USER_SELECT_NONE_CLASS = 'k-user-select-none';
+/**
+ * When added to the .k-task-wrap, the containing .k-task-dot elements will be kept visible even when not hovered.
+ * Used for the drag clue from which the dragging has started.
+ */
+var TASK_WRAPPER_DRAG_CLASS = 'k-origin';
+/**
+ * Use 20px margin between the pointer and the popup.
+ * Could be made user-configurable if there's demand.
+ */
+var DEFAULT_POPUP_VERTICAL_MARGIN = 20;
+/**
+ * A directive which enables the creation of new dependencies via dragging.
+ */
+var DependencyDragCreateDirective = /** @class */ (function () {
+    function DependencyDragCreateDirective(gantt, zone, renderer, mapper, popupService, timelineScrollService) {
+        this.gantt = gantt;
+        this.zone = zone;
+        this.renderer = renderer;
+        this.mapper = mapper;
+        this.popupService = popupService;
+        this.timelineScrollService = timelineScrollService;
+        /**
+         * Specifies whether the validation tooltip will be displayed during drag operations.
+         *
+         * @default true
+         */
+        this.displayValidationTooltip = true;
+        this.gantt.renderDependencyDragClues = true;
+    }
+    Object.defineProperty(DependencyDragCreateDirective.prototype, "container", {
+        get: function () {
+            if (!isPresent(this.gantt.timeline) || !isPresent(this.gantt.timeline.timelineContent)) {
+                return null;
+            }
+            return this.gantt.timeline.timelineContent.nativeElement;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DependencyDragCreateDirective.prototype, "polyline", {
+        get: function () {
+            if (!isPresent(this.gantt.timeline) || !isPresent(this.gantt.timeline.dependencyDragCreatePolyline)) {
+                return null;
+            }
+            return this.gantt.timeline.dependencyDragCreatePolyline.nativeElement;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DependencyDragCreateDirective.prototype, "popupContainer", {
+        get: function () {
+            if (!isPresent(this.gantt.timeline) || !isPresent(this.gantt.timeline.dragPopupContainer)) {
+                return null;
+            }
+            return this.gantt.timeline.dragPopupContainer;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    DependencyDragCreateDirective.prototype.ngAfterViewInit = function () {
+        this.subscribeDraggable();
+        this.addScrollListener();
+    };
+    DependencyDragCreateDirective.prototype.ngOnDestroy = function () {
+        this.unsubscribeDraggable();
+        this.removeScrollListener();
+        this.fromTaskClue = null;
+        this.cancelScroll();
+        this.closeDragPopup();
+    };
+    DependencyDragCreateDirective.prototype.subscribeDraggable = function () {
+        this.dragSubscriptions = this.gantt.timeline.timelineContainerPress
+            .subscribe(this.handlePress.bind(this));
+        this.dragSubscriptions.add(this.gantt.timeline.timelineContainerDrag
+            .subscribe(this.handleDrag.bind(this)));
+        this.dragSubscriptions.add(this.gantt.timeline.timelineContainerRelease
+            .subscribe(this.handleRelease.bind(this)));
+    };
+    DependencyDragCreateDirective.prototype.unsubscribeDraggable = function () {
+        if (isPresent(this.dragSubscriptions)) {
+            this.dragSubscriptions.unsubscribe();
+            this.dragSubscriptions = null;
+        }
+    };
+    DependencyDragCreateDirective.prototype.handlePress = function (_a) {
+        var clientX = _a.clientX, clientY = _a.clientY;
+        // using `originalEvent.target` is not reliable under mobile devices with the current implementation of the draggable, so use this instead
+        var target = elementFromPoint(clientX, clientY);
+        if (isDependencyDragClue(target)) {
+            this.fromTaskClue = target;
+            this.assignDragStartClasses(this.fromTaskClue);
+            // use the center of the target clue as polyline starting point
+            var dragClueCenterCoords = getElementClientCenterCoords(this.fromTaskClue);
+            // the polyline uses `position: aboslute`, so translate the client coordinates to offset coordinates (`left` and `top` relative to the timeline container)
+            this.polylineStartCoords = clientToOffsetCoords(dragClueCenterCoords.left, dragClueCenterCoords.top, this.container);
+        }
+    };
+    DependencyDragCreateDirective.prototype.handleDrag = function (_a) {
+        var clientX = _a.clientX, clientY = _a.clientY;
+        if (isPresent(this.fromTaskClue)) {
+            // the polyline uses `position: aboslute`, so translate the client coordinates to offset coordinates (`left` and `top` relative to the timeline container)
+            var pointerOffsetCoords = clientToOffsetCoords(clientX, clientY, this.container);
+            // the start coords are calculated just once per drag session in handlePress
+            // use the current drag coords as polyline end coords
+            this.updatePolyline(this.polylineStartCoords, pointerOffsetCoords);
+            this.currentPointerClientCoords = { left: clientX, top: clientY };
+            if (this.gantt.dragScrollSettings.enabled) {
+                // use client coordinates for scroll trigger
+                this.scrollPointIntoView(this.currentPointerClientCoords);
+            }
+            if (this.displayValidationTooltip) {
+                this.updateDragPopup(pointerOffsetCoords);
+            }
+        }
+    };
+    DependencyDragCreateDirective.prototype.handleRelease = function (_a) {
+        var _this = this;
+        var clientX = _a.clientX, clientY = _a.clientY;
+        if (!isPresent(this.fromTaskClue)) {
+            return;
+        }
+        // using `originalEvent.target` is not reliable under mobile devices with the current implementation of the draggable, so use this instead
+        var target = elementFromPoint(clientX, clientY);
+        if (isDependencyDragClue(target) && !sameTaskClues(this.fromTaskClue, target, this.container)) {
+            this.zone.run(function () {
+                var _a;
+                var fromTaskClue = _this.fromTaskClue;
+                var toTaskClue = target;
+                var fromTask = _this.gantt.renderedTreeListItems[getClosestTaskIndex(fromTaskClue, _this.container)];
+                var toTask = _this.gantt.renderedTreeListItems[getClosestTaskIndex(toTaskClue, _this.container)];
+                var dependencyType = getDependencyTypeFromTargetTasks(fromTaskClue, toTaskClue);
+                var _b = _this.mapper.dependencyFields, fromId = _b.fromId, toId = _b.toId, type = _b.type;
+                _this.gantt.dependencyAdd.emit({
+                    fromTask: fromTask,
+                    toTask: toTask,
+                    type: dependencyType,
+                    isValid: _this.gantt.validateNewDependency((_a = {},
+                        _a[fromId] = _this.mapper.extractFromTask(fromTask, 'id'),
+                        _a[toId] = _this.mapper.extractFromTask(toTask, 'id'),
+                        _a[type] = dependencyType,
+                        _a))
+                });
+            });
+        }
+        this.clearPolyline();
+        this.removeDragStartClasses(this.fromTaskClue);
+        this.fromTaskClue = null;
+        this.cancelScroll();
+        this.closeDragPopup();
+    };
+    DependencyDragCreateDirective.prototype.updatePolyline = function (start, end) {
+        var points = start.left + "," + start.top + " " + end.left + "," + end.top;
+        this.renderer.setAttribute(this.polyline, 'points', points);
+    };
+    DependencyDragCreateDirective.prototype.clearPolyline = function () {
+        this.renderer.removeAttribute(this.polyline, 'points');
+    };
+    DependencyDragCreateDirective.prototype.assignDragStartClasses = function (dragClue) {
+        if (!isPresent(dragClue)) {
+            return;
+        }
+        this.renderer.addClass(this.container, USER_SELECT_NONE_CLASS);
+        this.renderer.addClass(dragClue, DRAG_CLUE_HOVER_CLASS);
+        var taskWrapper = getClosestTaskWrapper(dragClue, this.container);
+        if (isPresent(taskWrapper)) {
+            this.renderer.addClass(taskWrapper, TASK_WRAPPER_DRAG_CLASS);
+        }
+    };
+    DependencyDragCreateDirective.prototype.removeDragStartClasses = function (dragClue) {
+        if (!isPresent(dragClue)) {
+            return;
+        }
+        this.renderer.removeClass(this.container, USER_SELECT_NONE_CLASS);
+        this.renderer.removeClass(dragClue, DRAG_CLUE_HOVER_CLASS);
+        var taskWrapper = getClosestTaskWrapper(dragClue, this.container);
+        if (isPresent(taskWrapper)) {
+            this.renderer.removeClass(taskWrapper, TASK_WRAPPER_DRAG_CLASS);
+        }
+    };
+    DependencyDragCreateDirective.prototype.scrollPointIntoView = function (_a) {
+        var left = _a.left, top = _a.top;
+        this.timelineScrollService.requestScrollCancel();
+        this.timelineScrollService.requestHorizontalScroll(left);
+        this.timelineScrollService.requestVerticalScroll(top);
+    };
+    DependencyDragCreateDirective.prototype.cancelScroll = function () {
+        this.timelineScrollService.requestScrollCancel();
+    };
+    DependencyDragCreateDirective.prototype.addScrollListener = function () {
+        var _this = this;
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        this.zone.runOutsideAngular(function () {
+            return _this.scrollListenerDisposer = _this.renderer.listen(_this.container, 'scroll', function () {
+                // update the polyline only if we're currently dragging
+                if (isPresent(_this.fromTaskClue) && isPresent(_this.currentPointerClientCoords)) {
+                    var _a = _this.currentPointerClientCoords, left = _a.left, top_1 = _a.top;
+                    var pointerOffsetCoords = clientToOffsetCoords(left, top_1, _this.container);
+                    _this.updatePolyline(_this.polylineStartCoords, pointerOffsetCoords);
+                    if (_this.displayValidationTooltip) {
+                        _this.updateDragPopup(pointerOffsetCoords);
+                    }
+                }
+            });
+        });
+    };
+    DependencyDragCreateDirective.prototype.removeScrollListener = function () {
+        if (isPresent(this.scrollListenerDisposer)) {
+            this.scrollListenerDisposer();
+            this.scrollListenerDisposer = null;
+        }
+    };
+    DependencyDragCreateDirective.prototype.openDragPopup = function () {
+        if (isPresent(this.dragPopup)) {
+            this.closeDragPopup();
+        }
+        this.dragPopup = this.popupService.open({
+            animate: false,
+            content: DragValidationTooltipComponent,
+            appendTo: this.popupContainer,
+            positionMode: 'absolute',
+            popupClass: 'k-popup-transparent'
+        });
+    };
+    DependencyDragCreateDirective.prototype.updateDragPopup = function (pointerOffsetPosition) {
+        if (!isPresent(this.dragPopup)) {
+            this.openDragPopup();
+        }
+        var tooltip = this.dragPopup.content.instance;
+        var _a = this.getTooltipContext(), fromTaskName = _a.fromTaskName, toTaskName = _a.toTaskName, isValid = _a.isValid, showValidityStatus = _a.showValidityStatus;
+        if (tooltip.fromTaskName !== fromTaskName ||
+            tooltip.toTaskName !== toTaskName ||
+            tooltip.isValid !== isValid ||
+            tooltip.showValidityStatus !== showValidityStatus) {
+            tooltip.fromTaskName = fromTaskName;
+            tooltip.toTaskName = toTaskName;
+            tooltip.isValid = isValid;
+            tooltip.showValidityStatus = showValidityStatus;
+            this.dragPopup.content.changeDetectorRef.detectChanges();
+        }
+        this.dragPopup.popup.instance.offset = this.normalizePopupPosition(pointerOffsetPosition);
+        this.dragPopup.popup.changeDetectorRef.detectChanges();
+    };
+    DependencyDragCreateDirective.prototype.closeDragPopup = function () {
+        if (isPresent(this.dragPopup)) {
+            this.dragPopup.close();
+            this.dragPopup = null;
+        }
+    };
+    DependencyDragCreateDirective.prototype.extractTaskName = function (target) {
+        if (!isTaskWrapper(target, this.container)) {
+            return null;
+        }
+        var taskIndex = getClosestTaskIndex(target, this.container);
+        var task = this.gantt.renderedTreeListItems[taskIndex];
+        var taskName = this.mapper.extractFromTask(task, 'title');
+        return taskName;
+    };
+    DependencyDragCreateDirective.prototype.getTooltipContext = function () {
+        var _a;
+        var fromTaskName = this.extractTaskName(this.fromTaskClue);
+        var currentPointerTarget = elementFromPoint(this.currentPointerClientCoords.left, this.currentPointerClientCoords.top);
+        var toTaskName = isTaskWrapper(currentPointerTarget, this.container) && !sameTaskClues(this.fromTaskClue, currentPointerTarget, this.container) ?
+            this.extractTaskName(currentPointerTarget) :
+            '';
+        var showValidityStatus = isDependencyDragClue(currentPointerTarget) && !sameTaskClues(this.fromTaskClue, currentPointerTarget, this.container);
+        var _b = this.mapper.dependencyFields, fromId = _b.fromId, toId = _b.toId, type = _b.type;
+        return {
+            fromTaskName: fromTaskName,
+            toTaskName: toTaskName,
+            showValidityStatus: showValidityStatus,
+            isValid: showValidityStatus && this.gantt.validateNewDependency((_a = {},
+                _a[fromId] = this.mapper.extractFromTask(this.gantt.renderedTreeListItems[getClosestTaskIndex(this.fromTaskClue, this.container)], 'id'),
+                _a[toId] = this.mapper.extractFromTask(this.gantt.renderedTreeListItems[getClosestTaskIndex(currentPointerTarget, this.container)], 'id'),
+                _a[type] = getDependencyTypeFromTargetTasks(this.fromTaskClue, currentPointerTarget),
+                _a))
+        };
+    };
+    /**
+     * Restricts the popup position to not go below the scroll height or width of the container.
+     * Flips the position of the popup when there's not enough vertical space in the visible part of the container to render the popup.
+     */
+    DependencyDragCreateDirective.prototype.normalizePopupPosition = function (pointerOffsetPosition) {
+        var top = pointerOffsetPosition.top + DEFAULT_POPUP_VERTICAL_MARGIN;
+        var containerClientBottom = this.container.clientHeight + this.container.scrollTop;
+        var popupHeight = this.dragPopup.popupElement.querySelector('.k-tooltip').clientHeight;
+        var enoughSpaceToRender = top < containerClientBottom - popupHeight;
+        // flip the popup above the pointer if there's not enough space in the bottom of the container
+        if (!enoughSpaceToRender) {
+            // margin * 2 to account for the already applied margin
+            top -= popupHeight + (DEFAULT_POPUP_VERTICAL_MARGIN * 2);
+        }
+        // center the popup horizontally according to the pointer position
+        var popupWidth = this.dragPopup.popupElement.querySelector('.k-tooltip').clientWidth;
+        var left = pointerOffsetPosition.left - popupWidth / 2;
+        // don't allow the popup to be cut out of the viewport
+        var minLeftTop = 0;
+        // restrict the popup from being positioned beyond or before the available scrollable space
+        return {
+            left: fitToRange(left, minLeftTop, this.container.scrollWidth - popupWidth),
+            top: fitToRange(top, minLeftTop, this.container.scrollHeight - popupHeight)
+        };
+    };
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], DependencyDragCreateDirective.prototype, "displayValidationTooltip", void 0);
+    DependencyDragCreateDirective = tslib_1.__decorate([
+        Directive({
+            selector: '[kendoGanttDependencyDragCreate]'
+        }),
+        tslib_1.__metadata("design:paramtypes", [GanttComponent,
+            NgZone,
+            Renderer2,
+            MappingService,
+            PopupService,
+            TimelineScrollService])
+    ], DependencyDragCreateDirective);
+    return DependencyDragCreateDirective;
+}());
+export { DependencyDragCreateDirective };

package/dist/es/dragging/drag-validation-tooltip.component.js

@@ -0,0 +1,27 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { Component } from '@angular/core';
+/**
+ * @hidden
+ */
+var DragValidationTooltipComponent = /** @class */ (function () {
+    function DragValidationTooltipComponent() {
+        /**
+         * Sets the status class of the attempted operation.
+         * Note that the status will be ignored and the `neutral` status class will be rendered,
+         * if the any of the fromTaskName or toTaskName are not populated.
+         */
+        this.isValid = false;
+    }
+    DragValidationTooltipComponent = tslib_1.__decorate([
+        Component({
+            template: "\n        <div\n            class=\"k-tooltip k-gantt-tooltip-validation\"\n            [class.k-gantt-tooltip-valid]=\"showValidityStatus && isValid\"\n            [class.k-gantt-tooltip-invalid]=\"showValidityStatus && !isValid\"\n        >\n            <div class=\"k-gantt-tooltip-validation-row\">\n                <span class=\"k-gantt-tooltip-validation-label\">From:</span>\n                <span class=\"k-gantt-tooltip-validation-value\">{{ fromTaskName }}</span>\n            </div>\n            <div class=\"k-gantt-tooltip-validation-row\">\n                <span class=\"k-gantt-tooltip-validation-label\">To:</span>\n                <span class=\"k-gantt-tooltip-validation-value\">{{ toTaskName }}</span>\n            </div>\n        </div>\n    ",
+            styles: ["\n        .k-gantt-tooltip-validation {\n            max-width: 200px;\n            display: block;\n        }\n        .k-gantt-tooltip-validation::before {\n            content: '';\n            position: absolute;\n            left: 0;\n            top: 0;\n            width: 4px;\n            height: 100%;\n            background: #656565;\n        }\n        .k-gantt-tooltip-validation.k-gantt-tooltip-valid::before {\n            background: #37B400;\n        }\n        .k-gantt-tooltip-validation.k-gantt-tooltip-invalid::before {\n            background: #F31700;\n        }\n        .k-gantt-tooltip-validation-row {\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n        .k-gantt-tooltip-validation-label {\n            display: inline-flex;\n            width: 50px;\n        }\n        .k-gantt-tooltip-validation-value {\n            font-weight: bold;\n        }\n    "]
+        })
+    ], DragValidationTooltipComponent);
+    return DragValidationTooltipComponent;
+}());
+export { DragValidationTooltipComponent };

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

@@ -120,7 +120,7 @@ var DependenciesTableComponent = /** @class */ (function () {
     DependenciesTableComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-gantt-dependencies-table',
-            template: "\n        <kendo-grid\n            [data]=\"dependencies\"\n            [selectable]=\"{ mode: 'single' }\"\n            [(selectedKeys)]=\"selectedKeys\"\n            kendoGridSelectBy\n            [height]=\"295\"\n        >\n            <ng-template kendoGridToolbarTemplate>\n                <button kendoButton (click)=\"addHandler()\">\n                    {{ getText('taskEditingDependenciesAddButtonText') }}\n                </button>\n                <button kendoButton (click)=\"removeHandler()\" [disabled]=\"selectedKeys.length === 0\">\n                    {{ getText('taskEditingDependenciesRemoveButtonText') }}\n                </button>\n            </ng-template>\n            <kendo-grid-column [title]=\"getText('taskEditingDependenciesGridNameColumnTitle')\" [field]=\"dependencyIdField\">\n                <ng-template kendoGridCellTemplate let-dataItem=\"dataItem\" let-column=\"column\" let-rowIndex=\"rowIndex\">\n                    <kendo-dropdownlist\n                        [data]=\"tasks\"\n                        textField=\"title\"\n                        valueField=\"id\"\n                        [valuePrimitive]=\"true\"\n                        [formControl]=\"getFormControl(rowIndex, column.field)\"\n                    >\n                    </kendo-dropdownlist>\n                </ng-template>\n            </kendo-grid-column>\n            <kendo-grid-column [title]=\"getText('taskEditingDependenciesGridTypeColumnTitle')\" field=\"type\">\n                <ng-template kendoGridCellTemplate let-dataItem=\"dataItem\" let-column=\"column\" let-rowIndex=\"rowIndex\">\n                    <kendo-dropdownlist\n                        [data]=\"dependencyTypes\"\n                        textField=\"type\"\n                        valueField=\"id\"\n                        [valuePrimitive]=\"true\"\n                        [formControl]=\"getFormControl(rowIndex, column.field)\"\n                    >\n                    </kendo-dropdownlist>\n                </ng-template>\n            </kendo-grid-column>\n        </kendo-grid>\n    "
+            template: "\n        <kendo-grid\n            [data]=\"dependencies\"\n            [selectable]=\"{ mode: 'single' }\"\n            [(selectedKeys)]=\"selectedKeys\"\n            kendoGridSelectBy\n            [height]=\"275\"\n        >\n            <ng-template kendoGridToolbarTemplate>\n                <button kendoButton (click)=\"addHandler()\">\n                    {{ getText('taskEditingDependenciesAddButtonText') }}\n                </button>\n                <button kendoButton (click)=\"removeHandler()\" [disabled]=\"selectedKeys.length === 0\">\n                    {{ getText('taskEditingDependenciesRemoveButtonText') }}\n                </button>\n            </ng-template>\n            <kendo-grid-column [title]=\"getText('taskEditingDependenciesGridNameColumnTitle')\" [field]=\"dependencyIdField\">\n                <ng-template kendoGridCellTemplate let-dataItem=\"dataItem\" let-column=\"column\" let-rowIndex=\"rowIndex\">\n                    <kendo-dropdownlist\n                        [data]=\"tasks\"\n                        textField=\"title\"\n                        valueField=\"id\"\n                        [valuePrimitive]=\"true\"\n                        [formControl]=\"getFormControl(rowIndex, column.field)\"\n                    >\n                    </kendo-dropdownlist>\n                </ng-template>\n            </kendo-grid-column>\n            <kendo-grid-column [title]=\"getText('taskEditingDependenciesGridTypeColumnTitle')\" field=\"type\">\n                <ng-template kendoGridCellTemplate let-dataItem=\"dataItem\" let-column=\"column\" let-rowIndex=\"rowIndex\">\n                    <kendo-dropdownlist\n                        [data]=\"dependencyTypes\"\n                        textField=\"type\"\n                        valueField=\"id\"\n                        [valuePrimitive]=\"true\"\n                        [formControl]=\"getFormControl(rowIndex, column.field)\"\n                    >\n                    </kendo-dropdownlist>\n                </ng-template>\n            </kendo-grid-column>\n        </kendo-grid>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [MappingService,
             EditService,

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

@@ -53,8 +53,8 @@ var EditDialogComponent = /** @class */ (function () {
     EditDialogComponent.prototype.handleEditingResult = function (editResultType) {
         this.editService.triggerEditEvent(editResultType);
     };
-    EditDialogComponent.prototype.onTaskDelete = function () {
-        this.editService.showConfirmationDialog.next();
+    EditDialogComponent.prototype.handleTaskDelete = function () {
+        this.editService.taskDelete.next(this.editService.dataItem);
     };
     tslib_1.__decorate([
         Input(),
@@ -63,7 +63,7 @@ var EditDialogComponent = /** @class */ (function () {
     EditDialogComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-gantt-edit-dialog',
-            template: "\n        <kendo-dialog\n            [title]=\"getText('taskEditingDialogTitle')\"\n            [width]=\"575\"\n            [height]=\"470\"\n            (close)=\"handleEditingResult('cancel')\">\n            <kendo-dialog-messages\n                [closeTitle]=\"getText('taskEditingDialogCloseTitle')\"></kendo-dialog-messages>\n\n            <kendo-tabstrip [keepTabContent]=\"true\">\n                <kendo-tabstrip-tab [title]=\"getText('taskEditingGeneralTabTitle')\" [selected]=\"true\">\n                    <ng-template kendoTabContent>\n                    <kendo-gantt-task-fields></kendo-gantt-task-fields>\n                    </ng-template>\n                </kendo-tabstrip-tab>\n                <kendo-tabstrip-tab [title]=\"getText('taskEditingPredecessorsTabTitle')\">\n                    <ng-template kendoTabContent>\n                        <kendo-gantt-dependencies-table\n                            [tasks]=\"loadedTasks\"\n                            [(dependencies)]=\"predecessors\"\n                            dependencyType=\"predecessor\"\n                        >\n                        </kendo-gantt-dependencies-table>\n                    </ng-template>\n                </kendo-tabstrip-tab>\n                <kendo-tabstrip-tab [title]=\"getText('taskEditingSuccessorsTabTitle')\">\n                    <ng-template kendoTabContent>\n                        <kendo-gantt-dependencies-table\n                            [tasks]=\"loadedTasks\"\n                            [(dependencies)]=\"successors\"\n                            dependencyType=\"successor\">\n                        </kendo-gantt-dependencies-table>\n                    </ng-template>\n                </kendo-tabstrip-tab>\n            </kendo-tabstrip>\n\n            <kendo-dialog-actions layout=\"normal\">\n                <button kendoButton (click)=\"onTaskDelete()\">{{ getText('deleteButtonText') }}</button>\n                <kendo-treelist-spacer></kendo-treelist-spacer>\n                <button kendoButton [primary]=\"true\" (click)=\"handleEditingResult('save')\">{{ getText('saveButtonText') }}</button>\n                <button kendoButton (click)=\"handleEditingResult('cancel')\">{{ getText('cancelButtonText') }}</button>\n            </kendo-dialog-actions>\n        </kendo-dialog>\n    "
+            template: "\n        <kendo-dialog\n            [title]=\"getText('taskEditingDialogTitle')\"\n            [width]=\"575\"\n            [height]=\"470\"\n            (close)=\"handleEditingResult('cancel')\">\n            <kendo-dialog-messages\n                [closeTitle]=\"getText('taskEditingDialogCloseTitle')\"></kendo-dialog-messages>\n\n            <kendo-tabstrip [keepTabContent]=\"true\" style=\"height: 345px;\">\n                <kendo-tabstrip-tab [title]=\"getText('taskEditingGeneralTabTitle')\" [selected]=\"true\">\n                    <ng-template kendoTabContent>\n                    <kendo-gantt-task-fields></kendo-gantt-task-fields>\n                    </ng-template>\n                </kendo-tabstrip-tab>\n                <kendo-tabstrip-tab [title]=\"getText('taskEditingPredecessorsTabTitle')\">\n                    <ng-template kendoTabContent>\n                        <kendo-gantt-dependencies-table\n                            [tasks]=\"loadedTasks\"\n                            [(dependencies)]=\"predecessors\"\n                            dependencyType=\"predecessor\"\n                        >\n                        </kendo-gantt-dependencies-table>\n                    </ng-template>\n                </kendo-tabstrip-tab>\n                <kendo-tabstrip-tab [title]=\"getText('taskEditingSuccessorsTabTitle')\">\n                    <ng-template kendoTabContent>\n                        <kendo-gantt-dependencies-table\n                            [tasks]=\"loadedTasks\"\n                            [(dependencies)]=\"successors\"\n                            dependencyType=\"successor\">\n                        </kendo-gantt-dependencies-table>\n                    </ng-template>\n                </kendo-tabstrip-tab>\n            </kendo-tabstrip>\n\n            <kendo-dialog-actions layout=\"normal\">\n                <button\n                    kendoButton\n                    [kendoEventsOutsideAngular]=\"{\n                        click: handleTaskDelete\n                    }\"\n                    [scope]=\"this\"\n                >\n                    {{ getText('deleteButtonText') }}\n                </button>\n                <kendo-treelist-spacer></kendo-treelist-spacer>\n                <button kendoButton [primary]=\"true\" (click)=\"handleEditingResult('save')\">{{ getText('saveButtonText') }}</button>\n                <button kendoButton (click)=\"handleEditingResult('cancel')\">{{ getText('cancelButtonText') }}</button>\n            </kendo-dialog-actions>\n        </kendo-dialog>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [MappingService,
             EditService,

package/dist/es/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
@@ -16,9 +16,11 @@ var EditService = /** @class */ (function () {
         var _this = this;
         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 = function (item, data) {

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

@@ -32,7 +32,7 @@ var TaskFieldsComponent = /** @class */ (function () {
     TaskFieldsComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-gantt-task-fields',
-            template: "\n        <form class=\"k-form\" [formGroup]=\"formGroup\">\n            <kendo-formfield *ngIf=\"formGroup.contains(mapper.taskFields.title)\">\n                <kendo-label [for]=\"mapper.taskFields.title\" [text]=\"getText('titleFieldInputLabel')\"></kendo-label>\n                <input class=\"k-textbox\" [formControlName]=\"mapper.taskFields.title\" />\n            </kendo-formfield>\n            <div class=\"k-hstack\">\n                <kendo-formfield [style.width.%]=\"49\" *ngIf=\"formGroup.contains(mapper.taskFields.start)\">\n                    <kendo-label [for]=\"mapper.taskFields.start\" [text]=\"getText('startFieldInputLabel')\"></kendo-label>\n                    <kendo-datetimepicker [formControlName]=\"mapper.taskFields.start\"></kendo-datetimepicker>\n                </kendo-formfield>\n                <kendo-treelist-spacer></kendo-treelist-spacer>\n                <kendo-formfield [style.width.%]=\"49\" *ngIf=\"formGroup.contains(mapper.taskFields.end)\">\n                    <kendo-label [for]=\"mapper.taskFields.end\" [text]=\"getText('endFieldInputLabel')\"></kendo-label>\n                    <kendo-datetimepicker [formControlName]=\"mapper.taskFields.end\"></kendo-datetimepicker>\n                </kendo-formfield>\n            </div>\n            <kendo-formfield [style.width.%]=\"49\" *ngIf=\"formGroup.contains(mapper.taskFields.completionRatio)\">\n                <kendo-label [for]=\"mapper.taskFields.completionRatio\" [text]=\"getText('completionRatioFieldInputLabel')\"></kendo-label>\n                <kendo-numerictextbox\n                    [formControlName]=\"mapper.taskFields.completionRatio\"\n                    [min]=\"0\"\n                    [max]=\"1\"\n                    [decimals]=\"2\"\n                    format=\"p2\"\n                    [step]=\"0.01\"\n                ></kendo-numerictextbox>\n            </kendo-formfield>\n        </form>\n    "
+            template: "\n        <form class=\"k-form\" [formGroup]=\"formGroup\">\n            <kendo-formfield *ngIf=\"formGroup.contains(mapper.taskFields.title)\">\n                <kendo-label [for]=\"mapper.taskFields.title\" [text]=\"getText('titleFieldInputLabel')\"></kendo-label>\n                <input kendoTextBox [formControlName]=\"mapper.taskFields.title\" />\n            </kendo-formfield>\n            <div class=\"k-hstack\">\n                <kendo-formfield [style.width.%]=\"49\" *ngIf=\"formGroup.contains(mapper.taskFields.start)\">\n                    <kendo-label [for]=\"mapper.taskFields.start\" [text]=\"getText('startFieldInputLabel')\"></kendo-label>\n                    <kendo-datetimepicker [formControlName]=\"mapper.taskFields.start\"></kendo-datetimepicker>\n                </kendo-formfield>\n                <kendo-treelist-spacer></kendo-treelist-spacer>\n                <kendo-formfield [style.width.%]=\"49\" *ngIf=\"formGroup.contains(mapper.taskFields.end)\">\n                    <kendo-label [for]=\"mapper.taskFields.end\" [text]=\"getText('endFieldInputLabel')\"></kendo-label>\n                    <kendo-datetimepicker [formControlName]=\"mapper.taskFields.end\"></kendo-datetimepicker>\n                </kendo-formfield>\n            </div>\n            <kendo-formfield [style.width.%]=\"49\" *ngIf=\"formGroup.contains(mapper.taskFields.completionRatio)\">\n                <kendo-label [for]=\"mapper.taskFields.completionRatio\" [text]=\"getText('completionRatioFieldInputLabel')\"></kendo-label>\n                <kendo-numerictextbox\n                    [formControlName]=\"mapper.taskFields.completionRatio\"\n                    [min]=\"0\"\n                    [max]=\"1\"\n                    [decimals]=\"2\"\n                    format=\"p2\"\n                    [step]=\"0.01\"\n                ></kendo-numerictextbox>\n            </kendo-formfield>\n        </form>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [MappingService,
             EditService,