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

package/dist/fesm2015/index.js

@@ -3,25 +3,26 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __metadata, __param } from 'tslib';
-import { Input, EventEmitter, Injectable, 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, EventEmitter, Injectable, 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, Subject, Subscription, fromEvent, 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 { FormArray, FormGroup, FormControl, Validators, 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 { FormArray, FormGroup, FormControl, Validators, 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 @@ const 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'
 };
@@ -634,6 +635,60 @@ const taskClassCallback = () => null;
  */
 const isSelected = () => 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
+ */
+class PreventableEvent {
+    constructor() {
+        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.
+     */
+    preventDefault() {
+        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`.
+     */
+    isDefaultPrevented() {
+        return this.prevented;
+    }
+}
+
+/**
+ * Called every time a user leaves an edited cell.
+ */
+class CellCloseEvent extends PreventableEvent {
+    constructor(options) {
+        super();
+        Object.assign(this, options);
+    }
+}
+
 /**
  * @hidden
  */
@@ -733,15 +788,34 @@ const isNumber = (contender) => typeof contender === 'number' && !isNaN(contende
  * @hidden
  */
 const isString = (contender) => 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.
+ */
+const getClosestTaskWrapper = (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.
+ */
+const isTaskWrapper = (contender, parentScope) => {
+    const 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.
  */
-const getClosestTaskIndex = (element, gantt) => {
-    const task = closestInScope(element, matchesClasses('k-task'), gantt);
+const getClosestTaskIndex = (element, parentScope) => {
+    const task = closestInScope(element, matchesClasses('k-task-wrap'), parentScope);
     if (!isPresent(task)) {
         return null;
     }
@@ -751,22 +825,133 @@ const getClosestTaskIndex = (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.
  */
-const isTask = (contender, gantt) => {
-    const task = closestInScope(contender, matchesClasses('k-task'), gantt);
+const isTask = (contender, parentScope) => {
+    const 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.
  */
-const isClearButton = (contender, gantt) => {
-    const clearButtonContainer = closestInScope(contender, matchesClasses('k-task-actions'), gantt);
+const isClearButton = (contender, parentScope) => {
+    const 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.
+ */
+const isDependencyDragClue = (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.
+ */
+const isDependencyDragStartClue = (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).
+ */
+const getDependencyTypeFromTargetTasks = (fromTaskClue, toTaskClue) => {
+    if (!isDependencyDragClue(fromTaskClue) || !isDependencyDragClue(toTaskClue)) {
+        return null;
+    }
+    const fromTaskType = isDependencyDragStartClue(fromTaskClue) ? 'S' : 'F';
+    const toTaskType = isDependencyDragStartClue(toTaskClue) ? 'S' : 'F';
+    const 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.
+ */
+const sameTaskClues = (fromTaskClue, toTaskClue, parentScope) => {
+    if (!isPresent(fromTaskClue) || !isPresent(toTaskClue)) {
+        return false;
+    }
+    const fromTaskWrapper = getClosestTaskWrapper(fromTaskClue, parentScope);
+    const 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.
+ */
+const fitToRange = (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.
+ */
+const areParentChild = (taskA, taskB) => {
+    let parentChildRelationship = false;
+    let taskAParent = taskA;
+    while (isPresent(taskAParent) && isPresent(taskAParent.data)) {
+        if (taskAParent.data === taskB.data) {
+            parentChildRelationship = true;
+            break;
+        }
+        taskAParent = taskAParent.parent;
+    }
+    let 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.
+ */
+const elementFromPoint = (clientX, clientY) => {
+    if (!isDocumentAvailable()) {
+        return null;
+    }
+    return document.elementFromPoint(clientX, clientY);
+};
 
 /**
  * @hidden
@@ -1419,6 +1604,61 @@ EditService = __decorate([
     __metadata("design:paramtypes", [MappingService])
 ], EditService);
 
+/**
+ * @hidden
+ *
+ * Notifies the timeline-scroll.directive to scroll into view to requested coordinates.
+ * The scrolling is performed based on client (viewport) coordinates.
+ */
+let TimelineScrollService = class TimelineScrollService {
+    /**
+     * @hidden
+     *
+     * Notifies the timeline-scroll.directive to scroll into view to requested coordinates.
+     * The scrolling is performed based on client (viewport) coordinates.
+     */
+    constructor() {
+        this.horizontalScroll = new Subject();
+        this.verticalScroll = new Subject();
+        this.scrollCancel = new Subject();
+    }
+    ngOnDestroy() {
+        this.horizontalScroll.complete();
+        this.verticalScroll.complete();
+        this.scrollCancel.complete();
+    }
+    requestHorizontalScroll(clientTop) {
+        this.horizontalScroll.next(clientTop);
+    }
+    requestVerticalScroll(clientLeft) {
+        this.verticalScroll.next(clientLeft);
+    }
+    requestScrollCancel() {
+        this.scrollCancel.next();
+    }
+};
+TimelineScrollService = __decorate([
+    Injectable()
+], TimelineScrollService);
+
+/**
+ * @hidden
+ *
+ * Needed to keep the Gantt's LocalizationService reference and be able to use it component's inside the TabStrip
+ */
+let GanttLocalizationService = class GanttLocalizationService {
+    constructor(localizationService) {
+        this.localizationService = localizationService;
+    }
+    get(token) {
+        return this.localizationService.get(token);
+    }
+};
+GanttLocalizationService = __decorate([
+    Injectable(),
+    __metadata("design:paramtypes", [LocalizationService])
+], GanttLocalizationService);
+
 /**
  * @hidden
  */
@@ -1677,84 +1917,322 @@ ToolbarTemplateDirective = __decorate([
 ], ToolbarTemplateDirective);
 
 /**
- * The base class for the column components of the Gantt.
+ * @hidden
  */
-class ViewBase {
+let GanttTimelineComponent = class GanttTimelineComponent {
+    constructor(scrollSyncService, dependencyDomService, renderer, zone) {
+        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(args => isPresent(args.timelineRow)), switchMap(args => this.zone.onStable.pipe(take(1), map(() => args))) // ensure the content is rendered
+        )
+            .subscribe(({ timelineRow }) => {
+            const timelineRowHeight = isDocumentAvailable() ? timelineRow.getBoundingClientRect().height : 0;
+            this.renderer.setStyle(this.timelineColumns.nativeElement, 'height', `${(this.rows || []).length * timelineRowHeight}px`);
+        }));
+    }
     /**
-     *
-     * @hidden
+     * Specifies whether the draggable will attach or detach its pointer event listeners.
      */
-    constructor(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;
+    get draggableEnabled() {
+        return this.renderDependencyDragClues;
     }
-    ngOnChanges(changes) {
-        if (anyChanged(['slotWidth'], changes)) {
-            this.optionChangesService.notifyColumnChanges();
-            this.dependencyDomService.notifyChanges();
-        }
+    ngAfterViewInit() {
+        const timelineHeader = this.timelineHeaderWrap.nativeElement;
+        const rightContainer = this.timelineContent.nativeElement;
+        this.scrollSyncService.registerElement(rightContainer, 'timeline');
+        this.scrollSyncService.registerElement(timelineHeader, 'header');
+        this.dependencyDomService.registerContentContainer(this.tasksContainer.nativeElement);
     }
-}
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], ViewBase.prototype, "slotWidth", void 0);
-
-/**
- * @hidden
- */
-const getEditItem = (dataItem, data, mapper) => {
-    const treeListDataItem = data.find(item => mapper.extractFromTask(item.data, 'id') === mapper.extractFromTask(dataItem, 'id'));
-    return mapPath(treeListDataItem);
-};
-const mapPath = (item) => ({
-    dataItem: item.data,
-    parent: item.parent.data ? mapPath(item.parent) : null
-});
-
-/**
- * @hidden
- *
- * Needed to keep the Gantt's LocalizationService reference and be able to use it component's inside the TabStrip
- */
-let GanttLocalizationService = class GanttLocalizationService {
-    constructor(localizationService) {
-        this.localizationService = localizationService;
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
     }
-    get(token) {
-        return this.localizationService.get(token);
+    isNonWorking(item) {
+        return item.hasOwnProperty('isWorking') && !item.isWorking;
     }
 };
-GanttLocalizationService = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [LocalizationService])
-], GanttLocalizationService);
-
-var GanttComponent_1;
-const TREELIST_GROUP_COLUMNS_CLASS = 'k-gantt-treelist-nested-columns';
-const DEFAULT_VIEW = 'week';
-/**
- * Represents the Kendo UI Gantt component for Angular.
- *
- * @example
- * ```ts-preview
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-gantt
- *            [style.height.px]="500"
- *            [kendoGanttHierarchyBinding]="data"
- *            childrenField="subtasks"
- *            [dependencies]="dependencies">
- *            <kendo-gantt-column
- *                field="title"
- *                title="Task"
+__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)
+], 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: `
+        <div class="k-timeline k-grid k-widget">
+            <div class="k-grid-header">
+                <div #timelineHeaderWrap class="k-grid-header-wrap">
+                    <table
+                        role="presentation"
+                        [style.width.px]="tableWidth"
+                    >
+                        <tbody
+                            kendoGanttHeaderTableBody
+                            [groupSlots]="groupSlots"
+                            [slots]="slots">
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div
+                #timelineContent
+                class="k-grid-content"
+                kendoGanttTimelineScrollable
+                [scrollSettings]="dragScrollSettings"
+                kendoDraggable
+                [enableDrag]="draggableEnabled"
+                (kendoPress)="timelineContainerPress.emit($event)"
+                (kendoDrag)="timelineContainerDrag.emit($event)"
+                (kendoRelease)="timelineContainerRelease.emit($event)"
+            >
+                <div class="k-gantt-tables">
+                    <table
+                        class="k-gantt-rows"
+                        [style.width.px]="tableWidth"
+                        role="presentation"
+                    >
+                        <tbody>
+                            <tr *ngFor="let item of rows; let i = index;"
+                                [class.k-alt]="i % 2"
+                            >
+                                <td></td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <table
+                        #timelineColumns
+                        class="k-gantt-columns"
+                        role="presentation"
+                        [style.width.px]="tableWidth"
+                    >
+                        <colgroup>
+                            <col *ngFor="let item of slots">
+                        </colgroup>
+
+                        <tbody>
+                            <tr>
+                                <td *ngFor="let item of slots"
+                                    [class.k-nonwork-hour]="isNonWorking(item)"
+                                >
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <table
+                        #tasksContainer
+                        class="k-gantt-tasks"
+                        role="presentation"
+                        style="border-collapse: collapse;"
+                        [style.width.px]="tableWidth"
+                    >
+                        <tbody
+                            kendoGanttTasksTableBody
+                            [rows]="rows"
+                            [activeView]="activeView"
+                            [taskContentTemplate]="taskContentTemplate"
+                            [taskTemplate]="taskTemplate"
+                            [summaryTaskTemplate]="summaryTaskTemplate"
+                            [taskClass]="taskClass"
+                            [hasChildren]="hasChildren"
+                            [isTaskSelected]="isTaskSelected"
+                            [renderDependencyDragClues]="renderDependencyDragClues"
+                        >
+                        </tbody>
+                    </table>
+                </div>
+                <svg class="k-gantt-dependencies-svg">
+                    <polyline
+                        *ngFor="let dependency of dependencies"
+                        kendoGanttDependency
+                        [dependency]="dependency"
+                    />
+                    <polyline #dependencyDragCreatePolyline />
+                </svg>
+
+                <!-- 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 -->
+                <ng-container #dragPopupContainer></ng-container>
+            </div>
+        </div>
+    `
+    }),
+    __metadata("design:paramtypes", [ScrollSyncService,
+        DependencyDomService,
+        Renderer2,
+        NgZone])
+], GanttTimelineComponent);
+
+/**
+ * The base class for the column components of the Gantt.
+ */
+class ViewBase {
+    /**
+     *
+     * @hidden
+     */
+    constructor(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;
+    }
+    ngOnChanges(changes) {
+        if (anyChanged(['slotWidth'], changes)) {
+            this.optionChangesService.notifyColumnChanges();
+            this.dependencyDomService.notifyChanges();
+        }
+    }
+}
+__decorate([
+    Input(),
+    __metadata("design:type", Number)
+], ViewBase.prototype, "slotWidth", void 0);
+
+/**
+ * @hidden
+ */
+const getEditItem = (dataItem, data, mapper) => {
+    const treeListDataItem = data.find(item => mapper.extractFromTask(item.data, 'id') === mapper.extractFromTask(dataItem, 'id'));
+    return mapPath(treeListDataItem);
+};
+const mapPath = (item) => ({
+    dataItem: item.data,
+    parent: item.parent.data ? mapPath(item.parent) : null
+});
+
+var GanttComponent_1;
+const TREELIST_GROUP_COLUMNS_CLASS = 'k-gantt-treelist-nested-columns';
+const DEFAULT_VIEW = 'week';
+const DEFAULT_DRAG_SCROLL_SETTINGS = {
+    enabled: true,
+    step: 3,
+    interval: 1,
+    threshold: 10
+};
+/**
+ * Represents the Kendo UI Gantt component for Angular.
+ *
+ * @example
+ * ```ts-preview
+ * _@Component({
+ *    selector: 'my-app',
+ *    template: `
+ *        <kendo-gantt
+ *            [style.height.px]="500"
+ *            [kendoGanttHierarchyBinding]="data"
+ *            childrenField="subtasks"
+ *            [dependencies]="dependencies">
+ *            <kendo-gantt-column
+ *                field="title"
+ *                title="Task"
  *                [width]="200"
  *                [expandable]="true"></kendo-gantt-column>
  *            <kendo-gantt-column
@@ -1824,11 +2302,22 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         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.
          *
@@ -1949,6 +2438,11 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
          * 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.
@@ -2005,6 +2499,15 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
          * 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
          *
@@ -2021,6 +2524,7 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         this.showConfirmationDialog = false;
         this._columns = new QueryList();
         this._data = [];
+        this._dragScrollSettings = Object.assign({}, DEFAULT_DRAG_SCROLL_SETTINGS);
         this._timelinePaneOptions = Object.assign({}, DEFAULT_TIMELINE_PANE_SETTINGS);
         this._treeListPaneOptions = Object.assign({}, DEFAULT_TREELIST_PANE_SETTINGS);
         this._rowClass = rowClassCallback;
@@ -2236,6 +2740,17 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
     get taskIdField() {
         return this.mapper.taskFields.id;
     }
+    /**
+     * 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 dragScrollSettings(settings) {
+        this._dragScrollSettings = Object.assign({}, DEFAULT_DRAG_SCROLL_SETTINGS, settings);
+    }
+    get dragScrollSettings() {
+        return this._dragScrollSettings;
+    }
     /**
      * @hidden
      */
