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

package/dist/fesm5/index.js

@@ -3,25 +3,26 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __extends, __decorate, __metadata, __param, __assign } from 'tslib';
-import { Input, Injectable, EventEmitter, Directive, Optional, TemplateRef, QueryList, ContentChildren, ContentChild, Component, forwardRef, SkipSelf, Host, Injector, NgZone, isDevMode, ViewChild, HostBinding, Output, Renderer2, ElementRef, ChangeDetectorRef, NgModule } from '@angular/core';
+import { Input, Injectable, EventEmitter, Directive, Optional, TemplateRef, QueryList, ContentChildren, ContentChild, Component, forwardRef, SkipSelf, Host, Injector, NgZone, ViewChild, ElementRef, ViewContainerRef, HostBinding, Output, Renderer2, isDevMode, InjectionToken, Inject, ChangeDetectorRef, NgModule } from '@angular/core';
 import { ColumnBase, ColumnComponent, ColumnGroupComponent, SpanColumnComponent, TreeListComponent, DataBoundTreeComponent, ExpandableTreeComponent, FlatBindingDirective, HierarchyBindingDirective, ExpandableDirective, TreeListModule } from '@progress/kendo-angular-treelist';
 import { cloneDate, addWeeks, firstDayInWeek, addDays, getDate, lastDayOfMonth, firstDayOfMonth, addMonths, isEqual, MS_PER_HOUR, MS_PER_DAY } from '@progress/kendo-date-math';
 import { of, fromEvent, Subject, Subscription, forkJoin, EMPTY, isObservable } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
