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

package/dist/fesm2015/index.js

@@ -3,37 +3,802 @@
 * 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 { Injectable, NgZone, EventEmitter, ViewChild, ElementRef, ViewContainerRef, HostBinding, Input, TemplateRef, Output, Component, Renderer2, Directive, Optional, QueryList, ContentChildren, ContentChild, forwardRef, SkipSelf, Host, Injector, 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 } from 'rxjs';
+import { Subject, Subscription, fromEvent, of, 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, Keys, hasObservers, anyChanged, EventsModule, DraggableModule } from '@progress/kendo-angular-common';
+import { map, distinctUntilChanged, take, filter, switchMap, expand, reduce } from 'rxjs/operators';
+import { getter, touchEnabled } from '@progress/kendo-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 { map, distinctUntilChanged, take, filter, switchMap } from 'rxjs/operators';
-import { LocalizationService, ComponentMessages, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { CommonModule } from '@angular/common';
-import { SplitterModule } from '@progress/kendo-angular-layout';
+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 { FormGroup, 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';
+
+/**
+ * @hidden
+ */
+const packageMetadata = {
+    name: '@progress/kendo-angular-gantt',
+    productName: 'Kendo UI for Angular',
+    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
+    publishDate: 1642606197,
+    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'
+};
+
+/**
+ * @hidden
+ */
+let ScrollSyncService = class ScrollSyncService {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this.changes = new Subject();
+        this.elements = [];
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(this.changes.subscribe(args => {
+            this.scroll(args);
+        }));
+    }
+    registerElement(el, sourceType) {
+        this.elements.push({ element: el, sourceType });
+        if (sourceType === "timeline" || sourceType === "treelist") {
+            this.ngZone.runOutsideAngular(() => {
+                const obs = fromEvent(el, 'scroll').pipe(map(({ target: { scrollTop, scrollLeft } }) => ({
+                    scrollTop,
+                    scrollLeft,
+                    sourceType
+                })));
+                const comparisonFn = sourceType === 'timeline' ?
+                    (x, y) => (x.scrollTop === y.scrollTop) && (x.scrollLeft === y.scrollLeft) :
+                    (x, y) => (x.scrollTop === y.scrollTop);
+                this.subscriptions.add(obs.pipe(distinctUntilChanged(comparisonFn))
+                    .subscribe((event) => this.changes.next(event)));
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+        this.elements = null;
+    }
+    syncScrollTop(sourceType, targetType) {
+        const source = this.elements.find(element => element.sourceType === sourceType);
+        const target = this.elements.find(element => element.sourceType === targetType);
+        // Need to wait for the splitter pane's content to be rendered
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => target.element.scrollTop = source.element.scrollTop);
+    }
+    resetTimelineScrollLeft() {
+        const source = this.elements.find(element => element.sourceType === 'timeline');
+        source.element.scrollLeft = 0;
+    }
+    scroll({ scrollTop, scrollLeft, sourceType }) {
+        this.ngZone.runOutsideAngular(() => {
+            if (sourceType === 'timeline') {
+                const header = this.elements.find(element => element.sourceType === 'header').element;
+                header.scrollLeft = scrollLeft;
+                if (!this.syncingTimeline) {
+                    this.syncingTreeList = true;
+                    const treelist = this.elements.find(element => element.sourceType === 'treelist').element;
+                    treelist.scrollTop = scrollTop;
+                }
+                this.syncingTimeline = false;
+            }
+            if (sourceType === 'treelist') {
+                if (!this.syncingTreeList) {
+                    this.syncingTimeline = true;
+                    const timeline = this.elements.find(element => element.sourceType === 'timeline').element;
+                    timeline.scrollTop = scrollTop;
+                }
+                this.syncingTreeList = false;
+            }
+        });
+    }
+};
+ScrollSyncService = __decorate([
+    Injectable(),
+    __metadata("design:paramtypes", [NgZone])
+], ScrollSyncService);
+
+/**
+ * @hidden
+ */
+const DEFAULT_DEPENDENCY_MODEL_FIELDS = Object.freeze({
+    toId: 'toId',
+    fromId: 'fromId',
+    id: 'id',
+    type: 'type'
+});
+
+/**
+ * @hidden
+ */
+const DEFAULT_TASK_MODEL_FIELDS = Object.freeze({
+    id: 'id',
+    start: 'start',
+    end: 'end',
+    title: 'title',
+    completionRatio: 'completionRatio',
+    children: 'children'
+});
+
+/**
+ * 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
+ */
+const isWorkDay = (date, start, end) => {
+    return date.getDay() >= start && date.getDay() <= end;
+};
+/**
+ * @hidden
+ */
+const isWorkHour = (date, start, end) => {
+    return date.getHours() >= start && date.getHours() <= end;
+};
+/**
+ * @hidden
+ */
+const isPresent = (item) => item !== null && item !== undefined;
+/**
+ * @hidden
+ *
+ * Normalized the data to an array in case a falsy value is passed
+ * or a TreeListDataResult object (applicable for the data-binding directives).
+ */
+const normalizeGanttData = (data) => {
+    if (!isPresent(data)) {
+        return [];
+    }
+    else if (Array.isArray(data.data)) {
+        return data.data;
+    }
+    else {
+        return data;
+    }
+};
+/**
+ * @hidden
+ *
+ * Returns a new date with the specified hours, minutes, seconds and millliseconds set.
+ * Only the hours are required, the rest of the params are set to `0` by default.
+ */
+const setTime = (date, hours, minutes = 0, seconds = 0, milliseconds = 0) => {
+    if (!isPresent(date)) {
+        return null;
+    }
+    const result = cloneDate(date);
+    result.setHours(hours);
+    result.setMinutes(minutes);
+    result.setSeconds(seconds);
+    result.setMilliseconds(milliseconds);
+    return result;
+};
+/**
+ * @hidden
+ *
+ * Returns the last day of a week.
+ * @param standingPoint - Any day of the target week.
+ * @param firstWeekDay - The week's starting day (e.g. Monday, Tuesday, etc.)
+ */
+const lastDayOfWeek = (standingPoint, firstWeekDay) => {
+    const followingWeek = addWeeks(standingPoint, 1);
+    const firstDayOfFollowingWeek = firstDayInWeek(followingWeek, firstWeekDay);
+    const lastDayOfTargetWeek = addDays(firstDayOfFollowingWeek, -1);
+    return lastDayOfTargetWeek;
+};
+/**
+ * Persists the intially resolved scrollbar width value.
+ */
+let SCROLLBAR_WIDTH;
+/**
+ * @hidden
+ *
+ * Gets the default scrollbar width accoring to the current environment.
+ */
+const scrollbarWidth = () => {
+    if (!isDocumentAvailable()) {
+        return;
+    }
+    // calculate scrollbar width only once, then return the cached value
+    if (isNaN(SCROLLBAR_WIDTH)) {
+        const div = document.createElement('div');
+        div.style.cssText = 'overflow: scroll; overflow-x: hidden; zoom: 1; clear: both; display: block;';
+        div.innerHTML = '&nbsp;';
+        document.body.appendChild(div);
+        SCROLLBAR_WIDTH = div.offsetWidth - div.scrollWidth;
+        document.body.removeChild(div);
+    }
+    return SCROLLBAR_WIDTH;
+};
+/**
+ * @hidden
+ */
+const isColumnGroup = (column) => column.isColumnGroup;
+/**
+ * @hidden
+ */
+const isNumber = (contender) => typeof contender === 'number' && !isNaN(contender);
+/**
+ * @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 parent element from the second param.
+ */
+const getClosestTaskIndex = (element, parentScope) => {
+    const task = closestInScope(element, matchesClasses('k-task-wrap'), parentScope);
+    if (!isPresent(task)) {
+        return null;
+    }
+    return Number(task.getAttribute('data-task-index'));
+};
+/**
+ * @hidden
+ *
+ * Checks whether the queried item or its parent items has a `k-task` selector.
+ * Restricts the search up to the provided parent element from the second param.
+ */
+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-toolbar` selector.
+ * Restricts the search up to the provided parent element from the second param.
+ */
+const isToolbar = (contender, parentScope) => {
+    const toolbar = closestInScope(contender, matchesClasses('k-gantt-toolbar'), parentScope);
+    return isPresent(toolbar);
+};
+/**
+ * @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 parent element from the second param.
+ */
+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 (!isPresent(contender) || contender < min) {
+        return min;
+    }
+    else if (contender > max) {
+        return max;
+    }
+    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
+ */
+let MappingService = class MappingService {
+    /**
+     * @hidden
+     */
+    constructor() {
+        this._taskFields = Object.assign({}, DEFAULT_TASK_MODEL_FIELDS);
+        this._dependencyFields = Object.assign({}, DEFAULT_DEPENDENCY_MODEL_FIELDS);
+    }
+    /**
+     * Gets or sets the model fields for the task data items.
+     * Uses the default values for fields which are not specified.
+     */
+    set taskFields(fields) {
+        this._taskFields = Object.assign({}, DEFAULT_TASK_MODEL_FIELDS, fields);
+    }
+    get taskFields() {
+        return this._taskFields;
+    }
+    /**
+     * Gets or sets the model fields for the depenency data items.
+     * Uses the default values for fields which are not specified.
+     */
+    set dependencyFields(fields) {
+        this._dependencyFields = Object.assign({}, DEFAULT_DEPENDENCY_MODEL_FIELDS, fields);
+    }
+    get dependencyFields() {
+        return this._dependencyFields;
+    }
+    /**
+     * Retrieves the value for the specified task field.
+     * Supports nested fields as well (e.g. 'manager.id').
+     */
+    extractFromTask(dataItem, field) {
+        if (!isPresent(this.taskFields)) {
+            return null;
+        }
+        return getter(this.taskFields[field])(dataItem);
+    }
+    /**
+     * Retrieves the value for the specified dependency field.
+     * Supports nested fields as well (e.g. 'manager.id').
+     */
+    extractFromDependency(dataItem, field) {
+        if (!isPresent(this.dependencyFields)) {
+            return null;
+        }
+        return getter(this.dependencyFields[field])(dataItem);
+    }
+};
+MappingService = __decorate([
+    Injectable()
+], MappingService);
+
+/**
+ * @hidden
+ */
+let DependencyDomService = class DependencyDomService {
+    constructor(mapper) {
+        this.mapper = mapper;
+        this.notifier = new Subject();
+        /**
+         * Maps each rendered task to its HTML element.
+         * Uses the task ID field value as key.
+         */
+        this.tasks = new Map();
+    }
+    /**
+     * Emits each time some of the tasks or the view have changed.
+     * Fires also on the first change of the table rows and the parent container.
+     */
+    get taskChanges() {
+        return this.notifier.asObservable();
+    }
+    get dependencyDomArgs() {
+        return {
+            tasks: this.tasks,
+            contentContainer: this.contentContainer,
+            timelineRow: this.timelineRow
+        };
+    }
+    ngOnDestroy() {
+        this.tasks.clear();
+        this.tasks = null;
+        this.contentContainer = null;
+    }
+    registerTimelineRow(timelineRow) {
+        this.timelineRow = timelineRow;
+        this.notifyChanges();
+    }
+    registerContentContainer(contentContainer) {
+        this.contentContainer = contentContainer;
+        this.notifyChanges();
+    }
+    registerTask(task, element) {
+        const id = this.mapper.extractFromTask(task, 'id');
+        this.tasks.set(id, element);
+        this.notifyChanges();
+    }
+    unregisterTask(task) {
+        const id = this.mapper.extractFromTask(task, 'id');
+        this.tasks.delete(id);
+        this.notifyChanges();
+    }
+    /**
+     * Notifies all dependency directives that a change in one of the elements has occured.
+     */
+    notifyChanges() {
+        this.notifier.next(this.dependencyDomArgs);
+    }
+};
+DependencyDomService = __decorate([
+    Injectable(),
+    __metadata("design:paramtypes", [MappingService])
+], DependencyDomService);
+
+/**
+ * @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 = [];
+        // 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`);
+        }));
+    }
+    /**
+     * Specifies whether the draggable will attach or detach its pointer event listeners.
+     */
+    get draggableEnabled() {
+        return this.renderDependencyDragClues;
+    }
+    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([
+    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", Boolean)
+], GanttTimelineComponent.prototype, "renderDependencyDragClues", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttTimelineComponent.prototype, "dragScrollSettings", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttTimelineComponent.prototype, "selectable", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], GanttTimelineComponent.prototype, "isTaskSelected", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], GanttTimelineComponent.prototype, "isExpanded", 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>
+            <!-- tabindex="-1" required for https://bugzilla.mozilla.org/show_bug.cgi?id=1069739 -->
+            <div
+                #timelineContent
+                class="k-grid-content"
+                tabindex="-1"
+                role="tree"
+                aria-roledescription="Timeline"
+                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>
 