@@ -2656,11 +3171,60 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         const loadedItems = this.renderedTreeListItems || [];
         return loadedItems.find(isSelectedCallback);
     }
+    defaultValidateNewDependencyCallback(dependency) {
+        const fromTaskId = this.mapper.extractFromDependency(dependency, 'fromId');
+        const toTaskId = this.mapper.extractFromDependency(dependency, 'toId');
+        const fromTask = this.treeList.view.data.find(task => this.mapper.extractFromTask(task.data, 'id') === fromTaskId);
+        const toTask = this.treeList.view.data.find(task => 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;
+        }
+        const tasksDependentOnOneAnother = this.dependencies.some(current => {
+            const currentFromId = this.mapper.extractFromDependency(current, 'fromId');
+            const 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;
+        }
+        const fromTaskStart = this.mapper.extractFromTask(fromTask.data, 'start');
+        const fromTaskEnd = this.mapper.extractFromTask(fromTask.data, 'end');
+        const toTaskStart = this.mapper.extractFromTask(toTask.data, 'start');
+        const 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;
+        }
+    }
 };
 __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)
@@ -2719,6 +3283,10 @@ __decorate([
     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)
@@ -2818,6 +3386,11 @@ __decorate([
     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)
@@ -2857,7 +3430,11 @@ __decorate([
 __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "taskAdd", void 0);
+], GanttComponent.prototype, "taskAdd", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], GanttComponent.prototype, "dependencyAdd", void 0);
 __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