-import { isDocumentAvailable, closestInScope, matchesClasses, anyChanged, hasObservers, EventsModule } from '@progress/kendo-angular-common';
+import { closestInScope, matchesClasses, isDocumentAvailable, anyChanged, hasObservers, EventsModule, DraggableModule } from '@progress/kendo-angular-common';
+import { LocalizationService, ComponentMessages, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { orderBy } from '@progress/kendo-data-query';
-import { getter } from '@progress/kendo-common';
+import { getter, touchEnabled } from '@progress/kendo-common';
 import { map, distinctUntilChanged, take, expand, reduce, filter, switchMap } from 'rxjs/operators';
-import { LocalizationService, ComponentMessages, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { CommonModule } from '@angular/common';
+import { FormGroup, FormControl, Validators, FormArray, ReactiveFormsModule } from '@angular/forms';
 import { SplitterModule, TabStripModule } from '@progress/kendo-angular-layout';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import { DialogModule } from '@progress/kendo-angular-dialog';
-import { FormGroup, FormControl, Validators, FormArray, ReactiveFormsModule } from '@angular/forms';
 import { LabelModule } from '@progress/kendo-angular-label';
 import { InputsModule } from '@progress/kendo-angular-inputs';
 import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
+import { PopupService, PopupModule } from '@progress/kendo-angular-popup';
 import { GridModule } from '@progress/kendo-angular-grid';
 import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
 
@@ -32,7 +33,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-gantt',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1641921322,
+    publishDate: 1642086647,
     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'
 };
@@ -654,6 +655,64 @@ var taskClassCallback = function () { return null; };
  */
 var isSelected = function () { return false; };
 
+/**
+ * The dependency type when two tasks are connected.
+ *
+ * The supported values are:
+ * * `FF`—from 'finish' to 'finish'
+ * * `FS`—from 'finish' to 'start'
+ * * `SS`—from 'start' to 'start'
+ * * `SF`—from 'start' to 'finish'
+ */
+var DependencyType;
+(function (DependencyType) {
+    DependencyType[DependencyType["FF"] = 0] = "FF";
+    DependencyType[DependencyType["FS"] = 1] = "FS";
+    DependencyType[DependencyType["SF"] = 2] = "SF";
+    DependencyType[DependencyType["SS"] = 3] = "SS"; // task B can't start before task A starts
+})(DependencyType || (DependencyType = {}));
+
+/**
+ * @hidden
+ */
+var PreventableEvent = /** @class */ (function () {
+    function PreventableEvent() {
+        this.prevented = false;
+    }
+    /**
+     * Prevents the default action for a specified event.
+     * In this way, the source component suppresses
+     * the built-in behavior that follows the event.
+     */
+    PreventableEvent.prototype.preventDefault = function () {
+        this.prevented = true;
+    };
+    /**
+     * Returns `true` if the event was prevented
+     * by any of its subscribers.
+     *
+     * @returns `true` if the default action was prevented.
+     * Otherwise, returns `false`.
+     */
+    PreventableEvent.prototype.isDefaultPrevented = function () {
+        return this.prevented;
+    };
+    return PreventableEvent;
+}());
+
+/**
+ * Called every time a user leaves an edited cell.
+ */
+var CellCloseEvent = /** @class */ (function (_super) {
+    __extends(CellCloseEvent, _super);
+    function CellCloseEvent(options) {
+        var _this = _super.call(this) || this;
+        Object.assign(_this, options);
+        return _this;
+    }
+    return CellCloseEvent;
+}(PreventableEvent));
+
 /**
  * @hidden
  */
@@ -756,15 +815,34 @@ var isNumber = function (contender) { return typeof contender === 'number' && !i
  * @hidden
  */
 var isString = function (contender) { return typeof contender === 'string'; };
+/**
+ * @hidden
+ *
+ * Gets the closest timeline task wrapper element from an event target.
+ * Restricts the search up to the provided parent element from the second param.
+ */
+var getClosestTaskWrapper = function (element, parentScope) {
+    return closestInScope(element, matchesClasses('k-task-wrap'), parentScope);
+};
+/**
+ * @hidden
+ *
+ * Checks whether the queried item or its parent items has a `k-task-wrap` selector.
+ * Restricts the search up to the provided parent element from the second param.
+ */
+var isTaskWrapper = function (contender, parentScope) {
+    var taskWrapper = closestInScope(contender, matchesClasses('k-task-wrap'), parentScope);
+    return isPresent(taskWrapper);
+};
 /**
  * @hidden
  *
  * Gets the closest timeline task element index from an event target.
  * Uses the `data-task-index` attribute assigned to each task.
- * Restricts the search up to the provided gantt element from the second param.
+ * Restricts the search up to the provided parent element from the second param.
  */
-var getClosestTaskIndex = function (element, gantt) {
-    var task = closestInScope(element, matchesClasses('k-task'), gantt);
+var getClosestTaskIndex = function (element, parentScope) {
+    var task = closestInScope(element, matchesClasses('k-task-wrap'), parentScope);
     if (!isPresent(task)) {
         return null;
     }
@@ -774,22 +852,133 @@ var getClosestTaskIndex = function (element, gantt) {
  * @hidden
  *
  * Checks whether the queried item or its parent items has a `k-task` selector.
- * Restricts the search up to the provided gantt element from the second param.
+ * Restricts the search up to the provided parent element from the second param.
  */
-var isTask = function (contender, gantt) {
-    var task = closestInScope(contender, matchesClasses('k-task'), gantt);
+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-task-actions` selector - used for the clear button.
- * Restricts the search up to the provided gantt element from the second param.
+ * Restricts the search up to the provided parent element from the second param.
  */
-var isClearButton = function (contender, gantt) {
-    var clearButtonContainer = closestInScope(contender, matchesClasses('k-task-actions'), gantt);
+var isClearButton = function (contender, parentScope) {
+    var clearButtonContainer = closestInScope(contender, matchesClasses('k-task-actions'), parentScope);
     return isPresent(clearButtonContainer);
 };
+/**
+ * @hidden
+ *
+ * Checks whether the queried item has a `k-task-dot` selector - used for the dependency drag clues.
+ */
+var isDependencyDragClue = function (element) {
+    if (!isPresent(element)) {
+        return false;
+    }
+    return element.classList.contains('k-task-dot');
+};
+/**
+ * @hidden
+ *
+ * Checks whether the queried item has a `k-task-dot` & `k-task-start` selector - used for the dependency drag start clues.
+ */
+var isDependencyDragStartClue = function (element) {
+    if (!isPresent(element)) {
+        return false;
+    }
+    return element.classList.contains('k-task-dot') && element.classList.contains('k-task-start');
+};
+/**
+ * @hidden
+ *
+ * Gets the `DependencyType` for an attempted dependency create from the provided two elements.
+ * The two linked drag clue HTML elements are used to extract this data (via their CSS classes).
+ */
+var getDependencyTypeFromTargetTasks = function (fromTaskClue, toTaskClue) {
+    if (!isDependencyDragClue(fromTaskClue) || !isDependencyDragClue(toTaskClue)) {
+        return null;
+    }
+    var fromTaskType = isDependencyDragStartClue(fromTaskClue) ? 'S' : 'F';
+    var toTaskType = isDependencyDragStartClue(toTaskClue) ? 'S' : 'F';
+    var dependencyTypeName = "" + fromTaskType + toTaskType;
+    switch (dependencyTypeName) {
+        case 'FF': return DependencyType.FF;
+        case 'FS': return DependencyType.FS;
+        case 'SF': return DependencyType.SF;
+        case 'SS': return DependencyType.SS;
+        default: return null;
+    }
+};
+/**
+ * @hidden
+ *
+ * Checks whether the two provided drag clues belong to the same task element.
+ */
+var sameTaskClues = function (fromTaskClue, toTaskClue, parentScope) {
+    if (!isPresent(fromTaskClue) || !isPresent(toTaskClue)) {
+        return false;
+    }
+    var fromTaskWrapper = getClosestTaskWrapper(fromTaskClue, parentScope);
+    var toTaskWrapper = getClosestTaskWrapper(toTaskClue, parentScope);
+    return fromTaskWrapper === toTaskWrapper;
+};
+/**
+ * @hidden
+ *
+ * Fits a contender number between a min and max range.
+ * If the contender is below the min value, the min value is returned.
+ * If the contender is above the max value, the max value is returned.
+ */
+var fitToRange = function (contender, min, max) {
+    if (contender > max) {
+        return max;
+    }
+    else if (contender < min) {
+        return min;
+    }
+    else {
+        return contender;
+    }
+};
+/**
+ * @hidden
+ *
+ * Checks whether either of the two provided tasks is a parent of the other.
+ */
+var areParentChild = function (taskA, taskB) {
+    var parentChildRelationship = false;
+    var taskAParent = taskA;
+    while (isPresent(taskAParent) && isPresent(taskAParent.data)) {
+        if (taskAParent.data === taskB.data) {
+            parentChildRelationship = true;
+            break;
+        }
+        taskAParent = taskAParent.parent;
+    }
+    var taskBParent = taskB;
+    while (!parentChildRelationship && isPresent(taskBParent) && isPresent(taskBParent.data)) {
+        if (taskBParent.data === taskA.data) {
+            parentChildRelationship = true;
+            break;
+        }
+        taskBParent = taskBParent.parent;
+    }
+    return parentChildRelationship;
+};
+/**
+ * @hidden
+ *
+ * Extracts an element from the provided client coords.
+ * Using the `event.target` is not reliable under mobile devices with the current implementation of the draggable, so use this instead.
+ */
+var elementFromPoint = function (clientX, clientY) {
+    if (!isDocumentAvailable()) {
+        return null;
+    }
+    return document.elementFromPoint(clientX, clientY);
+};
 
 /**
  * @hidden
@@ -1489,6 +1678,57 @@ var EditService = /** @class */ (function () {
     return EditService;
 }());
 
+/**
+ * @hidden
+ *
+ * Notifies the timeline-scroll.directive to scroll into view to requested coordinates.
+ * The scrolling is performed based on client (viewport) coordinates.
+ */
+var TimelineScrollService = /** @class */ (function () {
+    function TimelineScrollService() {
+        this.horizontalScroll = new Subject();
+        this.verticalScroll = new Subject();
+        this.scrollCancel = new Subject();
+    }
+    TimelineScrollService.prototype.ngOnDestroy = function () {
+        this.horizontalScroll.complete();
+        this.verticalScroll.complete();
+        this.scrollCancel.complete();
+    };
+    TimelineScrollService.prototype.requestHorizontalScroll = function (clientTop) {
+        this.horizontalScroll.next(clientTop);
+    };
+    TimelineScrollService.prototype.requestVerticalScroll = function (clientLeft) {
+        this.verticalScroll.next(clientLeft);
+    };
+    TimelineScrollService.prototype.requestScrollCancel = function () {
+        this.scrollCancel.next();
+    };
+    TimelineScrollService = __decorate([
+        Injectable()
+    ], TimelineScrollService);
+    return TimelineScrollService;
+}());
+
+/**
+ * @hidden
+ *
+ * Needed to keep the Gantt's LocalizationService reference and be able to use it component's inside the TabStrip
+ */
+var GanttLocalizationService = /** @class */ (function () {
+    function GanttLocalizationService(localizationService) {
+        this.localizationService = localizationService;
+    }
+    GanttLocalizationService.prototype.get = function (token) {
+        return this.localizationService.get(token);
+    };
+    GanttLocalizationService = __decorate([
+        Injectable(),
+        __metadata("design:paramtypes", [LocalizationService])
+    ], GanttLocalizationService);
+    return GanttLocalizationService;
+}());
+
 /**
  * @hidden
  */
@@ -1755,69 +1995,216 @@ var ToolbarTemplateDirective = /** @class */ (function () {
 }());
 
 /**
- * The base class for the column components of the Gantt.
+ * @hidden
  */
-var ViewBase = /** @class */ (function () {
-    /**
-     *
-     * @hidden
-     */
-    function ViewBase(optionChangesService, dependencyDomService) {
-        this.optionChangesService = optionChangesService;
+var GanttTimelineComponent = /** @class */ (function () {
+    function GanttTimelineComponent(scrollSyncService, dependencyDomService, renderer, zone) {
+        var _this = this;
+        this.scrollSyncService = scrollSyncService;
         this.dependencyDomService = dependencyDomService;
+        this.renderer = renderer;
+        this.zone = zone;
+        this.hostClass = true;
+        this.dependencies = [];
+        // as all drag-and-drop operations are on the timeline container, use a single draggable instance
+        this.timelineContainerPress = new EventEmitter();
+        this.timelineContainerDrag = new EventEmitter();
+        this.timelineContainerRelease = new EventEmitter();
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(
+        // task changes indicates change in row content, number, height, etc.
+        this.dependencyDomService.taskChanges
+            .pipe(filter(function (args) { return isPresent(args.timelineRow); }), switchMap(function (args) { return _this.zone.onStable.pipe(take(1), map(function () { return args; })); }) // ensure the content is rendered
+        )
+            .subscribe(function (_a) {
+            var timelineRow = _a.timelineRow;
+            var timelineRowHeight = isDocumentAvailable() ? timelineRow.getBoundingClientRect().height : 0;
+            _this.renderer.setStyle(_this.timelineColumns.nativeElement, 'height', (_this.rows || []).length * timelineRowHeight + "px");
+        }));
+    }
+    Object.defineProperty(GanttTimelineComponent.prototype, "draggableEnabled", {
         /**
-         * The width of the time slot headers. Values are treated as pixels.
-         *
-         * @default 100
+         * Specifies whether the draggable will attach or detach its pointer event listeners.
          */
-        this.slotWidth = 100;
-    }
-    ViewBase.prototype.ngOnChanges = function (changes) {
-        if (anyChanged(['slotWidth'], changes)) {
-            this.optionChangesService.notifyColumnChanges();
-            this.dependencyDomService.notifyChanges();
-        }
+        get: function () {
+            return this.renderDependencyDragClues;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    GanttTimelineComponent.prototype.ngAfterViewInit = function () {
+        var timelineHeader = this.timelineHeaderWrap.nativeElement;
+        var rightContainer = this.timelineContent.nativeElement;
+        this.scrollSyncService.registerElement(rightContainer, 'timeline');
+        this.scrollSyncService.registerElement(timelineHeader, 'header');
+        this.dependencyDomService.registerContentContainer(this.tasksContainer.nativeElement);
+    };
+    GanttTimelineComponent.prototype.ngOnDestroy = function () {
+        this.subscriptions.unsubscribe();
     };
+    GanttTimelineComponent.prototype.isNonWorking = function (item) {
+        return item.hasOwnProperty('isWorking') && !item.isWorking;
+    };
+    __decorate([
+        ViewChild('timelineContent', { static: true }),
+        __metadata("design:type", ElementRef)
+    ], GanttTimelineComponent.prototype, "timelineContent", void 0);
+    __decorate([
+        ViewChild('timelineColumns', { static: true }),
+        __metadata("design:type", ElementRef)
+    ], GanttTimelineComponent.prototype, "timelineColumns", void 0);
+    __decorate([
+        ViewChild('timelineHeaderWrap', { static: true }),
+        __metadata("design:type", ElementRef)
+    ], GanttTimelineComponent.prototype, "timelineHeaderWrap", void 0);
+    __decorate([
+        ViewChild('tasksContainer', { static: true }),
+        __metadata("design:type", ElementRef)
+    ], GanttTimelineComponent.prototype, "tasksContainer", void 0);
+    __decorate([
+        ViewChild('dragPopupContainer', { static: false, read: ViewContainerRef }),
+        __metadata("design:type", ViewContainerRef)
+    ], GanttTimelineComponent.prototype, "dragPopupContainer", void 0);
+    __decorate([
+        ViewChild('dependencyDragCreatePolyline', { static: false }),
+        __metadata("design:type", ElementRef)
+    ], GanttTimelineComponent.prototype, "dependencyDragCreatePolyline", void 0);
+    __decorate([
+        HostBinding('class.k-gantt-timeline'),
+        __metadata("design:type", Boolean)
+    ], GanttTimelineComponent.prototype, "hostClass", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Array)
+    ], GanttTimelineComponent.prototype, "rows", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Array)
+    ], GanttTimelineComponent.prototype, "slots", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Array)
+    ], GanttTimelineComponent.prototype, "groupSlots", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Number)
-    ], ViewBase.prototype, "slotWidth", void 0);
-    return ViewBase;
-}());
-
-/**
- * @hidden
- */
-var getEditItem = function (dataItem, data, mapper) {
-    var treeListDataItem = data.find(function (item) { return mapper.extractFromTask(item.data, 'id') === mapper.extractFromTask(dataItem, 'id'); });
-    return mapPath(treeListDataItem);
-};
-var mapPath = function (item) { return ({
-    dataItem: item.data,
-    parent: item.parent.data ? mapPath(item.parent) : null
-}); };
+    ], GanttTimelineComponent.prototype, "tableWidth", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], GanttTimelineComponent.prototype, "activeView", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", TemplateRef)
+    ], GanttTimelineComponent.prototype, "taskContentTemplate", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", TemplateRef)
+    ], GanttTimelineComponent.prototype, "taskTemplate", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", TemplateRef)
+    ], GanttTimelineComponent.prototype, "summaryTaskTemplate", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Function)
+    ], GanttTimelineComponent.prototype, "taskClass", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Function)
+    ], GanttTimelineComponent.prototype, "isTaskSelected", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], GanttTimelineComponent.prototype, "renderDependencyDragClues", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], GanttTimelineComponent.prototype, "dragScrollSettings", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Function)
+    ], GanttTimelineComponent.prototype, "hasChildren", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Array)
+    ], GanttTimelineComponent.prototype, "dependencies", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], GanttTimelineComponent.prototype, "timelineContainerPress", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], GanttTimelineComponent.prototype, "timelineContainerDrag", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], GanttTimelineComponent.prototype, "timelineContainerRelease", void 0);
+    GanttTimelineComponent = __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    "
+        }),
+        __metadata("design:paramtypes", [ScrollSyncService,
+            DependencyDomService,
+            Renderer2,
+            NgZone])
+    ], GanttTimelineComponent);
+    return GanttTimelineComponent;
+}());
 
 /**
- * @hidden
- *
- * Needed to keep the Gantt's LocalizationService reference and be able to use it component's inside the TabStrip
+ * The base class for the column components of the Gantt.
  */
-var GanttLocalizationService = /** @class */ (function () {
-    function GanttLocalizationService(localizationService) {
-        this.localizationService = localizationService;
+var ViewBase = /** @class */ (function () {
+    /**
+     *
+     * @hidden
+     */
+    function ViewBase(optionChangesService, dependencyDomService) {
+        this.optionChangesService = optionChangesService;
+        this.dependencyDomService = dependencyDomService;
+        /**
+         * The width of the time slot headers. Values are treated as pixels.
+         *
+         * @default 100
+         */
+        this.slotWidth = 100;
     }
-    GanttLocalizationService.prototype.get = function (token) {
-        return this.localizationService.get(token);
+    ViewBase.prototype.ngOnChanges = function (changes) {
+        if (anyChanged(['slotWidth'], changes)) {
+            this.optionChangesService.notifyColumnChanges();
+            this.dependencyDomService.notifyChanges();
+        }
     };
-    GanttLocalizationService = __decorate([
-        Injectable(),
-        __metadata("design:paramtypes", [LocalizationService])
-    ], GanttLocalizationService);
-    return GanttLocalizationService;
+    __decorate([
+        Input(),
+        __metadata("design:type", Number)
+    ], ViewBase.prototype, "slotWidth", void 0);
+    return ViewBase;
 }());
 
+/**
+ * @hidden
+ */
+var getEditItem = function (dataItem, data, mapper) {
+    var treeListDataItem = data.find(function (item) { return mapper.extractFromTask(item.data, 'id') === mapper.extractFromTask(dataItem, 'id'); });
+    return mapPath(treeListDataItem);
+};
+var mapPath = function (item) { return ({
+    dataItem: item.data,
+    parent: item.parent.data ? mapPath(item.parent) : null
+}); };
+
 var TREELIST_GROUP_COLUMNS_CLASS = 'k-gantt-treelist-nested-columns';
 var DEFAULT_VIEW = 'week';
+var DEFAULT_DRAG_SCROLL_SETTINGS = {
+    enabled: true,
+    step: 3,
+    interval: 1,
+    threshold: 10
+};
 /**
  * Represents the Kendo UI Gantt component for Angular.
  *
@@ -1904,11 +2291,22 @@ var GanttComponent = /** @class */ (function () {
         this.zone = zone;
         this.hostClasses = true;
         /**
-         * Provides a callback that determines if the given task is selected ([see example]({% slug selection_gantt %}#toc-custom-selection))
+         * Specifies a callback that determines if the given task is selected ([see example]({% slug selection_gantt %}#toc-custom-selection)).
          *
          * > The [`selectable`]({% slug api_gantt_ganttcomponent %}#toc-selectable) prop has to be set to `true` in order for this callback to be executed.
          */
         this.isSelected = isSelected;
+        /**
+         * Specifies a callback that determines if a new dependency is valid.
+         * Used when evaluating if an attempt to create a new dependency will result in a valid link between the two tasks
+         * [see example]({% slug editing_drag_create_dependencies_gantt %}#toc-validation).
+         *
+         * By defalut, dependencies are deemed invalid when:
+         *  - The two tasks are in a parent-child relationship.
+         *  - The two tasks are already dependent on one another. Only one dependency is allowed per pair.
+         *  - The start or end times of the two tasks are incompatible with the attempted dependency type.
+         */
+        this.validateNewDependency = this.defaultValidateNewDependencyCallback.bind(this);
         /**
          * Fires when the Gantt selection is changed through user interaction.
          *
@@ -2029,6 +2427,11 @@ var GanttComponent = /** @class */ (function () {
          * Fires when the user adds a task.
          */
         this.taskAdd = new EventEmitter();
+        /**
+         * Fires when the user adds a dependency via dragging
+         * [see example]({% slug editing_drag_create_dependencies_gantt %}#toc-basic-concepts).
+         */
+        this.dependencyAdd = new EventEmitter();
         /**
          * Fires when the sorting of the Gantt is changed.
          * You have to handle the event yourself and sort the data.
@@ -2085,6 +2488,15 @@ var GanttComponent = /** @class */ (function () {
          * Fires when a task is clicked.
          */
         this.taskClick = new EventEmitter();
+        /**
+         * @hidden
+         *
+         * Specifies whether the dependency drag clues will be rendered.
+         * Set internally by the dependency-drag-create directive.
+         *
+         * @default false
+         */
+        this.renderDependencyDragClues = false;
         /**
          * @hidden
          *
@@ -2101,6 +2513,7 @@ var GanttComponent = /** @class */ (function () {
         this.showConfirmationDialog = false;
         this._columns = new QueryList();
         this._data = [];
+        this._dragScrollSettings = __assign({}, DEFAULT_DRAG_SCROLL_SETTINGS);
         this._timelinePaneOptions = __assign({}, DEFAULT_TIMELINE_PANE_SETTINGS);
         this._treeListPaneOptions = __assign({}, DEFAULT_TREELIST_PANE_SETTINGS);
         this._rowClass = rowClassCallback;
@@ -2379,6 +2792,21 @@ var GanttComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(GanttComponent.prototype, "dragScrollSettings", {
+        get: function () {
+            return this._dragScrollSettings;
+        },
+        /**
+         * Specifies the settings for auto-scrolling during dragging
+         * when the pointer moves outside of the container bounderies
+         * [see example]({% slug editing_drag_create_dependencies_gantt %}#toc-auto-scrolling).
+         */
+        set: function (settings) {
+            this._dragScrollSettings = __assign({}, DEFAULT_DRAG_SCROLL_SETTINGS, settings);
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(GanttComponent.prototype, "renderedTreeListItems", {
         /**
          * @hidden
@@ -2837,11 +3265,65 @@ var GanttComponent = /** @class */ (function () {
         var loadedItems = this.renderedTreeListItems || [];
         return loadedItems.find(isSelectedCallback);
     };
+    GanttComponent.prototype.defaultValidateNewDependencyCallback = function (dependency) {
+        var _this = this;
+        var fromTaskId = this.mapper.extractFromDependency(dependency, 'fromId');
+        var toTaskId = this.mapper.extractFromDependency(dependency, 'toId');
+        var fromTask = this.treeList.view.data.find(function (task) {
+            return _this.mapper.extractFromTask(task.data, 'id') === fromTaskId;
+        });
+        var toTask = this.treeList.view.data.find(function (task) {
+            return _this.mapper.extractFromTask(task.data, 'id') === toTaskId;
+        });
+        // mark as invalid if the attempted dependency is lacking valid from- and to-tasks
+        // or when the from- and to-tasks are actually the same task
+        if (!isPresent(fromTask) || !isPresent(fromTask.data) ||
+            !isPresent(toTask) || !isPresent(toTask.data) ||
+            fromTask.data === toTask.data) {
+            return false;
+        }
+        var tasksDependentOnOneAnother = this.dependencies.some(function (current) {
+            var currentFromId = _this.mapper.extractFromDependency(current, 'fromId');
+            var currentToId = _this.mapper.extractFromDependency(current, 'toId');
+            return (fromTaskId === currentFromId && toTaskId === currentToId) ||
+                (toTaskId === currentFromId && fromTaskId === currentToId);
+        });
+        // mark as invalid if the attempted dependency is trying to connect already dependent tasks
+        // mark as invalid if the two tasks are in parent-child relationship
+        if (tasksDependentOnOneAnother || areParentChild(fromTask, toTask)) {
+            return false;
+        }
+        var fromTaskStart = this.mapper.extractFromTask(fromTask.data, 'start');
+        var fromTaskEnd = this.mapper.extractFromTask(fromTask.data, 'end');
+        var toTaskStart = this.mapper.extractFromTask(toTask.data, 'start');
+        var toTaskEnd = this.mapper.extractFromTask(toTask.data, 'end');
+        // if the two tasks are available to be connected via a dependency,
+        // check if their start and end time allow for the attempted dependency type
+        switch (this.mapper.extractFromDependency(dependency, 'type')) {
+            // finish to finish (FF) — the from-task ends before the to-task can end
+            case DependencyType.FF:
+                return fromTaskEnd <= toTaskEnd;
+            // finish to start (FS) — the from-task ends before the to-task can begin
+            case DependencyType.FS:
+                return fromTaskEnd <= toTaskStart;
+            // start to finish (SF) — the from-task begins before the to-task can end
+            case DependencyType.SF:
+                return fromTaskStart <= toTaskEnd;
+            // start to start (SS) — the from-task begins before the to-task can begin
+            case DependencyType.SS:
+                return fromTaskStart <= toTaskStart;
+            default: return false;
+        }
+    };
     var GanttComponent_1;
     __decorate([
         ViewChild(TreeListComponent, { static: true }),
         __metadata("design:type", TreeListComponent)
     ], GanttComponent.prototype, "treeList", void 0);
+    __decorate([
+        ViewChild(GanttTimelineComponent, { static: false }),
+        __metadata("design:type", GanttTimelineComponent)
+    ], GanttComponent.prototype, "timeline", void 0);
     __decorate([
         ContentChild(GanttTaskContentTemplateDirective, { static: true }),
         __metadata("design:type", GanttTaskContentTemplateDirective)
@@ -2900,6 +3382,10 @@ var GanttComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", Function)
     ], GanttComponent.prototype, "isSelected", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Function)
+    ], GanttComponent.prototype, "validateNewDependency", void 0);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
@@ -2999,6 +3485,11 @@ var GanttComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", Boolean)
     ], GanttComponent.prototype, "columnsResizable", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], GanttComponent.prototype, "dragScrollSettings", null);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
@@ -3039,6 +3530,10 @@ var GanttComponent = /** @class */ (function () {
         Output(),
         __metadata("design:type", EventEmitter)
     ], GanttComponent.prototype, "taskAdd", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], GanttComponent.prototype, "dependencyAdd", void 0);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
@@ -3114,9 +3609,10 @@ var GanttComponent = /** @class */ (function () {
                 DependencyDomService,
                 MappingService,
                 OptionChangesService,
-                EditService
+                EditService,
+                TimelineScrollService
             ],
-            template: "\n        <ng-container kendoGanttLocalizedMessages\n            i18n-taskEditingGeneralTabTitle=\"kendo.gantt.taskEditingGeneralTabTitle|The title of the 'General' tab of the editing dialog TabStrip\"\n            taskEditingGeneralTabTitle=\"General\"\n\n            i18n-taskEditingPredecessorsTabTitle=\"kendo.gantt.taskEditingPredecessorsTabTitle|The title of the 'Predecessors' dependencies tab of the editing dialog TabStrip\"\n            taskEditingPredecessorsTabTitle=\"Predecessors\"\n\n            i18n-taskEditingSuccessorsTabTitle=\"kendo.gantt.taskEditingSuccessorsTabTitle|The title of the 'Successors' dependencies tab of the editing dialog TabStrip\"\n            taskEditingSuccessorsTabTitle=\"Successors\"\n\n            i18n-taskEditingDependenciesAddButtonText=\"kendo.gantt.taskEditingDependenciesAddButtonText|The text of the 'Add' button in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesAddButtonText=\"Add\"\n\n            i18n-taskEditingDependenciesRemoveButtonText=\"kendo.gantt.taskEditingDependenciesRemoveButtonText|The text of the 'Remove' button in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesRemoveButtonText=\"Remove\"\n\n            i18n-taskEditingDependenciesGridNameColumnTitle=\"kendo.gantt.taskEditingDependenciesGridNameColumnTitle|The title of the 'Task Title' Grid column in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesGridNameColumnTitle=\"Task Title\"\n\n            i18n-taskEditingDependenciesGridTypeColumnTitle=\"kendo.gantt.taskEditingDependenciesGridTypeColumnTitle|The title of the 'Type' Grid column in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesGridTypeColumnTitle=\"Type\"\n\n            i18n-taskDeleteLabel=\"kendo.gantt.taskDeleteLabel|The label of the task delete icon\"\n            taskDeleteLabel=\"Delete\"\n\n            i18n-taskEditingDialogTitle=\"kendo.gantt.taskEditingDialogTitle|The title of the task editing dialog\"\n            taskEditingDialogTitle=\"Editing Task\"\n\n            i18n-taskEditingDialogCloseTitle=\"kendo.gantt.taskEditingDialogCloseTitle|The title of the task editing dialog close button\"\n            taskEditingDialogCloseTitle=\"Close\"\n\n            i18n-confirmationDialogCloseTitle=\"kendo.gantt.confirmationDialogCloseTitle|The title of the confirmation dialog close button\"\n            confirmationDialogCloseTitle=\"Close\"\n\n            i18n-confirmationDialogTitle=\"kendo.gantt.confirmationDialogTitle|The title of the delete task confirmation dialog\"\n            confirmationDialogTitle=\"Delete Task\"\n\n            i18n-confirmationDialogContent=\"kendo.gantt.confirmationDialogContent|The content of the delete task confirmation dialog\"\n            confirmationDialogContent=\"Are you sure you want to delete this task?\"\n\n            i18n-deleteButtonText=\"kendo.gantt.deleteButtonText|The text of the task editing dialog 'Delete' button\"\n            deleteButtonText=\"Delete\"\n\n            i18n-cancelButtonText=\"kendo.gantt.cancelButtonText|The text of the task editing dialog 'Cancel' button\"\n            cancelButtonText=\"Cancel\"\n\n            i18n-saveButtonText=\"kendo.gantt.saveButtonText|The text of the task editing dialog 'Save' button\"\n            saveButtonText=\"Save\"\n\n            i18n-titleFieldInputLabel=\"kendo.gantt.titleFieldInputLabel|The label of the 'title' field input in editing mode\"\n            titleFieldInputLabel=\"Title\"\n\n            i18n-startFieldInputLabel=\"kendo.gantt.startFieldInputLabel|The label of the 'start' field input in editing mode\"\n            startFieldInputLabel=\"Start\"\n\n            i18n-endFieldInputLabel=\"kendo.gantt.endFieldInputLabel|The label of the 'end' field input in editing mode\"\n            endFieldInputLabel=\"End\"\n\n            i18n-completionRatioFieldInputLabel=\"kendo.gantt.completionRatioFieldInputLabel|The label of the 'completionRatio' field input in editing mode\"\n            completionRatioFieldInputLabel=\"Progress\"\n\n            i18n-dayViewText=\"kendo.gantt.dayViewText|The text of the day view in the ViewSelector component\"\n            dayViewText=\"Day\"\n\n            i18n-weekViewText=\"kendo.gantt.weekViewText|The text of the week view in the ViewSelector component\"\n            weekViewText=\"Week\"\n\n            i18n-monthViewText=\"kendo.gantt.monthViewText|The text of the month view in the ViewSelector component\"\n            monthViewText=\"Month\"\n\n            i18n-yearViewText-disabled=\"kendo.gantt.yearViewText|The text of the year view in the ViewSelector component\"\n            yearViewText=\"Year\"\n\n            i18n-addTaskText=\"kendo.gantt.addTaskText|The text of the DropDownButton in the AddTask component\"\n            addTaskText=\"Add Task\"\n\n            i18n-addChildText=\"kendo.gantt.addChildText|The text of the 'Add Child' option in the AddTask component\"\n            addChildText=\"Add Child\"\n\n            i18n-addAboveText=\"kendo.gantt.addAboveText|The text of the 'Add Above' option in the AddTask component\"\n            addAboveText=\"Add Above\"\n\n            i18n-addBelowText=\"kendo.gantt.addBelowText|The text of the 'Add Below' option in the AddTask component\"\n            addBelowText=\"Add Below\"\n\n            i18n-noRecords=\"kendo.gantt.noRecords|The label visible in the TreeList when there are no records\"\n            noRecords=\"No records available.\"\n\n            i18n-filter=\"kendo.gantt.filter|The label of the filter cell or icon\"\n            filter=\"Filter\"\n\n            i18n-filterEqOperator=\"kendo.gantt.filterEqOperator|The text of the equal filter operator\"\n            filterEqOperator=\"Is equal to\"\n\n            i18n-filterNotEqOperator=\"kendo.gantt.filterNotEqOperator|The text of the not equal filter operator\"\n            filterNotEqOperator=\"Is not equal to\"\n\n            i18n-filterIsNullOperator=\"kendo.gantt.filterIsNullOperator|The text of the is null filter operator\"\n            filterIsNullOperator=\"Is null\"\n\n            i18n-filterIsNotNullOperator=\"kendo.gantt.filterIsNotNullOperator|The text of the is not null filter operator\"\n            filterIsNotNullOperator=\"Is not null\"\n\n            i18n-filterIsEmptyOperator=\"kendo.gantt.filterIsEmptyOperator|The text of the is empty filter operator\"\n            filterIsEmptyOperator=\"Is empty\"\n\n            i18n-filterIsNotEmptyOperator=\"kendo.gantt.filterIsNotEmptyOperator|The text of the is not empty filter operator\"\n            filterIsNotEmptyOperator=\"Is not empty\"\n\n            i18n-filterStartsWithOperator=\"kendo.gantt.filterStartsWithOperator|The text of the starts with filter operator\"\n            filterStartsWithOperator=\"Starts with\"\n\n            i18n-filterContainsOperator=\"kendo.gantt.filterContainsOperator|The text of the contains filter operator\"\n            filterContainsOperator=\"Contains\"\n\n            i18n-filterNotContainsOperator=\"kendo.gantt.filterNotContainsOperator|The text of the does not contain filter operator\"\n            filterNotContainsOperator=\"Does not contain\"\n\n            i18n-filterEndsWithOperator=\"kendo.gantt.filterEndsWithOperator|The text of the ends with filter operator\"\n            filterEndsWithOperator=\"Ends with\"\n\n            i18n-filterGteOperator=\"kendo.gantt.filterGteOperator|The text of the greater than or equal filter operator\"\n            filterGteOperator=\"Is greater than or equal to\"\n\n            i18n-filterGtOperator=\"kendo.gantt.filterGtOperator|The text of the greater than filter operator\"\n            filterGtOperator=\"Is greater than\"\n\n            i18n-filterLteOperator=\"kendo.gantt.filterLteOperator|The text of the less than or equal filter operator\"\n            filterLteOperator=\"Is less than or equal to\"\n\n            i18n-filterLtOperator=\"kendo.gantt.filterLtOperator|The text of the less than filter operator\"\n            filterLtOperator=\"Is less than\"\n\n            i18n-filterIsTrue=\"kendo.gantt.filterIsTrue|The text of the IsTrue boolean filter option\"\n            filterIsTrue=\"Is True\"\n\n            i18n-filterIsFalse=\"kendo.gantt.filterIsFalse|The text of the IsFalse boolean filter option\"\n            filterIsFalse=\"Is False\"\n\n            i18n-filterBooleanAll=\"kendo.gantt.filterBooleanAll|The text of the (All) boolean filter option\"\n            filterBooleanAll=\"(All)\"\n\n            i18n-filterAfterOrEqualOperator=\"kendo.gantt.filterAfterOrEqualOperator|The text of the after or equal date filter operator\"\n            filterAfterOrEqualOperator=\"Is after or equal to\"\n\n            i18n-filterAfterOperator=\"kendo.gantt.filterAfterOperator|The text of the after date filter operator\"\n            filterAfterOperator=\"Is after\"\n\n            i18n-filterBeforeOperator=\"kendo.gantt.filterBeforeOperator|The text of the before date filter operator\"\n            filterBeforeOperator=\"Is before\"\n\n            i18n-filterBeforeOrEqualOperator=\"kendo.gantt.filterBeforeOrEqualOperator|The text of the before or equal date filter operator\"\n            filterBeforeOrEqualOperator=\"Is before or equal to\"\n\n            i18n-filterFilterButton=\"kendo.gantt.filterFilterButton|The text of the filter button\"\n            filterFilterButton=\"Filter\"\n\n            i18n-filterClearButton=\"kendo.gantt.filterClearButton|The text of the clear filter button\"\n            filterClearButton=\"Clear\"\n\n            i18n-filterAndLogic=\"kendo.gantt.filterAndLogic|The text of the And filter logic\"\n            filterAndLogic=\"And\"\n\n            i18n-filterOrLogic=\"kendo.gantt.filterOrLogic|The text of the Or filter logic\"\n            filterOrLogic=\"Or\"\n\n            i18n-loading=\"kendo.gantt.loading|The loading text\"\n            loading=\"Loading\"\n\n            i18n-columnMenu=\"kendo.gantt.columnMenu|The title of the column menu icon\"\n            columnMenu=\"Column Menu\"\n\n            i18n-columns=\"kendo.gantt.columns|The text shown in the column menu for the columns item\"\n            columns=\"Columns\"\n\n            i18n-lock-disabled=\"kendo.gantt.lock|The text shown in the column menu for the lock item\"\n            lock-disabled=\"Lock\"\n\n            i18n-unlock-disabled=\"kendo.gantt.unlock|The text shown in the column menu for the unlock item\"\n            unlock-disabled=\"Unlock\"\n\n            i18n-sortable=\"kendo.gantt.sortable|The label of the sort icon\"\n            sortable=\"Sortable\"\n\n            i18n-sortAscending=\"kendo.gantt.sortAscending|The text shown in the column menu for the sort ascending item\"\n            sortAscending=\"Sort Ascending\"\n\n            i18n-sortDescending=\"kendo.gantt.sortDescending|The text shown in the column menu for the sort descending item\"\n            sortDescending=\"Sort Descending\"\n\n            i18n-sortedAscending=\"kendo.gantt.sortedAscending|The status announcement when a column is sorted ascending\"\n            sortedAscending=\"Sorted Ascending\"\n\n            i18n-sortedDescending=\"kendo.gantt.sortedDescending|The status announcement when a column is sorted descending\"\n            sortedDescending=\"Sorted Descending\"\n\n            i18n-sortedDefault=\"kendo.gantt.sortedDefault|The status announcement when a column is no longer sorted\"\n            sortedDefault=\"Not Sorted\"\n\n            i18n-columnsApply=\"kendo.gantt.columnsApply|The text shown in the column menu or column chooser for the columns apply button\"\n            columnsApply=\"Apply\"\n\n            i18n-columnsReset=\"kendo.gantt.columnsReset|The text shown in the column menu or column chooser for the columns reset button\"\n            columnsReset=\"Reset\"></ng-container>\n        <kendo-gantt-toolbar\n            *ngIf=\"showToolbar('top')\"\n            [showAddTask]=\"toolbarSettings.addTaskTool === 'top' || toolbarSettings.addTaskTool === 'both'\"\n            [showViewSelector]=\"toolbarSettings.viewSelectorTool === 'top' || toolbarSettings.viewSelectorTool === 'both'\"\n            class=\"k-gantt-header k-toolbar k-gantt-toolbar\"\n            position=\"top\"></kendo-gantt-toolbar>\n        <div class=\"k-gantt-content\">\n            <kendo-splitter [style.border]=\"0\">\n                <kendo-splitter-pane\n                    class=\"k-gantt-treelist k-gantt-treelist-scrollable\"\n                    [collapsible]=\"treeListPaneOptions?.collapsible\"\n                    [collapsed]=\"treeListPaneOptions?.collapsed\"\n                    (collapsedChange)=\"onTreeListCollapsedChange($event)\"\n                    [scrollable]=\"false\">\n                    <kendo-treelist\n                        [idField]=\"taskIdField\"\n                        [columns]=\"columns\"\n                        [data]=\"data\"\n                        [hasChildren]=\"hasChildren\"\n                        [fetchChildren]=\"fetchChildren\"\n                        [isExpanded]=\"isExpanded\"\n                        [autoSize]=\"columnsAutoSize\"\n                        [columnMenu]=\"columnMenu\"\n                        [reorderable]=\"columnsReorderable\"\n                        [resizable]=\"columnsResizable\"\n                        [rowClass]=\"rowClass\"\n                        [isSelected]=\"isSelected\"\n                        [selectable]=\"selectable\"\n                        [sortable]=\"sortable\"\n                        [sort]=\"sort\"\n                        [filterable]=\"filterMenu\"\n                        [filter]=\"filter\"\n                        (filterChange)=\"filterChange.emit($event)\"\n                        (sortChange)=\"sortChange.emit($event)\"\n                        (dataStateChange)=\"dataStateChange.emit({\n                            filter: $event.filter,\n                            sort: $event.sort\n                        })\"\n                        (expandStateChange)=\"expandStateChange.emit($event)\"\n                        (expand)=\"rowExpand.emit({ dataItem: $event.dataItem })\"\n                        (collapse)=\"rowCollapse.emit({ dataItem: $event.dataItem })\"\n                        (columnReorder)=\"columnReorder.emit($event)\"\n                        (columnResize)=\"columnResize.emit($event)\"\n                        (columnVisibilityChange)=\"handleColumnVisibilityChange($event)\"\n                        (columnLockedChange)=\"columnLockedChange.emit($event)\"\n                        (selectionChange)=\"handleTreeListSelectionChange($event)\"\n                        (cellClick)=\"handleTreeListCellClick($event)\"\n                        (cellClose)=\"handleCellClose($event)\"\n                        [kendoEventsOutsideAngular]=\"{\n                            dblclick: handleTreeListDoubleClick\n                        }\"\n                        [scope]=\"this\"\n                    >\n                        <kendo-treelist-messages\n                            [noRecords]=\"getText('noRecords')\"\n                            [filter]=\"getText('filter')\"\n                            [filterEqOperator]=\"getText('filterEqOperator')\"\n                            [filterNotEqOperator]=\"getText('filterNotEqOperator')\"\n                            [filterIsNullOperator]=\"getText('filterIsNullOperator')\"\n                            [filterIsNotNullOperator]=\"getText('filterIsNotNullOperator')\"\n                            [filterIsEmptyOperator]=\"getText('filterIsEmptyOperator')\"\n                            [filterIsNotEmptyOperator]=\"getText('filterIsNotEmptyOperator')\"\n                            [filterStartsWithOperator]=\"getText('filterStartsWithOperator')\"\n                            [filterContainsOperator]=\"getText('filterContainsOperator')\"\n                            [filterNotContainsOperator]=\"getText('filterNotContainsOperator')\"\n                            [filterEndsWithOperator]=\"getText('filterEndsWithOperator')\"\n                            [filterGteOperator]=\"getText('filterGteOperator')\"\n                            [filterGtOperator]=\"getText('filterGtOperator')\"\n                            [filterLteOperator]=\"getText('filterLteOperator')\"\n                            [filterLtOperator]=\"getText('filterLtOperator')\"\n                            [filterIsTrue]=\"getText('filterIsTrue')\"\n                            [filterIsFalse]=\"getText('filterIsFalse')\"\n                            [filterBooleanAll]=\"getText('filterBooleanAll')\"\n                            [filterAfterOrEqualOperator]=\"getText('filterAfterOrEqualOperator')\"\n                            [filterAfterOperator]=\"getText('filterAfterOperator')\"\n                            [filterBeforeOperator]=\"getText('filterBeforeOperator')\"\n                            [filterBeforeOrEqualOperator]=\"getText('filterBeforeOrEqualOperator')\"\n                            [filterFilterButton]=\"getText('filterFilterButton')\"\n                            [filterClearButton]=\"getText('filterClearButton')\"\n                            [filterAndLogic]=\"getText('filterAndLogic')\"\n                            [filterOrLogic]=\"getText('filterOrLogic')\"\n                            [loading]=\"getText('loading')\"\n                            [columnMenu]=\"getText('columnMenu')\"\n                            [columns]=\"getText('columns')\"\n                            [sortable]=\"getText('sortable')\"\n                            [sortAscending]=\"getText('sortAscending')\"\n                            [sortDescending]=\"getText('sortDescending')\"\n                            [sortedAscending]=\"getText('sortedAscending')\"\n                            [sortedDescending]=\"getText('sortedDescending')\"\n                            [sortedDefault]=\"getText('sortedDefault')\"\n                            [columnsApply]=\"getText('columnsApply')\"\n                            [columnsReset]=\"getText('columnsReset')\"\n                        >\n                        </kendo-treelist-messages>\n                    </kendo-treelist>\n                </kendo-splitter-pane>\n                <kendo-splitter-pane\n                    [collapsible]=\"timelinePaneOptions?.collapsible\"\n                    [resizable]=\"timelinePaneOptions?.resizable\"\n                    [collapsed]=\"timelinePaneOptions?.collapsed\"\n                    [min]=\"timelinePaneOptions?.min\"\n                    [max]=\"timelinePaneOptions?.max\"\n                    [size]=\"timelinePaneOptions?.size\"\n                    (collapsedChange)=\"onTimelineCollapsedChange($event)\"\n                    (sizeChange)=\"onTimelinePaneSizeChange($event)\"\n                    [scrollable]=\"false\">\n                    <kendo-gantt-timeline\n                        *ngIf=\"views && views.length\"\n                        [rows]=\"renderedTreeListItems\"\n                        [slots]=\"timelineSlots\"\n                        [groupSlots]=\"timelineGroupSlots\"\n                        [tableWidth]=\"tableWidth\"\n                        [activeView]=\"activeView\"\n                        [taskContentTemplate]=\"taskContentTemplate?.templateRef\"\n                        [taskTemplate]=\"taskTemplate?.templateRef\"\n                        [summaryTaskTemplate]=\"summaryTaskTemplate?.templateRef\"\n                        [taskClass]=\"taskClass\"\n                        [dependencies]=\"dependencies\"\n                        [hasChildren]=\"hasChildren\"\n                        [isTaskSelected]=\"isTaskSelected\"\n                        [kendoEventsOutsideAngular]=\"{\n                            click: handleTimelineClick,\n                            contextmenu: handleTimelineRightClick,\n                            dblclick: handleTimelineDblClick,\n                            mousedown: handleTimelineMouseDown\n                        }\"\n                        [scope]=\"this\"\n                    ></kendo-gantt-timeline>\n                </kendo-splitter-pane>\n            </kendo-splitter>\n        </div>\n        <kendo-gantt-toolbar\n            *ngIf=\"showToolbar('bottom')\"\n            [showAddTask]=\"toolbarSettings.addTaskTool === 'bottom' || toolbarSettings.addTaskTool === 'both'\"\n            [showViewSelector]=\"toolbarSettings.viewSelectorTool === 'bottom' || toolbarSettings.viewSelectorTool === 'both'\"\n            class=\"k-gantt-footer k-toolbar k-gantt-toolbar\"\n            position=\"bottom\"></kendo-gantt-toolbar>\n        <kendo-gantt-edit-dialog\n            *ngIf=\"showEditingDialog\"\n            [data]=\"data\">\n        </kendo-gantt-edit-dialog>\n        <kendo-dialog\n            *ngIf=\"showConfirmationDialog\"\n            [width]=\"575\"\n            [height]=\"170\"\n            [title]=\"getText('confirmationDialogTitle')\"\n            (close)=\"showConfirmationDialog = false;\">\n            <span>{{ getText('confirmationDialogContent') }}</span>\n            <kendo-dialog-actions layout=\"normal\">\n                <kendo-treelist-spacer></kendo-treelist-spacer>\n                <button kendoButton [primary]=\"true\" (click)=\"handleDeleteConfirmation()\">{{ getText('deleteButtonText') }}</button>\n                <button kendoButton (click)=\"showConfirmationDialog = false;\">{{ getText('cancelButtonText') }}</button>\n            </kendo-dialog-actions>\n        </kendo-dialog>\n   "
+            template: "\n        <ng-container kendoGanttLocalizedMessages\n            i18n-taskEditingGeneralTabTitle=\"kendo.gantt.taskEditingGeneralTabTitle|The title of the 'General' tab of the editing dialog TabStrip\"\n            taskEditingGeneralTabTitle=\"General\"\n\n            i18n-taskEditingPredecessorsTabTitle=\"kendo.gantt.taskEditingPredecessorsTabTitle|The title of the 'Predecessors' dependencies tab of the editing dialog TabStrip\"\n            taskEditingPredecessorsTabTitle=\"Predecessors\"\n\n            i18n-taskEditingSuccessorsTabTitle=\"kendo.gantt.taskEditingSuccessorsTabTitle|The title of the 'Successors' dependencies tab of the editing dialog TabStrip\"\n            taskEditingSuccessorsTabTitle=\"Successors\"\n\n            i18n-taskEditingDependenciesAddButtonText=\"kendo.gantt.taskEditingDependenciesAddButtonText|The text of the 'Add' button in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesAddButtonText=\"Add\"\n\n            i18n-taskEditingDependenciesRemoveButtonText=\"kendo.gantt.taskEditingDependenciesRemoveButtonText|The text of the 'Remove' button in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesRemoveButtonText=\"Remove\"\n\n            i18n-taskEditingDependenciesGridNameColumnTitle=\"kendo.gantt.taskEditingDependenciesGridNameColumnTitle|The title of the 'Task Title' Grid column in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesGridNameColumnTitle=\"Task Title\"\n\n            i18n-taskEditingDependenciesGridTypeColumnTitle=\"kendo.gantt.taskEditingDependenciesGridTypeColumnTitle|The title of the 'Type' Grid column in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesGridTypeColumnTitle=\"Type\"\n\n            i18n-taskDeleteLabel=\"kendo.gantt.taskDeleteLabel|The label of the task delete icon\"\n            taskDeleteLabel=\"Delete\"\n\n            i18n-taskEditingDialogTitle=\"kendo.gantt.taskEditingDialogTitle|The title of the task editing dialog\"\n            taskEditingDialogTitle=\"Editing Task\"\n\n            i18n-taskEditingDialogCloseTitle=\"kendo.gantt.taskEditingDialogCloseTitle|The title of the task editing dialog close button\"\n            taskEditingDialogCloseTitle=\"Close\"\n\n            i18n-confirmationDialogCloseTitle=\"kendo.gantt.confirmationDialogCloseTitle|The title of the confirmation dialog close button\"\n            confirmationDialogCloseTitle=\"Close\"\n\n            i18n-confirmationDialogTitle=\"kendo.gantt.confirmationDialogTitle|The title of the delete task confirmation dialog\"\n            confirmationDialogTitle=\"Delete Task\"\n\n            i18n-confirmationDialogContent=\"kendo.gantt.confirmationDialogContent|The content of the delete task confirmation dialog\"\n            confirmationDialogContent=\"Are you sure you want to delete this task?\"\n\n            i18n-deleteButtonText=\"kendo.gantt.deleteButtonText|The text of the task editing dialog 'Delete' button\"\n            deleteButtonText=\"Delete\"\n\n            i18n-cancelButtonText=\"kendo.gantt.cancelButtonText|The text of the task editing dialog 'Cancel' button\"\n            cancelButtonText=\"Cancel\"\n\n            i18n-saveButtonText=\"kendo.gantt.saveButtonText|The text of the task editing dialog 'Save' button\"\n            saveButtonText=\"Save\"\n\n            i18n-titleFieldInputLabel=\"kendo.gantt.titleFieldInputLabel|The label of the 'title' field input in editing mode\"\n            titleFieldInputLabel=\"Title\"\n\n            i18n-startFieldInputLabel=\"kendo.gantt.startFieldInputLabel|The label of the 'start' field input in editing mode\"\n            startFieldInputLabel=\"Start\"\n\n            i18n-endFieldInputLabel=\"kendo.gantt.endFieldInputLabel|The label of the 'end' field input in editing mode\"\n            endFieldInputLabel=\"End\"\n\n            i18n-completionRatioFieldInputLabel=\"kendo.gantt.completionRatioFieldInputLabel|The label of the 'completionRatio' field input in editing mode\"\n            completionRatioFieldInputLabel=\"Progress\"\n\n            i18n-dayViewText=\"kendo.gantt.dayViewText|The text of the day view in the ViewSelector component\"\n            dayViewText=\"Day\"\n\n            i18n-weekViewText=\"kendo.gantt.weekViewText|The text of the week view in the ViewSelector component\"\n            weekViewText=\"Week\"\n\n            i18n-monthViewText=\"kendo.gantt.monthViewText|The text of the month view in the ViewSelector component\"\n            monthViewText=\"Month\"\n\n            i18n-yearViewText-disabled=\"kendo.gantt.yearViewText|The text of the year view in the ViewSelector component\"\n            yearViewText=\"Year\"\n\n            i18n-addTaskText=\"kendo.gantt.addTaskText|The text of the DropDownButton in the AddTask component\"\n            addTaskText=\"Add Task\"\n\n            i18n-addChildText=\"kendo.gantt.addChildText|The text of the 'Add Child' option in the AddTask component\"\n            addChildText=\"Add Child\"\n\n            i18n-addAboveText=\"kendo.gantt.addAboveText|The text of the 'Add Above' option in the AddTask component\"\n            addAboveText=\"Add Above\"\n\n            i18n-addBelowText=\"kendo.gantt.addBelowText|The text of the 'Add Below' option in the AddTask component\"\n            addBelowText=\"Add Below\"\n\n            i18n-noRecords=\"kendo.gantt.noRecords|The label visible in the TreeList when there are no records\"\n            noRecords=\"No records available.\"\n\n            i18n-filter=\"kendo.gantt.filter|The label of the filter cell or icon\"\n            filter=\"Filter\"\n\n            i18n-filterEqOperator=\"kendo.gantt.filterEqOperator|The text of the equal filter operator\"\n            filterEqOperator=\"Is equal to\"\n\n            i18n-filterNotEqOperator=\"kendo.gantt.filterNotEqOperator|The text of the not equal filter operator\"\n            filterNotEqOperator=\"Is not equal to\"\n\n            i18n-filterIsNullOperator=\"kendo.gantt.filterIsNullOperator|The text of the is null filter operator\"\n            filterIsNullOperator=\"Is null\"\n\n            i18n-filterIsNotNullOperator=\"kendo.gantt.filterIsNotNullOperator|The text of the is not null filter operator\"\n            filterIsNotNullOperator=\"Is not null\"\n\n            i18n-filterIsEmptyOperator=\"kendo.gantt.filterIsEmptyOperator|The text of the is empty filter operator\"\n            filterIsEmptyOperator=\"Is empty\"\n\n            i18n-filterIsNotEmptyOperator=\"kendo.gantt.filterIsNotEmptyOperator|The text of the is not empty filter operator\"\n            filterIsNotEmptyOperator=\"Is not empty\"\n\n            i18n-filterStartsWithOperator=\"kendo.gantt.filterStartsWithOperator|The text of the starts with filter operator\"\n            filterStartsWithOperator=\"Starts with\"\n\n            i18n-filterContainsOperator=\"kendo.gantt.filterContainsOperator|The text of the contains filter operator\"\n            filterContainsOperator=\"Contains\"\n\n            i18n-filterNotContainsOperator=\"kendo.gantt.filterNotContainsOperator|The text of the does not contain filter operator\"\n            filterNotContainsOperator=\"Does not contain\"\n\n            i18n-filterEndsWithOperator=\"kendo.gantt.filterEndsWithOperator|The text of the ends with filter operator\"\n            filterEndsWithOperator=\"Ends with\"\n\n            i18n-filterGteOperator=\"kendo.gantt.filterGteOperator|The text of the greater than or equal filter operator\"\n            filterGteOperator=\"Is greater than or equal to\"\n\n            i18n-filterGtOperator=\"kendo.gantt.filterGtOperator|The text of the greater than filter operator\"\n            filterGtOperator=\"Is greater than\"\n\n            i18n-filterLteOperator=\"kendo.gantt.filterLteOperator|The text of the less than or equal filter operator\"\n            filterLteOperator=\"Is less than or equal to\"\n\n            i18n-filterLtOperator=\"kendo.gantt.filterLtOperator|The text of the less than filter operator\"\n            filterLtOperator=\"Is less than\"\n\n            i18n-filterIsTrue=\"kendo.gantt.filterIsTrue|The text of the IsTrue boolean filter option\"\n            filterIsTrue=\"Is True\"\n\n            i18n-filterIsFalse=\"kendo.gantt.filterIsFalse|The text of the IsFalse boolean filter option\"\n            filterIsFalse=\"Is False\"\n\n            i18n-filterBooleanAll=\"kendo.gantt.filterBooleanAll|The text of the (All) boolean filter option\"\n            filterBooleanAll=\"(All)\"\n\n            i18n-filterAfterOrEqualOperator=\"kendo.gantt.filterAfterOrEqualOperator|The text of the after or equal date filter operator\"\n            filterAfterOrEqualOperator=\"Is after or equal to\"\n\n            i18n-filterAfterOperator=\"kendo.gantt.filterAfterOperator|The text of the after date filter operator\"\n            filterAfterOperator=\"Is after\"\n\n            i18n-filterBeforeOperator=\"kendo.gantt.filterBeforeOperator|The text of the before date filter operator\"\n            filterBeforeOperator=\"Is before\"\n\n            i18n-filterBeforeOrEqualOperator=\"kendo.gantt.filterBeforeOrEqualOperator|The text of the before or equal date filter operator\"\n            filterBeforeOrEqualOperator=\"Is before or equal to\"\n\n            i18n-filterFilterButton=\"kendo.gantt.filterFilterButton|The text of the filter button\"\n            filterFilterButton=\"Filter\"\n\n            i18n-filterClearButton=\"kendo.gantt.filterClearButton|The text of the clear filter button\"\n            filterClearButton=\"Clear\"\n\n            i18n-filterAndLogic=\"kendo.gantt.filterAndLogic|The text of the And filter logic\"\n            filterAndLogic=\"And\"\n\n            i18n-filterOrLogic=\"kendo.gantt.filterOrLogic|The text of the Or filter logic\"\n            filterOrLogic=\"Or\"\n\n            i18n-loading=\"kendo.gantt.loading|The loading text\"\n            loading=\"Loading\"\n\n            i18n-columnMenu=\"kendo.gantt.columnMenu|The title of the column menu icon\"\n            columnMenu=\"Column Menu\"\n\n            i18n-columns=\"kendo.gantt.columns|The text shown in the column menu for the columns item\"\n            columns=\"Columns\"\n\n            i18n-lock-disabled=\"kendo.gantt.lock|The text shown in the column menu for the lock item\"\n            lock-disabled=\"Lock\"\n\n            i18n-unlock-disabled=\"kendo.gantt.unlock|The text shown in the column menu for the unlock item\"\n            unlock-disabled=\"Unlock\"\n\n            i18n-sortable=\"kendo.gantt.sortable|The label of the sort icon\"\n            sortable=\"Sortable\"\n\n            i18n-sortAscending=\"kendo.gantt.sortAscending|The text shown in the column menu for the sort ascending item\"\n            sortAscending=\"Sort Ascending\"\n\n            i18n-sortDescending=\"kendo.gantt.sortDescending|The text shown in the column menu for the sort descending item\"\n            sortDescending=\"Sort Descending\"\n\n            i18n-sortedAscending=\"kendo.gantt.sortedAscending|The status announcement when a column is sorted ascending\"\n            sortedAscending=\"Sorted Ascending\"\n\n            i18n-sortedDescending=\"kendo.gantt.sortedDescending|The status announcement when a column is sorted descending\"\n            sortedDescending=\"Sorted Descending\"\n\n            i18n-sortedDefault=\"kendo.gantt.sortedDefault|The status announcement when a column is no longer sorted\"\n            sortedDefault=\"Not Sorted\"\n\n            i18n-columnsApply=\"kendo.gantt.columnsApply|The text shown in the column menu or column chooser for the columns apply button\"\n            columnsApply=\"Apply\"\n\n            i18n-columnsReset=\"kendo.gantt.columnsReset|The text shown in the column menu or column chooser for the columns reset button\"\n            columnsReset=\"Reset\"></ng-container>\n        <kendo-gantt-toolbar\n            *ngIf=\"showToolbar('top')\"\n            [showAddTask]=\"toolbarSettings.addTaskTool === 'top' || toolbarSettings.addTaskTool === 'both'\"\n            [showViewSelector]=\"toolbarSettings.viewSelectorTool === 'top' || toolbarSettings.viewSelectorTool === 'both'\"\n            class=\"k-gantt-header k-toolbar k-gantt-toolbar\"\n            position=\"top\"></kendo-gantt-toolbar>\n        <div class=\"k-gantt-content\">\n            <kendo-splitter [style.border]=\"0\">\n                <kendo-splitter-pane\n                    class=\"k-gantt-treelist k-gantt-treelist-scrollable\"\n                    [collapsible]=\"treeListPaneOptions?.collapsible\"\n                    [collapsed]=\"treeListPaneOptions?.collapsed\"\n                    (collapsedChange)=\"onTreeListCollapsedChange($event)\"\n                    [scrollable]=\"false\">\n                    <kendo-treelist\n                        [idField]=\"taskIdField\"\n                        [columns]=\"columns\"\n                        [data]=\"data\"\n                        [hasChildren]=\"hasChildren\"\n                        [fetchChildren]=\"fetchChildren\"\n                        [isExpanded]=\"isExpanded\"\n                        [autoSize]=\"columnsAutoSize\"\n                        [columnMenu]=\"columnMenu\"\n                        [reorderable]=\"columnsReorderable\"\n                        [resizable]=\"columnsResizable\"\n                        [rowClass]=\"rowClass\"\n                        [isSelected]=\"isSelected\"\n                        [selectable]=\"selectable\"\n                        [sortable]=\"sortable\"\n                        [sort]=\"sort\"\n                        [filterable]=\"filterMenu\"\n                        [filter]=\"filter\"\n                        (filterChange)=\"filterChange.emit($event)\"\n                        (sortChange)=\"sortChange.emit($event)\"\n                        (dataStateChange)=\"dataStateChange.emit({\n                            filter: $event.filter,\n                            sort: $event.sort\n                        })\"\n                        (expandStateChange)=\"expandStateChange.emit($event)\"\n                        (expand)=\"rowExpand.emit({ dataItem: $event.dataItem })\"\n                        (collapse)=\"rowCollapse.emit({ dataItem: $event.dataItem })\"\n                        (columnReorder)=\"columnReorder.emit($event)\"\n                        (columnResize)=\"columnResize.emit($event)\"\n                        (columnVisibilityChange)=\"handleColumnVisibilityChange($event)\"\n                        (columnLockedChange)=\"columnLockedChange.emit($event)\"\n                        (selectionChange)=\"handleTreeListSelectionChange($event)\"\n                        (cellClick)=\"handleTreeListCellClick($event)\"\n                        (cellClose)=\"handleCellClose($event)\"\n                        [kendoEventsOutsideAngular]=\"{\n                            dblclick: handleTreeListDoubleClick\n                        }\"\n                        [scope]=\"this\"\n                    >\n                        <kendo-treelist-messages\n                            [noRecords]=\"getText('noRecords')\"\n                            [filter]=\"getText('filter')\"\n                            [filterEqOperator]=\"getText('filterEqOperator')\"\n                            [filterNotEqOperator]=\"getText('filterNotEqOperator')\"\n                            [filterIsNullOperator]=\"getText('filterIsNullOperator')\"\n                            [filterIsNotNullOperator]=\"getText('filterIsNotNullOperator')\"\n                            [filterIsEmptyOperator]=\"getText('filterIsEmptyOperator')\"\n                            [filterIsNotEmptyOperator]=\"getText('filterIsNotEmptyOperator')\"\n                            [filterStartsWithOperator]=\"getText('filterStartsWithOperator')\"\n                            [filterContainsOperator]=\"getText('filterContainsOperator')\"\n                            [filterNotContainsOperator]=\"getText('filterNotContainsOperator')\"\n                            [filterEndsWithOperator]=\"getText('filterEndsWithOperator')\"\n                            [filterGteOperator]=\"getText('filterGteOperator')\"\n                            [filterGtOperator]=\"getText('filterGtOperator')\"\n                            [filterLteOperator]=\"getText('filterLteOperator')\"\n                            [filterLtOperator]=\"getText('filterLtOperator')\"\n                            [filterIsTrue]=\"getText('filterIsTrue')\"\n                            [filterIsFalse]=\"getText('filterIsFalse')\"\n                            [filterBooleanAll]=\"getText('filterBooleanAll')\"\n                            [filterAfterOrEqualOperator]=\"getText('filterAfterOrEqualOperator')\"\n                            [filterAfterOperator]=\"getText('filterAfterOperator')\"\n                            [filterBeforeOperator]=\"getText('filterBeforeOperator')\"\n                            [filterBeforeOrEqualOperator]=\"getText('filterBeforeOrEqualOperator')\"\n                            [filterFilterButton]=\"getText('filterFilterButton')\"\n                            [filterClearButton]=\"getText('filterClearButton')\"\n                            [filterAndLogic]=\"getText('filterAndLogic')\"\n                            [filterOrLogic]=\"getText('filterOrLogic')\"\n                            [loading]=\"getText('loading')\"\n                            [columnMenu]=\"getText('columnMenu')\"\n                            [columns]=\"getText('columns')\"\n                            [sortable]=\"getText('sortable')\"\n                            [sortAscending]=\"getText('sortAscending')\"\n                            [sortDescending]=\"getText('sortDescending')\"\n                            [sortedAscending]=\"getText('sortedAscending')\"\n                            [sortedDescending]=\"getText('sortedDescending')\"\n                            [sortedDefault]=\"getText('sortedDefault')\"\n                            [columnsApply]=\"getText('columnsApply')\"\n                            [columnsReset]=\"getText('columnsReset')\"\n                        >\n                        </kendo-treelist-messages>\n                    </kendo-treelist>\n                </kendo-splitter-pane>\n                <kendo-splitter-pane\n                    [collapsible]=\"timelinePaneOptions?.collapsible\"\n                    [resizable]=\"timelinePaneOptions?.resizable\"\n                    [collapsed]=\"timelinePaneOptions?.collapsed\"\n                    [min]=\"timelinePaneOptions?.min\"\n                    [max]=\"timelinePaneOptions?.max\"\n                    [size]=\"timelinePaneOptions?.size\"\n                    (collapsedChange)=\"onTimelineCollapsedChange($event)\"\n                    (sizeChange)=\"onTimelinePaneSizeChange($event)\"\n                    [scrollable]=\"false\">\n                    <kendo-gantt-timeline\n                        *ngIf=\"views && views.length\"\n                        [renderDependencyDragClues]=\"renderDependencyDragClues\"\n                        [dragScrollSettings]=\"dragScrollSettings\"\n                        [rows]=\"renderedTreeListItems\"\n                        [slots]=\"timelineSlots\"\n                        [groupSlots]=\"timelineGroupSlots\"\n                        [tableWidth]=\"tableWidth\"\n                        [activeView]=\"activeView\"\n                        [taskContentTemplate]=\"taskContentTemplate?.templateRef\"\n                        [taskTemplate]=\"taskTemplate?.templateRef\"\n                        [summaryTaskTemplate]=\"summaryTaskTemplate?.templateRef\"\n                        [taskClass]=\"taskClass\"\n                        [dependencies]=\"dependencies\"\n                        [hasChildren]=\"hasChildren\"\n                        [isTaskSelected]=\"isTaskSelected\"\n                        [kendoEventsOutsideAngular]=\"{\n                            click: handleTimelineClick,\n                            contextmenu: handleTimelineRightClick,\n                            dblclick: handleTimelineDblClick,\n                            mousedown: handleTimelineMouseDown\n                        }\"\n                        [scope]=\"this\"\n                    ></kendo-gantt-timeline>\n                </kendo-splitter-pane>\n            </kendo-splitter>\n        </div>\n        <kendo-gantt-toolbar\n            *ngIf=\"showToolbar('bottom')\"\n            [showAddTask]=\"toolbarSettings.addTaskTool === 'bottom' || toolbarSettings.addTaskTool === 'both'\"\n            [showViewSelector]=\"toolbarSettings.viewSelectorTool === 'bottom' || toolbarSettings.viewSelectorTool === 'both'\"\n            class=\"k-gantt-footer k-toolbar k-gantt-toolbar\"\n            position=\"bottom\"></kendo-gantt-toolbar>\n        <kendo-gantt-edit-dialog\n            *ngIf=\"showEditingDialog\"\n            [data]=\"data\">\n        </kendo-gantt-edit-dialog>\n        <kendo-dialog\n            *ngIf=\"showConfirmationDialog\"\n            [width]=\"575\"\n            [height]=\"170\"\n            [title]=\"getText('confirmationDialogTitle')\"\n            (close)=\"showConfirmationDialog = false;\">\n            <span>{{ getText('confirmationDialogContent') }}</span>\n            <kendo-dialog-actions layout=\"normal\">\n                <kendo-treelist-spacer></kendo-treelist-spacer>\n                <button kendoButton [primary]=\"true\" (click)=\"handleDeleteConfirmation()\">{{ getText('deleteButtonText') }}</button>\n                <button kendoButton (click)=\"showConfirmationDialog = false;\">{{ getText('cancelButtonText') }}</button>\n            </kendo-dialog-actions>\n        </kendo-dialog>\n   "
         }),
         __metadata("design:paramtypes", [TimelineViewService,
             ScrollSyncService,
@@ -3135,184 +3631,75 @@ var GanttComponent = /** @class */ (function () {
 /**
  * @hidden
  */
-var GanttTimelineComponent = /** @class */ (function () {
-    function GanttTimelineComponent(scrollSyncService, dependencyDomService, renderer, zone) {
-        var _this = this;
-        this.scrollSyncService = scrollSyncService;
+var TOUCH_ENABLED = new InjectionToken('gantt-touch-enabled');
+
+/**
+ * @hidden
+ */
+var GanttTasksTableBodyComponent = /** @class */ (function () {
+    function GanttTasksTableBodyComponent(dependencyDomService, mapper) {
         this.dependencyDomService = dependencyDomService;
-        this.renderer = renderer;
-        this.zone = zone;
-        this.hostClass = true;
-        this.dependencies = [];
-        this.subscriptions = new Subscription();
-        this.subscriptions.add(
-        // task changes indicates change in row content, number, height, etc.
-        this.dependencyDomService.taskChanges
-            .pipe(filter(function (args) { return isPresent(args.timelineRow); }), switchMap(function (args) { return _this.zone.onStable.pipe(take(1), map(function () { return args; })); }) // ensure the content is rendered
-        )
-            .subscribe(function (_a) {
-            var timelineRow = _a.timelineRow;
-            var timelineRowHeight = isDocumentAvailable() ? timelineRow.getBoundingClientRect().height : 0;
-            _this.renderer.setStyle(_this.timelineColumns.nativeElement, 'height', (_this.rows || []).length * timelineRowHeight + "px");
-        }));
+        this.mapper = mapper;
     }
-    GanttTimelineComponent.prototype.ngAfterViewInit = function () {
-        var timelineHeader = this.timelineHeaderWrap.nativeElement;
-        var rightContainer = this.timelineContent.nativeElement;
-        this.scrollSyncService.registerElement(rightContainer, 'timeline');
-        this.scrollSyncService.registerElement(timelineHeader, 'header');
-        this.dependencyDomService.registerContentContainer(this.tasksContainer.nativeElement);
-    };
-    GanttTimelineComponent.prototype.ngOnDestroy = function () {
-        this.subscriptions.unsubscribe();
-    };
-    GanttTimelineComponent.prototype.isNonWorking = function (item) {
-        return item.hasOwnProperty('isWorking') && !item.isWorking;
+    Object.defineProperty(GanttTasksTableBodyComponent.prototype, "timelineRow", {
+        set: function (timelineRow) {
+            // register the row value only when the first row is rendered
+            // with server-side data-binding, the rows rendering could be delayed
+            if (isPresent(timelineRow)) {
+                this.dependencyDomService.registerTimelineRow(timelineRow.nativeElement);
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    GanttTasksTableBodyComponent.prototype.isMileStone = function (task) {
+        return !this.hasChildren(task) && isEqual(this.mapper.extractFromTask(task, 'start'), this.mapper.extractFromTask(task, 'end'));
     };
     __decorate([
-        ViewChild('timelineContent', { static: true }),
-        __metadata("design:type", ElementRef)
-    ], GanttTimelineComponent.prototype, "timelineContent", void 0);
-    __decorate([
-        ViewChild('timelineColumns', { static: true }),
-        __metadata("design:type", ElementRef)
-    ], GanttTimelineComponent.prototype, "timelineColumns", void 0);
-    __decorate([
-        ViewChild('timelineHeaderWrap', { static: true }),
-        __metadata("design:type", ElementRef)
-    ], GanttTimelineComponent.prototype, "timelineHeaderWrap", void 0);
-    __decorate([
-        ViewChild('tasksContainer', { static: true }),
-        __metadata("design:type", ElementRef)
-    ], GanttTimelineComponent.prototype, "tasksContainer", void 0);
-    __decorate([
-        HostBinding('class.k-gantt-timeline'),
-        __metadata("design:type", Boolean)
-    ], GanttTimelineComponent.prototype, "hostClass", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Array)
-    ], GanttTimelineComponent.prototype, "rows", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Array)
-    ], GanttTimelineComponent.prototype, "slots", void 0);
+        ViewChild('timelineRow', { static: false }),
+        __metadata("design:type", ElementRef),
+        __metadata("design:paramtypes", [ElementRef])
+    ], GanttTasksTableBodyComponent.prototype, "timelineRow", null);
     __decorate([
         Input(),
         __metadata("design:type", Array)
-    ], GanttTimelineComponent.prototype, "groupSlots", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Number)
-    ], GanttTimelineComponent.prototype, "tableWidth", void 0);
+    ], GanttTasksTableBodyComponent.prototype, "rows", void 0);
     __decorate([
         Input(),
         __metadata("design:type", String)
-    ], GanttTimelineComponent.prototype, "activeView", void 0);
+    ], GanttTasksTableBodyComponent.prototype, "activeView", void 0);
     __decorate([
         Input(),
         __metadata("design:type", TemplateRef)
-    ], GanttTimelineComponent.prototype, "taskContentTemplate", void 0);
+    ], GanttTasksTableBodyComponent.prototype, "taskContentTemplate", void 0);
     __decorate([
         Input(),
         __metadata("design:type", TemplateRef)
-    ], GanttTimelineComponent.prototype, "taskTemplate", void 0);
+    ], GanttTasksTableBodyComponent.prototype, "taskTemplate", void 0);
     __decorate([
         Input(),
         __metadata("design:type", TemplateRef)
-    ], GanttTimelineComponent.prototype, "summaryTaskTemplate", void 0);
+    ], GanttTasksTableBodyComponent.prototype, "summaryTaskTemplate", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Function)
-    ], GanttTimelineComponent.prototype, "taskClass", void 0);
+    ], GanttTasksTableBodyComponent.prototype, "taskClass", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Function)
-    ], GanttTimelineComponent.prototype, "isTaskSelected", void 0);
+    ], GanttTasksTableBodyComponent.prototype, "hasChildren", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Function)
-    ], GanttTimelineComponent.prototype, "hasChildren", void 0);
+    ], GanttTasksTableBodyComponent.prototype, "isTaskSelected", void 0);
     __decorate([
         Input(),
-        __metadata("design:type", Array)
-    ], GanttTimelineComponent.prototype, "dependencies", void 0);
-    GanttTimelineComponent = __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 #timelineContent class=\"k-grid-content\">\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                        >\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                </svg>\n            </div>\n        </div>\n    "
-        }),
-        __metadata("design:paramtypes", [ScrollSyncService,
-            DependencyDomService,
-            Renderer2,
-            NgZone])
-    ], GanttTimelineComponent);
-    return GanttTimelineComponent;
-}());
-
-/**
- * @hidden
- */
-var GanttTasksTableBodyComponent = /** @class */ (function () {
-    function GanttTasksTableBodyComponent(dependencyDomService, mapper) {
-        this.dependencyDomService = dependencyDomService;
-        this.mapper = mapper;
-    }
-    Object.defineProperty(GanttTasksTableBodyComponent.prototype, "timelineRow", {
-        set: function (timelineRow) {
-            // register the row value only when the first row is rendered
-            // with server-side data-binding, the rows rendering could be delayed
-            if (isPresent(timelineRow)) {
-                this.dependencyDomService.registerTimelineRow(timelineRow.nativeElement);
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    GanttTasksTableBodyComponent.prototype.isMileStone = function (task) {
-        return !this.hasChildren(task) && isEqual(this.mapper.extractFromTask(task, 'start'), this.mapper.extractFromTask(task, 'end'));
-    };
-    __decorate([
-        ViewChild('timelineRow', { static: false }),
-        __metadata("design:type", ElementRef),
-        __metadata("design:paramtypes", [ElementRef])
-    ], GanttTasksTableBodyComponent.prototype, "timelineRow", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", Array)
-    ], GanttTasksTableBodyComponent.prototype, "rows", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], GanttTasksTableBodyComponent.prototype, "activeView", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", TemplateRef)
-    ], GanttTasksTableBodyComponent.prototype, "taskContentTemplate", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", TemplateRef)
-    ], GanttTasksTableBodyComponent.prototype, "taskTemplate", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", TemplateRef)
-    ], GanttTasksTableBodyComponent.prototype, "summaryTaskTemplate", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Function)
-    ], GanttTasksTableBodyComponent.prototype, "taskClass", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Function)
-    ], GanttTasksTableBodyComponent.prototype, "hasChildren", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Function)
-    ], GanttTasksTableBodyComponent.prototype, "isTaskSelected", void 0);
+        __metadata("design:type", Boolean)
+    ], GanttTasksTableBodyComponent.prototype, "renderDependencyDragClues", void 0);
     GanttTasksTableBodyComponent = __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\"\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    "
         }),
         __metadata("design:paramtypes", [DependencyDomService,
             MappingService])
@@ -3387,23 +3774,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');
@@ -3415,6 +3785,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;
@@ -3433,6 +3809,23 @@ 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();
+    };
     __decorate([
         HostBinding('class.k-task-wrap'),
         __metadata("design:type", Boolean)
@@ -3447,8 +3840,8 @@ var GanttTaskBase = /** @class */ (function () {
     ], GanttTaskBase.prototype, "dataItem", void 0);
     __decorate([
         Input(),
-        __metadata("design:type", Number)
-    ], GanttTaskBase.prototype, "index", void 0);
+        __metadata("design:type", Boolean)
+    ], GanttTaskBase.prototype, "renderDependencyDragClues", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Function)
@@ -3461,6 +3854,11 @@ var GanttTaskBase = /** @class */ (function () {
         Input(),
         __metadata("design:type", Function)
     ], GanttTaskBase.prototype, "taskClass", void 0);
+    __decorate([
+        HostBinding('style.left.px'),
+        __metadata("design:type", Number),
+        __metadata("design:paramtypes", [])
+    ], GanttTaskBase.prototype, "taskOffset", null);
     return GanttTaskBase;
 }());
 
@@ -3469,9 +3867,10 @@ var GanttTaskBase = /** @class */ (function () {
  */
 var GanttTaskComponent = /** @class */ (function (_super) {
     __extends(GanttTaskComponent, _super);
-    function GanttTaskComponent(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, editService) {
+    function GanttTaskComponent(editService, touchEnabled$$1, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
         var _this = _super.call(this, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) || this;
         _this.editService = editService;
+        _this.touchEnabled = touchEnabled$$1;
         return _this;
     }
     GanttTaskComponent_1 = GanttTaskComponent;
@@ -3497,14 +3896,14 @@ 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            [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    "
         }),
-        __metadata("design:paramtypes", [MappingService,
+        __param(1, Inject(TOUCH_ENABLED)),
+        __metadata("design:paramtypes", [EditService, Boolean, MappingService,
             TimelineViewService,
             DependencyDomService,
             OptionChangesService,
-            ChangeDetectorRef,
-            EditService])
+            ChangeDetectorRef])
     ], GanttTaskComponent);
     return GanttTaskComponent;
 }(GanttTaskBase));
@@ -3514,8 +3913,9 @@ var GanttTaskComponent = /** @class */ (function (_super) {
  */
 var GanttSummaryTaskComponent = /** @class */ (function (_super) {
     __extends(GanttSummaryTaskComponent, _super);
-    function GanttSummaryTaskComponent(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
+    function GanttSummaryTaskComponent(touchEnabled$$1, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
         var _this = _super.call(this, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) || this;
+        _this.touchEnabled = touchEnabled$$1;
         _this.summaryWrapperClass = true;
         return _this;
     }
@@ -3538,9 +3938,10 @@ 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            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        >\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    "
         }),
-        __metadata("design:paramtypes", [MappingService,
+        __param(0, Inject(TOUCH_ENABLED)),
+        __metadata("design:paramtypes", [Boolean, MappingService,
             TimelineViewService,
             DependencyDomService,
             OptionChangesService,
@@ -3554,8 +3955,9 @@ var GanttSummaryTaskComponent = /** @class */ (function (_super) {
  */
 var GanttMilestoneTaskComponent = /** @class */ (function (_super) {
     __extends(GanttMilestoneTaskComponent, _super);
-    function GanttMilestoneTaskComponent(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
+    function GanttMilestoneTaskComponent(touchEnabled$$1, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
         var _this = _super.call(this, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) || this;
+        _this.touchEnabled = touchEnabled$$1;
         _this.milestoneWrapperClass = true;
         return _this;
     }
@@ -3574,9 +3976,10 @@ 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            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        >\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    "
         }),
-        __metadata("design:paramtypes", [MappingService,
+        __param(0, Inject(TOUCH_ENABLED)),
+        __metadata("design:paramtypes", [Boolean, MappingService,
             TimelineViewService,
             DependencyDomService,
             OptionChangesService,
@@ -3916,23 +4319,6 @@ var ViewSelectorComponent = /** @class */ (function () {
     return ViewSelectorComponent;
 }());
 
-/**
- * The dependency type when two tasks are connected.
- *
- * The supported values are:
- * * `FF`&mdash;from 'finish' to 'finish'
- * * `FS`&mdash;from 'finish' to 'start'
- * * `SS`&mdash;from 'start' to 'start'
- * * `SF`&mdash;from 'start' to 'finish'
- */
-var DependencyType;
-(function (DependencyType) {
-    DependencyType[DependencyType["FF"] = 0] = "FF";
-    DependencyType[DependencyType["FS"] = 1] = "FS";
-    DependencyType[DependencyType["SF"] = 2] = "SF";
-    DependencyType[DependencyType["SS"] = 3] = "SS"; // task B can't start before task A starts
-})(DependencyType || (DependencyType = {}));
-
 /**
  * @hidden
  *
@@ -3943,6 +4329,9 @@ 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;
@@ -4089,6 +4478,37 @@ var getArrowEast = function (top, left, arrowSize) {
     });
     return points;
 };
+/**
+ * @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
+ */
+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
+ */
+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)
+    };
+};
 
 /**
  * Defines the size of the arrow that will be drawn at the end of each Gantt dependency.
@@ -4171,6 +4591,525 @@ var GanttDependencyDirective = /** @class */ (function () {
     return GanttDependencyDirective;
 }());
 
+/**
+ * @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 = __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;
+}());
+
+/**
+ * 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)
+        };
+    };
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], DependencyDragCreateDirective.prototype, "displayValidationTooltip", void 0);
+    DependencyDragCreateDirective = __decorate([
+        Directive({
+            selector: '[kendoGanttDependencyDragCreate]'
+        }),
+        __metadata("design:paramtypes", [GanttComponent,
+            NgZone,
+            Renderer2,
+            MappingService,
+            PopupService,
+            TimelineScrollService])
+    ], DependencyDragCreateDirective);
+    return DependencyDragCreateDirective;
+}());
+
+/**
+ * @hidden
+ */
+var ScrollDirection;
+(function (ScrollDirection) {
+    ScrollDirection[ScrollDirection["Backwards"] = -1] = "Backwards";
+    ScrollDirection[ScrollDirection["Forward"] = 1] = "Forward";
+})(ScrollDirection || (ScrollDirection = {}));
+/**
+ * @hidden
+ */
+var ScrollAxis;
+(function (ScrollAxis) {
+    ScrollAxis["Vertical"] = "scrollTop";
+    ScrollAxis["Horizontal"] = "scrollLeft";
+})(ScrollAxis || (ScrollAxis = {}));
+
+/**
+ * @hidden
+ *
+ * Checks if the beginning of the scrollable element is reached (top/left).
+ * Floors the top value.
+ */
+var isUpperLimitReached = function (element, axis) { return Math.floor(element[axis]) <= 0; };
+/**
+ * @hidden
+ *
+ * Checks if the end of the scrollable element is reached (bottom/right).
+ * Ceils the top value.
+ */
+var isBottomLimitReached = function (element, axis) {
+    var elementSize = axis === ScrollAxis.Horizontal ?
+        element.scrollWidth - element.clientWidth :
+        element.scrollHeight - element.clientHeight;
+    return Math.ceil(element[axis]) >= elementSize;
+};
+/**
+ * @hidden
+ *
+ * Scrolls the element in the given direction by the provided step in the provided scroll axis.
+ *
+ * If the targeted scroll incrementation doesn't yield any result due to device pixel ratio issues (https://github.com/dimitar-pechev/RenderingIndependentScrollOffsets#readme),
+ * increments the step with 1px and again attempts to change the scrollTop of the element, until the content is actually scrolled.
+ *
+ * Cuts the operation short after 20 unsuccessful attempts to prevent infinite loops in possible corner-case scenarios.
+ */
+var scrollElement = function (element, step, direction, scrollAxis) {
+    if (!(isPresent(element) && isDocumentAvailable())) {
+        return;
+    }
+    var initialScrollPosition = element[scrollAxis];
+    var currentStep = step;
+    var iterations = 0;
+    while (initialScrollPosition === element[scrollAxis] &&
+        !(direction === ScrollDirection.Backwards && isUpperLimitReached(element, scrollAxis)) &&
+        !(direction === ScrollDirection.Forward && isBottomLimitReached(element, scrollAxis)) &&
+        iterations < 20 // cut the operation short in 20 attempts - in case of a wild corner case
+    ) {
+        element[scrollAxis] += (currentStep * direction);
+        // try with a larger step if the current one doesn't update the scroll position successfully
+        currentStep += 1;
+        iterations += 1;
+    }
+};
+/**
+ * @hidden
+ *
+ * As client coordinates are not restricted to the range 0px - {viewportSize}px, but can have negative starting values or ending values greater than the viewport size,
+ * this function extracts the visible boundaries of the provided element - fall-backing to 0 when the top/left are below 0,
+ * and fall-backing to the actual visible size of the container for bottom/right.
+ */
+var getViewportBoundaries = function (element) {
+    var elementRect = element.getBoundingClientRect();
+    // if the beginning of the scrollable container is above/before the current viewport, fall-back to 0
+    var topLimit = Math.max(elementRect.top, 0);
+    var leftLimit = Math.max(elementRect.left, 0);
+    // if the end of the scrollable container is beneath/after the current viewport, fall-back to its client height
+    // add the distance from the start of the viewport to the beginning of the container to ensure scrolling bottom begins when the actual end of the container is reached
+    var bottomLimit = topLimit + Math.min(elementRect.bottom, element.clientHeight);
+    var rightLimit = leftLimit + Math.min(elementRect.right, element.clientWidth);
+    return {
+        top: topLimit,
+        bottom: bottomLimit,
+        left: leftLimit,
+        right: rightLimit
+    };
+};
+
+/**
+ * @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;
+        }
+    };
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], TimelineScrollableDirective.prototype, "scrollSettings", void 0);
+    TimelineScrollableDirective = __decorate([
+        Directive({
+            selector: '[kendoGanttTimelineScrollable]'
+        }),
+        __metadata("design:paramtypes", [ElementRef,
+            TimelineScrollService,
+            NgZone])
+    ], TimelineScrollableDirective);
+    return TimelineScrollableDirective;
+}());
+
 var TimelineDayViewComponent = /** @class */ (function (_super) {
     __extends(TimelineDayViewComponent, _super);
     function TimelineDayViewComponent(optionChangesService, dependencyDomService) {
@@ -4918,6 +5857,8 @@ var IMPORTED_MODULES = [
     ButtonsModule,
     DialogModule,
     EventsModule,
+    PopupModule,
+    DraggableModule,
     TabStripModule,
     GridModule,
     DropDownsModule
@@ -4950,6 +5891,7 @@ var DECLARATIONS = [
     FooterTemplateDirective,
     GanttExpandableDirective,
     GanttDependencyDirective,
+    DependencyDragCreateDirective,
     TimelineDayViewComponent,
     TimelineWeekViewComponent,
     TimelineMonthViewComponent,
@@ -4958,9 +5900,12 @@ var DECLARATIONS = [
     CustomMessagesComponent,
     LocalizedMessagesDirective,
     GanttAddTaskComponent,
+    DragValidationTooltipComponent,
+    TimelineScrollableDirective,
     DependenciesTableComponent,
     TaskFieldsComponent
 ];
+var ɵ0$3 = touchEnabled;
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
  * definition for the Gantt component.
@@ -5000,58 +5945,21 @@ var GanttModule = /** @class */ (function () {
             imports: IMPORTED_MODULES.slice(),
             declarations: DECLARATIONS.slice(),
             exports: DECLARATIONS.slice(),
+            entryComponents: [DragValidationTooltipComponent],
             providers: [{
                     provide: L10N_PREFIX,
                     useValue: 'kendo.gantt'
+                }, {
+                    provide: TOUCH_ENABLED,
+                    useValue: ɵ0$3
                 }]
         })
     ], GanttModule);
     return GanttModule;
 }());
 
-/**
- * @hidden
- */
-var PreventableEvent = /** @class */ (function () {
-    function PreventableEvent() {
-        this.prevented = false;
-    }
-    /**
-     * Prevents the default action for a specified event.
-     * In this way, the source component suppresses
-     * the built-in behavior that follows the event.
-     */
-    PreventableEvent.prototype.preventDefault = function () {
-        this.prevented = true;
-    };
-    /**
-     * Returns `true` if the event was prevented
-     * by any of its subscribers.
-     *
-     * @returns `true` if the default action was prevented.
-     * Otherwise, returns `false`.
-     */
-    PreventableEvent.prototype.isDefaultPrevented = function () {
-        return this.prevented;
-    };
-    return PreventableEvent;
-}());
-
-/**
- * Called every time a user leaves an edited cell.
- */
-var CellCloseEvent = /** @class */ (function (_super) {
-    __extends(CellCloseEvent, _super);
-    function CellCloseEvent(options) {
-        var _this = _super.call(this) || this;
-        Object.assign(_this, options);
-        return _this;
-    }
-    return CellCloseEvent;
-}(PreventableEvent));
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { MappingService, OptionChangesService, DependencyDomService, GanttDependencyDirective, GanttAddTaskComponent, DependenciesTableComponent, EditDialogComponent, EditService, TaskFieldsComponent, CustomMessagesComponent, GanttLocalizationService, LocalizedMessagesDirective, Messages, PreventableEvent, GanttHeaderTableBodyComponent, GanttMilestoneTaskComponent, GanttSummaryTaskComponent, GanttTaskBase, GanttTaskComponent, GanttTasksTableBodyComponent, ScrollSyncService, GanttTimelineComponent, TimelineBaseViewService, TimelineDayViewComponent, TimelineDayViewService, TimelineMonthViewComponent, TimelineMonthViewService, TimelineViewService, TimelineWeekViewComponent, TimelineWeekViewService, ViewBase, ToolbarComponent, ViewSelectorComponent, GanttComponent, GanttModule, GanttHierarchyBindingDirective, GanttFlatBindingDirective, GanttExpandableDirective, GanttTaskTemplateDirective, GanttTaskContentTemplateDirective, GanttSummaryTaskTemplateDirective, ToolbarTemplateDirective, SelectableDirective, DependencyType, CellCloseEvent, GanttColumnBase, GanttColumnComponent, GanttColumnGroupComponent, GanttSpanColumnComponent, CellTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ColumnMenuTemplateDirective, FilterCellTemplateDirective, FilterMenuTemplateDirective, EditTemplateDirective };
+export { MappingService, OptionChangesService, TOUCH_ENABLED, DependencyDomService, GanttDependencyDirective, DragValidationTooltipComponent, GanttAddTaskComponent, DependenciesTableComponent, EditDialogComponent, EditService, TaskFieldsComponent, CustomMessagesComponent, GanttLocalizationService, LocalizedMessagesDirective, Messages, PreventableEvent, GanttHeaderTableBodyComponent, GanttMilestoneTaskComponent, GanttSummaryTaskComponent, GanttTaskBase, GanttTaskComponent, GanttTasksTableBodyComponent, ScrollSyncService, TimelineScrollableDirective, TimelineScrollService, GanttTimelineComponent, TimelineBaseViewService, TimelineDayViewComponent, TimelineDayViewService, TimelineMonthViewComponent, TimelineMonthViewService, TimelineViewService, TimelineWeekViewComponent, TimelineWeekViewService, ViewBase, ToolbarComponent, ViewSelectorComponent, GanttComponent, GanttModule, GanttHierarchyBindingDirective, GanttFlatBindingDirective, GanttExpandableDirective, DependencyDragCreateDirective, GanttTaskTemplateDirective, GanttTaskContentTemplateDirective, GanttSummaryTaskTemplateDirective, ToolbarTemplateDirective, SelectableDirective, DependencyType, CellCloseEvent, GanttColumnBase, GanttColumnComponent, GanttColumnGroupComponent, GanttSpanColumnComponent, CellTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ColumnMenuTemplateDirective, FilterCellTemplateDirective, FilterMenuTemplateDirective, EditTemplateDirective };