-/**
- * @hidden
- */
-const packageMetadata = {
-    name: '@progress/kendo-angular-gantt',
-    productName: 'Kendo UI for Angular',
-    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1639476447,
-    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'
-};
+                    <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"
+                            [isExpanded]="isExpanded"
+                            [selectable]="selectable"
+                            [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.
@@ -631,140 +1396,43 @@ const taskClassCallback = () => null;
  * @hidden
  */
 const isSelected = () => false;
-
-/**
- * @hidden
- */
-const isWorkDay = (date, start, end) => {
-    return date.getDay() >= start && date.getDay() <= end;
-};
-/**
- * @hidden
- */
-const isWorkHour = (date, start, end) => {
-    return date.getHours() >= start && date.getHours() <= end;
-};
-/**
- * @hidden
- */
-const isPresent = (item) => item !== null && item !== undefined;
-/**
- * @hidden
- *
- * Normalized the data to an array in case a falsy value is passed
- * or a TreeListDataResult object (applicable for the data-binding directives).
- */
-const normalizeGanttData = (data) => {
-    if (!isPresent(data)) {
-        return [];
-    }
-    else if (Array.isArray(data.data)) {
-        return data.data;
-    }
-    else {
-        return data;
-    }
-};
-/**
- * @hidden
- *
- * Returns a new date with the specified hours, minutes, seconds and millliseconds set.
- * Only the hours are required, the rest of the params are set to `0` by default.
- */
-const setTime = (date, hours, minutes = 0, seconds = 0, milliseconds = 0) => {
-    if (!isPresent(date)) {
-        return null;
-    }
-    const result = cloneDate(date);
-    result.setHours(hours);
-    result.setMinutes(minutes);
-    result.setSeconds(seconds);
-    result.setMilliseconds(milliseconds);
-    return result;
-};
-/**
- * @hidden
- *
- * Returns the last day of a week.
- * @param standingPoint - Any day of the target week.
- * @param firstWeekDay - The week's starting day (e.g. Monday, Tuesday, etc.)
- */
-const lastDayOfWeek = (standingPoint, firstWeekDay) => {
-    const followingWeek = addWeeks(standingPoint, 1);
-    const firstDayOfFollowingWeek = firstDayInWeek(followingWeek, firstWeekDay);
-    const lastDayOfTargetWeek = addDays(firstDayOfFollowingWeek, -1);
-    return lastDayOfTargetWeek;
-};
-/**
- * Persists the intially resolved scrollbar width value.
- */
-let SCROLLBAR_WIDTH;
-/**
- * @hidden
- *
- * Gets the default scrollbar width accoring to the current environment.
- */
-const scrollbarWidth = () => {
-    if (!isDocumentAvailable()) {
-        return;
-    }
-    // calculate scrollbar width only once, then return the cached value
-    if (isNaN(SCROLLBAR_WIDTH)) {
-        const div = document.createElement('div');
-        div.style.cssText = 'overflow: scroll; overflow-x: hidden; zoom: 1; clear: both; display: block;';
-        div.innerHTML = '&nbsp;';
-        document.body.appendChild(div);
-        SCROLLBAR_WIDTH = div.offsetWidth - div.scrollWidth;
-        document.body.removeChild(div);
-    }
-    return SCROLLBAR_WIDTH;
-};
-/**
- * @hidden
- */
-const isColumnGroup = (column) => column.isColumnGroup;
-/**
- * @hidden
- */
-const isNumber = (contender) => typeof contender === 'number' && !isNaN(contender);
-/**
- * @hidden
- */
-const isString = (contender) => typeof contender === 'string';
-/**
- * @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.
- */
-const getClosestTaskIndex = (element, gantt) => {
-    const task = closestInScope(element, matchesClasses('k-task'), gantt);
-    if (!isPresent(task)) {
-        return null;
-    }
-    return Number(task.getAttribute('data-task-index'));
-};
-/**
- * @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.
- */
-const isTask = (contender, gantt) => {
-    const task = closestInScope(contender, matchesClasses('k-task'), gantt);
-    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.
  */
-const isClearButton = (contender, gantt) => {
-    const clearButtonContainer = closestInScope(contender, matchesClasses('k-task-actions'), gantt);
-    return isPresent(clearButtonContainer);
-};
+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
@@ -920,84 +1588,6 @@ class TimelineBaseViewService {
     }
 }
 
-/**
- * @hidden
- */
-const DEFAULT_DEPENDENCY_MODEL_FIELDS = Object.freeze({
-    toId: 'toId',
-    fromId: 'fromId',
-    id: 'id',
-    type: 'type'
-});
-
-/**
- * @hidden
- */
-const DEFAULT_TASK_MODEL_FIELDS = Object.freeze({
-    id: 'id',
-    start: 'start',
-    end: 'end',
-    title: 'title',
-    completionRatio: 'completionRatio',
-    children: 'children'
-});
-
-/**
- * @hidden
- */
-let MappingService = class MappingService {
-    /**
-     * @hidden
-     */
-    constructor() {
-        this._taskFields = Object.assign({}, DEFAULT_TASK_MODEL_FIELDS);
-        this._dependencyFields = Object.assign({}, DEFAULT_DEPENDENCY_MODEL_FIELDS);
-    }
-    /**
-     * Gets or sets the model fields for the task data items.
-     * Uses the default values for fields which are not specified.
-     */
-    set taskFields(fields) {
-        this._taskFields = Object.assign({}, DEFAULT_TASK_MODEL_FIELDS, fields);
-    }
-    get taskFields() {
-        return this._taskFields;
-    }
-    /**
-     * Gets or sets the model fields for the depenency data items.
-     * Uses the default values for fields which are not specified.
-     */
-    set dependencyFields(fields) {
-        this._dependencyFields = Object.assign({}, DEFAULT_DEPENDENCY_MODEL_FIELDS, fields);
-    }
-    get dependencyFields() {
-        return this._dependencyFields;
-    }
-    /**
-     * Retrieves the value for the specified task field.
-     * Supports nested fields as well (e.g. 'manager.id').
-     */
-    extractFromTask(dataItem, field) {
-        if (!isPresent(this.taskFields)) {
-            return null;
-        }
-        return getter(this.taskFields[field])(dataItem);
-    }
-    /**
-     * Retrieves the value for the specified dependency field.
-     * Supports nested fields as well (e.g. 'manager.id').
-     */
-    extractFromDependency(dataItem, field) {
-        if (!isPresent(this.dependencyFields)) {
-            return null;
-        }
-        return getter(this.dependencyFields[field])(dataItem);
-    }
-};
-MappingService = __decorate([
-    Injectable()
-], MappingService);
-
 /**
  * @hidden
  */
@@ -1187,171 +1777,567 @@ TimelineViewService = __decorate([
 /**
  * @hidden
  */
-let ScrollSyncService = class ScrollSyncService {
-    constructor(ngZone) {
-        this.ngZone = ngZone;
-        this.changes = new Subject();
-        this.elements = [];
-        this.subscriptions = new Subscription();
-        this.subscriptions.add(this.changes.subscribe(args => {
-            this.scroll(args);
-        }));
+let EditService = class EditService {
+    constructor(mapper) {
+        this.mapper = mapper;
+        this.showEditingDialog = new Subject();
+        this.taskDelete = new Subject();
+        this.editEvent = new Subject();
+        this.addEvent = new Subject();
+        this.predecessors = [];
+        this.successors = [];
+        this.updatedItems = [];
+        this.deletedItems = [];
+        this.itemIndex = (item, data) => {
+            return data.findIndex(dataItem => this.mapper.extractFromTask(dataItem, 'id') === this.mapper.extractFromTask(item, 'id'));
+        };
     }
-    registerElement(el, sourceType) {
-        this.elements.push({ element: el, sourceType });
-        if (sourceType === "timeline" || sourceType === "treelist") {
-            this.ngZone.runOutsideAngular(() => {
-                const obs = fromEvent(el, 'scroll').pipe(map(({ target: { scrollTop, scrollLeft } }) => ({
-                    scrollTop,
-                    scrollLeft,
-                    sourceType
-                })));
-                const comparisonFn = sourceType === 'timeline' ?
-                    (x, y) => (x.scrollTop === y.scrollTop) && (x.scrollLeft === y.scrollLeft) :
-                    (x, y) => (x.scrollTop === y.scrollTop);
-                this.subscriptions.add(obs.pipe(distinctUntilChanged(comparisonFn))
-                    .subscribe((event) => this.changes.next(event)));
-            });
-        }
+    set dependencies(items) {
+        // Can this whole thing be moved to edit-dialog? Dependencies might not be needed here
+        const dataItemId = this.mapper.extractFromTask(this.dataItem, 'id');
+        this.predecessors = items.filter(item => this.mapper.extractFromDependency(item, 'toId') === dataItemId);
+        this.successors = items.filter(item => this.mapper.extractFromDependency(item, 'fromId') === dataItemId);
     }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-        this.elements = null;
+    get dependencies() {
+        return [...this.predecessors, ...this.successors];
     }
-    syncScrollTop(sourceType, targetType) {
-        const source = this.elements.find(element => element.sourceType === sourceType);
-        const target = this.elements.find(element => element.sourceType === targetType);
-        // Need to wait for the splitter pane's content to be rendered
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => target.element.scrollTop = source.element.scrollTop);
+    createEditDialog(dataItem, taskFormGroup, dependencies) {
+        this.dataItem = dataItem;
+        this.taskFormGroup = taskFormGroup;
+        this.dependencies = dependencies;
+        this.showEditingDialog.next(true);
     }
-    resetTimelineScrollLeft() {
-        const source = this.elements.find(element => element.sourceType === 'timeline');
-        source.element.scrollLeft = 0;
+    closeEditDialog() {
+        this.showEditingDialog.next(false);
+        this.dataItem = undefined;
+        this.taskFormGroup = undefined;
+        this.dependencies = [];
+        this.updatedItems = [];
+        this.deletedItems = [];
     }
-    scroll({ scrollTop, scrollLeft, sourceType }) {
-        this.ngZone.runOutsideAngular(() => {
-            if (sourceType === 'timeline') {
-                const header = this.elements.find(element => element.sourceType === 'header').element;
-                header.scrollLeft = scrollLeft;
-                if (!this.syncingTimeline) {
-                    this.syncingTreeList = true;
-                    const treelist = this.elements.find(element => element.sourceType === 'treelist').element;
-                    treelist.scrollTop = scrollTop;
-                }
-                this.syncingTimeline = false;
+    triggerEditEvent(editResultType) {
+        this.editEvent.next({
+            taskFormGroup: this.taskFormGroup,
+            dataItem: this.dataItem,
+            dependencies: {
+                createdItems: this.getCreatedDependencies(),
+                updatedItems: this.updatedItems,
+                deletedItems: this.deletedItems
+            },
+            editResultType
+        });
+    }
+    updateDependencies(item) {
+        if (!this.isNew(item)) {
+            // update
+            const index = this.itemIndex(item, this.updatedItems);
+            if (index !== -1) {
+                this.updatedItems.splice(index, 1, item);
             }
-            if (sourceType === 'treelist') {
-                if (!this.syncingTreeList) {
-                    this.syncingTimeline = true;
-                    const timeline = this.elements.find(element => element.sourceType === 'timeline').element;
-                    timeline.scrollTop = scrollTop;
-                }
-                this.syncingTreeList = false;
+            else {
+                this.updatedItems.push(item);
             }
-        });
+        }
+    }
+    getCreatedDependencies() {
+        return this.dependencies.filter(item => this.mapper.extractFromDependency(item, 'id') === null);
+    }
+    deleteDependency(item) {
+        const updatedIndex = this.itemIndex(item, this.updatedItems);
+        if (updatedIndex !== -1) {
+            this.updatedItems.splice(updatedIndex, 1);
+        }
+        if (!this.isNew(item)) {
+            this.deletedItems.push(item);
+        }
+    }
+    loadTasks(initialValues, isInitializer = true) {
+        return forkJoin(initialValues.map(v => this.getElementById(v))).pipe(map((value) => value.reduce((acc, item) => acc = acc.concat(normalizeGanttData(item)), [])), expand(values => {
+            if (values.some(el => this.hasChildren(el))) {
+                return this.loadTasks(values, false);
+            }
+            return EMPTY;
+        }), reduce((acc, values) => acc.concat(values), isInitializer ? [...initialValues] : []));
+    }
+    getElementById(item) {
+        const children = this.fetchChildren(item);
+        if (isObservable(children)) {
+            return children;
+        }
+        return of(children);
+    }
+    isNew(item) {
+        return !isPresent(this.mapper.extractFromDependency(item, 'id'));
     }
 };
-ScrollSyncService = __decorate([
+EditService = __decorate([
     Injectable(),
-    __metadata("design:paramtypes", [NgZone])
-], ScrollSyncService);
+    __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);
+
+// TODO: add those keys to `import { Keys } from '@progress/kendo-angular-common';`
+var NumpadKeys;
+(function (NumpadKeys) {
+    NumpadKeys[NumpadKeys["Digit1"] = 97] = "Digit1";
+    NumpadKeys[NumpadKeys["Digit2"] = 98] = "Digit2";
+    NumpadKeys[NumpadKeys["Digit3"] = 99] = "Digit3";
+    NumpadKeys[NumpadKeys["Digit4"] = 100] = "Digit4";
+})(NumpadKeys || (NumpadKeys = {}));
+/**
+ * @hidden
+ */
+const isArrowUpDownKey = (keyCode) => [
+    Keys.ArrowUp,
+    Keys.ArrowDown
+].some(arrowKeyCode => keyCode === arrowKeyCode);
+/**
+ * @hidden
+ */
+const isNavigationKey = (keyCode) => [
+    Keys.ArrowUp,
+    Keys.ArrowDown,
+    Keys.Home,
+    Keys.End
+].some(navigationKeyCode => keyCode === navigationKeyCode);
+/**
+ * @hidden
+ */
+const isExpandCollapseKey = (keyCode, altKey) => {
+    return altKey && [
+        Keys.ArrowLeft,
+        Keys.ArrowRight
+    ].some(navigationKeyCode => keyCode === navigationKeyCode);
+};
+/**
+ * @hidden
+ */
+const isViewDigitKey = (keyCode) => [
+    Keys.Digit1,
+    NumpadKeys.Digit1,
+    Keys.Digit2,
+    NumpadKeys.Digit2,
+    Keys.Digit3,
+    NumpadKeys.Digit3,
+    Keys.Digit4,
+    NumpadKeys.Digit4
+].some(digitKeyCode => keyCode === digitKeyCode);
+/**
+ * @hidden
+ *
+ * Returns the corresponding view index for the pressed digit key (Digit 1 => 0, Digit 2 => 1, etc.).
+ */
+const getIndexFromViewDigitKeyCode = (keyCode) => {
+    switch (keyCode) {
+        case NumpadKeys.Digit1:
+        case Keys.Digit1: return 0;
+        case NumpadKeys.Digit2:
+        case Keys.Digit2: return 1;
+        case NumpadKeys.Digit3:
+        case Keys.Digit3: return 2;
+        case NumpadKeys.Digit4:
+        case Keys.Digit4: return 3;
+        default: return null;
+    }
+};
 
 /**
  * @hidden
  */
-let DependencyDomService = class DependencyDomService {
-    constructor(mapper) {
-        this.mapper = mapper;
-        this.notifier = new Subject();
+let NavigationService = class NavigationService {
+    constructor(zone, renderer, scrollSyncService) {
+        this.zone = zone;
+        this.renderer = renderer;
+        this.scrollSyncService = scrollSyncService;
         /**
-         * Maps each rendered task to its HTML element.
-         * Uses the task ID field value as key.
+         * Notifies when the tasks' focused and interactive (tabindex) state has changed.
+         *
+         * All tasks are rendered with tabindex="-1".
+         * When one is clicked, or when some navigation key keyboard key is pressed, it should be focused, assigned the focus class, and its tabindex updated to 0.
+         * All other tasks should get -1 tabindex and have the focus class removed from them.
          */
-        this.tasks = new Map();
+        this.taskStatusChanges = new Subject();
+        /**
+         * Keeps track of whether the Timeline part is focused.
+         * Used when the index of the task elements change (tasks are changed, pushed to, spliced from, etc.)
+         * and their status should be updated accordingly.
+         */
+        this.isTimelineFocused = false;
+        /**
+         * Keeps track of which part has last been focused.
+         * Used when calling `gantt.focus()` to determine which part of the component should receive focus.
+         */
+        this.treeListLastActive = false;
+        /**
+         * Keeps track of which part has last been focused.
+         * Used when calling `gantt.focus()` to determine which part of the component should receive focus.
+         */
+        this.timelineLastActive = false;
+        this._enabled = false;
+        this._activeTimelineIndex = 0;
+        this._activeTreeListCell = { rowIndex: 0, colIndex: 0 };
     }
     /**
-     * Emits each time some of the tasks or the view have changed.
-     * Fires also on the first change of the table rows and the parent container.
+     * Specifies whether navigation is enabled.
      */
-    get taskChanges() {
-        return this.notifier.asObservable();
+    get enabled() {
+        return this._enabled;
     }
-    get dependencyDomArgs() {
+    /**
+     * Used to retrieve read-only data about the currently active task.
+     */
+    get activeTask() {
         return {
-            tasks: this.tasks,
-            contentContainer: this.contentContainer,
-            timelineRow: this.timelineRow
+            activeIndex: this.activeTimelineIndex,
+            isFocused: this.isTimelineFocused
         };
     }
+    /**
+     * Persists the expected TreeList focused cell coords.
+     * When the tasks in the Timeline are navigated through, the expected TreeList focus target should also change,
+     * in order to allow back-tabbing from the Timeline to the same row in the TreeList.
+     */
+    set activeTreeListCell(cell) {
+        this._activeTreeListCell = cell;
+    }
+    get activeTreeListCell() {
+        const firstAvailableIndex = 0;
+        const lastAvailableRowIndex = this.treeListHeaderRowsCount + this.gantt.treeList.view.data.length - 1;
+        const rowIndex = fitToRange(this._activeTreeListCell.rowIndex, firstAvailableIndex, lastAvailableRowIndex);
+        const lastAvailableColIndex = this.gantt.columns.length;
+        const colIndex = fitToRange(this._activeTreeListCell.colIndex, firstAvailableIndex, lastAvailableColIndex);
+        return { rowIndex, colIndex };
+    }
+    /**
+     * Persists the expected Timeline focused task index.
+     * When the cells in the TreeList are navigated through, the expected Timeline focus target should also change,
+     * in order to allow tabbing from the TreeList to the same row in the Timeline.
+     */
+    set activeTimelineIndex(index) {
+        this._activeTimelineIndex = index;
+    }
+    get activeTimelineIndex() {
+        const firstAvailableIndex = 0;
+        const lastAvailableIndex = this.gantt.treeList.view.data.length - 1;
+        return fitToRange(this._activeTimelineIndex, firstAvailableIndex, lastAvailableIndex);
+    }
+    /**
+     * The TreeList row index takes into account the header and filter rows.
+     * Used when translating Timeline task indices to TreeList row indices.
+     */
+    get treeListHeaderRowsCount() {
+        // captures nested group header rows + filter row if we start supporting it at some point
+        return this.treeListElement.querySelectorAll('.k-grid-header tr').length;
+    }
+    initialize({ gantt, host, treeListElement, timelineElement }) {
+        // no private property setters in TypeScript, so use a getter and a poorly named private prop for this value
+        this._enabled = true;
+        this.gantt = gantt;
+        this.host = host;
+        this.treeListElement = treeListElement;
+        this.timelineElement = timelineElement;
+        // TODO: fix in the splitter package and remove
+        // move the splitbar HTML element between the two panes to keep the visial tabbing order in tact
+        const splitbar = this.host.querySelector('.k-splitbar');
+        if (isPresent(splitbar) && isPresent(splitbar.previousElementSibling) && isPresent(splitbar.after)) {
+            splitbar.after(splitbar.previousElementSibling);
+        }
+        this.zone.runOutsideAngular(() => {
+            this.eventListenerDisposers = [
+                this.renderer.listen(this.host, 'keydown', this.handleKeydown.bind(this)),
+                this.renderer.listen(this.treeListElement, 'mousedown', this.focusTreeList.bind(this)),
+                this.renderer.listen(this.treeListElement, 'focusin', this.handleTreeListFocusIn.bind(this)),
+                this.renderer.listen(this.timelineElement, 'mousedown', this.handleTimelineMousedown.bind(this)),
+                this.renderer.listen(this.timelineElement, 'focusin', this.handleTimelineFocusIn.bind(this)),
+                this.renderer.listen(this.timelineElement, 'focusout', this.handleTimelineFocusOut.bind(this))
+            ];
+        });
+    }
     ngOnDestroy() {
-        this.tasks.clear();
-        this.tasks = null;
-        this.contentContainer = null;
+        if (isPresent(this.eventListenerDisposers)) {
+            this.eventListenerDisposers.forEach(removeListener => removeListener());
+            this.eventListenerDisposers = null;
+        }
+        this.gantt = null;
+        this.host = null;
+        this.treeListElement = null;
+        this.timelineElement = null;
     }
-    registerTimelineRow(timelineRow) {
-        this.timelineRow = timelineRow;
-        this.notifyChanges();
+    /**
+     * Focuses either the last active TreeList cell, or the last active Timeline task,
+     * dependening on which of the two last held focus.
+     *
+     * Focuses the first TreeList cell by default.
+     */
+    focusLastActiveItem() {
+        if (this.gantt.data.length === 0 || (!this.treeListLastActive && !this.timelineLastActive)) {
+            this.focusCell(0, 0);
+        }
+        else if (this.treeListLastActive) {
+            const { rowIndex, colIndex } = this.activeTreeListCell;
+            this.gantt.treeList.focusCell(rowIndex, colIndex);
+        }
+        else if (this.timelineLastActive) {
+            this.focusTask(this.activeTimelineIndex);
+        }
     }
-    registerContentContainer(contentContainer) {
-        this.contentContainer = contentContainer;
-        this.notifyChanges();
+    /**
+     * Focuses the targeted TreeList cell regardless of the last peresisted target.
+     */
+    focusCell(rowIndex, colIndex) {
+        this.activeTreeListCell = { rowIndex, colIndex };
+        this.activeTimelineIndex = rowIndex - this.treeListHeaderRowsCount;
+        this.gantt.treeList.focusCell(this.activeTreeListCell.rowIndex, this.activeTreeListCell.colIndex);
     }
-    registerTask(task, element) {
-        const id = this.mapper.extractFromTask(task, 'id');
-        this.tasks.set(id, element);
-        this.notifyChanges();
+    /**
+     * Focuses the targeted Timeline task regardless of the last peresisted target.
+     */
+    focusTask(index) {
+        this.activeTimelineIndex = index;
+        this.isTimelineFocused = true;
+        this.activeTreeListCell = {
+            rowIndex: index + this.treeListHeaderRowsCount,
+            colIndex: this.activeTreeListCell.colIndex
+        };
+        this.notifyTaskStatusChange();
     }
-    unregisterTask(task) {
-        const id = this.mapper.extractFromTask(task, 'id');
-        this.tasks.delete(id);
-        this.notifyChanges();
+    /**
+     * Updates the focus target flags and notifies the active task to update its focused state.
+     */
+    handleTimelineFocusIn({ target }) {
+        this.treeListLastActive = false;
+        this.timelineLastActive = true;
+        this.isTimelineFocused = true;
+        if (isTask(target, this.timelineElement)) {
+            this.notifyTaskStatusChange();
+        }
     }
     /**
-     * Notifies all dependency directives that a change in one of the elements has occured.
+     * Updates the timeline focus state flag and notifies the active task to update its focused state.
      */
-    notifyChanges() {
-        this.notifier.next(this.dependencyDomArgs);
+    handleTimelineFocusOut({ relatedTarget }) {
+        this.isTimelineFocused = this.timelineElement.contains(relatedTarget);
+        // update the task element only if the new focus target is not in the Timeline - focus change between tasks is handled in the focusin handler
+        if (!isTask(relatedTarget, this.timelineElement)) {
+            this.notifyTaskStatusChange();
+        }
     }
-};
-DependencyDomService = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [MappingService])
-], DependencyDomService);
-
-/**
- * @hidden
- */
-let EditService = class EditService {
     /**
-     * @hidden
+     * Updates the focus target flags and corrects the TreeList focus target if needed.
+     * As the TreeList will keep its last focused cell with tabindex="0",
+     * this methods forcefully focuses the correct cell,
+     * when navigating in the Timeline has updated the expected TreeList focus target.
      */
-    constructor() {
-        this.showEditingDialog = new Subject();
-        this.showConfirmationDialog = new Subject();
-        this.editEvent = new Subject();
-        this.addEvent = new Subject();
+    handleTreeListFocusIn(event) {
+        this.treeListLastActive = true;
+        this.timelineLastActive = false;
+        // if the previous focus target was in the TreeList, rely on its component navigation and just record the focused item index
+        if (this.treeListElement.contains(event.relatedTarget)) {
+            const { colIndex, rowIndex } = this.gantt.treeList.activeCell;
+            this.activeTreeListCell = { colIndex, rowIndex };
+        }
+        else {
+            // if the previous focus target was outside the TreeList, ensure the expected focus coords are used
+            const { rowIndex, colIndex } = this.activeTreeListCell;
+            this.gantt.treeList.focusCell(rowIndex, colIndex); // activates the target cell even if it has tabindex="-1"
+        }
+        this.activeTimelineIndex = this.gantt.treeList.activeCell.dataRowIndex;
+        this.notifyTaskStatusChange();
+        if (this.gantt.treeList.activeCell.dataRowIndex >= 0) {
+            this.scrollHorizontallyToTask(this.activeTimelineIndex);
+            this.scrollSyncService.syncScrollTop('treelist', 'timeline');
+        }
     }
-    createEditDialog(dataItem, formGroup) {
-        this.dataItem = dataItem;
-        this.formGroup = formGroup;
-        this.showEditingDialog.next(true);
+    handleKeydown(event) {
+        const { keyCode, target, altKey } = event;
+        const isTimelineActive = this.timelineElement.contains(target);
+        if (isTimelineActive) {
+            if (isArrowUpDownKey(keyCode)) {
+                const direction = keyCode === Keys.ArrowUp ? -1 : 1;
+                this.activeTimelineIndex = this.activeTimelineIndex + direction;
+                this.activeTreeListCell = {
+                    rowIndex: this.activeTimelineIndex + this.treeListHeaderRowsCount,
+                    colIndex: this.activeTreeListCell.colIndex
+                };
+            }
+            else if (keyCode === Keys.Home) {
+                this.activeTimelineIndex = 0;
+                this.activeTreeListCell = {
+                    rowIndex: this.activeTimelineIndex + this.treeListHeaderRowsCount,
+                    colIndex: this.activeTreeListCell.colIndex
+                };
+            }
+            else if (keyCode === Keys.End) {
+                const lastAvailableIndex = this.gantt.treeList.view.data.length - 1;
+                this.activeTimelineIndex = lastAvailableIndex;
+                this.activeTreeListCell = {
+                    rowIndex: this.activeTimelineIndex + this.treeListHeaderRowsCount,
+                    colIndex: this.activeTreeListCell.colIndex
+                };
+            }
+            if (isNavigationKey(keyCode)) {
+                this.scrollHorizontallyToTask(this.activeTimelineIndex);
+                this.scrollSyncService.syncScrollTop('timeline', 'treelist');
+                this.notifyTaskStatusChange();
+                event.preventDefault();
+            }
+            if (keyCode === Keys.Space && hasObservers(this.gantt.selectionChange)) {
+                const task = this.gantt.renderedTreeListItems[this.activeTimelineIndex];
+                const selectionAction = this.gantt.getSelectionAction(event, task);
+                if (isPresent(task) && !this.gantt.isSameSelection(selectionAction, task)) {
+                    this.zone.run(() => this.gantt.notifySelectionChange(task, selectionAction));
+                }
+                event.preventDefault();
+            }
+            if (keyCode === Keys.Enter && hasObservers(this.gantt.taskClick)) {
+                const task = this.gantt.renderedTreeListItems[this.activeTimelineIndex];
+                if (isPresent(task)) {
+                    this.zone.run(() => this.gantt.notifyTaskClick(event, task, this.activeTimelineIndex));
+                }
+                event.preventDefault();
+            }
+            if (isExpandCollapseKey(keyCode, altKey)) {
+                const task = this.gantt.renderedTreeListItems[this.activeTimelineIndex];
+                if (isPresent(task) && this.gantt.hasChildren(task)) {
+                    const shouldExpand = keyCode === Keys.ArrowRight;
+                    const isExpanded = this.gantt.isExpanded(task);
+                    const sameState = shouldExpand === isExpanded;
+                    if (!sameState) {
+                        this.zone.run(() => {
+                            const expandEvent = { dataItem: task };
+                            // order is not arbitrary
+                            // the TreeList emits the individual events first, then the combined `expandStateChange` event
+                            const individualEmitter = shouldExpand ? this.gantt.rowExpand : this.gantt.rowCollapse;
+                            individualEmitter.emit(expandEvent);
+                            this.gantt.expandStateChange.emit(Object.assign({}, expandEvent, { expand: shouldExpand }));
+                            this.gantt.updateView();
+                            this.scrollHorizontallyToTask(this.activeTimelineIndex);
+                        });
+                    }
+                }
+                event.preventDefault();
+            }
+        }
+        const isTreeListActive = this.treeListElement.contains(target);
+        if (keyCode === Keys.Delete && (isTimelineActive || isTreeListActive) && hasObservers(this.gantt.taskDelete)) {
+            const taskIndex = isTreeListActive ?
+                this.gantt.treeList.activeCell.dataRowIndex :
+                this.activeTimelineIndex;
+            const task = this.gantt.renderedTreeListItems[taskIndex];
+            if (isPresent(task)) {
+                this.zone.run(() => this.gantt.notifyTaskDelete(task));
+            }
+        }
+        if (isViewDigitKey(keyCode) && !isToolbar(target, this.host) && !this.gantt.isInEditMode) {
+            const targetViewIndex = getIndexFromViewDigitKeyCode(keyCode);
+            const availableViews = this.gantt.views.toArray();
+            const targetView = availableViews[targetViewIndex];
+            if (isPresent(targetView) && targetView.type !== this.gantt.activeView) {
+                this.zone.run(() => this.gantt.changeActiveView(targetView.type));
+            }
+        }
     }
-    closeEditDialog() {
-        this.showEditingDialog.next(false);
-        this.dataItem = undefined;
-        this.formGroup = undefined;
+    /**
+     * Filters for task mousedown in the Timeline.
+     */
+    handleTimelineMousedown({ target }) {
+        if (isTask(target, this.host) && !isClearButton(target, this.host)) {
+            const taskIndex = getClosestTaskIndex(target, this.host);
+            this.focusTask(taskIndex);
+        }
     }
-    triggerEditEvent(editResultType) {
-        this.editEvent.next({
-            formGroup: this.formGroup,
-            dataItem: this.dataItem,
-            editResultType
-        });
+    /**
+     * Scrolls horizontally to the beginning of the target task if the beginning of its content is not in the viewport.
+     */
+    scrollHorizontallyToTask(index) {
+        const task = this.timelineElement.querySelectorAll('.k-task-wrap').item(index);
+        if (!isPresent(task)) {
+            return;
+        }
+        // scroll horizontally to the item if less than 200px from the beginning of its content are visible
+        const targetVisibleWidth = 200;
+        const isScrollBeforeTask = (this.timelineElement.clientWidth + this.timelineElement.scrollLeft) < (task.offsetLeft + targetVisibleWidth);
+        const isScrollAfterTask = this.timelineElement.scrollLeft > task.offsetLeft;
+        if (isScrollBeforeTask || isScrollAfterTask) {
+            this.timelineElement.scrollLeft = task.offsetLeft;
+        }
+    }
+    /**
+     * Focus the TreeList on TreeList mousedown.
+     * A nasty hack to trick `handleTreeListFocusIn` into regarding the previous focus target as again the TreeList.
+     * Otherwise cell clicks are wrongly overwritten in `handleTreeListFocusIn` and the click focus target is not respected.
+     */
+    focusTreeList() {
+        this.gantt.treeList.focus();
+    }
+    /**
+     * Fires the `taskStatusChanges` event with active and focused status retrieved from
+     * `this.activeTimelineIndex` and `this.isTimelineFocused`.
+     */
+    notifyTaskStatusChange() {
+        this.taskStatusChanges.next(this.activeTask);
     }
 };
-EditService = __decorate([
-    Injectable()
-], EditService);
+NavigationService = __decorate([
+    Injectable(),
+    __metadata("design:paramtypes", [NgZone,
+        Renderer2,
+        ScrollSyncService])
+], NavigationService);
 
 /**
  * @hidden
@@ -1655,6 +2641,12 @@ const mapPath = (item) => ({
 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.
  *
@@ -1727,7 +2719,7 @@ const DEFAULT_VIEW = 'week';
  * ```
  */
 let GanttComponent = GanttComponent_1 = class GanttComponent {
-    constructor(timelineViewService, scrollSyncService, renderer, mapper, optionChangesService, dependencyDomService, editService, localizationService, hostElement, zone) {
+    constructor(timelineViewService, scrollSyncService, renderer, mapper, optionChangesService, dependencyDomService, editService, localizationService, hostElement, zone, navigationService) {
         this.timelineViewService = timelineViewService;
         this.scrollSyncService = scrollSyncService;
         this.renderer = renderer;
@@ -1738,13 +2730,33 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         this.localizationService = localizationService;
         this.hostElement = hostElement;
         this.zone = zone;
+        this.navigationService = navigationService;
+        /**
+         * @hidden
+         */
+        this.roleDescription = 'Gantt Chart';
+        /**
+         * @hidden
+         */
+        this.role = 'application';
         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.
          *
@@ -1760,14 +2772,6 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
          * > When applied, the [`SelectableDirective`]({% slug api_gantt_selectabledirective %}) sets `selectable` to `true` internally.
          */
         this.selectable = false;
-        /**
-         * Gets or sets the callback function that retrieves the child items for a particular item.
-         */
-        this.fetchChildren = fetchChildren;
-        /**
-         * Gets or sets the callback function that indicates if a particular item has child items.
-         */
-        this.hasChildren = hasChildren;
         /**
          * Defines the dependencies that will be drawn between the rendered tasks.
          *
@@ -1806,6 +2810,12 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
          * The end of the work week (index based).
          */
         this.workWeekEnd = 5;
+        /**
+         * If set to `true`, the user can use dedicated shortcuts to interact with the Gantt.
+         * By default, navigation is disabled for the TreeList and Timeline parts of the component,
+         * ([see example]({% slug keyboard_navigation_gantt %})).
+         */
+        this.navigable = false;
         /**
          * Indicates whether the Gantt columns will be resized during initialization so that they fit their headers and row content.
          * Columns with autoSize set to false are excluded.
@@ -1849,7 +2859,8 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
          */
         this.cellClose = new EventEmitter();
         /**
-         * Fires when the end user clicks the `Delete` button in the task editing dialog or the task delete icon.
+         * Fires when the end user clicks the `Delete` button in the task editing dialog,
+         * the task delete icon, or presses the `Delete` key on the keyboard when a task in the timeline is focused.
          * Use the event handler to open a confirmation dialog when necessary.
          */
         this.taskDelete = new EventEmitter();
@@ -1873,6 +2884,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.
@@ -1929,6 +2945,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
          *
@@ -1945,6 +2970,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;
@@ -1955,6 +2981,8 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
             addTaskTool: 'none',
             viewSelectorTool: 'top'
         };
+        this._fetchChildren = fetchChildren;
+        this._hasChildren = hasChildren;
         this.rtl = false;
         this.optionChangesSubscriptions = new Subscription();
         this.editServiceSubscription = new Subscription();
@@ -1967,16 +2995,24 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         }));
         this.editService.getSelectedItem = this.getFirstSelectedItem.bind(this);
         this.editServiceSubscription.add(this.editService.showEditingDialog.subscribe(show => this.showEditingDialog = show));
-        this.editServiceSubscription.add(this.editService.showConfirmationDialog.subscribe(() => this.taskDelete.emit()));
+        this.editServiceSubscription.add(this.editService.taskDelete.subscribe(task => {
+            if (hasObservers(this.taskDelete)) {
+                this.zone.run(() => this.notifyTaskDelete(task));
+            }
+        }));
         this.editServiceSubscription.add(this.editService.editEvent.subscribe(args => {
             this[args.editResultType].emit({
-                formGroup: args.formGroup,
+                taskFormGroup: args.taskFormGroup,
                 item: getEditItem(args.dataItem, this.treeList.view.data, this.mapper),
+                dependencies: args.dependencies,
                 sender: this
             });
             this.showConfirmationDialog = this.showEditingDialog = false;
-            this.editService.dataItem = this.editService.formGroup = null;
+            this.editService.dataItem = this.editService.taskFormGroup = null;
             this.updateView();
+            if (this.navigable) {
+                this.focus();
+            }
         }));
         this.editServiceSubscription.add(this.editService.addEvent.subscribe(args => {
             const selectedItem = this.getFirstSelectedItem();
@@ -2000,6 +3036,12 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
     set toolbarTemplate(customToolbarTemplate) {
         this._customToolbarTemplate = customToolbarTemplate;
     }
+    get hostRoleDescriptionAttr() {
+        return this.roleDescription;
+    }
+    get hostRoleAttr() {
+        return this.role;
+    }
     get dir() {
         return this.direction;
     }
@@ -2082,6 +3124,26 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
     get toolbarSettings() {
         return this._toolbarSettings;
     }
+    /**
+     * Gets or sets the callback function that retrieves the child items for a particular item.
+     */
+    set fetchChildren(fn) {
+        this._fetchChildren = fn;
+        this.editService.fetchChildren = fn;
+    }
+    get fetchChildren() {
+        return this._fetchChildren;
+    }
+    /**
+     * Gets or sets the callback function that indicates if a particular item has child items.
+     */
+    set hasChildren(fn) {
+        this._hasChildren = fn;
+        this.editService.hasChildren = fn;
+    }
+    get hasChildren() {
+        return this._hasChildren;
+    }
     /**
      * The options of the timeline splitter pane. By default the pane is `collapsible`,
      * `resizable`, not `collapsed`, and its `size` is `'50%'`.
@@ -2137,6 +3199,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
      */
@@ -2146,6 +3219,15 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         }
         return this.treeList.view.data.map(item => item.data);
     }
+    /**
+     * @hidden
+     */
+    get viewItems() {
+        if (!isPresent(this.treeList)) {
+            return [];
+        }
+        return this.treeList.view.data;
+    }
     /**
      * @hidden
      */
@@ -2192,8 +3274,8 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
     /**
      * @hidden
      */
-    get editDialogFormGroup() {
-        return this.editService.formGroup;
+    get isInEditMode() {
+        return this.showEditingDialog || this.showConfirmationDialog || this.treeList.isEditing();
     }
     ngOnChanges(changes) {
         if (anyChanged(['data', 'activeView', 'workWeekStart', 'workWeekEnd', 'workDayStart', 'workDayEnd'], changes)) {
@@ -2202,6 +3284,14 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
     }
     ngAfterViewInit() {
         this.updateTreeListMargin();
+        if (this.navigable) {
+            this.navigationService.initialize({
+                gantt: this,
+                host: this.hostElement.nativeElement,
+                treeListElement: this.treeList.wrapper.nativeElement,
+                timelineElement: this.timeline.timelineContent.nativeElement
+            });
+        }
         const leftContainer = this.treeList.wrapper.nativeElement.querySelector('kendo-treelist-list > div');
         this.scrollSyncService.registerElement(leftContainer, 'treelist');
     }
@@ -2219,6 +3309,34 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
             this.localizationSubscription.unsubscribe();
         }
     }
+    /**
+     * Focuses the last active cell or task in the Gantt.
+     * If no item has previously been focused, the first cell of the TreeList part will receive focus,
+     * ([see example]({% slug keyboard_navigation_gantt %}#toc-controlling-the-focus)).
+     */
+    focus() {
+        if (this.navigable) {
+            this.navigationService.focusLastActiveItem();
+        }
+    }
+    /**
+     * Focuses the targeted cell in the TreeList part of the component,
+     * ([see example]({% slug keyboard_navigation_gantt %}#toc-controlling-the-focus)).
+     */
+    focusCell(rowIndex, colIndex) {
+        if (this.navigable) {
+            this.navigationService.focusCell(rowIndex, colIndex);
+        }
+    }
+    /**
+     * Focuses the targeted task in the Timeline part of the component,
+     * ([see example]({% slug keyboard_navigation_gantt %}#toc-controlling-the-focus)).
+     */
+    focusTask(taskIndex) {
+        if (this.navigable) {
+            this.navigationService.focusTask(taskIndex);
+        }
+    }
     /**
      * Applies the minimum possible width for the specified column,
      * so that the whole text fits without wrapping. This method expects the Gantt
@@ -2283,7 +3401,10 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
      */
     editTask(dataItem, formGroup) {
         if (!this.showEditingDialog) {
-            this.editService.createEditDialog(dataItem, formGroup);
+            const taskId = this.mapper.extractFromTask(dataItem, 'id');
+            const dependencies = this.dependencies.filter(item => this.mapper.extractFromDependency(item, 'toId') === taskId
+                || this.mapper.extractFromDependency(item, 'fromId') === taskId);
+            this.editService.createEditDialog(dataItem, formGroup, dependencies);
         }
     }
     /**
@@ -2300,6 +3421,15 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
     openConfirmationDialog() {
         this.showConfirmationDialog = true;
     }
+    /**
+     * @hidden
+     */
+    handleConfirmationDialogClose() {
+        this.showConfirmationDialog = false;
+        if (this.navigable) {
+            this.focus();
+        }
+    }
     /**
      * Opens a cell for editing.
      */
@@ -2384,7 +3514,7 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         if (hasObservers(this.taskClick)) {
             const taskIndex = getClosestTaskIndex(target, gantt);
             const task = this.renderedTreeListItems[taskIndex];
-            this.zone.run(() => this.emitTaskClick(event, task, taskIndex));
+            this.zone.run(() => this.notifyTaskClick(event, task, taskIndex));
         }
     }
     /**
@@ -2402,8 +3532,8 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         if ((hasObservers(this.selectionChange) && !this.isSameSelection(selectionAction, task)) ||
             hasObservers(this.taskClick)) {
             this.zone.run(() => {
-                this.emitSelectionChange(task, selectionAction);
-                this.emitTaskClick(event, task, taskIndex);
+                this.notifySelectionChange(task, selectionAction);
+                this.notifyTaskClick(event, task, taskIndex);
             });
         }
     }
@@ -2440,7 +3570,7 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         }
         const task = event.items.map(item => item.dataItem)[0]; // single selection only currently available
         const action = event.action;
-        this.emitSelectionChange(task, action);
+        this.notifySelectionChange(task, action);
     }
     /**
      * @hidden
@@ -2491,7 +3621,7 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
                 dataItem: task,
                 originalEvent: event,
                 sender: this,
-                rowIndex: taskIndex,
+                index: taskIndex,
                 type: 'dblclick'
             }));
         }
@@ -2502,16 +3632,35 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
     getText(token) {
         return this.localizationService.get(token);
     }
-    emitTaskClick(event, dataItem, itemIndex) {
+    /**
+     * @hidden
+     */
+    changeActiveView(view) {
+        if (view !== this.activeView) {
+            this.activeView = view;
+            this.loadTimelineData();
+            this.scrollSyncService.resetTimelineScrollLeft();
+            this.activeViewChange.emit(view);
+        }
+    }
+    /**
+     * @hidden
+     */
+    notifyTaskClick(event, dataItem, itemIndex) {
+        // simulates the TreeList `cellClick` event triggered by enter press (type: 'click')
+        const type = event instanceof KeyboardEvent ? 'click' : event.type;
         this.taskClick.emit({
             originalEvent: event,
             dataItem: dataItem,
-            rowIndex: itemIndex,
-            type: event.type,
+            index: itemIndex,
+            type: type,
             sender: this
         });
     }
-    emitSelectionChange(dataItem, action) {
+    /**
+     * @hidden
+     */
+    notifySelectionChange(dataItem, action) {
         if (this.isSameSelection(action, dataItem)) {
             return;
         }
@@ -2522,6 +3671,29 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         });
         this.treeList.updateView();
     }
+    /**
+     * @hidden
+     */
+    notifyTaskDelete(task) {
+        this.editService.dataItem = task;
+        this.taskDelete.emit({
+            item: getEditItem(task, this.treeList.view.data, this.mapper),
+            sender: this
+        });
+    }
+    /**
+     * @hidden
+     */
+    isSameSelection(action, dataItem) {
+        return action === 'select' && this.isSelected(dataItem);
+    }
+    /**
+     * @hidden
+     */
+    getSelectionAction({ ctrlKey, metaKey }, dataItem) {
+        const shouldToggleSelection = ctrlKey || metaKey;
+        return (shouldToggleSelection && this.isSelected(dataItem)) ? 'remove' : 'select';
+    }
     updateTreeListGroupClass(columns = this.columns) {
         if (!isPresent(this.treeList)) {
             return;
@@ -2548,23 +3720,65 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         }
         return this.views.find(view => view.type === this.activeView);
     }
-    isSameSelection(action, dataItem) {
-        return action === 'select' && this.isSelected(dataItem);
-    }
-    getSelectionAction({ ctrlKey, metaKey }, dataItem) {
-        const shouldToggleSelection = ctrlKey || metaKey;
-        return (shouldToggleSelection && this.isSelected(dataItem)) ? 'remove' : 'select';
-    }
     getFirstSelectedItem() {
         const isSelectedCallback = this.isSelected || isSelected;
         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)
@@ -2581,6 +3795,24 @@ __decorate([
     ContentChildren(ToolbarTemplateDirective),
     __metadata("design:type", QueryList)
 ], GanttComponent.prototype, "toolbarTemplateChildren", void 0);
+__decorate([
+    Input('aria-roledescription'),
+    __metadata("design:type", String)
+], GanttComponent.prototype, "roleDescription", void 0);
+__decorate([
+    HostBinding('attr.aria-roledescription'),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [])
+], GanttComponent.prototype, "hostRoleDescriptionAttr", null);
+__decorate([
+    Input('role'),
+    __metadata("design:type", String)
+], GanttComponent.prototype, "role", void 0);
+__decorate([
+    HostBinding('attr.role'),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [])
+], GanttComponent.prototype, "hostRoleAttr", null);
 __decorate([
     HostBinding('class.k-gantt'),
     __metadata("design:type", Boolean)
@@ -2623,6 +3855,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)
@@ -2638,12 +3874,14 @@ __decorate([
 ], GanttComponent.prototype, "toolbarSettings", null);
 __decorate([
     Input(),
-    __metadata("design:type", Function)
-], GanttComponent.prototype, "fetchChildren", void 0);
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function])
+], GanttComponent.prototype, "fetchChildren", null);
 __decorate([
     Input(),
-    __metadata("design:type", Function)
-], GanttComponent.prototype, "hasChildren", void 0);
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function])
+], GanttComponent.prototype, "hasChildren", null);
 __decorate([
     Input(),
     __metadata("design:type", Array)
@@ -2680,6 +3918,10 @@ __decorate([
     Input(),
     __metadata("design:type", Number)
 ], GanttComponent.prototype, "workWeekEnd", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttComponent.prototype, "navigable", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Object),
@@ -2720,6 +3962,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)
@@ -2760,6 +4007,10 @@ __decorate([
     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)
@@ -2817,6 +4068,7 @@ GanttComponent = GanttComponent_1 = __decorate([
         selector: 'kendo-gantt',
         exportAs: 'kendoGantt',
         providers: [
+            GanttLocalizationService,
             LocalizationService,
             {
                 provide: DataBoundTreeComponent,
@@ -2834,7 +4086,9 @@ GanttComponent = GanttComponent_1 = __decorate([
             DependencyDomService,
             MappingService,
             OptionChangesService,
-            EditService
+            EditService,
+            TimelineScrollService,
+            NavigationService
         ],
         template: `
         <ng-container kendoGanttLocalizedMessages
@@ -3061,6 +4315,7 @@ GanttComponent = GanttComponent_1 = __decorate([
                         [data]="data"
                         [hasChildren]="hasChildren"
                         [fetchChildren]="fetchChildren"
+                        [navigable]="navigable"
                         [isExpanded]="isExpanded"
                         [autoSize]="columnsAutoSize"
                         [columnMenu]="columnMenu"
@@ -3149,7 +4404,9 @@ GanttComponent = GanttComponent_1 = __decorate([
                     [scrollable]="false">
                     <kendo-gantt-timeline
                         *ngIf="views && views.length"
-                        [rows]="renderedTreeListItems"
+                        [renderDependencyDragClues]="renderDependencyDragClues"
+                        [dragScrollSettings]="dragScrollSettings"
+                        [rows]="viewItems"
                         [slots]="timelineSlots"
                         [groupSlots]="timelineGroupSlots"
                         [tableWidth]="tableWidth"
@@ -3159,7 +4416,8 @@ GanttComponent = GanttComponent_1 = __decorate([
                         [summaryTaskTemplate]="summaryTaskTemplate?.templateRef"
                         [taskClass]="taskClass"
                         [dependencies]="dependencies"
-                        [hasChildren]="hasChildren"
+                        [isExpanded]="isExpanded"
+                        [selectable]="selectable"
                         [isTaskSelected]="isTaskSelected"
                         [kendoEventsOutsideAngular]="{
                             click: handleTimelineClick,
@@ -3178,18 +4436,21 @@ GanttComponent = GanttComponent_1 = __decorate([
             [showViewSelector]="toolbarSettings.viewSelectorTool === 'bottom' || toolbarSettings.viewSelectorTool === 'both'"
             class="k-gantt-footer k-toolbar k-gantt-toolbar"
             position="bottom"></kendo-gantt-toolbar>
-        <kendo-gantt-edit-dialog *ngIf="showEditingDialog" [formGroup]="editDialogFormGroup"></kendo-gantt-edit-dialog>
+        <kendo-gantt-edit-dialog
+            *ngIf="showEditingDialog"
+            [data]="data">
+        </kendo-gantt-edit-dialog>
         <kendo-dialog
             *ngIf="showConfirmationDialog"
             [width]="575"
             [height]="170"
             [title]="getText('confirmationDialogTitle')"
-            (close)="showConfirmationDialog = false;">
-            <span>{{getText('confirmationDialogContent')}}</span>
+            (close)="handleConfirmationDialogClose()">
+            <span>{{ getText('confirmationDialogContent') }}</span>
             <kendo-dialog-actions layout="normal">
                 <kendo-treelist-spacer></kendo-treelist-spacer>
                 <button kendoButton [primary]="true" (click)="handleDeleteConfirmation()">{{ getText('deleteButtonText') }}</button>
-                <button kendoButton (click)="showConfirmationDialog = false;">{{ getText('cancelButtonText') }}</button>
+                <button kendoButton (click)="handleConfirmationDialogClose()">{{ getText('cancelButtonText') }}</button>
             </kendo-dialog-actions>
         </kendo-dialog>
    `
@@ -3203,205 +4464,14 @@ GanttComponent = GanttComponent_1 = __decorate([
         EditService,
         LocalizationService,
         ElementRef,
-        NgZone])
+        NgZone,
+        NavigationService])
 ], GanttComponent);
 
 /**
  * @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
@@ -3418,8 +4488,8 @@ let GanttTasksTableBodyComponent = class GanttTasksTableBodyComponent {
             this.dependencyDomService.registerTimelineRow(timelineRow.nativeElement);
         }
     }
-    isMileStone(task) {
-        return !this.hasChildren(task) && isEqual(this.mapper.extractFromTask(task, 'start'), this.mapper.extractFromTask(task, 'end'));
+    isMileStone(item) {
+        return !item.hasChildren && isEqual(this.mapper.extractFromTask(item.data, 'start'), this.mapper.extractFromTask(item.data, 'end'));
     }
 };
 __decorate([
@@ -3427,6 +4497,10 @@ __decorate([
     __metadata("design:type", ElementRef),
     __metadata("design:paramtypes", [ElementRef])
 ], GanttTasksTableBodyComponent.prototype, "timelineRow", null);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttTasksTableBodyComponent.prototype, "selectable", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Array)
@@ -3454,11 +4528,15 @@ __decorate([
 __decorate([
     Input(),
     __metadata("design:type", Function)
-], GanttTasksTableBodyComponent.prototype, "hasChildren", void 0);
+], GanttTasksTableBodyComponent.prototype, "isExpanded", void 0);
 __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]',
@@ -3467,33 +4545,43 @@ GanttTasksTableBodyComponent = __decorate([
             <td>
                 <kendo-gantt-milestone-task
                     *ngIf="isMileStone(item); else task"
-                    [dataItem]="item"
+                    [dataItem]="item.data"
+                    [level]="item.level"
                     [activeView]="activeView"
                     [taskClass]="taskClass"
+                    [selectable]="selectable"
                     [isSelected]="isTaskSelected"
                     [index]="index"
+                    [renderDependencyDragClues]="renderDependencyDragClues"
                 >
                 </kendo-gantt-milestone-task>
                 <ng-template #task>
                     <kendo-gantt-summary-task
-                        *ngIf="hasChildren(item)"
-                        [dataItem]="item"
+                        *ngIf="item.hasChildren"
+                        [dataItem]="item.data"
+                        [level]="item.level"
                         [template]="summaryTaskTemplate"
                         [activeView]="activeView"
                         [taskClass]="taskClass"
+                        [selectable]="selectable"
                         [isSelected]="isTaskSelected"
+                        [isExpanded]="isExpanded"
                         [index]="index"
+                        [renderDependencyDragClues]="renderDependencyDragClues"
                     >
                     </kendo-gantt-summary-task>
                     <kendo-gantt-task
-                        *ngIf="!hasChildren(item)"
-                        [dataItem]="item"
+                        *ngIf="!item.hasChildren"
+                        [dataItem]="item.data"
+                        [level]="item.level"
                         [taskContentTemplate]="taskContentTemplate"
                         [taskTemplate]="taskTemplate"
                         [activeView]="activeView"
                         [taskClass]="taskClass"
+                        [selectable]="selectable"
                         [isSelected]="isTaskSelected"
                         [index]="index"
+                        [renderDependencyDragClues]="renderDependencyDragClues"
                     >
                     </kendo-gantt-task>
                 </ng-template>
@@ -3538,22 +4626,32 @@ const slotUnitDuration = {
     week: MS_PER_DAY,
     month: MS_PER_DAY * 7
 };
+const FOCUSED_CLASS = 'k-focus';
 /**
  * @hidden
  */
 class GanttTaskBase {
     constructor(mapper, // left public to be available for usage in the templates
-    timelineViewService, dependencyDomService, optionChangesService, cdr) {
+    timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
         this.mapper = mapper;
         this.timelineViewService = timelineViewService;
         this.dependencyDomService = dependencyDomService;
         this.optionChangesService = optionChangesService;
         this.cdr = cdr;
+        this.navigationService = navigationService;
         this.wrapperClass = true;
-        this.viewChangesSubscription = new Subscription();
-        this.viewChangesSubscription.add(this.optionChangesService.viewChanges.subscribe(() => {
-            this.cdr.markForCheck();
-        }));
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(this.optionChangesService.viewChanges
+            .subscribe(() => this.cdr.markForCheck()));
+        this.subscriptions.add(this.navigationService.taskStatusChanges
+            .subscribe(this.updateActiveState.bind(this)));
+    }
+    get taskIndexAttribute() {
+        return this.index;
+    }
+    get ariaSelected() {
+        // assinging null will not render the attribute at all (desired in selectable="false" mode)
+        return this.selectable ? String(this.isSelected(this.dataItem)) : null;
     }
     get slotUnitDuration() {
         return slotUnitDuration[this.activeView];
@@ -3561,25 +4659,8 @@ class GanttTaskBase {
     get viewService() {
         return this.timelineViewService.service(this.activeView);
     }
-    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 slotWidth() {
+        return this.viewService.options.slotWidth;
     }
     get taskWidth() {
         const itemDuration = this.mapper.extractFromTask(this.dataItem, 'end') - this.mapper.extractFromTask(this.dataItem, 'start');
@@ -3587,6 +4668,12 @@ class GanttTaskBase {
         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;
@@ -3598,11 +4685,48 @@ 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();
+        }
+        if (this.navigationService.enabled && isPresent(changes.index)) {
+            this.updateActiveState(this.navigationService.activeTask);
+        }
+    }
+    ngOnDestroy() {
+        if (isPresent(this.dataItem)) {
+            this.dependencyDomService.unregisterTask(this.dataItem);
+        }
+        this.subscriptions.unsubscribe();
+    }
+    updateActiveState({ activeIndex, isFocused }) {
+        const isActive = activeIndex === this.index;
+        const tabindex = isActive ? '0' : '-1';
+        this.taskElement.nativeElement.setAttribute('tabindex', tabindex);
+        if (isActive && isFocused) {
+            this.taskElement.nativeElement.focus();
+            this.taskElement.nativeElement.classList.add(FOCUSED_CLASS);
+        }
+        else {
+            this.taskElement.nativeElement.classList.remove(FOCUSED_CLASS);
+        }
+    }
 }
 __decorate([
     HostBinding('class.k-task-wrap'),
     __metadata("design:type", Boolean)
 ], GanttTaskBase.prototype, "wrapperClass", void 0);
+__decorate([
+    HostBinding('attr.data-task-index'),
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [])
+], GanttTaskBase.prototype, "taskIndexAttribute", null);
 __decorate([
     ViewChild('task', { static: true }),
     __metadata("design:type", ElementRef)
@@ -3615,6 +4739,18 @@ __decorate([
     Input(),
     __metadata("design:type", Number)
 ], GanttTaskBase.prototype, "index", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Number)
+], GanttTaskBase.prototype, "level", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttTaskBase.prototype, "renderDependencyDragClues", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttTaskBase.prototype, "selectable", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Function)
@@ -3627,19 +4763,25 @@ __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) {
-        super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr);
+    constructor(editService, touchEnabled$$1, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
+        super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService);
         this.editService = editService;
+        this.touchEnabled = touchEnabled$$1;
     }
     onTaskDelete() {
         this.editService.dataItem = this.dataItem;
-        this.editService.showConfirmationDialog.next();
+        this.editService.taskDelete.next(this.dataItem);
     }
 };
 __decorate([
@@ -3663,17 +4805,19 @@ GanttTaskComponent = GanttTaskComponent_1 = __decorate([
         <div
             #task
             class="k-task k-task-single"
+            role="treeitem"
             [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)"
+            [attr.aria-selected]="ariaSelected"
+            [attr.aria-level]="level + 1"
         >
             <ng-container *ngIf="!taskTemplate">
                 <div
                     class="k-task-complete"
                     [style.width.px]="completionOverlayWidth"
+                        aria-hidden="true"
                 >
                 </div>
                 <div class="k-task-content">
@@ -3688,10 +4832,17 @@ GanttTaskComponent = GanttTaskComponent_1 = __decorate([
                         >
                         </ng-template>
                     </div>
-                    <span class="k-task-actions">
+                    <span
+                        class="k-task-actions"
+                        aria-hidden="true"
+                    >
                         <span
-                            (click)="onTaskDelete()"
-                            class="k-link k-task-delete">
+                            class="k-link k-task-delete"
+                            [kendoEventsOutsideAngular]="{
+                                click: onTaskDelete
+                            }"
+                            [scope]="this"
+                        >
                             <span class="k-icon k-i-close"></span>
                         </span>
                     </span>
@@ -3707,14 +4858,36 @@ 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>
+    `,
+        styles: [`
+        .k-task.k-focus {
+            box-shadow: 0 0 4px 3px grey;
+            outline: none;
+        }
+        .k-task.k-focus.k-state-selected {
+            box-shadow: 0 0 4px 3px #ffaea8;
+        }
+    `]
     }),
-    __metadata("design:paramtypes", [MappingService,
+    __param(1, Inject(TOUCH_ENABLED)),
+    __metadata("design:paramtypes", [EditService, Boolean, MappingService,
         TimelineViewService,
         DependencyDomService,
         OptionChangesService,
         ChangeDetectorRef,
-        EditService])
+        NavigationService])
 ], GanttTaskComponent);
 
 var GanttSummaryTaskComponent_1;
@@ -3722,10 +4895,17 @@ var GanttSummaryTaskComponent_1;
  * @hidden
  */
 let GanttSummaryTaskComponent = GanttSummaryTaskComponent_1 = class GanttSummaryTaskComponent extends GanttTaskBase {
-    constructor(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
-        super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr);
+    constructor(touchEnabled$$1, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
+        super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService);
+        this.touchEnabled = touchEnabled$$1;
         this.summaryWrapperClass = true;
     }
+    get ariaExpanded() {
+        // if no callback is provided, all child items are displayed and the item is regarded as expanded
+        // replicates the TreeList aria-expanded behavior
+        const isExpanded = !isPresent(this.isExpanded) || this.isExpanded(this.dataItem);
+        return String(isExpanded);
+    }
 };
 __decorate([
     HostBinding('class.k-summary-wrap'),
@@ -3735,6 +4915,10 @@ __decorate([
     Input(),
     __metadata("design:type", TemplateRef)
 ], GanttSummaryTaskComponent.prototype, "template", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], GanttSummaryTaskComponent.prototype, "isExpanded", void 0);
 GanttSummaryTaskComponent = GanttSummaryTaskComponent_1 = __decorate([
     Component({
         selector: 'kendo-gantt-summary-task',
@@ -3747,13 +4931,15 @@ GanttSummaryTaskComponent = GanttSummaryTaskComponent_1 = __decorate([
         template: `
         <div
             #task
+            role="treeitem"
             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)"
+            [attr.aria-selected]="ariaSelected"
+            [attr.aria-expanded]="ariaExpanded"
+            [attr.aria-level]="level + 1"
         >
             <div *ngIf="!template; else summaryTemplate"
                 class="k-task-summary-progress"
@@ -3774,13 +4960,36 @@ 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>
+    `,
+        styles: [`
+        .k-task.k-focus {
+            box-shadow: 0 0 4px 3px grey;
+            outline: none;
+        }
+        .k-task.k-focus.k-state-selected {
+            box-shadow: 0 0 4px 3px #ffaea8;
+        }
+    `]
     }),
-    __metadata("design:paramtypes", [MappingService,
+    __param(0, Inject(TOUCH_ENABLED)),
+    __metadata("design:paramtypes", [Boolean, MappingService,
         TimelineViewService,
         DependencyDomService,
         OptionChangesService,
-        ChangeDetectorRef])
+        ChangeDetectorRef,
+        NavigationService])
 ], GanttSummaryTaskComponent);
 
 var GanttMilestoneTaskComponent_1;
@@ -3788,8 +4997,9 @@ var GanttMilestoneTaskComponent_1;
  * @hidden
  */
 let GanttMilestoneTaskComponent = GanttMilestoneTaskComponent_1 = class GanttMilestoneTaskComponent extends GanttTaskBase {
-    constructor(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
-        super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr);
+    constructor(touchEnabled$$1, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
+        super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService);
+        this.touchEnabled = touchEnabled$$1;
         this.milestoneWrapperClass = true;
     }
 };
@@ -3809,21 +5019,45 @@ GanttMilestoneTaskComponent = GanttMilestoneTaskComponent_1 = __decorate([
         template: `
         <div
             #task
+            role="treeitem"
             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"
+            [attr.aria-selected]="ariaSelected"
+            [attr.aria-level]="level + 1"
         >
         </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>
+    `,
+        styles: [`
+        .k-task.k-focus {
+            box-shadow: 0 0 4px 3px grey;
+            outline: none;
+        }
+        .k-task.k-focus.k-state-selected {
+            box-shadow: 0 0 4px 3px #ffaea8;
+        }
+    `]
     }),
-    __metadata("design:paramtypes", [MappingService,
+    __param(0, Inject(TOUCH_ENABLED)),
+    __metadata("design:paramtypes", [Boolean, MappingService,
         TimelineViewService,
         DependencyDomService,
         OptionChangesService,
-        ChangeDetectorRef])
+        ChangeDetectorRef,
+        NavigationService])
 ], GanttMilestoneTaskComponent);
 
 /**
@@ -4019,10 +5253,10 @@ SelectableDirective = __decorate([
  * @hidden
  */
 let ToolbarComponent = class ToolbarComponent {
-    constructor(gantt, scrollSyncService) {
+    constructor(gantt) {
         this.gantt = gantt;
-        this.scrollSyncService = scrollSyncService;
         this.context = {};
+        this.role = 'toolbar';
     }
     set position(value) {
         this.context.position = this._position = value;
@@ -4038,13 +5272,14 @@ let ToolbarComponent = class ToolbarComponent {
         const templatePosition = ganttToolbarTemplate ? ganttToolbarTemplate.position : null;
         return ganttToolbarTemplate && (templatePosition === 'both' || templatePosition === this.position);
     }
-    onViewChange(e) {
-        this.gantt.activeView = e; // TODO: may be load the timeline data directly in an activeView setter?
-        this.gantt.loadTimelineData();
-        this.gantt.activeViewChange.emit(e);
-        this.scrollSyncService.resetTimelineScrollLeft();
+    handleViewChange(view) {
+        this.gantt.changeActiveView(view);
     }
 };
+__decorate([
+    HostBinding('attr.role'),
+    __metadata("design:type", String)
+], ToolbarComponent.prototype, "role", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Boolean)
@@ -4069,7 +5304,7 @@ ToolbarComponent = __decorate([
                 *ngIf="showViewSelector"
                 [views]="gantt.viewTypes"
                 [activeView]="gantt.activeView"
-                (activeViewChange)="onViewChange($event)"></kendo-gantt-view-selector>
+                (activeViewChange)="handleViewChange($event)"></kendo-gantt-view-selector>
         </ng-container>
         <ng-template
             *ngIf="renderTemplate"
@@ -4079,8 +5314,7 @@ ToolbarComponent = __decorate([
         </ng-template>
     `
     }),
-    __metadata("design:paramtypes", [GanttComponent,
-        ScrollSyncService])
+    __metadata("design:paramtypes", [GanttComponent])
 ], ToolbarComponent);
 
 /**
@@ -4135,7 +5369,9 @@ ViewSelectorComponent = __decorate([
     Component({
         selector: 'kendo-gantt-view-selector',
         template: `
-        <select class="k-dropdown k-views-dropdown"
+        <select
+            class="k-dropdownlist k-picker k-rounded-md k-views-dropdown"
+            aria-label="View Selector"
             [value]="activeView"
             (change)="activeViewChange.emit($event.target.value)">
             <option *ngFor="let view of views" [value]="view">{{getViewTypeText(view)}}</option>
@@ -4162,6 +5398,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;
@@ -4195,9 +5434,9 @@ const dependencyCoordinates = (from, to, rowHeight, type, minDistanceBeforeTurn,
               |       |
         [[[]]]-       -[[[]]]
      */
-    if (type === 0 /* FF */ || type === 3 /* SS */) {
+    if (type === DependencyType.FF || type === DependencyType.SS) {
         // polyline start from first task
-        const dir = type === 3 /* SS */ ? 'left' : 'right';
+        const dir = type === DependencyType.SS ? 'left' : 'right';
         top = from.top;
         left = from[dir];
         points.push({ top, left });
@@ -4223,9 +5462,9 @@ const dependencyCoordinates = (from, to, rowHeight, type, minDistanceBeforeTurn,
                                     |
                                     -[[[]]]
         */
-        const startDir = type === 2 /* SF */ ? 'left' : 'right';
-        const endDir = type === 2 /* SF */ ? 'right' : 'left';
-        const additionalTurn = type === 2 /* SF */
+        const startDir = type === DependencyType.SF ? 'left' : 'right';
+        const endDir = type === DependencyType.SF ? 'right' : 'left';
+        const additionalTurn = type === DependencyType.SF
             ? from[startDir] - minDistanceBeforeTurn * 2 < to[endDir]
             : from[startDir] + minDistanceBeforeTurn * 2 > to[endDir];
         // polyline start from first task
@@ -4308,80 +5547,645 @@ 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.
+ */
+const ARROW_SIZE = 4;
+/**
+ * Defines the distance the polyline will cover from the task element before making a turn.
+ */
+const MIN_DISTANCE_BEFORE_TURN = 10;
+/**
+ * @hidden
+ */
+let GanttDependencyDirective = class GanttDependencyDirective {
+    constructor(polyline, zone, renderer, mapper, dependencyDomService) {
+        this.polyline = polyline;
+        this.zone = zone;
+        this.renderer = renderer;
+        this.mapper = mapper;
+        this.dependencyDomService = dependencyDomService;
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(dependencyDomService.taskChanges
+            .pipe(switchMap(changes => 
+        // reacts only on the very last event emission,
+        // ensures that the tasks are drawn in the DOM
+        this.zone.onStable.pipe(take(1), map(() => changes))))
+            .subscribe(changes => this.updatePoints(changes)));
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    ngOnChanges(changes) {
+        if (isPresent(changes.dependency)) {
+            this.updatePoints(this.dependencyDomService.dependencyDomArgs);
+        }
+    }
+    updatePoints({ timelineRow, contentContainer, tasks }) {
+        if (!isPresent(timelineRow) || !isPresent(contentContainer) ||
+            !isPresent(tasks) || tasks.size === 0 ||
+            !tasks.has(this.mapper.extractFromDependency(this.dependency, 'fromId')) || !tasks.has(this.mapper.extractFromDependency(this.dependency, 'toId'))) {
+            this.clearPoints();
+            return;
+        }
+        const fromCoordinates = getElementRect(tasks.get(this.mapper.extractFromDependency(this.dependency, 'fromId')), contentContainer);
+        const toCoordinates = getElementRect(tasks.get(this.mapper.extractFromDependency(this.dependency, 'toId')), contentContainer);
+        const timelineRowHeight = isDocumentAvailable() ? timelineRow.getBoundingClientRect().height : 0;
+        const points = dependencyCoordinates(fromCoordinates, toCoordinates, timelineRowHeight, this.dependency.type, MIN_DISTANCE_BEFORE_TURN, ARROW_SIZE);
+        this.drawPoints(points);
+    }
+    clearPoints() {
+        this.renderer.setAttribute(this.polyline.nativeElement, 'points', '');
+    }
+    drawPoints(points) {
+        if (!isPresent(points) || points.length === 0) {
+            this.clearPoints();
+            return;
+        }
+        const parsedCoords = points.map(({ left, top }) => `${left},${top}`).join(' ');
+        this.renderer.setAttribute(this.polyline.nativeElement, 'points', parsedCoords);
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttDependencyDirective.prototype, "dependency", void 0);
+GanttDependencyDirective = __decorate([
+    Directive({
+        selector: '[kendoGanttDependency]'
+    }),
+    __metadata("design:paramtypes", [ElementRef,
+        NgZone,
+        Renderer2,
+        MappingService,
+        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);
 
 /**
- * Defines the size of the arrow that will be drawn at the end of each Gantt dependency.
+ * @hidden
  */
-const ARROW_SIZE = 4;
+var ScrollDirection;
+(function (ScrollDirection) {
+    ScrollDirection[ScrollDirection["Backwards"] = -1] = "Backwards";
+    ScrollDirection[ScrollDirection["Forward"] = 1] = "Forward";
+})(ScrollDirection || (ScrollDirection = {}));
 /**
- * Defines the distance the polyline will cover from the task element before making a turn.
+ * @hidden
  */
-const MIN_DISTANCE_BEFORE_TURN = 10;
+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.
  */
-let GanttDependencyDirective = class GanttDependencyDirective {
-    constructor(polyline, zone, renderer, mapper, dependencyDomService) {
-        this.polyline = polyline;
+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.renderer = renderer;
-        this.mapper = mapper;
-        this.dependencyDomService = dependencyDomService;
         this.subscriptions = new Subscription();
-        this.subscriptions.add(dependencyDomService.taskChanges
-            .pipe(switchMap(changes => 
-        // reacts only on the very last event emission,
-        // ensures that the tasks are drawn in the DOM
-        this.zone.onStable.pipe(take(1), map(() => changes))))
-            .subscribe(changes => this.updatePoints(changes)));
+        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();
     }
-    ngOnChanges(changes) {
-        if (isPresent(changes.dependency)) {
-            this.updatePoints(this.dependencyDomService.dependencyDomArgs);
-        }
-    }
-    updatePoints({ timelineRow, contentContainer, tasks }) {
-        if (!isPresent(timelineRow) || !isPresent(contentContainer) ||
-            !isPresent(tasks) || tasks.size === 0 ||
-            !tasks.has(this.mapper.extractFromDependency(this.dependency, 'fromId')) || !tasks.has(this.mapper.extractFromDependency(this.dependency, 'toId'))) {
-            this.clearPoints();
-            return;
-        }
-        const fromCoordinates = getElementRect(tasks.get(this.mapper.extractFromDependency(this.dependency, 'fromId')), contentContainer);
-        const toCoordinates = getElementRect(tasks.get(this.mapper.extractFromDependency(this.dependency, 'toId')), contentContainer);
-        const timelineRowHeight = isDocumentAvailable() ? timelineRow.getBoundingClientRect().height : 0;
-        const points = dependencyCoordinates(fromCoordinates, toCoordinates, timelineRowHeight, this.dependency.type, MIN_DISTANCE_BEFORE_TURN, ARROW_SIZE);
-        this.drawPoints(points);
+    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);
+            }
+        });
     }
-    clearPoints() {
-        this.renderer.setAttribute(this.polyline.nativeElement, 'points', '');
+    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);
+            }
+        });
     }
-    drawPoints(points) {
-        if (!isPresent(points) || points.length === 0) {
-            this.clearPoints();
-            return;
+    cancelScroll() {
+        if (isPresent(this.verticalScrollInterval)) {
+            clearInterval(this.verticalScrollInterval);
+            this.verticalScrollInterval = null;
+        }
+        if (isPresent(this.horizontalScrollInterval)) {
+            clearInterval(this.horizontalScrollInterval);
+            this.horizontalScrollInterval = null;
         }
-        const parsedCoords = points.map(({ left, top }) => `${left},${top}`).join(' ');
-        this.renderer.setAttribute(this.polyline.nativeElement, 'points', parsedCoords);
     }
 };
 __decorate([
     Input(),
     __metadata("design:type", Object)
-], GanttDependencyDirective.prototype, "dependency", void 0);
-GanttDependencyDirective = __decorate([
+], TimelineScrollableDirective.prototype, "scrollSettings", void 0);
+TimelineScrollableDirective = __decorate([
     Directive({
-        selector: '[kendoGanttDependency]'
+        selector: '[kendoGanttTimelineScrollable]'
     }),
     __metadata("design:paramtypes", [ElementRef,
-        NgZone,
-        Renderer2,
-        MappingService,
-        DependencyDomService])
-], GanttDependencyDirective);
+        TimelineScrollService,
+        NgZone])
+], TimelineScrollableDirective);
 
 var TimelineDayViewComponent_1;
 let TimelineDayViewComponent = TimelineDayViewComponent_1 = class TimelineDayViewComponent extends ViewBase {
@@ -4459,25 +6263,46 @@ TimelineMonthViewComponent = TimelineMonthViewComponent_1 = __decorate([
  * @hidden
  */
 let EditDialogComponent = class EditDialogComponent {
-    constructor(mapper, editService, localizationService) {
+    constructor(mapper, editService, cdr, localizationService) {
         this.mapper = mapper;
         this.editService = editService;
+        this.cdr = cdr;
         this.localizationService = localizationService;
     }
+    ngOnInit() {
+        this.editService.loadTasks(this.data).subscribe(value => {
+            this.loadedTasks = value;
+        });
+    }
+    get predecessors() {
+        return this.editService.predecessors;
+    }
+    set predecessors(items) {
+        this.editService.predecessors = items;
+    }
+    get successors() {
+        return this.editService.successors;
+    }
+    set successors(items) {
+        this.editService.successors = items;
+    }
     getText(token) {
         return this.localizationService.get(token);
     }
+    getDependencyType(typeId) {
+        return DependencyType[typeId];
+    }
     handleEditingResult(editResultType) {
         this.editService.triggerEditEvent(editResultType);
     }
-    onTaskDelete() {
-        this.editService.showConfirmationDialog.next();
+    handleTaskDelete() {
+        this.editService.taskDelete.next(this.editService.dataItem);
     }
 };
 __decorate([
     Input(),
-    __metadata("design:type", FormGroup)
-], EditDialogComponent.prototype, "formGroup", void 0);
+    __metadata("design:type", Array)
+], EditDialogComponent.prototype, "data", void 0);
 EditDialogComponent = __decorate([
     Component({
         selector: 'kendo-gantt-edit-dialog',
@@ -4489,36 +6314,44 @@ EditDialogComponent = __decorate([
             (close)="handleEditingResult('cancel')">
             <kendo-dialog-messages
                 [closeTitle]="getText('taskEditingDialogCloseTitle')"></kendo-dialog-messages>
-            <form class="k-form" [formGroup]="formGroup">
-                <kendo-formfield *ngIf="formGroup.contains(mapper.taskFields.title)">
-                    <kendo-label [for]="mapper.taskFields.title" [text]="getText('titleFieldInputLabel')"></kendo-label>
-                    <input class="k-textbox" [formControlName]="mapper.taskFields.title" />
-                </kendo-formfield>
-                <div class="k-hstack">
-                    <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.start)">
-                        <kendo-label [for]="mapper.taskFields.start" [text]="getText('startFieldInputLabel')"></kendo-label>
-                        <kendo-datetimepicker [formControlName]="mapper.taskFields.start"></kendo-datetimepicker>
-                    </kendo-formfield>
-                    <kendo-treelist-spacer></kendo-treelist-spacer>
-                    <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.end)">
-                        <kendo-label [for]="mapper.taskFields.end" [text]="getText('endFieldInputLabel')"></kendo-label>
-                        <kendo-datetimepicker [formControlName]="mapper.taskFields.end"></kendo-datetimepicker>
-                    </kendo-formfield>
-                </div>
-                <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.completionRatio)">
-                    <kendo-label [for]="mapper.taskFields.completionRatio" [text]="getText('completionRatioFieldInputLabel')"></kendo-label>
-                    <kendo-numerictextbox
-                        [formControlName]="mapper.taskFields.completionRatio"
-                        [min]="0"
-                        [max]="1"
-                        [decimals]="2"
-                        format="p2"
-                        [step]="0.01"
-                    ></kendo-numerictextbox>
-                </kendo-formfield>
-            </form>
+
+            <kendo-tabstrip [keepTabContent]="true" style="height: 345px;">
+                <kendo-tabstrip-tab [title]="getText('taskEditingGeneralTabTitle')" [selected]="true">
+                    <ng-template kendoTabContent>
+                    <kendo-gantt-task-fields></kendo-gantt-task-fields>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+                <kendo-tabstrip-tab [title]="getText('taskEditingPredecessorsTabTitle')">
+                    <ng-template kendoTabContent>
+                        <kendo-gantt-dependencies-table
+                            [tasks]="loadedTasks"
+                            [(dependencies)]="predecessors"
+                            dependencyType="predecessor"
+                        >
+                        </kendo-gantt-dependencies-table>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+                <kendo-tabstrip-tab [title]="getText('taskEditingSuccessorsTabTitle')">
+                    <ng-template kendoTabContent>
+                        <kendo-gantt-dependencies-table
+                            [tasks]="loadedTasks"
+                            [(dependencies)]="successors"
+                            dependencyType="successor">
+                        </kendo-gantt-dependencies-table>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+            </kendo-tabstrip>
+
             <kendo-dialog-actions layout="normal">
-                <button kendoButton (click)="onTaskDelete()">{{ getText('deleteButtonText') }}</button>
+                <button
+                    kendoButton
+                    [kendoEventsOutsideAngular]="{
+                        click: handleTaskDelete
+                    }"
+                    [scope]="this"
+                >
+                    {{ getText('deleteButtonText') }}
+                </button>
                 <kendo-treelist-spacer></kendo-treelist-spacer>
                 <button kendoButton [primary]="true" (click)="handleEditingResult('save')">{{ getText('saveButtonText') }}</button>
                 <button kendoButton (click)="handleEditingResult('cancel')">{{ getText('cancelButtonText') }}</button>
@@ -4528,6 +6361,7 @@ EditDialogComponent = __decorate([
     }),
     __metadata("design:paramtypes", [MappingService,
         EditService,
+        ChangeDetectorRef,
         LocalizationService])
 ], EditDialogComponent);
 
@@ -4954,6 +6788,213 @@ GanttAddTaskComponent = __decorate([
         NgZone])
 ], GanttAddTaskComponent);
 
+/**
+ * @hidden
+ */
+let DependenciesTableComponent = class DependenciesTableComponent {
+    constructor(mapper, editService, localizationService) {
+        this.mapper = mapper;
+        this.editService = editService;
+        this.localizationService = localizationService;
+        this.dependenciesChange = new EventEmitter();
+        this.selectedKeys = [];
+        this.formGroups = new FormArray([]);
+        this.dependencyTypes = this.getDependencyTypes();
+    }
+    get taskId() {
+        return this.editService.dataItem.id;
+    }
+    // The target dependency id field
+    // e.g. if Predecessors, we have the `fromId` which is the currently edited task,
+    // while the `toId` is missing (needs to be selected by the user)
+    get dependencyIdField() {
+        return this.dependencyType === 'predecessor' ? 'fromId' : 'toId';
+    }
+    ngOnInit() {
+        // generate the FormGroups per each Grid row
+        if (this.formGroups.controls.length === 0) {
+            const fields = this.mapper.dependencyFields;
+            this.dependencies.forEach(item => {
+                const formGroup = new FormGroup({
+                    [fields.id]: new FormControl(this.mapper.extractFromDependency(item, 'id')),
+                    [fields.fromId]: new FormControl(this.mapper.extractFromDependency(item, 'fromId'), Validators.required),
+                    [fields.toId]: new FormControl(this.mapper.extractFromDependency(item, 'toId'), Validators.required),
+                    [fields.type]: new FormControl(this.mapper.extractFromDependency(item, 'type'), Validators.required)
+                });
+                this.formGroups.push(formGroup);
+            });
+        }
+        this.formGroups.valueChanges.subscribe(val => {
+            this.formGroups.controls.forEach(control => {
+                if (control.dirty) {
+                    this.editService.updateDependencies(control.value);
+                }
+            });
+            this.dependenciesChange.emit(val);
+        });
+    }
+    getFormControl(dataItemIndex, field) {
+        // return the FormControl for the respective column editor
+        return this.formGroups.controls
+            .find((_control, index) => index === dataItemIndex)
+            .get(this.mapper.dependencyFields[field]);
+    }
+    getText(token) {
+        return this.localizationService.get(token);
+    }
+    getDependencyTypes() {
+        const types = Object.keys(DependencyType)
+            .filter(value => typeof DependencyType[value] === 'number')
+            .map(type => {
+            return {
+                type,
+                id: DependencyType[type]
+            };
+        });
+        return types;
+    }
+    addHandler() {
+        const fields = this.mapper.dependencyFields;
+        const formGroup = new FormGroup({
+            [fields.id]: new FormControl(),
+            [fields.fromId]: new FormControl(this.dependencyIdField === 'toId' ? this.taskId : null, Validators.required),
+            [fields.toId]: new FormControl(this.dependencyIdField === 'fromId' ? this.taskId : null, Validators.required),
+            [fields.type]: new FormControl(null, Validators.required)
+        });
+        this.formGroups.push(formGroup);
+    }
+    removeHandler() {
+        const [selectedIndex] = this.selectedKeys;
+        const item = this.formGroups.at(selectedIndex).value;
+        this.editService.deleteDependency(item);
+        this.formGroups.removeAt(selectedIndex);
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", Array)
+], DependenciesTableComponent.prototype, "tasks", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Array)
+], DependenciesTableComponent.prototype, "dependencies", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], DependenciesTableComponent.prototype, "dependencyType", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], DependenciesTableComponent.prototype, "dependenciesChange", void 0);
+DependenciesTableComponent = __decorate([
+    Component({
+        selector: 'kendo-gantt-dependencies-table',
+        template: `
+        <kendo-grid
+            [data]="dependencies"
+            [selectable]="{ mode: 'single' }"
+            [(selectedKeys)]="selectedKeys"
+            kendoGridSelectBy
+            [height]="275"
+        >
+            <ng-template kendoGridToolbarTemplate>
+                <button kendoButton (click)="addHandler()">
+                    {{ getText('taskEditingDependenciesAddButtonText') }}
+                </button>
+                <button kendoButton (click)="removeHandler()" [disabled]="selectedKeys.length === 0">
+                    {{ getText('taskEditingDependenciesRemoveButtonText') }}
+                </button>
+            </ng-template>
+            <kendo-grid-column [title]="getText('taskEditingDependenciesGridNameColumnTitle')" [field]="dependencyIdField">
+                <ng-template kendoGridCellTemplate let-dataItem="dataItem" let-column="column" let-rowIndex="rowIndex">
+                    <kendo-dropdownlist
+                        [data]="tasks"
+                        textField="title"
+                        valueField="id"
+                        [valuePrimitive]="true"
+                        [formControl]="getFormControl(rowIndex, column.field)"
+                    >
+                    </kendo-dropdownlist>
+                </ng-template>
+            </kendo-grid-column>
+            <kendo-grid-column [title]="getText('taskEditingDependenciesGridTypeColumnTitle')" field="type">
+                <ng-template kendoGridCellTemplate let-dataItem="dataItem" let-column="column" let-rowIndex="rowIndex">
+                    <kendo-dropdownlist
+                        [data]="dependencyTypes"
+                        textField="type"
+                        valueField="id"
+                        [valuePrimitive]="true"
+                        [formControl]="getFormControl(rowIndex, column.field)"
+                    >
+                    </kendo-dropdownlist>
+                </ng-template>
+            </kendo-grid-column>
+        </kendo-grid>
+    `
+    }),
+    __metadata("design:paramtypes", [MappingService,
+        EditService,
+        GanttLocalizationService])
+], DependenciesTableComponent);
+
+/**
+ * @hidden
+ */
+let TaskFieldsComponent = class TaskFieldsComponent {
+    constructor(mapper, editService, localizationService) {
+        this.mapper = mapper;
+        this.editService = editService;
+        this.localizationService = localizationService;
+    }
+    /**
+     * @hidden
+     */
+    get formGroup() {
+        return this.editService.taskFormGroup;
+    }
+    getText(token) {
+        return this.localizationService.get(token);
+    }
+};
+TaskFieldsComponent = __decorate([
+    Component({
+        selector: 'kendo-gantt-task-fields',
+        template: `
+        <form class="k-form" [formGroup]="formGroup">
+            <kendo-formfield *ngIf="formGroup.contains(mapper.taskFields.title)">
+                <kendo-label [for]="mapper.taskFields.title" [text]="getText('titleFieldInputLabel')"></kendo-label>
+                <input kendoTextBox [formControlName]="mapper.taskFields.title" />
+            </kendo-formfield>
+            <div class="k-hstack">
+                <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.start)">
+                    <kendo-label [for]="mapper.taskFields.start" [text]="getText('startFieldInputLabel')"></kendo-label>
+                    <kendo-datetimepicker [formControlName]="mapper.taskFields.start"></kendo-datetimepicker>
+                </kendo-formfield>
+                <kendo-treelist-spacer></kendo-treelist-spacer>
+                <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.end)">
+                    <kendo-label [for]="mapper.taskFields.end" [text]="getText('endFieldInputLabel')"></kendo-label>
+                    <kendo-datetimepicker [formControlName]="mapper.taskFields.end"></kendo-datetimepicker>
+                </kendo-formfield>
+            </div>
+            <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.completionRatio)">
+                <kendo-label [for]="mapper.taskFields.completionRatio" [text]="getText('completionRatioFieldInputLabel')"></kendo-label>
+                <kendo-numerictextbox
+                    [formControlName]="mapper.taskFields.completionRatio"
+                    [min]="0"
+                    [max]="1"
+                    [decimals]="2"
+                    format="p2"
+                    [step]="0.01"
+                ></kendo-numerictextbox>
+            </kendo-formfield>
+        </form>
+    `
+    }),
+    __metadata("design:paramtypes", [MappingService,
+        EditService,
+        GanttLocalizationService])
+], TaskFieldsComponent);
+
 const IMPORTED_MODULES = [
     CommonModule,
     ReactiveFormsModule,
@@ -4965,7 +7006,12 @@ const IMPORTED_MODULES = [
     TreeListModule,
     ButtonsModule,
     DialogModule,
-    EventsModule
+    EventsModule,
+    PopupModule,
+    DraggableModule,
+    TabStripModule,
+    GridModule,
+    DropDownsModule
 ];
 const DECLARATIONS = [
     GanttComponent,
@@ -4995,6 +7041,7 @@ const DECLARATIONS = [
     FooterTemplateDirective,
     GanttExpandableDirective,
     GanttDependencyDirective,
+    DependencyDragCreateDirective,
     TimelineDayViewComponent,
     TimelineWeekViewComponent,
     TimelineMonthViewComponent,
@@ -5002,8 +7049,13 @@ const DECLARATIONS = [
     EditDialogComponent,
     CustomMessagesComponent,
     LocalizedMessagesDirective,
-    GanttAddTaskComponent
+    GanttAddTaskComponent,
+    DragValidationTooltipComponent,
+    TimelineScrollableDirective,
+    DependenciesTableComponent,
+    TaskFieldsComponent
 ];
+const ɵ0$3 = touchEnabled;
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
  * definition for the Gantt component.
@@ -5042,52 +7094,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, EditDialogComponent, EditService, CustomMessagesComponent, 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, 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, NavigationService, 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 };