@@ -2933,7 +3510,8 @@ GanttComponent = GanttComponent_1 = __decorate([
             DependencyDomService,
             MappingService,
             OptionChangesService,
-            EditService
+            EditService,
+            TimelineScrollService
         ],
         template: `
         <ng-container kendoGanttLocalizedMessages
@@ -3248,6 +3826,8 @@ GanttComponent = GanttComponent_1 = __decorate([
                     [scrollable]="false">
                     <kendo-gantt-timeline
                         *ngIf="views && views.length"
+                        [renderDependencyDragClues]="renderDependencyDragClues"
+                        [dragScrollSettings]="dragScrollSettings"
                         [rows]="renderedTreeListItems"
                         [slots]="timelineSlots"
                         [groupSlots]="timelineGroupSlots"
@@ -3311,199 +3891,7 @@ GanttComponent = GanttComponent_1 = __decorate([
 /**
  * @hidden
  */
-let GanttTimelineComponent = class GanttTimelineComponent {
-    constructor(scrollSyncService, dependencyDomService, renderer, zone) {
-        this.scrollSyncService = scrollSyncService;
-        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(args => isPresent(args.timelineRow)), switchMap(args => this.zone.onStable.pipe(take(1), map(() => args))) // ensure the content is rendered
-        )
-            .subscribe(({ timelineRow }) => {
-            const timelineRowHeight = isDocumentAvailable() ? timelineRow.getBoundingClientRect().height : 0;
-            this.renderer.setStyle(this.timelineColumns.nativeElement, 'height', `${(this.rows || []).length * timelineRowHeight}px`);
-        }));
-    }
-    ngAfterViewInit() {
-        const timelineHeader = this.timelineHeaderWrap.nativeElement;
-        const rightContainer = this.timelineContent.nativeElement;
-        this.scrollSyncService.registerElement(rightContainer, 'timeline');
-        this.scrollSyncService.registerElement(timelineHeader, 'header');
-        this.dependencyDomService.registerContentContainer(this.tasksContainer.nativeElement);
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    isNonWorking(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([
-    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)
-], 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", Function)
-], GanttTimelineComponent.prototype, "hasChildren", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], GanttTimelineComponent.prototype, "dependencies", void 0);
-GanttTimelineComponent = __decorate([
-    Component({
-        selector: 'kendo-gantt-timeline',
-        template: `
-        <div class="k-timeline k-grid k-widget">
-            <div class="k-grid-header">
-                <div #timelineHeaderWrap class="k-grid-header-wrap">
-                    <table
-                        role="presentation"
-                        [style.width.px]="tableWidth"
-                    >
-                        <tbody
-                            kendoGanttHeaderTableBody
-                            [groupSlots]="groupSlots"
-                            [slots]="slots">
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-            <div #timelineContent class="k-grid-content">
-                <div class="k-gantt-tables">
-                    <table
-                        class="k-gantt-rows"
-                        [style.width.px]="tableWidth"
-                        role="presentation"
-                    >
-                        <tbody>
-                            <tr *ngFor="let item of rows; let i = index;"
-                                [class.k-alt]="i % 2"
-                            >
-                                <td></td>
-                            </tr>
-                        </tbody>
-                    </table>
-
-                    <table
-                        #timelineColumns
-                        class="k-gantt-columns"
-                        role="presentation"
-                        [style.width.px]="tableWidth"
-                    >
-                        <colgroup>
-                            <col *ngFor="let item of slots">
-                        </colgroup>
-
-                        <tbody>
-                            <tr>
-                                <td *ngFor="let item of slots"
-                                    [class.k-nonwork-hour]="isNonWorking(item)"
-                                >
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-
-                    <table
-                        #tasksContainer
-                        class="k-gantt-tasks"
-                        role="presentation"
-                        style="border-collapse: collapse;"
-                        [style.width.px]="tableWidth"
-                    >
-                        <tbody
-                            kendoGanttTasksTableBody
-                            [rows]="rows"
-                            [activeView]="activeView"
-                            [taskContentTemplate]="taskContentTemplate"
-                            [taskTemplate]="taskTemplate"
-                            [summaryTaskTemplate]="summaryTaskTemplate"
-                            [taskClass]="taskClass"
-                            [hasChildren]="hasChildren"
-                            [isTaskSelected]="isTaskSelected"
-                        >
-                        </tbody>
-                    </table>
-                </div>
-                <svg class="k-gantt-dependencies-svg">
-                    <polyline
-                        *ngFor="let dependency of dependencies"
-                        kendoGanttDependency
-                        [dependency]="dependency"
-                    />
-                </svg>
-            </div>
-        </div>
-    `
-    }),
-    __metadata("design:paramtypes", [ScrollSyncService,
-        DependencyDomService,
-        Renderer2,
-        NgZone])
-], GanttTimelineComponent);
+const TOUCH_ENABLED = new InjectionToken('gantt-touch-enabled');
 
 /**
  * @hidden
@@ -3561,6 +3949,10 @@ __decorate([
     Input(),
     __metadata("design:type", Function)
 ], GanttTasksTableBodyComponent.prototype, "isTaskSelected", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttTasksTableBodyComponent.prototype, "renderDependencyDragClues", void 0);
 GanttTasksTableBodyComponent = __decorate([
     Component({
         selector: '[kendoGanttTasksTableBody]',
@@ -3573,7 +3965,8 @@ GanttTasksTableBodyComponent = __decorate([
                     [activeView]="activeView"
                     [taskClass]="taskClass"
                     [isSelected]="isTaskSelected"
-                    [index]="index"
+                    [attr.data-task-index]="index"
+                    [renderDependencyDragClues]="renderDependencyDragClues"
                 >
                 </kendo-gantt-milestone-task>
                 <ng-template #task>
@@ -3584,7 +3977,8 @@ GanttTasksTableBodyComponent = __decorate([
                         [activeView]="activeView"
                         [taskClass]="taskClass"
                         [isSelected]="isTaskSelected"
-                        [index]="index"
+                        [attr.data-task-index]="index"
+                        [renderDependencyDragClues]="renderDependencyDragClues"
                     >
                     </kendo-gantt-summary-task>
                     <kendo-gantt-task
@@ -3595,7 +3989,8 @@ GanttTasksTableBodyComponent = __decorate([
                         [activeView]="activeView"
                         [taskClass]="taskClass"
                         [isSelected]="isTaskSelected"
-                        [index]="index"
+                        [attr.data-task-index]="index"
+                        [renderDependencyDragClues]="renderDependencyDragClues"
                     >
                     </kendo-gantt-task>
                 </ng-template>
@@ -3666,29 +4061,18 @@ class GanttTaskBase {
     get slotWidth() {
         return this.viewService.options.slotWidth;
     }
-    ngOnChanges(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();
-        }
-    }
-    ngOnDestroy() {
-        if (isPresent(this.dataItem)) {
-            this.dependencyDomService.unregisterTask(this.dataItem);
-        }
-        this.viewChangesSubscription.unsubscribe();
-    }
     get taskWidth() {
         const itemDuration = this.mapper.extractFromTask(this.dataItem, 'end') - this.mapper.extractFromTask(this.dataItem, 'start');
         const durationInSlotUnits = itemDuration / this.slotUnitDuration;
         const width = durationInSlotUnits * this.slotWidth;
         return width;
     }
+    /**
+     * 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 taskOffset() {
         const timeAfterViewStart = this.mapper.extractFromTask(this.dataItem, 'start') - this.viewService.viewStart;
         const offsetInSlotUnits = timeAfterViewStart / this.slotUnitDuration;
@@ -3700,6 +4084,23 @@ class GanttTaskBase {
         // fall-back to 0 in case no completionRatio is provided
         return isNumber(overlayWidth) ? overlayWidth : 0;
     }
+    ngOnChanges(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();
+        }
+    }
+    ngOnDestroy() {
+        if (isPresent(this.dataItem)) {
+            this.dependencyDomService.unregisterTask(this.dataItem);
+        }
+        this.viewChangesSubscription.unsubscribe();
+    }
 }
 __decorate([
     HostBinding('class.k-task-wrap'),
@@ -3715,8 +4116,8 @@ __decorate([
 ], 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)
@@ -3729,15 +4130,21 @@ __decorate([
     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);
 
 var GanttTaskComponent_1;
 /**
  * @hidden
  */
 let GanttTaskComponent = GanttTaskComponent_1 = class GanttTaskComponent extends GanttTaskBase {
-    constructor(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, editService) {
+    constructor(editService, touchEnabled$$1, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
         super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr);
         this.editService = editService;
+        this.touchEnabled = touchEnabled$$1;
     }
     onTaskDelete() {
         this.editService.dataItem = this.dataItem;
@@ -3767,9 +4174,7 @@ GanttTaskComponent = GanttTaskComponent_1 = __decorate([
             class="k-task k-task-single"
             [ngClass]="taskClass(dataItem)"
             [style.width.px]="taskWidth"
-            [style.left.px]="taskOffset"
             [attr.title]="mapper.extractFromTask(dataItem, 'title')"
-            [attr.data-task-index]="index"
             [class.k-state-selected]="isSelected(dataItem)"
         >
             <ng-container *ngIf="!taskTemplate">
@@ -3809,14 +4214,26 @@ GanttTaskComponent = GanttTaskComponent_1 = __decorate([
             >
             </ng-template>
         </div>
+        <ng-container *ngIf="renderDependencyDragClues">
+            <div
+                class="k-task-dot k-task-start k-touch-action-none"
+                [class.k-display-block]="touchEnabled"
+            >
+            </div>
+            <div
+                class="k-task-dot k-task-end k-touch-action-none"
+                [class.k-display-block]="touchEnabled"
+            >
+            </div>
+        </ng-container>
     `
     }),
-    __metadata("design:paramtypes", [MappingService,
+    __param(1, Inject(TOUCH_ENABLED)),
+    __metadata("design:paramtypes", [EditService, Boolean, MappingService,
         TimelineViewService,
         DependencyDomService,
         OptionChangesService,
-        ChangeDetectorRef,
-        EditService])
+        ChangeDetectorRef])
 ], GanttTaskComponent);
 
 var GanttSummaryTaskComponent_1;
@@ -3824,8 +4241,9 @@ var GanttSummaryTaskComponent_1;
  * @hidden
  */
 let GanttSummaryTaskComponent = GanttSummaryTaskComponent_1 = class GanttSummaryTaskComponent extends GanttTaskBase {
-    constructor(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
+    constructor(touchEnabled$$1, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
         super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr);
+        this.touchEnabled = touchEnabled$$1;
         this.summaryWrapperClass = true;
     }
 };
@@ -3852,9 +4270,7 @@ GanttSummaryTaskComponent = GanttSummaryTaskComponent_1 = __decorate([
             class="k-task k-task-summary"
             [ngClass]="taskClass(dataItem)"
             [style.width.px]="taskWidth"
-            [style.left.px]="taskOffset"
             [attr.title]="mapper.extractFromTask(dataItem, 'title')"
-            [attr.data-task-index]="index"
             [class.k-state-selected]="isSelected(dataItem)"
         >
             <div *ngIf="!template; else summaryTemplate"
@@ -3876,9 +4292,22 @@ GanttSummaryTaskComponent = GanttSummaryTaskComponent_1 = __decorate([
             >
             </ng-template>
         </div>
+        <ng-container *ngIf="renderDependencyDragClues">
+            <div
+                class="k-task-dot k-task-start k-touch-action-none"
+                [class.k-display-block]="touchEnabled"
+            >
+            </div>
+            <div
+                class="k-task-dot k-task-end k-touch-action-none"
+                [class.k-display-block]="touchEnabled"
+            >
+            </div>
+        </ng-container>
     `
     }),
-    __metadata("design:paramtypes", [MappingService,
+    __param(0, Inject(TOUCH_ENABLED)),
+    __metadata("design:paramtypes", [Boolean, MappingService,
         TimelineViewService,
         DependencyDomService,
         OptionChangesService,
@@ -3890,8 +4319,9 @@ var GanttMilestoneTaskComponent_1;
  * @hidden
  */
 let GanttMilestoneTaskComponent = GanttMilestoneTaskComponent_1 = class GanttMilestoneTaskComponent extends GanttTaskBase {
-    constructor(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
+    constructor(touchEnabled$$1, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
         super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr);
+        this.touchEnabled = touchEnabled$$1;
         this.milestoneWrapperClass = true;
     }
 };
@@ -3913,15 +4343,26 @@ GanttMilestoneTaskComponent = GanttMilestoneTaskComponent_1 = __decorate([
             #task
             class="k-task k-task-milestone"
             [ngClass]="taskClass(dataItem)"
-            [style.left.px]="taskOffset"
             [attr.title]="mapper.extractFromTask(dataItem, 'title')"
             [class.k-state-selected]="isSelected(dataItem)"
-            [attr.data-task-index]="index"
         >
         </div>
+        <ng-container *ngIf="renderDependencyDragClues">
+            <div
+                class="k-task-dot k-task-start k-touch-action-none"
+                [class.k-display-block]="touchEnabled"
+            >
+            </div>
+            <div
+                class="k-task-dot k-task-end k-touch-action-none"
+                [class.k-display-block]="touchEnabled"
+            >
+            </div>
+        </ng-container>
     `
     }),
-    __metadata("design:paramtypes", [MappingService,
+    __param(0, Inject(TOUCH_ENABLED)),
+    __metadata("design:paramtypes", [Boolean, MappingService,
         TimelineViewService,
         DependencyDomService,
         OptionChangesService,
@@ -4254,23 +4695,6 @@ ViewSelectorComponent = __decorate([
     __metadata("design:paramtypes", [LocalizationService])
 ], 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
  *
@@ -4281,6 +4705,9 @@ const getOffsetRelativeToParent = (element, targetParent) => {
         top: 0,
         left: 0
     };
+    if (!targetParent.contains(element)) {
+        return offset;
+    }
     let offsetParent = element;
     while (offsetParent && offsetParent !== targetParent) {
         offset.top += offsetParent.offsetTop;
@@ -4427,6 +4854,37 @@ const getArrowEast = (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
+ */
+const clientToOffsetCoords = (clientLeft, clientTop, offsetContainer) => {
+    // client (viewport) coordinates of the target container
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#value
+    const 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
+ */
+const getElementClientCenterCoords = (element) => {
+    // client (viewport) coordinates of the targeted element
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#value
+    const { left, top, width, height } = element.getBoundingClientRect();
+    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.
@@ -4502,6 +4960,540 @@ GanttDependencyDirective = __decorate([
         DependencyDomService])
 ], GanttDependencyDirective);
 
+/**
+ * @hidden
+ */
+let DragValidationTooltipComponent = class DragValidationTooltipComponent {
+    /**
+     * @hidden
+     */
+    constructor() {
+        /**
+         * 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: `
+        <div
+            class="k-tooltip k-gantt-tooltip-validation"
+            [class.k-gantt-tooltip-valid]="showValidityStatus && isValid"
+            [class.k-gantt-tooltip-invalid]="showValidityStatus && !isValid"
+        >
+            <div class="k-gantt-tooltip-validation-row">
+                <span class="k-gantt-tooltip-validation-label">From:</span>
+                <span class="k-gantt-tooltip-validation-value">{{ fromTaskName }}</span>
+            </div>
+            <div class="k-gantt-tooltip-validation-row">
+                <span class="k-gantt-tooltip-validation-label">To:</span>
+                <span class="k-gantt-tooltip-validation-value">{{ toTaskName }}</span>
+            </div>
+        </div>
+    `,
+        styles: [`
+        .k-gantt-tooltip-validation {
+            max-width: 200px;
+            display: block;
+        }
+        .k-gantt-tooltip-validation::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 4px;
+            height: 100%;
+            background: #656565;
+        }
+        .k-gantt-tooltip-validation.k-gantt-tooltip-valid::before {
+            background: #37B400;
+        }
+        .k-gantt-tooltip-validation.k-gantt-tooltip-invalid::before {
+            background: #F31700;
+        }
+        .k-gantt-tooltip-validation-row {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .k-gantt-tooltip-validation-label {
+            display: inline-flex;
+            width: 50px;
+        }
+        .k-gantt-tooltip-validation-value {
+            font-weight: bold;
+        }
+    `]
+    })
+], 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.
+ */
+const 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.
+ */
+const 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.
+ */
+const TASK_WRAPPER_DRAG_CLASS = 'k-origin';
+/**
+ * Use 20px margin between the pointer and the popup.
+ * Could be made user-configurable if there's demand.
+ */
+const DEFAULT_POPUP_VERTICAL_MARGIN = 20;
+/**
+ * A directive which enables the creation of new dependencies via dragging.
+ */
+let DependencyDragCreateDirective = class DependencyDragCreateDirective {
+    constructor(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;
+    }
+    get container() {
+        if (!isPresent(this.gantt.timeline) || !isPresent(this.gantt.timeline.timelineContent)) {
+            return null;
+        }
+        return this.gantt.timeline.timelineContent.nativeElement;
+    }
+    get polyline() {
+        if (!isPresent(this.gantt.timeline) || !isPresent(this.gantt.timeline.dependencyDragCreatePolyline)) {
+            return null;
+        }
+        return this.gantt.timeline.dependencyDragCreatePolyline.nativeElement;
+    }
+    get popupContainer() {
+        if (!isPresent(this.gantt.timeline) || !isPresent(this.gantt.timeline.dragPopupContainer)) {
+            return null;
+        }
+        return this.gantt.timeline.dragPopupContainer;
+    }
+    ngAfterViewInit() {
+        this.subscribeDraggable();
+        this.addScrollListener();
+    }
+    ngOnDestroy() {
+        this.unsubscribeDraggable();
+        this.removeScrollListener();
+        this.fromTaskClue = null;
+        this.cancelScroll();
+        this.closeDragPopup();
+    }
+    subscribeDraggable() {
+        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)));
+    }
+    unsubscribeDraggable() {
+        if (isPresent(this.dragSubscriptions)) {
+            this.dragSubscriptions.unsubscribe();
+            this.dragSubscriptions = null;
+        }
+    }
+    handlePress({ clientX, clientY }) {
+        // using `originalEvent.target` is not reliable under mobile devices with the current implementation of the draggable, so use this instead
+        const 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
+            const 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);
+        }
+    }
+    handleDrag({ clientX, 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)
+            const 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);
+            }
+        }
+    }
+    handleRelease({ clientX, 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
+        const target = elementFromPoint(clientX, clientY);
+        if (isDependencyDragClue(target) && !sameTaskClues(this.fromTaskClue, target, this.container)) {
+            this.zone.run(() => {
+                const fromTaskClue = this.fromTaskClue;
+                const toTaskClue = target;
+                const fromTask = this.gantt.renderedTreeListItems[getClosestTaskIndex(fromTaskClue, this.container)];
+                const toTask = this.gantt.renderedTreeListItems[getClosestTaskIndex(toTaskClue, this.container)];
+                const dependencyType = getDependencyTypeFromTargetTasks(fromTaskClue, toTaskClue);
+                const { fromId, toId, type } = this.mapper.dependencyFields;
+                this.gantt.dependencyAdd.emit({
+                    fromTask: fromTask,
+                    toTask: toTask,
+                    type: dependencyType,
+                    isValid: this.gantt.validateNewDependency({
+                        [fromId]: this.mapper.extractFromTask(fromTask, 'id'),
+                        [toId]: this.mapper.extractFromTask(toTask, 'id'),
+                        [type]: dependencyType
+                    })
+                });
+            });
+        }
+        this.clearPolyline();
+        this.removeDragStartClasses(this.fromTaskClue);
+        this.fromTaskClue = null;
+        this.cancelScroll();
+        this.closeDragPopup();
+    }
+    updatePolyline(start, end) {
+        const points = `${start.left},${start.top} ${end.left},${end.top}`;
+        this.renderer.setAttribute(this.polyline, 'points', points);
+    }
+    clearPolyline() {
+        this.renderer.removeAttribute(this.polyline, 'points');
+    }
+    assignDragStartClasses(dragClue) {
+        if (!isPresent(dragClue)) {
+            return;
+        }
+        this.renderer.addClass(this.container, USER_SELECT_NONE_CLASS);
+        this.renderer.addClass(dragClue, DRAG_CLUE_HOVER_CLASS);
+        const taskWrapper = getClosestTaskWrapper(dragClue, this.container);
+        if (isPresent(taskWrapper)) {
+            this.renderer.addClass(taskWrapper, TASK_WRAPPER_DRAG_CLASS);
+        }
+    }
+    removeDragStartClasses(dragClue) {
+        if (!isPresent(dragClue)) {
+            return;
+        }
+        this.renderer.removeClass(this.container, USER_SELECT_NONE_CLASS);
+        this.renderer.removeClass(dragClue, DRAG_CLUE_HOVER_CLASS);
+        const taskWrapper = getClosestTaskWrapper(dragClue, this.container);
+        if (isPresent(taskWrapper)) {
+            this.renderer.removeClass(taskWrapper, TASK_WRAPPER_DRAG_CLASS);
+        }
+    }
+    scrollPointIntoView({ left, top }) {
+        this.timelineScrollService.requestScrollCancel();
+        this.timelineScrollService.requestHorizontalScroll(left);
+        this.timelineScrollService.requestVerticalScroll(top);
+    }
+    cancelScroll() {
+        this.timelineScrollService.requestScrollCancel();
+    }
+    addScrollListener() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        this.zone.runOutsideAngular(() => this.scrollListenerDisposer = this.renderer.listen(this.container, 'scroll', () => {
+            // update the polyline only if we're currently dragging
+            if (isPresent(this.fromTaskClue) && isPresent(this.currentPointerClientCoords)) {
+                const { left, top } = this.currentPointerClientCoords;
+                const pointerOffsetCoords = clientToOffsetCoords(left, top, this.container);
+                this.updatePolyline(this.polylineStartCoords, pointerOffsetCoords);
+                if (this.displayValidationTooltip) {
+                    this.updateDragPopup(pointerOffsetCoords);
+                }
+            }
+        }));
+    }
+    removeScrollListener() {
+        if (isPresent(this.scrollListenerDisposer)) {
+            this.scrollListenerDisposer();
+            this.scrollListenerDisposer = null;
+        }
+    }
+    openDragPopup() {
+        if (isPresent(this.dragPopup)) {
+            this.closeDragPopup();
+        }
+        this.dragPopup = this.popupService.open({
+            animate: false,
+            content: DragValidationTooltipComponent,
+            appendTo: this.popupContainer,
+            positionMode: 'absolute',
+            popupClass: 'k-popup-transparent'
+        });
+    }
+    updateDragPopup(pointerOffsetPosition) {
+        if (!isPresent(this.dragPopup)) {
+            this.openDragPopup();
+        }
+        const tooltip = this.dragPopup.content.instance;
+        const { fromTaskName, toTaskName, isValid, showValidityStatus } = this.getTooltipContext();
+        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();
+    }
+    closeDragPopup() {
+        if (isPresent(this.dragPopup)) {
+            this.dragPopup.close();
+            this.dragPopup = null;
+        }
+    }
+    extractTaskName(target) {
+        if (!isTaskWrapper(target, this.container)) {
+            return null;
+        }
+        const taskIndex = getClosestTaskIndex(target, this.container);
+        const task = this.gantt.renderedTreeListItems[taskIndex];
+        const taskName = this.mapper.extractFromTask(task, 'title');
+        return taskName;
+    }
+    getTooltipContext() {
+        const fromTaskName = this.extractTaskName(this.fromTaskClue);
+        const currentPointerTarget = elementFromPoint(this.currentPointerClientCoords.left, this.currentPointerClientCoords.top);
+        const toTaskName = isTaskWrapper(currentPointerTarget, this.container) && !sameTaskClues(this.fromTaskClue, currentPointerTarget, this.container) ?
+            this.extractTaskName(currentPointerTarget) :
+            '';
+        const showValidityStatus = isDependencyDragClue(currentPointerTarget) && !sameTaskClues(this.fromTaskClue, currentPointerTarget, this.container);
+        const { fromId, toId, type } = this.mapper.dependencyFields;
+        return {
+            fromTaskName,
+            toTaskName,
+            showValidityStatus,
+            isValid: showValidityStatus && this.gantt.validateNewDependency({
+                [fromId]: this.mapper.extractFromTask(this.gantt.renderedTreeListItems[getClosestTaskIndex(this.fromTaskClue, this.container)], 'id'),
+                [toId]: this.mapper.extractFromTask(this.gantt.renderedTreeListItems[getClosestTaskIndex(currentPointerTarget, this.container)], 'id'),
+                [type]: getDependencyTypeFromTargetTasks(this.fromTaskClue, currentPointerTarget)
+            })
+        };
+    }
+    /**
+     * 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.
+     */
+    normalizePopupPosition(pointerOffsetPosition) {
+        let top = pointerOffsetPosition.top + DEFAULT_POPUP_VERTICAL_MARGIN;
+        const containerClientBottom = this.container.clientHeight + this.container.scrollTop;
+        const popupHeight = this.dragPopup.popupElement.querySelector('.k-tooltip').clientHeight;
+        const 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
+        const popupWidth = this.dragPopup.popupElement.querySelector('.k-tooltip').clientWidth;
+        const left = pointerOffsetPosition.left - popupWidth / 2;
+        // don't allow the popup to be cut out of the viewport
+        const 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);
+
+/**
+ * @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.
+ */
+const isUpperLimitReached = (element, axis) => Math.floor(element[axis]) <= 0;
+/**
+ * @hidden
+ *
+ * Checks if the end of the scrollable element is reached (bottom/right).
+ * Ceils the top value.
+ */
+const isBottomLimitReached = (element, axis) => {
+    const 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.
+ */
+const scrollElement = (element, step, direction, scrollAxis) => {
+    if (!(isPresent(element) && isDocumentAvailable())) {
+        return;
+    }
+    const initialScrollPosition = element[scrollAxis];
+    let currentStep = step;
+    let 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.
+ */
+const getViewportBoundaries = (element) => {
+    const elementRect = element.getBoundingClientRect();
+    // if the beginning of the scrollable container is above/before the current viewport, fall-back to 0
+    const topLimit = Math.max(elementRect.top, 0);
+    const 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
+    const bottomLimit = topLimit + Math.min(elementRect.bottom, element.clientHeight);
+    const rightLimit = leftLimit + Math.min(elementRect.right, element.clientWidth);
+    return {
+        top: topLimit,
+        bottom: bottomLimit,
+        left: leftLimit,
+        right: rightLimit
+    };
+};
+
+/**
+ * @hidden
+ */
+let TimelineScrollableDirective = class TimelineScrollableDirective {
+    constructor(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)));
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    scrollHorizontallyTo(left) {
+        this.zone.runOutsideAngular(() => {
+            const container = this.timelineScrollableContainer.nativeElement;
+            const visibleBoundaries = getViewportBoundaries(container);
+            if (left < visibleBoundaries.left + this.scrollSettings.threshold) {
+                this.horizontalScrollInterval = setInterval(() => scrollElement(container, this.scrollSettings.step, ScrollDirection.Backwards, ScrollAxis.Horizontal), this.scrollSettings.interval);
+            }
+            else if (left > visibleBoundaries.right - this.scrollSettings.threshold) {
+                this.horizontalScrollInterval = setInterval(() => scrollElement(container, this.scrollSettings.step, ScrollDirection.Forward, ScrollAxis.Horizontal), this.scrollSettings.interval);
+            }
+        });
+    }
+    scrollVerticallyTo(top) {
+        this.zone.runOutsideAngular(() => {
+            const container = this.timelineScrollableContainer.nativeElement;
+            const visibleBoundaries = getViewportBoundaries(container);
+            if (top < visibleBoundaries.top + this.scrollSettings.threshold) {
+                this.verticalScrollInterval = setInterval(() => scrollElement(container, this.scrollSettings.step, ScrollDirection.Backwards, ScrollAxis.Vertical), this.scrollSettings.interval);
+            }
+            else if (top > visibleBoundaries.bottom - this.scrollSettings.threshold) {
+                this.verticalScrollInterval = setInterval(() => scrollElement(container, this.scrollSettings.step, ScrollDirection.Forward, ScrollAxis.Vertical), this.scrollSettings.interval);
+            }
+        });
+    }
+    cancelScroll() {
+        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);
+
 var TimelineDayViewComponent_1;
 let TimelineDayViewComponent = TimelineDayViewComponent_1 = class TimelineDayViewComponent extends ViewBase {
     constructor(optionChangesService, dependencyDomService) {
@@ -5314,6 +6306,8 @@ const IMPORTED_MODULES = [
     ButtonsModule,
     DialogModule,
     EventsModule,
+    PopupModule,
+    DraggableModule,
     TabStripModule,
     GridModule,
     DropDownsModule
@@ -5346,6 +6340,7 @@ const DECLARATIONS = [
     FooterTemplateDirective,
     GanttExpandableDirective,
     GanttDependencyDirective,
+    DependencyDragCreateDirective,
     TimelineDayViewComponent,
     TimelineWeekViewComponent,
     TimelineMonthViewComponent,
@@ -5354,9 +6349,12 @@ const DECLARATIONS = [
     CustomMessagesComponent,
     LocalizedMessagesDirective,
     GanttAddTaskComponent,
+    DragValidationTooltipComponent,
+    TimelineScrollableDirective,
     DependenciesTableComponent,
     TaskFieldsComponent
 ];
+const ɵ0$3 = touchEnabled;
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
  * definition for the Gantt component.
@@ -5395,52 +6393,19 @@ GanttModule = __decorate([
         imports: [...IMPORTED_MODULES],
         declarations: [...DECLARATIONS],
         exports: [...DECLARATIONS],
+        entryComponents: [DragValidationTooltipComponent],
         providers: [{
                 provide: L10N_PREFIX,
                 useValue: 'kendo.gantt'
+            }, {
+                provide: TOUCH_ENABLED,
+                useValue: ɵ0$3
             }]
     })
 ], GanttModule);
 
-/**
- * @hidden
- */
-class PreventableEvent {
-    constructor() {
-        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.
-     */
-    preventDefault() {
-        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`.
-     */
-    isDefaultPrevented() {
-        return this.prevented;
-    }
-}
-
-/**
- * Called every time a user leaves an edited cell.
- */
-class CellCloseEvent extends PreventableEvent {
-    constructor(options) {
-        super();
-        Object.assign(this, options);
-    }
-}
-
 /**
  * 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 };