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

package/dist/fesm5/index.js

@@ -2,18 +2,18 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { __extends, __decorate, __metadata, __param, __assign } from 'tslib';
-import { Input, Injectable, EventEmitter, Directive, Optional, TemplateRef, QueryList, ContentChildren, ContentChild, Component, forwardRef, SkipSelf, Host, Injector, NgZone, ViewChild, ElementRef, ViewContainerRef, HostBinding, Output, Renderer2, isDevMode, InjectionToken, Inject, ChangeDetectorRef, NgModule } from '@angular/core';
+import { __decorate, __metadata, __assign, __extends, __param } from 'tslib';
+import { Injectable, NgZone, ViewChild, ElementRef, ViewContainerRef, HostBinding, Input, TemplateRef, Output, EventEmitter, 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, fromEvent, Subject, Subscription, forkJoin, EMPTY, isObservable } from 'rxjs';
+import { fromEvent, Subject, Subscription, of, forkJoin, EMPTY, isObservable } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
-import { closestInScope, matchesClasses, isDocumentAvailable, anyChanged, hasObservers, EventsModule, DraggableModule } 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, touchEnabled } from '@progress/kendo-common';
-import { map, distinctUntilChanged, take, expand, reduce, filter, switchMap } from 'rxjs/operators';
 import { CommonModule } from '@angular/common';
 import { FormGroup, FormControl, Validators, FormArray, ReactiveFormsModule } from '@angular/forms';
 import { SplitterModule, TabStripModule } from '@progress/kendo-angular-layout';
@@ -33,11 +33,704 @@ var packageMetadata = {
     name: '@progress/kendo-angular-gantt',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1642086647,
+    publishDate: 1642580546,
     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
+ */
+var ScrollSyncService = /** @class */ (function () {
+    function ScrollSyncService(ngZone) {
+        var _this = this;
+        this.ngZone = ngZone;
+        this.changes = new Subject();
+        this.elements = [];
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(this.changes.subscribe(function (args) {
+            _this.scroll(args);
+        }));
+    }
+    ScrollSyncService.prototype.registerElement = function (el, sourceType) {
+        var _this = this;
+        this.elements.push({ element: el, sourceType: sourceType });
+        if (sourceType === "timeline" || sourceType === "treelist") {
+            this.ngZone.runOutsideAngular(function () {
+                var obs = fromEvent(el, 'scroll').pipe(map(function (_a) {
+                    var _b = _a.target, scrollTop = _b.scrollTop, scrollLeft = _b.scrollLeft;
+                    return ({
+                        scrollTop: scrollTop,
+                        scrollLeft: scrollLeft,
+                        sourceType: sourceType
+                    });
+                }));
+                var comparisonFn = sourceType === 'timeline' ?
+                    function (x, y) { return (x.scrollTop === y.scrollTop) && (x.scrollLeft === y.scrollLeft); } :
+                    function (x, y) { return (x.scrollTop === y.scrollTop); };
+                _this.subscriptions.add(obs.pipe(distinctUntilChanged(comparisonFn))
+                    .subscribe(function (event) { return _this.changes.next(event); }));
+            });
+        }
+    };
+    ScrollSyncService.prototype.ngOnDestroy = function () {
+        this.subscriptions.unsubscribe();
+        this.elements = null;
+    };
+    ScrollSyncService.prototype.syncScrollTop = function (sourceType, targetType) {
+        var source = this.elements.find(function (element) { return element.sourceType === sourceType; });
+        var target = this.elements.find(function (element) { return element.sourceType === targetType; });
+        // Need to wait for the splitter pane's content to be rendered
+        this.ngZone.onStable.pipe(take(1)).subscribe(function () { return target.element.scrollTop = source.element.scrollTop; });
+    };
+    ScrollSyncService.prototype.resetTimelineScrollLeft = function () {
+        var source = this.elements.find(function (element) { return element.sourceType === 'timeline'; });
+        source.element.scrollLeft = 0;
+    };
+    ScrollSyncService.prototype.scroll = function (_a) {
+        var _this = this;
+        var scrollTop = _a.scrollTop, scrollLeft = _a.scrollLeft, sourceType = _a.sourceType;
+        this.ngZone.runOutsideAngular(function () {
+            if (sourceType === 'timeline') {
+                var header = _this.elements.find(function (element) { return element.sourceType === 'header'; }).element;
+                header.scrollLeft = scrollLeft;
+                if (!_this.syncingTimeline) {
+                    _this.syncingTreeList = true;
+                    var treelist = _this.elements.find(function (element) { return element.sourceType === 'treelist'; }).element;
+                    treelist.scrollTop = scrollTop;
+                }
+                _this.syncingTimeline = false;
+            }
+            if (sourceType === 'treelist') {
+                if (!_this.syncingTreeList) {
+                    _this.syncingTimeline = true;
+                    var timeline = _this.elements.find(function (element) { return element.sourceType === 'timeline'; }).element;
+                    timeline.scrollTop = scrollTop;
+                }
+                _this.syncingTreeList = false;
+            }
+        });
+    };
+    ScrollSyncService = __decorate([
+        Injectable(),
+        __metadata("design:paramtypes", [NgZone])
+    ], ScrollSyncService);
+    return ScrollSyncService;
+}());
+
+/**
+ * @hidden
+ */
+var DEFAULT_DEPENDENCY_MODEL_FIELDS = Object.freeze({
+    toId: 'toId',
+    fromId: 'fromId',
+    id: 'id',
+    type: 'type'
+});
+
+/**
+ * @hidden
+ */
+var 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
+ */
+var isWorkDay = function (date, start, end) {
+    return date.getDay() >= start && date.getDay() <= end;
+};
+/**
+ * @hidden
+ */
+var isWorkHour = function (date, start, end) {
+    return date.getHours() >= start && date.getHours() <= end;
+};
+/**
+ * @hidden
+ */
+var isPresent = function (item) { return 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).
+ */
+var normalizeGanttData = function (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.
+ */
+var setTime = function (date, hours, minutes, seconds, milliseconds) {
+    if (minutes === void 0) { minutes = 0; }
+    if (seconds === void 0) { seconds = 0; }
+    if (milliseconds === void 0) { milliseconds = 0; }
+    if (!isPresent(date)) {
+        return null;
+    }
+    var 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.)
+ */
+var lastDayOfWeek = function (standingPoint, firstWeekDay) {
+    var followingWeek = addWeeks(standingPoint, 1);
+    var firstDayOfFollowingWeek = firstDayInWeek(followingWeek, firstWeekDay);
+    var lastDayOfTargetWeek = addDays(firstDayOfFollowingWeek, -1);
+    return lastDayOfTargetWeek;
+};
+/**
+ * Persists the intially resolved scrollbar width value.
+ */
+var SCROLLBAR_WIDTH;
+/**
+ * @hidden
+ *
+ * Gets the default scrollbar width accoring to the current environment.
+ */
+var scrollbarWidth = function () {
+    if (!isDocumentAvailable()) {
+        return;
+    }
+    // calculate scrollbar width only once, then return the cached value
+    if (isNaN(SCROLLBAR_WIDTH)) {
+        var 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
+ */
+var isColumnGroup = function (column) { return column.isColumnGroup; };
+/**
+ * @hidden
+ */
+var isNumber = function (contender) { return typeof contender === 'number' && !isNaN(contender); };
+/**
+ * @hidden
+ */
+var isString = function (contender) { return typeof contender === 'string'; };
+/**
+ * @hidden
+ *
+ * Gets the closest timeline task wrapper element from an event target.
+ * Restricts the search up to the provided parent element from the second param.
+ */
+var getClosestTaskWrapper = function (element, parentScope) {
+    return closestInScope(element, matchesClasses('k-task-wrap'), parentScope);
+};
+/**
+ * @hidden
+ *
+ * Checks whether the queried item or its parent items has a `k-task-wrap` selector.
+ * Restricts the search up to the provided parent element from the second param.
+ */
+var isTaskWrapper = function (contender, parentScope) {
+    var taskWrapper = closestInScope(contender, matchesClasses('k-task-wrap'), parentScope);
+    return isPresent(taskWrapper);
+};
+/**
+ * @hidden
+ *
+ * Gets the closest timeline task element index from an event target.
+ * Uses the `data-task-index` attribute assigned to each task.
+ * Restricts the search up to the provided parent element from the second param.
+ */
+var getClosestTaskIndex = function (element, parentScope) {
+    var 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.
+ */
+var isTask = function (contender, parentScope) {
+    var task = closestInScope(contender, matchesClasses('k-task'), parentScope);
+    return isPresent(task);
+};
+/**
+ * @hidden
+ *
+ * Checks whether the queried item or its parent items has a `k-toolbar` selector.
+ * Restricts the search up to the provided parent element from the second param.
+ */
+var isToolbar = function (contender, parentScope) {
+    var 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.
+ */
+var isClearButton = function (contender, parentScope) {
+    var clearButtonContainer = closestInScope(contender, matchesClasses('k-task-actions'), parentScope);
+    return isPresent(clearButtonContainer);
+};
+/**
+ * @hidden
+ *
+ * Checks whether the queried item has a `k-task-dot` selector - used for the dependency drag clues.
+ */
+var isDependencyDragClue = function (element) {
+    if (!isPresent(element)) {
+        return false;
+    }
+    return element.classList.contains('k-task-dot');
+};
+/**
+ * @hidden
+ *
+ * Checks whether the queried item has a `k-task-dot` & `k-task-start` selector - used for the dependency drag start clues.
+ */
+var isDependencyDragStartClue = function (element) {
+    if (!isPresent(element)) {
+        return false;
+    }
+    return element.classList.contains('k-task-dot') && element.classList.contains('k-task-start');
+};
+/**
+ * @hidden
+ *
+ * Gets the `DependencyType` for an attempted dependency create from the provided two elements.
+ * The two linked drag clue HTML elements are used to extract this data (via their CSS classes).
+ */
+var getDependencyTypeFromTargetTasks = function (fromTaskClue, toTaskClue) {
+    if (!isDependencyDragClue(fromTaskClue) || !isDependencyDragClue(toTaskClue)) {
+        return null;
+    }
+    var fromTaskType = isDependencyDragStartClue(fromTaskClue) ? 'S' : 'F';
+    var toTaskType = isDependencyDragStartClue(toTaskClue) ? 'S' : 'F';
+    var dependencyTypeName = "" + fromTaskType + toTaskType;
+    switch (dependencyTypeName) {
+        case 'FF': return DependencyType.FF;
+        case 'FS': return DependencyType.FS;
+        case 'SF': return DependencyType.SF;
+        case 'SS': return DependencyType.SS;
+        default: return null;
+    }
+};
+/**
+ * @hidden
+ *
+ * Checks whether the two provided drag clues belong to the same task element.
+ */
+var sameTaskClues = function (fromTaskClue, toTaskClue, parentScope) {
+    if (!isPresent(fromTaskClue) || !isPresent(toTaskClue)) {
+        return false;
+    }
+    var fromTaskWrapper = getClosestTaskWrapper(fromTaskClue, parentScope);
+    var toTaskWrapper = getClosestTaskWrapper(toTaskClue, parentScope);
+    return fromTaskWrapper === toTaskWrapper;
+};
+/**
+ * @hidden
+ *
+ * Fits a contender number between a min and max range.
+ * If the contender is below the min value, the min value is returned.
+ * If the contender is above the max value, the max value is returned.
+ */
+var fitToRange = function (contender, min, max) {
+    if (!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.
+ */
+var areParentChild = function (taskA, taskB) {
+    var parentChildRelationship = false;
+    var taskAParent = taskA;
+    while (isPresent(taskAParent) && isPresent(taskAParent.data)) {
+        if (taskAParent.data === taskB.data) {
+            parentChildRelationship = true;
+            break;
+        }
+        taskAParent = taskAParent.parent;
+    }
+    var taskBParent = taskB;
+    while (!parentChildRelationship && isPresent(taskBParent) && isPresent(taskBParent.data)) {
+        if (taskBParent.data === taskA.data) {
+            parentChildRelationship = true;
+            break;
+        }
+        taskBParent = taskBParent.parent;
+    }
+    return parentChildRelationship;
+};
+/**
+ * @hidden
+ *
+ * Extracts an element from the provided client coords.
+ * Using the `event.target` is not reliable under mobile devices with the current implementation of the draggable, so use this instead.
+ */
+var elementFromPoint = function (clientX, clientY) {
+    if (!isDocumentAvailable()) {
+        return null;
+    }
+    return document.elementFromPoint(clientX, clientY);
+};
+
+/**
+ * @hidden
+ */
+var MappingService = /** @class */ (function () {
+    function MappingService() {
+        this._taskFields = __assign({}, DEFAULT_TASK_MODEL_FIELDS);
+        this._dependencyFields = __assign({}, DEFAULT_DEPENDENCY_MODEL_FIELDS);
+    }
+    Object.defineProperty(MappingService.prototype, "taskFields", {
+        get: function () {
+            return this._taskFields;
+        },
+        /**
+         * Gets or sets the model fields for the task data items.
+         * Uses the default values for fields which are not specified.
+         */
+        set: function (fields) {
+            this._taskFields = __assign({}, DEFAULT_TASK_MODEL_FIELDS, fields);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MappingService.prototype, "dependencyFields", {
+        get: function () {
+            return this._dependencyFields;
+        },
+        /**
+         * Gets or sets the model fields for the depenency data items.
+         * Uses the default values for fields which are not specified.
+         */
+        set: function (fields) {
+            this._dependencyFields = __assign({}, DEFAULT_DEPENDENCY_MODEL_FIELDS, fields);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * Retrieves the value for the specified task field.
+     * Supports nested fields as well (e.g. 'manager.id').
+     */
+    MappingService.prototype.extractFromTask = function (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').
+     */
+    MappingService.prototype.extractFromDependency = function (dataItem, field) {
+        if (!isPresent(this.dependencyFields)) {
+            return null;
+        }
+        return getter(this.dependencyFields[field])(dataItem);
+    };
+    MappingService = __decorate([
+        Injectable()
+    ], MappingService);
+    return MappingService;
+}());
+
+/**
+ * @hidden
+ */
+var DependencyDomService = /** @class */ (function () {
+    function DependencyDomService(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();
+    }
+    Object.defineProperty(DependencyDomService.prototype, "taskChanges", {
+        /**
+         * 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: function () {
+            return this.notifier.asObservable();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DependencyDomService.prototype, "dependencyDomArgs", {
+        get: function () {
+            return {
+                tasks: this.tasks,
+                contentContainer: this.contentContainer,
+                timelineRow: this.timelineRow
+            };
+        },
+        enumerable: true,
+        configurable: true
+    });
+    DependencyDomService.prototype.ngOnDestroy = function () {
+        this.tasks.clear();
+        this.tasks = null;
+        this.contentContainer = null;
+    };
+    DependencyDomService.prototype.registerTimelineRow = function (timelineRow) {
+        this.timelineRow = timelineRow;
+        this.notifyChanges();
+    };
+    DependencyDomService.prototype.registerContentContainer = function (contentContainer) {
+        this.contentContainer = contentContainer;
+        this.notifyChanges();
+    };
+    DependencyDomService.prototype.registerTask = function (task, element) {
+        var id = this.mapper.extractFromTask(task, 'id');
+        this.tasks.set(id, element);
+        this.notifyChanges();
+    };
+    DependencyDomService.prototype.unregisterTask = function (task) {
+        var 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.
+     */
+    DependencyDomService.prototype.notifyChanges = function () {
+        this.notifier.next(this.dependencyDomArgs);
+    };
+    DependencyDomService = __decorate([
+        Injectable(),
+        __metadata("design:paramtypes", [MappingService])
+    ], DependencyDomService);
+    return DependencyDomService;
+}());
+
+/**
+ * @hidden
+ */
+var GanttTimelineComponent = /** @class */ (function () {
+    function GanttTimelineComponent(scrollSyncService, dependencyDomService, renderer, zone) {
+        var _this = this;
+        this.scrollSyncService = scrollSyncService;
+        this.dependencyDomService = dependencyDomService;
+        this.renderer = renderer;
+        this.zone = zone;
+        this.hostClass = true;
+        this.dependencies = [];
+        // as all drag-and-drop operations are on the timeline container, use a single draggable instance
+        this.timelineContainerPress = new EventEmitter();
+        this.timelineContainerDrag = new EventEmitter();
+        this.timelineContainerRelease = new EventEmitter();
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(
+        // task changes indicates change in row content, number, height, etc.
+        this.dependencyDomService.taskChanges
+            .pipe(filter(function (args) { return isPresent(args.timelineRow); }), switchMap(function (args) { return _this.zone.onStable.pipe(take(1), map(function () { return args; })); }) // ensure the content is rendered
+        )
+            .subscribe(function (_a) {
+            var timelineRow = _a.timelineRow;
+            var timelineRowHeight = isDocumentAvailable() ? timelineRow.getBoundingClientRect().height : 0;
+            _this.renderer.setStyle(_this.timelineColumns.nativeElement, 'height', (_this.rows || []).length * timelineRowHeight + "px");
+        }));
+    }
+    Object.defineProperty(GanttTimelineComponent.prototype, "draggableEnabled", {
+        /**
+         * Specifies whether the draggable will attach or detach its pointer event listeners.
+         */
+        get: function () {
+            return this.renderDependencyDragClues;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    GanttTimelineComponent.prototype.ngAfterViewInit = function () {
+        var timelineHeader = this.timelineHeaderWrap.nativeElement;
+        var rightContainer = this.timelineContent.nativeElement;
+        this.scrollSyncService.registerElement(rightContainer, 'timeline');
+        this.scrollSyncService.registerElement(timelineHeader, 'header');
+        this.dependencyDomService.registerContentContainer(this.tasksContainer.nativeElement);
+    };
+    GanttTimelineComponent.prototype.ngOnDestroy = function () {
+        this.subscriptions.unsubscribe();
+    };
+    GanttTimelineComponent.prototype.isNonWorking = function (item) {
+        return item.hasOwnProperty('isWorking') && !item.isWorking;
+    };
+    __decorate([
+        ViewChild('timelineContent', { static: true }),
+        __metadata("design:type", ElementRef)
+    ], GanttTimelineComponent.prototype, "timelineContent", void 0);
+    __decorate([
+        ViewChild('timelineColumns', { static: true }),
+        __metadata("design:type", ElementRef)
+    ], GanttTimelineComponent.prototype, "timelineColumns", void 0);
+    __decorate([
+        ViewChild('timelineHeaderWrap', { static: true }),
+        __metadata("design:type", ElementRef)
+    ], GanttTimelineComponent.prototype, "timelineHeaderWrap", void 0);
+    __decorate([
+        ViewChild('tasksContainer', { static: true }),
+        __metadata("design:type", ElementRef)
+    ], GanttTimelineComponent.prototype, "tasksContainer", void 0);
+    __decorate([
+        ViewChild('dragPopupContainer', { static: false, read: ViewContainerRef }),
+        __metadata("design:type", ViewContainerRef)
+    ], GanttTimelineComponent.prototype, "dragPopupContainer", void 0);
+    __decorate([
+        ViewChild('dependencyDragCreatePolyline', { static: false }),
+        __metadata("design:type", ElementRef)
+    ], GanttTimelineComponent.prototype, "dependencyDragCreatePolyline", void 0);
+    __decorate([
+        HostBinding('class.k-gantt-timeline'),
+        __metadata("design:type", Boolean)
+    ], GanttTimelineComponent.prototype, "hostClass", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Array)
+    ], GanttTimelineComponent.prototype, "rows", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Array)
+    ], GanttTimelineComponent.prototype, "slots", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Array)
+    ], GanttTimelineComponent.prototype, "groupSlots", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Number)
+    ], 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: "\n        <div class=\"k-timeline k-grid k-widget\">\n            <div class=\"k-grid-header\">\n                <div #timelineHeaderWrap class=\"k-grid-header-wrap\">\n                    <table\n                        role=\"presentation\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <tbody\n                            kendoGanttHeaderTableBody\n                            [groupSlots]=\"groupSlots\"\n                            [slots]=\"slots\">\n                        </tbody>\n                    </table>\n                </div>\n            </div>\n            <!-- tabindex=\"-1\" required for https://bugzilla.mozilla.org/show_bug.cgi?id=1069739 -->\n            <div\n                #timelineContent\n                class=\"k-grid-content\"\n                tabindex=\"-1\"\n                role=\"tree\"\n                aria-roledescription=\"Timeline\"\n                kendoGanttTimelineScrollable\n                [scrollSettings]=\"dragScrollSettings\"\n                kendoDraggable\n                [enableDrag]=\"draggableEnabled\"\n                (kendoPress)=\"timelineContainerPress.emit($event)\"\n                (kendoDrag)=\"timelineContainerDrag.emit($event)\"\n                (kendoRelease)=\"timelineContainerRelease.emit($event)\"\n            >\n                <div class=\"k-gantt-tables\">\n                    <table\n                        class=\"k-gantt-rows\"\n                        [style.width.px]=\"tableWidth\"\n                        role=\"presentation\"\n                    >\n                        <tbody>\n                            <tr *ngFor=\"let item of rows; let i = index;\"\n                                [class.k-alt]=\"i % 2\"\n                            >\n                                <td></td>\n                            </tr>\n                        </tbody>\n                    </table>\n\n                    <table\n                        #timelineColumns\n                        class=\"k-gantt-columns\"\n                        role=\"presentation\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <colgroup>\n                            <col *ngFor=\"let item of slots\">\n                        </colgroup>\n\n                        <tbody>\n                            <tr>\n                                <td *ngFor=\"let item of slots\"\n                                    [class.k-nonwork-hour]=\"isNonWorking(item)\"\n                                >\n                                </td>\n                            </tr>\n                        </tbody>\n                    </table>\n\n                    <table\n                        #tasksContainer\n                        class=\"k-gantt-tasks\"\n                        role=\"presentation\"\n                        style=\"border-collapse: collapse;\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <tbody\n                            kendoGanttTasksTableBody\n                            [rows]=\"rows\"\n                            [activeView]=\"activeView\"\n                            [taskContentTemplate]=\"taskContentTemplate\"\n                            [taskTemplate]=\"taskTemplate\"\n                            [summaryTaskTemplate]=\"summaryTaskTemplate\"\n                            [taskClass]=\"taskClass\"\n                            [isExpanded]=\"isExpanded\"\n                            [selectable]=\"selectable\"\n                            [isTaskSelected]=\"isTaskSelected\"\n                            [renderDependencyDragClues]=\"renderDependencyDragClues\"\n                        >\n                        </tbody>\n                    </table>\n                </div>\n                <svg class=\"k-gantt-dependencies-svg\">\n                    <polyline\n                        *ngFor=\"let dependency of dependencies\"\n                        kendoGanttDependency\n                        [dependency]=\"dependency\"\n                    />\n                    <polyline #dependencyDragCreatePolyline />\n                </svg>\n\n                <!-- placeholder for the dependency drag popup; its position is not arbitrary - the popup is intended to be absolutely positioned inside the .k-grid-content element -->\n                <ng-container #dragPopupContainer></ng-container>\n            </div>\n        </div>\n    "
+        }),
+        __metadata("design:paramtypes", [ScrollSyncService,
+            DependencyDomService,
+            Renderer2,
+            NgZone])
+    ], GanttTimelineComponent);
+    return GanttTimelineComponent;
+}());
+
 /**
  * The base class for the column components of the Gantt.
  */
@@ -615,370 +1308,86 @@ var GanttSpanColumnComponent = /** @class */ (function (_super) {
     __decorate([
         Input(),
         __metadata("design:type", Object)
-    ], GanttSpanColumnComponent.prototype, "footerClass", void 0);
-    GanttSpanColumnComponent = GanttSpanColumnComponent_1 = __decorate([
-        Component({
-            selector: 'kendo-gantt-span-column',
-            template: '',
-            providers: [
-                {
-                    provide: GanttColumnBase,
-                    useExisting: forwardRef(function () { return GanttSpanColumnComponent_1; })
-                }
-            ]
-        }),
-        __param(1, SkipSelf()), __param(1, Host()), __param(1, Optional()),
-        __metadata("design:paramtypes", [OptionChangesService,
-            GanttColumnBase])
-    ], GanttSpanColumnComponent);
-    return GanttSpanColumnComponent;
-}(SpanColumnComponent));
-
-/**
- * @hidden
- */
-var hasChildren = function () { return false; };
-/**
- * @hidden
- */
-var fetchChildren = function () { return of([]); };
-/**
- * @hidden
- */
-var rowClassCallback = function () { return null; };
-/**
- * @hidden
- */
-var taskClassCallback = function () { return null; };
-/**
- * @hidden
- */
-var isSelected = function () { return false; };
-
-/**
- * The dependency type when two tasks are connected.
- *
- * The supported values are:
- * * `FF`&mdash;from 'finish' to 'finish'
- * * `FS`&mdash;from 'finish' to 'start'
- * * `SS`&mdash;from 'start' to 'start'
- * * `SF`&mdash;from 'start' to 'finish'
- */
-var DependencyType;
-(function (DependencyType) {
-    DependencyType[DependencyType["FF"] = 0] = "FF";
-    DependencyType[DependencyType["FS"] = 1] = "FS";
-    DependencyType[DependencyType["SF"] = 2] = "SF";
-    DependencyType[DependencyType["SS"] = 3] = "SS"; // task B can't start before task A starts
-})(DependencyType || (DependencyType = {}));
-
-/**
- * @hidden
- */
-var PreventableEvent = /** @class */ (function () {
-    function PreventableEvent() {
-        this.prevented = false;
-    }
-    /**
-     * Prevents the default action for a specified event.
-     * In this way, the source component suppresses
-     * the built-in behavior that follows the event.
-     */
-    PreventableEvent.prototype.preventDefault = function () {
-        this.prevented = true;
-    };
-    /**
-     * Returns `true` if the event was prevented
-     * by any of its subscribers.
-     *
-     * @returns `true` if the default action was prevented.
-     * Otherwise, returns `false`.
-     */
-    PreventableEvent.prototype.isDefaultPrevented = function () {
-        return this.prevented;
-    };
-    return PreventableEvent;
-}());
-
-/**
- * Called every time a user leaves an edited cell.
- */
-var CellCloseEvent = /** @class */ (function (_super) {
-    __extends(CellCloseEvent, _super);
-    function CellCloseEvent(options) {
-        var _this = _super.call(this) || this;
-        Object.assign(_this, options);
-        return _this;
-    }
-    return CellCloseEvent;
-}(PreventableEvent));
-
-/**
- * @hidden
- */
-var isWorkDay = function (date, start, end) {
-    return date.getDay() >= start && date.getDay() <= end;
-};
-/**
- * @hidden
- */
-var isWorkHour = function (date, start, end) {
-    return date.getHours() >= start && date.getHours() <= end;
-};
-/**
- * @hidden
- */
-var isPresent = function (item) { return 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).
- */
-var normalizeGanttData = function (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.
- */
-var setTime = function (date, hours, minutes, seconds, milliseconds) {
-    if (minutes === void 0) { minutes = 0; }
-    if (seconds === void 0) { seconds = 0; }
-    if (milliseconds === void 0) { milliseconds = 0; }
-    if (!isPresent(date)) {
-        return null;
-    }
-    var 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.)
- */
-var lastDayOfWeek = function (standingPoint, firstWeekDay) {
-    var followingWeek = addWeeks(standingPoint, 1);
-    var firstDayOfFollowingWeek = firstDayInWeek(followingWeek, firstWeekDay);
-    var lastDayOfTargetWeek = addDays(firstDayOfFollowingWeek, -1);
-    return lastDayOfTargetWeek;
-};
-/**
- * Persists the intially resolved scrollbar width value.
- */
-var SCROLLBAR_WIDTH;
-/**
- * @hidden
- *
- * Gets the default scrollbar width accoring to the current environment.
- */
-var scrollbarWidth = function () {
-    if (!isDocumentAvailable()) {
-        return;
-    }
-    // calculate scrollbar width only once, then return the cached value
-    if (isNaN(SCROLLBAR_WIDTH)) {
-        var 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
- */
-var isColumnGroup = function (column) { return column.isColumnGroup; };
-/**
- * @hidden
- */
-var isNumber = function (contender) { return typeof contender === 'number' && !isNaN(contender); };
-/**
- * @hidden
- */
-var isString = function (contender) { return typeof contender === 'string'; };
-/**
- * @hidden
- *
- * Gets the closest timeline task wrapper element from an event target.
- * Restricts the search up to the provided parent element from the second param.
- */
-var getClosestTaskWrapper = function (element, parentScope) {
-    return closestInScope(element, matchesClasses('k-task-wrap'), parentScope);
-};
-/**
- * @hidden
- *
- * Checks whether the queried item or its parent items has a `k-task-wrap` selector.
- * Restricts the search up to the provided parent element from the second param.
- */
-var isTaskWrapper = function (contender, parentScope) {
-    var taskWrapper = closestInScope(contender, matchesClasses('k-task-wrap'), parentScope);
-    return isPresent(taskWrapper);
-};
-/**
- * @hidden
- *
- * Gets the closest timeline task element index from an event target.
- * Uses the `data-task-index` attribute assigned to each task.
- * Restricts the search up to the provided parent element from the second param.
- */
-var getClosestTaskIndex = function (element, parentScope) {
-    var 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.
- */
-var isTask = function (contender, parentScope) {
-    var task = closestInScope(contender, matchesClasses('k-task'), parentScope);
-    return isPresent(task);
-};
-/**
- * @hidden
- *
- * Checks whether the queried item or its parent items has a `k-task-actions` selector - used for the clear button.
- * Restricts the search up to the provided parent element from the second param.
- */
-var isClearButton = function (contender, parentScope) {
-    var clearButtonContainer = closestInScope(contender, matchesClasses('k-task-actions'), parentScope);
-    return isPresent(clearButtonContainer);
-};
+    ], GanttSpanColumnComponent.prototype, "footerClass", void 0);
+    GanttSpanColumnComponent = GanttSpanColumnComponent_1 = __decorate([
+        Component({
+            selector: 'kendo-gantt-span-column',
+            template: '',
+            providers: [
+                {
+                    provide: GanttColumnBase,
+                    useExisting: forwardRef(function () { return GanttSpanColumnComponent_1; })
+                }
+            ]
+        }),
+        __param(1, SkipSelf()), __param(1, Host()), __param(1, Optional()),
+        __metadata("design:paramtypes", [OptionChangesService,
+            GanttColumnBase])
+    ], GanttSpanColumnComponent);
+    return GanttSpanColumnComponent;
+}(SpanColumnComponent));
+
 /**
  * @hidden
- *
- * Checks whether the queried item has a `k-task-dot` selector - used for the dependency drag clues.
  */
-var isDependencyDragClue = function (element) {
-    if (!isPresent(element)) {
-        return false;
-    }
-    return element.classList.contains('k-task-dot');
-};
+var hasChildren = function () { return false; };
 /**
  * @hidden
- *
- * Checks whether the queried item has a `k-task-dot` & `k-task-start` selector - used for the dependency drag start clues.
  */
-var isDependencyDragStartClue = function (element) {
-    if (!isPresent(element)) {
-        return false;
-    }
-    return element.classList.contains('k-task-dot') && element.classList.contains('k-task-start');
-};
+var fetchChildren = function () { return of([]); };
 /**
  * @hidden
- *
- * Gets the `DependencyType` for an attempted dependency create from the provided two elements.
- * The two linked drag clue HTML elements are used to extract this data (via their CSS classes).
  */
-var getDependencyTypeFromTargetTasks = function (fromTaskClue, toTaskClue) {
-    if (!isDependencyDragClue(fromTaskClue) || !isDependencyDragClue(toTaskClue)) {
-        return null;
-    }
-    var fromTaskType = isDependencyDragStartClue(fromTaskClue) ? 'S' : 'F';
-    var toTaskType = isDependencyDragStartClue(toTaskClue) ? 'S' : 'F';
-    var dependencyTypeName = "" + fromTaskType + toTaskType;
-    switch (dependencyTypeName) {
-        case 'FF': return DependencyType.FF;
-        case 'FS': return DependencyType.FS;
-        case 'SF': return DependencyType.SF;
-        case 'SS': return DependencyType.SS;
-        default: return null;
-    }
-};
+var rowClassCallback = function () { return null; };
 /**
  * @hidden
- *
- * Checks whether the two provided drag clues belong to the same task element.
  */
-var sameTaskClues = function (fromTaskClue, toTaskClue, parentScope) {
-    if (!isPresent(fromTaskClue) || !isPresent(toTaskClue)) {
-        return false;
-    }
-    var fromTaskWrapper = getClosestTaskWrapper(fromTaskClue, parentScope);
-    var toTaskWrapper = getClosestTaskWrapper(toTaskClue, parentScope);
-    return fromTaskWrapper === toTaskWrapper;
-};
+var taskClassCallback = function () { return null; };
 /**
  * @hidden
- *
- * Fits a contender number between a min and max range.
- * If the contender is below the min value, the min value is returned.
- * If the contender is above the max value, the max value is returned.
  */
-var fitToRange = function (contender, min, max) {
-    if (contender > max) {
-        return max;
-    }
-    else if (contender < min) {
-        return min;
-    }
-    else {
-        return contender;
-    }
-};
+var isSelected = function () { return false; };
+
 /**
  * @hidden
- *
- * Checks whether either of the two provided tasks is a parent of the other.
  */
-var areParentChild = function (taskA, taskB) {
-    var parentChildRelationship = false;
-    var taskAParent = taskA;
-    while (isPresent(taskAParent) && isPresent(taskAParent.data)) {
-        if (taskAParent.data === taskB.data) {
-            parentChildRelationship = true;
-            break;
-        }
-        taskAParent = taskAParent.parent;
-    }
-    var taskBParent = taskB;
-    while (!parentChildRelationship && isPresent(taskBParent) && isPresent(taskBParent.data)) {
-        if (taskBParent.data === taskA.data) {
-            parentChildRelationship = true;
-            break;
-        }
-        taskBParent = taskBParent.parent;
+var PreventableEvent = /** @class */ (function () {
+    function PreventableEvent() {
+        this.prevented = false;
     }
-    return parentChildRelationship;
-};
+    /**
+     * Prevents the default action for a specified event.
+     * In this way, the source component suppresses
+     * the built-in behavior that follows the event.
+     */
+    PreventableEvent.prototype.preventDefault = function () {
+        this.prevented = true;
+    };
+    /**
+     * Returns `true` if the event was prevented
+     * by any of its subscribers.
+     *
+     * @returns `true` if the default action was prevented.
+     * Otherwise, returns `false`.
+     */
+    PreventableEvent.prototype.isDefaultPrevented = function () {
+        return this.prevented;
+    };
+    return PreventableEvent;
+}());
+
 /**
- * @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.
+ * Called every time a user leaves an edited cell.
  */
-var elementFromPoint = function (clientX, clientY) {
-    if (!isDocumentAvailable()) {
-        return null;
+var CellCloseEvent = /** @class */ (function (_super) {
+    __extends(CellCloseEvent, _super);
+    function CellCloseEvent(options) {
+        var _this = _super.call(this) || this;
+        Object.assign(_this, options);
+        return _this;
     }
-    return document.elementFromPoint(clientX, clientY);
-};
+    return CellCloseEvent;
+}(PreventableEvent));
 
 /**
  * @hidden
@@ -1093,134 +1502,50 @@ var TimelineBaseViewService = /** @class */ (function () {
         var weekStart = this.intlService.firstDay();
         var slots = [];
         var startDay = new Date(start);
-        var endDay = new Date(end);
-        while (startDay <= endDay) {
-            var lastWeekDay = lastDayOfWeek(startDay, weekStart);
-            var slotEnd = lastWeekDay > endDay ? endDay : lastWeekDay;
-            var daySlots = this.getDays(startDay, slotEnd);
-            var span = daySlots.length;
-            var firstDay = this.intlService.formatDate(firstDayInWeek(getDate(startDay), weekStart), DAY_FORMAT);
-            var lastDay = this.intlService.formatDate(addDays(slotEnd, -1), DAY_FORMAT);
-            if (span > 0) {
-                slots.push({
-                    start: daySlots[0].start,
-                    end: daySlots[span - 1].end,
-                    text: firstDay + " - " + lastDay,
-                    span: span
-                });
-            }
-            startDay = firstDayInWeek(addWeeks(slotEnd, 1));
-        }
-        return slots;
-    };
-    TimelineBaseViewService.prototype.getMonths = function (start, end) {
-        var slots = [];
-        var startDay = new Date(start);
-        var endDay = new Date(end);
-        while (startDay < endDay) {
-            var endMonth = lastDayOfMonth(startDay);
-            var slotEnd = endDay < endMonth ? endDay : endMonth;
-            var daySlots = this.getDays(startDay, slotEnd);
-            var span = daySlots.length;
-            var monthStart = firstDayOfMonth(getDate(startDay));
-            var shortText = this.intlService.formatDate(monthStart, MONTH_FORMAT);
-            if (span > 0) {
-                slots.push({
-                    start: daySlots[0].start,
-                    end: daySlots[span - 1].end,
-                    span: span,
-                    text: shortText
-                });
-            }
-            startDay = firstDayOfMonth(addMonths(slotEnd, 1));
-        }
-        return slots;
-    };
-    return TimelineBaseViewService;
-}());
-
-/**
- * @hidden
- */
-var DEFAULT_DEPENDENCY_MODEL_FIELDS = Object.freeze({
-    toId: 'toId',
-    fromId: 'fromId',
-    id: 'id',
-    type: 'type'
-});
-
-/**
- * @hidden
- */
-var DEFAULT_TASK_MODEL_FIELDS = Object.freeze({
-    id: 'id',
-    start: 'start',
-    end: 'end',
-    title: 'title',
-    completionRatio: 'completionRatio',
-    children: 'children'
-});
-
-/**
- * @hidden
- */
-var MappingService = /** @class */ (function () {
-    function MappingService() {
-        this._taskFields = __assign({}, DEFAULT_TASK_MODEL_FIELDS);
-        this._dependencyFields = __assign({}, DEFAULT_DEPENDENCY_MODEL_FIELDS);
-    }
-    Object.defineProperty(MappingService.prototype, "taskFields", {
-        get: function () {
-            return this._taskFields;
-        },
-        /**
-         * Gets or sets the model fields for the task data items.
-         * Uses the default values for fields which are not specified.
-         */
-        set: function (fields) {
-            this._taskFields = __assign({}, DEFAULT_TASK_MODEL_FIELDS, fields);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MappingService.prototype, "dependencyFields", {
-        get: function () {
-            return this._dependencyFields;
-        },
-        /**
-         * Gets or sets the model fields for the depenency data items.
-         * Uses the default values for fields which are not specified.
-         */
-        set: function (fields) {
-            this._dependencyFields = __assign({}, DEFAULT_DEPENDENCY_MODEL_FIELDS, fields);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * Retrieves the value for the specified task field.
-     * Supports nested fields as well (e.g. 'manager.id').
-     */
-    MappingService.prototype.extractFromTask = function (dataItem, field) {
-        if (!isPresent(this.taskFields)) {
-            return null;
+        var endDay = new Date(end);
+        while (startDay <= endDay) {
+            var lastWeekDay = lastDayOfWeek(startDay, weekStart);
+            var slotEnd = lastWeekDay > endDay ? endDay : lastWeekDay;
+            var daySlots = this.getDays(startDay, slotEnd);
+            var span = daySlots.length;
+            var firstDay = this.intlService.formatDate(firstDayInWeek(getDate(startDay), weekStart), DAY_FORMAT);
+            var lastDay = this.intlService.formatDate(addDays(slotEnd, -1), DAY_FORMAT);
+            if (span > 0) {
+                slots.push({
+                    start: daySlots[0].start,
+                    end: daySlots[span - 1].end,
+                    text: firstDay + " - " + lastDay,
+                    span: span
+                });
+            }
+            startDay = firstDayInWeek(addWeeks(slotEnd, 1));
         }
-        return getter(this.taskFields[field])(dataItem);
+        return slots;
     };
-    /**
-     * Retrieves the value for the specified dependency field.
-     * Supports nested fields as well (e.g. 'manager.id').
-     */
-    MappingService.prototype.extractFromDependency = function (dataItem, field) {
-        if (!isPresent(this.dependencyFields)) {
-            return null;
+    TimelineBaseViewService.prototype.getMonths = function (start, end) {
+        var slots = [];
+        var startDay = new Date(start);
+        var endDay = new Date(end);
+        while (startDay < endDay) {
+            var endMonth = lastDayOfMonth(startDay);
+            var slotEnd = endDay < endMonth ? endDay : endMonth;
+            var daySlots = this.getDays(startDay, slotEnd);
+            var span = daySlots.length;
+            var monthStart = firstDayOfMonth(getDate(startDay));
+            var shortText = this.intlService.formatDate(monthStart, MONTH_FORMAT);
+            if (span > 0) {
+                slots.push({
+                    start: daySlots[0].start,
+                    end: daySlots[span - 1].end,
+                    span: span,
+                    text: shortText
+                });
+            }
+            startDay = firstDayOfMonth(addMonths(slotEnd, 1));
         }
-        return getter(this.dependencyFields[field])(dataItem);
+        return slots;
     };
-    MappingService = __decorate([
-        Injectable()
-    ], MappingService);
-    return MappingService;
+    return TimelineBaseViewService;
 }());
 
 /**
@@ -1340,231 +1665,80 @@ var TimelineMonthViewService = /** @class */ (function (_super) {
 /**
  * @hidden
  */
-var TimelineWeekViewService = /** @class */ (function (_super) {
-    __extends(TimelineWeekViewService, _super);
-    function TimelineWeekViewService(intlService, mapper) {
-        return _super.call(this, intlService, mapper) || this;
-    }
-    /**
-     * Gets a date a day before the first task start with hours, minutes, seconds, milliseconds cleared.
-     */
-    TimelineWeekViewService.prototype.getStartOffset = function (rangeStart) {
-        return addDays(getDate(rangeStart), -1);
-    };
-    /**
-     * Gets a date a day after the last task start with hours, minutes, seconds, milliseconds cleared.
-     */
-    TimelineWeekViewService.prototype.getEndOffset = function (rangeEnd) {
-        return addDays(getDate(rangeEnd), 1);
-    };
-    /**
-     *
-     * @param tasks - The tasks which are going to be rendered in the table
-     * @returns {number}
-     */
-    TimelineWeekViewService.prototype.getTableWidth = function (tasks) {
-        var timeSlots = this.getSlots(tasks)[1];
-        var slotWidth = this.options.slotWidth;
-        return Math.round(timeSlots.length * slotWidth);
-    };
-    /**
-     *
-     * @param tasks - The tasks which are going to be rendered in the table
-     * @returns {Array<Object>} - A collection containing the day and hours slots
-     * Used to render the number of columns and the header
-     */
-    TimelineWeekViewService.prototype.getSlots = function (tasks) {
-        // will return the header rows slots
-        var slots = [];
-        var _a = this.getRange(tasks), start = _a.start, end = _a.end;
-        var weeks = this.getWeeks(start, end);
-        var days = this.getDays(start, end);
-        slots.push(weeks, days);
-        return slots;
-    };
-    TimelineWeekViewService = __decorate([
-        Injectable(),
-        __metadata("design:paramtypes", [IntlService, MappingService])
-    ], TimelineWeekViewService);
-    return TimelineWeekViewService;
-}(TimelineBaseViewService));
-
-/**
- * @hidden
- */
-var services = {
-    day: TimelineDayViewService,
-    week: TimelineWeekViewService,
-    month: TimelineMonthViewService
-};
-/**
- * @hidden
- */
-var TimelineViewService = /** @class */ (function () {
-    function TimelineViewService(injector) {
-        this.injector = injector;
-        this.viewChange = new EventEmitter();
-    }
-    TimelineViewService.prototype.service = function (view) {
-        var serviceType = services[view];
-        return serviceType ? this.injector.get(serviceType) : null;
-    };
-    TimelineViewService = __decorate([
-        Injectable(),
-        __metadata("design:paramtypes", [Injector])
-    ], TimelineViewService);
-    return TimelineViewService;
-}());
-
-/**
- * @hidden
- */
-var ScrollSyncService = /** @class */ (function () {
-    function ScrollSyncService(ngZone) {
-        var _this = this;
-        this.ngZone = ngZone;
-        this.changes = new Subject();
-        this.elements = [];
-        this.subscriptions = new Subscription();
-        this.subscriptions.add(this.changes.subscribe(function (args) {
-            _this.scroll(args);
-        }));
-    }
-    ScrollSyncService.prototype.registerElement = function (el, sourceType) {
-        var _this = this;
-        this.elements.push({ element: el, sourceType: sourceType });
-        if (sourceType === "timeline" || sourceType === "treelist") {
-            this.ngZone.runOutsideAngular(function () {
-                var obs = fromEvent(el, 'scroll').pipe(map(function (_a) {
-                    var _b = _a.target, scrollTop = _b.scrollTop, scrollLeft = _b.scrollLeft;
-                    return ({
-                        scrollTop: scrollTop,
-                        scrollLeft: scrollLeft,
-                        sourceType: sourceType
-                    });
-                }));
-                var comparisonFn = sourceType === 'timeline' ?
-                    function (x, y) { return (x.scrollTop === y.scrollTop) && (x.scrollLeft === y.scrollLeft); } :
-                    function (x, y) { return (x.scrollTop === y.scrollTop); };
-                _this.subscriptions.add(obs.pipe(distinctUntilChanged(comparisonFn))
-                    .subscribe(function (event) { return _this.changes.next(event); }));
-            });
-        }
-    };
-    ScrollSyncService.prototype.ngOnDestroy = function () {
-        this.subscriptions.unsubscribe();
-        this.elements = null;
-    };
-    ScrollSyncService.prototype.syncScrollTop = function (sourceType, targetType) {
-        var source = this.elements.find(function (element) { return element.sourceType === sourceType; });
-        var target = this.elements.find(function (element) { return element.sourceType === targetType; });
-        // Need to wait for the splitter pane's content to be rendered
-        this.ngZone.onStable.pipe(take(1)).subscribe(function () { return target.element.scrollTop = source.element.scrollTop; });
-    };
-    ScrollSyncService.prototype.resetTimelineScrollLeft = function () {
-        var source = this.elements.find(function (element) { return element.sourceType === 'timeline'; });
-        source.element.scrollLeft = 0;
-    };
-    ScrollSyncService.prototype.scroll = function (_a) {
-        var _this = this;
-        var scrollTop = _a.scrollTop, scrollLeft = _a.scrollLeft, sourceType = _a.sourceType;
-        this.ngZone.runOutsideAngular(function () {
-            if (sourceType === 'timeline') {
-                var header = _this.elements.find(function (element) { return element.sourceType === 'header'; }).element;
-                header.scrollLeft = scrollLeft;
-                if (!_this.syncingTimeline) {
-                    _this.syncingTreeList = true;
-                    var treelist = _this.elements.find(function (element) { return element.sourceType === 'treelist'; }).element;
-                    treelist.scrollTop = scrollTop;
-                }
-                _this.syncingTimeline = false;
-            }
-            if (sourceType === 'treelist') {
-                if (!_this.syncingTreeList) {
-                    _this.syncingTimeline = true;
-                    var timeline = _this.elements.find(function (element) { return element.sourceType === 'timeline'; }).element;
-                    timeline.scrollTop = scrollTop;
-                }
-                _this.syncingTreeList = false;
-            }
-        });
-    };
-    ScrollSyncService = __decorate([
-        Injectable(),
-        __metadata("design:paramtypes", [NgZone])
-    ], ScrollSyncService);
-    return ScrollSyncService;
-}());
-
-/**
- * @hidden
- */
-var DependencyDomService = /** @class */ (function () {
-    function DependencyDomService(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();
-    }
-    Object.defineProperty(DependencyDomService.prototype, "taskChanges", {
-        /**
-         * 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: function () {
-            return this.notifier.asObservable();
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DependencyDomService.prototype, "dependencyDomArgs", {
-        get: function () {
-            return {
-                tasks: this.tasks,
-                contentContainer: this.contentContainer,
-                timelineRow: this.timelineRow
-            };
-        },
-        enumerable: true,
-        configurable: true
-    });
-    DependencyDomService.prototype.ngOnDestroy = function () {
-        this.tasks.clear();
-        this.tasks = null;
-        this.contentContainer = null;
-    };
-    DependencyDomService.prototype.registerTimelineRow = function (timelineRow) {
-        this.timelineRow = timelineRow;
-        this.notifyChanges();
-    };
-    DependencyDomService.prototype.registerContentContainer = function (contentContainer) {
-        this.contentContainer = contentContainer;
-        this.notifyChanges();
+var TimelineWeekViewService = /** @class */ (function (_super) {
+    __extends(TimelineWeekViewService, _super);
+    function TimelineWeekViewService(intlService, mapper) {
+        return _super.call(this, intlService, mapper) || this;
+    }
+    /**
+     * Gets a date a day before the first task start with hours, minutes, seconds, milliseconds cleared.
+     */
+    TimelineWeekViewService.prototype.getStartOffset = function (rangeStart) {
+        return addDays(getDate(rangeStart), -1);
     };
-    DependencyDomService.prototype.registerTask = function (task, element) {
-        var id = this.mapper.extractFromTask(task, 'id');
-        this.tasks.set(id, element);
-        this.notifyChanges();
+    /**
+     * Gets a date a day after the last task start with hours, minutes, seconds, milliseconds cleared.
+     */
+    TimelineWeekViewService.prototype.getEndOffset = function (rangeEnd) {
+        return addDays(getDate(rangeEnd), 1);
     };
-    DependencyDomService.prototype.unregisterTask = function (task) {
-        var id = this.mapper.extractFromTask(task, 'id');
-        this.tasks.delete(id);
-        this.notifyChanges();
+    /**
+     *
+     * @param tasks - The tasks which are going to be rendered in the table
+     * @returns {number}
+     */
+    TimelineWeekViewService.prototype.getTableWidth = function (tasks) {
+        var timeSlots = this.getSlots(tasks)[1];
+        var slotWidth = this.options.slotWidth;
+        return Math.round(timeSlots.length * slotWidth);
     };
     /**
-     * Notifies all dependency directives that a change in one of the elements has occured.
+     *
+     * @param tasks - The tasks which are going to be rendered in the table
+     * @returns {Array<Object>} - A collection containing the day and hours slots
+     * Used to render the number of columns and the header
      */
-    DependencyDomService.prototype.notifyChanges = function () {
-        this.notifier.next(this.dependencyDomArgs);
+    TimelineWeekViewService.prototype.getSlots = function (tasks) {
+        // will return the header rows slots
+        var slots = [];
+        var _a = this.getRange(tasks), start = _a.start, end = _a.end;
+        var weeks = this.getWeeks(start, end);
+        var days = this.getDays(start, end);
+        slots.push(weeks, days);
+        return slots;
     };
-    DependencyDomService = __decorate([
+    TimelineWeekViewService = __decorate([
         Injectable(),
-        __metadata("design:paramtypes", [MappingService])
-    ], DependencyDomService);
-    return DependencyDomService;
+        __metadata("design:paramtypes", [IntlService, MappingService])
+    ], TimelineWeekViewService);
+    return TimelineWeekViewService;
+}(TimelineBaseViewService));
+
+/**
+ * @hidden
+ */
+var services = {
+    day: TimelineDayViewService,
+    week: TimelineWeekViewService,
+    month: TimelineMonthViewService
+};
+/**
+ * @hidden
+ */
+var TimelineViewService = /** @class */ (function () {
+    function TimelineViewService(injector) {
+        this.injector = injector;
+        this.viewChange = new EventEmitter();
+    }
+    TimelineViewService.prototype.service = function (view) {
+        var serviceType = services[view];
+        return serviceType ? this.injector.get(serviceType) : null;
+    };
+    TimelineViewService = __decorate([
+        Injectable(),
+        __metadata("design:paramtypes", [Injector])
+    ], TimelineViewService);
+    return TimelineViewService;
 }());
 
 /**
@@ -1575,9 +1749,11 @@ var EditService = /** @class */ (function () {
         var _this = this;
         this.mapper = mapper;
         this.showEditingDialog = new Subject();
-        this.showConfirmationDialog = new Subject();
+        this.taskDelete = new Subject();
         this.editEvent = new Subject();
         this.addEvent = new Subject();
+        this.predecessors = [];
+        this.successors = [];
         this.updatedItems = [];
         this.deletedItems = [];
         this.itemIndex = function (item, data) {
@@ -1701,32 +1877,484 @@ var TimelineScrollService = /** @class */ (function () {
     TimelineScrollService.prototype.requestVerticalScroll = function (clientLeft) {
         this.verticalScroll.next(clientLeft);
     };
-    TimelineScrollService.prototype.requestScrollCancel = function () {
-        this.scrollCancel.next();
+    TimelineScrollService.prototype.requestScrollCancel = function () {
+        this.scrollCancel.next();
+    };
+    TimelineScrollService = __decorate([
+        Injectable()
+    ], TimelineScrollService);
+    return TimelineScrollService;
+}());
+
+/**
+ * @hidden
+ *
+ * Needed to keep the Gantt's LocalizationService reference and be able to use it component's inside the TabStrip
+ */
+var GanttLocalizationService = /** @class */ (function () {
+    function GanttLocalizationService(localizationService) {
+        this.localizationService = localizationService;
+    }
+    GanttLocalizationService.prototype.get = function (token) {
+        return this.localizationService.get(token);
+    };
+    GanttLocalizationService = __decorate([
+        Injectable(),
+        __metadata("design:paramtypes", [LocalizationService])
+    ], GanttLocalizationService);
+    return GanttLocalizationService;
+}());
+
+// 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
+ */
+var isArrowUpDownKey = function (keyCode) { return [
+    Keys.ArrowUp,
+    Keys.ArrowDown
+].some(function (arrowKeyCode) {
+    return keyCode === arrowKeyCode;
+}); };
+/**
+ * @hidden
+ */
+var isNavigationKey = function (keyCode) { return [
+    Keys.ArrowUp,
+    Keys.ArrowDown,
+    Keys.Home,
+    Keys.End
+].some(function (navigationKeyCode) {
+    return keyCode === navigationKeyCode;
+}); };
+/**
+ * @hidden
+ */
+var isExpandCollapseKey = function (keyCode, altKey) {
+    return altKey && [
+        Keys.ArrowLeft,
+        Keys.ArrowRight
+    ].some(function (navigationKeyCode) {
+        return keyCode === navigationKeyCode;
+    });
+};
+/**
+ * @hidden
+ */
+var isViewDigitKey = function (keyCode) { return [
+    Keys.Digit1,
+    NumpadKeys.Digit1,
+    Keys.Digit2,
+    NumpadKeys.Digit2,
+    Keys.Digit3,
+    NumpadKeys.Digit3,
+    Keys.Digit4,
+    NumpadKeys.Digit4
+].some(function (digitKeyCode) {
+    return keyCode === digitKeyCode;
+}); };
+/**
+ * @hidden
+ *
+ * Returns the corresponding view index for the pressed digit key (Digit 1 => 0, Digit 2 => 1, etc.).
+ */
+var getIndexFromViewDigitKeyCode = function (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
+ */
+var NavigationService = /** @class */ (function () {
+    function NavigationService(zone, renderer, scrollSyncService) {
+        this.zone = zone;
+        this.renderer = renderer;
+        this.scrollSyncService = scrollSyncService;
+        /**
+         * 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.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 };
+    }
+    Object.defineProperty(NavigationService.prototype, "enabled", {
+        /**
+         * Specifies whether navigation is enabled.
+         */
+        get: function () {
+            return this._enabled;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(NavigationService.prototype, "activeTask", {
+        /**
+         * Used to retrieve read-only data about the currently active task.
+         */
+        get: function () {
+            return {
+                activeIndex: this.activeTimelineIndex,
+                isFocused: this.isTimelineFocused
+            };
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(NavigationService.prototype, "activeTreeListCell", {
+        get: function () {
+            var firstAvailableIndex = 0;
+            var lastAvailableRowIndex = this.treeListHeaderRowsCount + this.gantt.treeList.view.data.length - 1;
+            var rowIndex = fitToRange(this._activeTreeListCell.rowIndex, firstAvailableIndex, lastAvailableRowIndex);
+            var lastAvailableColIndex = this.gantt.columns.length;
+            var colIndex = fitToRange(this._activeTreeListCell.colIndex, firstAvailableIndex, lastAvailableColIndex);
+            return { rowIndex: rowIndex, colIndex: colIndex };
+        },
+        /**
+         * 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: function (cell) {
+            this._activeTreeListCell = cell;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(NavigationService.prototype, "activeTimelineIndex", {
+        get: function () {
+            var firstAvailableIndex = 0;
+            var lastAvailableIndex = this.gantt.treeList.view.data.length - 1;
+            return fitToRange(this._activeTimelineIndex, firstAvailableIndex, lastAvailableIndex);
+        },
+        /**
+         * 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: function (index) {
+            this._activeTimelineIndex = index;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(NavigationService.prototype, "treeListHeaderRowsCount", {
+        /**
+         * The TreeList row index takes into account the header and filter rows.
+         * Used when translating Timeline task indices to TreeList row indices.
+         */
+        get: function () {
+            // captures nested group header rows + filter row if we start supporting it at some point
+            return this.treeListElement.querySelectorAll('.k-grid-header tr').length;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    NavigationService.prototype.initialize = function (_a) {
+        var _this = this;
+        var gantt = _a.gantt, host = _a.host, treeListElement = _a.treeListElement, timelineElement = _a.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
+        var splitbar = this.host.querySelector('.k-splitbar');
+        if (isPresent(splitbar) && isPresent(splitbar.previousElementSibling) && isPresent(splitbar.after)) {
+            splitbar.after(splitbar.previousElementSibling);
+        }
+        this.zone.runOutsideAngular(function () {
+            _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))
+            ];
+        });
+    };
+    NavigationService.prototype.ngOnDestroy = function () {
+        if (isPresent(this.eventListenerDisposers)) {
+            this.eventListenerDisposers.forEach(function (removeListener) { return removeListener(); });
+            this.eventListenerDisposers = null;
+        }
+        this.gantt = null;
+        this.host = null;
+        this.treeListElement = null;
+        this.timelineElement = null;
+    };
+    /**
+     * 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.
+     */
+    NavigationService.prototype.focusLastActiveItem = function () {
+        if (this.gantt.data.length === 0 || (!this.treeListLastActive && !this.timelineLastActive)) {
+            this.focusCell(0, 0);
+        }
+        else if (this.treeListLastActive) {
+            var _a = this.activeTreeListCell, rowIndex = _a.rowIndex, colIndex = _a.colIndex;
+            this.gantt.treeList.focusCell(rowIndex, colIndex);
+        }
+        else if (this.timelineLastActive) {
+            this.focusTask(this.activeTimelineIndex);
+        }
+    };
+    /**
+     * Focuses the targeted TreeList cell regardless of the last peresisted target.
+     */
+    NavigationService.prototype.focusCell = function (rowIndex, colIndex) {
+        this.activeTreeListCell = { rowIndex: rowIndex, colIndex: colIndex };
+        this.activeTimelineIndex = rowIndex - this.treeListHeaderRowsCount;
+        this.gantt.treeList.focusCell(this.activeTreeListCell.rowIndex, this.activeTreeListCell.colIndex);
+    };
+    /**
+     * Focuses the targeted Timeline task regardless of the last peresisted target.
+     */
+    NavigationService.prototype.focusTask = function (index) {
+        this.activeTimelineIndex = index;
+        this.isTimelineFocused = true;
+        this.activeTreeListCell = {
+            rowIndex: index + this.treeListHeaderRowsCount,
+            colIndex: this.activeTreeListCell.colIndex
+        };
+        this.notifyTaskStatusChange();
+    };
+    /**
+     * Updates the focus target flags and notifies the active task to update its focused state.
+     */
+    NavigationService.prototype.handleTimelineFocusIn = function (_a) {
+        var target = _a.target;
+        this.treeListLastActive = false;
+        this.timelineLastActive = true;
+        this.isTimelineFocused = true;
+        if (isTask(target, this.timelineElement)) {
+            this.notifyTaskStatusChange();
+        }
+    };
+    /**
+     * Updates the timeline focus state flag and notifies the active task to update its focused state.
+     */
+    NavigationService.prototype.handleTimelineFocusOut = function (_a) {
+        var relatedTarget = _a.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();
+        }
+    };
+    /**
+     * 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.
+     */
+    NavigationService.prototype.handleTreeListFocusIn = function (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)) {
+            var _a = this.gantt.treeList.activeCell, colIndex = _a.colIndex, rowIndex = _a.rowIndex;
+            this.activeTreeListCell = { colIndex: colIndex, rowIndex: rowIndex };
+        }
+        else {
+            // if the previous focus target was outside the TreeList, ensure the expected focus coords are used
+            var _b = this.activeTreeListCell, rowIndex = _b.rowIndex, colIndex = _b.colIndex;
+            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');
+        }
+    };
+    NavigationService.prototype.handleKeydown = function (event) {
+        var _this = this;
+        var _a = event, keyCode = _a.keyCode, target = _a.target, altKey = _a.altKey;
+        var isTimelineActive = this.timelineElement.contains(target);
+        if (isTimelineActive) {
+            if (isArrowUpDownKey(keyCode)) {
+                var 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) {
+                var 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)) {
+                var task_1 = this.gantt.renderedTreeListItems[this.activeTimelineIndex];
+                var selectionAction_1 = this.gantt.getSelectionAction(event, task_1);
+                if (isPresent(task_1) && !this.gantt.isSameSelection(selectionAction_1, task_1)) {
+                    this.zone.run(function () {
+                        return _this.gantt.notifySelectionChange(task_1, selectionAction_1);
+                    });
+                }
+                event.preventDefault();
+            }
+            if (keyCode === Keys.Enter && hasObservers(this.gantt.taskClick)) {
+                var task_2 = this.gantt.renderedTreeListItems[this.activeTimelineIndex];
+                if (isPresent(task_2)) {
+                    this.zone.run(function () {
+                        return _this.gantt.notifyTaskClick(event, task_2, _this.activeTimelineIndex);
+                    });
+                }
+                event.preventDefault();
+            }
+            if (isExpandCollapseKey(keyCode, altKey)) {
+                var task_3 = this.gantt.renderedTreeListItems[this.activeTimelineIndex];
+                if (isPresent(task_3) && this.gantt.hasChildren(task_3)) {
+                    var shouldExpand_1 = keyCode === Keys.ArrowRight;
+                    var isExpanded = this.gantt.isExpanded(task_3);
+                    var sameState = shouldExpand_1 === isExpanded;
+                    if (!sameState) {
+                        this.zone.run(function () {
+                            var expandEvent = { dataItem: task_3 };
+                            // order is not arbitrary
+                            // the TreeList emits the individual events first, then the combined `expandStateChange` event
+                            var individualEmitter = shouldExpand_1 ? _this.gantt.rowExpand : _this.gantt.rowCollapse;
+                            individualEmitter.emit(expandEvent);
+                            _this.gantt.expandStateChange.emit(__assign({}, expandEvent, { expand: shouldExpand_1 }));
+                            _this.gantt.updateView();
+                            _this.scrollHorizontallyToTask(_this.activeTimelineIndex);
+                        });
+                    }
+                }
+                event.preventDefault();
+            }
+        }
+        var isTreeListActive = this.treeListElement.contains(target);
+        if (keyCode === Keys.Delete && (isTimelineActive || isTreeListActive) && hasObservers(this.gantt.taskDelete)) {
+            var taskIndex = isTreeListActive ?
+                this.gantt.treeList.activeCell.dataRowIndex :
+                this.activeTimelineIndex;
+            var task_4 = this.gantt.renderedTreeListItems[taskIndex];
+            if (isPresent(task_4)) {
+                this.zone.run(function () {
+                    return _this.gantt.notifyTaskDelete(task_4);
+                });
+            }
+        }
+        if (isViewDigitKey(keyCode) && !isToolbar(target, this.host) && !this.gantt.isInEditMode) {
+            var targetViewIndex = getIndexFromViewDigitKeyCode(keyCode);
+            var availableViews = this.gantt.views.toArray();
+            var targetView_1 = availableViews[targetViewIndex];
+            if (isPresent(targetView_1) && targetView_1.type !== this.gantt.activeView) {
+                this.zone.run(function () {
+                    return _this.gantt.changeActiveView(targetView_1.type);
+                });
+            }
+        }
+    };
+    /**
+     * Filters for task mousedown in the Timeline.
+     */
+    NavigationService.prototype.handleTimelineMousedown = function (_a) {
+        var target = _a.target;
+        if (isTask(target, this.host) && !isClearButton(target, this.host)) {
+            var taskIndex = getClosestTaskIndex(target, this.host);
+            this.focusTask(taskIndex);
+        }
+    };
+    /**
+     * Scrolls horizontally to the beginning of the target task if the beginning of its content is not in the viewport.
+     */
+    NavigationService.prototype.scrollHorizontallyToTask = function (index) {
+        var 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
+        var targetVisibleWidth = 200;
+        var isScrollBeforeTask = (this.timelineElement.clientWidth + this.timelineElement.scrollLeft) < (task.offsetLeft + targetVisibleWidth);
+        var 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.
+     */
+    NavigationService.prototype.focusTreeList = function () {
+        this.gantt.treeList.focus();
     };
-    TimelineScrollService = __decorate([
-        Injectable()
-    ], TimelineScrollService);
-    return TimelineScrollService;
-}());
-
-/**
- * @hidden
- *
- * Needed to keep the Gantt's LocalizationService reference and be able to use it component's inside the TabStrip
- */
-var GanttLocalizationService = /** @class */ (function () {
-    function GanttLocalizationService(localizationService) {
-        this.localizationService = localizationService;
-    }
-    GanttLocalizationService.prototype.get = function (token) {
-        return this.localizationService.get(token);
+    /**
+     * Fires the `taskStatusChanges` event with active and focused status retrieved from
+     * `this.activeTimelineIndex` and `this.isTimelineFocused`.
+     */
+    NavigationService.prototype.notifyTaskStatusChange = function () {
+        this.taskStatusChanges.next(this.activeTask);
     };
-    GanttLocalizationService = __decorate([
+    NavigationService = __decorate([
         Injectable(),
-        __metadata("design:paramtypes", [LocalizationService])
-    ], GanttLocalizationService);
-    return GanttLocalizationService;
+        __metadata("design:paramtypes", [NgZone,
+            Renderer2,
+            ScrollSyncService])
+    ], NavigationService);
+    return NavigationService;
 }());
 
 /**
@@ -1913,245 +2541,85 @@ var GanttTaskContentTemplateDirective = /** @class */ (function () {
  *               orderId: 1,
  *               start: new Date("2014-06-02T00:00:00.000Z"),
  *               end: new Date("2014-06-07T00:00:00.000Z"),
- *               completionRatio: 0.5766666666666667,
- *               isExpanded: true,
- *               children: [{
- *                       id: 19,
- *                       title: "Validation with Customers",
- *                       orderId: 0,
- *                       start: new Date("2014-06-02T00:00:00.000Z"),
- *                       end: new Date("2014-06-04T00:00:00.000Z"),
- *                       completionRatio: 0.25,
- *                       isExpanded: true
- *                   },
- *                   {
- *                       id: 20,
- *                       title: "Market Research",
- *                       orderId: 1,
- *                       start: new Date("2014-06-02T00:00:00.000Z"),
- *                       end: new Date("2014-06-03T02:00:00.000Z"),
- *                       completionRatio: 0.82,
- *                       isExpanded: true
- *                   },
- *                   {
- *                       id: 39,
- *                       title: "Functional and Technical Specification",
- *                       orderId: 2,
- *                       start: new Date("2014-06-04T00:00:00.000Z"),
- *                       end: new Date("2014-06-07T00:00:00.000Z"),
- *                       completionRatio: 0.66,
- *                       isExpanded: true
- *                   }]
- *           }]
- *       };
- *
- *     public positionChange({ target }): void {
- *        this.position = target.value;
- *     }
- *
- *     public onClick(): void {
- *         console.log("button was clicked");
- *     }
- * }
- *
- * ```
- */
-var ToolbarTemplateDirective = /** @class */ (function () {
-    function ToolbarTemplateDirective(templateRef) {
-        this.templateRef = templateRef;
-        this._position = "top";
-    }
-    Object.defineProperty(ToolbarTemplateDirective.prototype, "position", {
-        get: function () {
-            return this._position;
-        },
-        /**
-         * Defines the Gantt Toolbar that will use this template.
-         *
-         * The possible values are:
-         * - `top`&mdash;The template will be rendered in the top toolbar (if present) only.
-         * - `bottom`&mdash;The template will be rendered in the bottom toolbar (if present) only.
-         * - `both`&mdash;The template will be rendered in both toolbars (if present).
-         */
-        set: function (position) {
-            this._position = position;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    __decorate([
-        Input('position'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], ToolbarTemplateDirective.prototype, "position", null);
-    ToolbarTemplateDirective = __decorate([
-        Directive({
-            selector: '[kendoGanttToolbarTemplate]'
-        }),
-        __param(0, Optional()),
-        __metadata("design:paramtypes", [TemplateRef])
-    ], ToolbarTemplateDirective);
-    return ToolbarTemplateDirective;
-}());
-
-/**
- * @hidden
- */
-var GanttTimelineComponent = /** @class */ (function () {
-    function GanttTimelineComponent(scrollSyncService, dependencyDomService, renderer, zone) {
-        var _this = this;
-        this.scrollSyncService = scrollSyncService;
-        this.dependencyDomService = dependencyDomService;
-        this.renderer = renderer;
-        this.zone = zone;
-        this.hostClass = true;
-        this.dependencies = [];
-        // as all drag-and-drop operations are on the timeline container, use a single draggable instance
-        this.timelineContainerPress = new EventEmitter();
-        this.timelineContainerDrag = new EventEmitter();
-        this.timelineContainerRelease = new EventEmitter();
-        this.subscriptions = new Subscription();
-        this.subscriptions.add(
-        // task changes indicates change in row content, number, height, etc.
-        this.dependencyDomService.taskChanges
-            .pipe(filter(function (args) { return isPresent(args.timelineRow); }), switchMap(function (args) { return _this.zone.onStable.pipe(take(1), map(function () { return args; })); }) // ensure the content is rendered
-        )
-            .subscribe(function (_a) {
-            var timelineRow = _a.timelineRow;
-            var timelineRowHeight = isDocumentAvailable() ? timelineRow.getBoundingClientRect().height : 0;
-            _this.renderer.setStyle(_this.timelineColumns.nativeElement, 'height', (_this.rows || []).length * timelineRowHeight + "px");
-        }));
-    }
-    Object.defineProperty(GanttTimelineComponent.prototype, "draggableEnabled", {
-        /**
-         * Specifies whether the draggable will attach or detach its pointer event listeners.
-         */
-        get: function () {
-            return this.renderDependencyDragClues;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    GanttTimelineComponent.prototype.ngAfterViewInit = function () {
-        var timelineHeader = this.timelineHeaderWrap.nativeElement;
-        var rightContainer = this.timelineContent.nativeElement;
-        this.scrollSyncService.registerElement(rightContainer, 'timeline');
-        this.scrollSyncService.registerElement(timelineHeader, 'header');
-        this.dependencyDomService.registerContentContainer(this.tasksContainer.nativeElement);
-    };
-    GanttTimelineComponent.prototype.ngOnDestroy = function () {
-        this.subscriptions.unsubscribe();
-    };
-    GanttTimelineComponent.prototype.isNonWorking = function (item) {
-        return item.hasOwnProperty('isWorking') && !item.isWorking;
-    };
-    __decorate([
-        ViewChild('timelineContent', { static: true }),
-        __metadata("design:type", ElementRef)
-    ], GanttTimelineComponent.prototype, "timelineContent", void 0);
-    __decorate([
-        ViewChild('timelineColumns', { static: true }),
-        __metadata("design:type", ElementRef)
-    ], GanttTimelineComponent.prototype, "timelineColumns", void 0);
-    __decorate([
-        ViewChild('timelineHeaderWrap', { static: true }),
-        __metadata("design:type", ElementRef)
-    ], GanttTimelineComponent.prototype, "timelineHeaderWrap", void 0);
-    __decorate([
-        ViewChild('tasksContainer', { static: true }),
-        __metadata("design:type", ElementRef)
-    ], GanttTimelineComponent.prototype, "tasksContainer", void 0);
-    __decorate([
-        ViewChild('dragPopupContainer', { static: false, read: ViewContainerRef }),
-        __metadata("design:type", ViewContainerRef)
-    ], GanttTimelineComponent.prototype, "dragPopupContainer", void 0);
-    __decorate([
-        ViewChild('dependencyDragCreatePolyline', { static: false }),
-        __metadata("design:type", ElementRef)
-    ], GanttTimelineComponent.prototype, "dependencyDragCreatePolyline", void 0);
-    __decorate([
-        HostBinding('class.k-gantt-timeline'),
-        __metadata("design:type", Boolean)
-    ], GanttTimelineComponent.prototype, "hostClass", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Array)
-    ], GanttTimelineComponent.prototype, "rows", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Array)
-    ], GanttTimelineComponent.prototype, "slots", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Array)
-    ], GanttTimelineComponent.prototype, "groupSlots", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Number)
-    ], GanttTimelineComponent.prototype, "tableWidth", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], GanttTimelineComponent.prototype, "activeView", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", TemplateRef)
-    ], GanttTimelineComponent.prototype, "taskContentTemplate", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", TemplateRef)
-    ], GanttTimelineComponent.prototype, "taskTemplate", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", TemplateRef)
-    ], GanttTimelineComponent.prototype, "summaryTaskTemplate", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Function)
-    ], GanttTimelineComponent.prototype, "taskClass", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Function)
-    ], GanttTimelineComponent.prototype, "isTaskSelected", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], GanttTimelineComponent.prototype, "renderDependencyDragClues", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], GanttTimelineComponent.prototype, "dragScrollSettings", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Function)
-    ], GanttTimelineComponent.prototype, "hasChildren", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Array)
-    ], GanttTimelineComponent.prototype, "dependencies", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], GanttTimelineComponent.prototype, "timelineContainerPress", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], GanttTimelineComponent.prototype, "timelineContainerDrag", void 0);
+ *               completionRatio: 0.5766666666666667,
+ *               isExpanded: true,
+ *               children: [{
+ *                       id: 19,
+ *                       title: "Validation with Customers",
+ *                       orderId: 0,
+ *                       start: new Date("2014-06-02T00:00:00.000Z"),
+ *                       end: new Date("2014-06-04T00:00:00.000Z"),
+ *                       completionRatio: 0.25,
+ *                       isExpanded: true
+ *                   },
+ *                   {
+ *                       id: 20,
+ *                       title: "Market Research",
+ *                       orderId: 1,
+ *                       start: new Date("2014-06-02T00:00:00.000Z"),
+ *                       end: new Date("2014-06-03T02:00:00.000Z"),
+ *                       completionRatio: 0.82,
+ *                       isExpanded: true
+ *                   },
+ *                   {
+ *                       id: 39,
+ *                       title: "Functional and Technical Specification",
+ *                       orderId: 2,
+ *                       start: new Date("2014-06-04T00:00:00.000Z"),
+ *                       end: new Date("2014-06-07T00:00:00.000Z"),
+ *                       completionRatio: 0.66,
+ *                       isExpanded: true
+ *                   }]
+ *           }]
+ *       };
+ *
+ *     public positionChange({ target }): void {
+ *        this.position = target.value;
+ *     }
+ *
+ *     public onClick(): void {
+ *         console.log("button was clicked");
+ *     }
+ * }
+ *
+ * ```
+ */
+var ToolbarTemplateDirective = /** @class */ (function () {
+    function ToolbarTemplateDirective(templateRef) {
+        this.templateRef = templateRef;
+        this._position = "top";
+    }
+    Object.defineProperty(ToolbarTemplateDirective.prototype, "position", {
+        get: function () {
+            return this._position;
+        },
+        /**
+         * Defines the Gantt Toolbar that will use this template.
+         *
+         * The possible values are:
+         * - `top`&mdash;The template will be rendered in the top toolbar (if present) only.
+         * - `bottom`&mdash;The template will be rendered in the bottom toolbar (if present) only.
+         * - `both`&mdash;The template will be rendered in both toolbars (if present).
+         */
+        set: function (position) {
+            this._position = position;
+        },
+        enumerable: true,
+        configurable: true
+    });
     __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], GanttTimelineComponent.prototype, "timelineContainerRelease", void 0);
-    GanttTimelineComponent = __decorate([
-        Component({
-            selector: 'kendo-gantt-timeline',
-            template: "\n        <div class=\"k-timeline k-grid k-widget\">\n            <div class=\"k-grid-header\">\n                <div #timelineHeaderWrap class=\"k-grid-header-wrap\">\n                    <table\n                        role=\"presentation\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <tbody\n                            kendoGanttHeaderTableBody\n                            [groupSlots]=\"groupSlots\"\n                            [slots]=\"slots\">\n                        </tbody>\n                    </table>\n                </div>\n            </div>\n            <div\n                #timelineContent\n                class=\"k-grid-content\"\n                kendoGanttTimelineScrollable\n                [scrollSettings]=\"dragScrollSettings\"\n                kendoDraggable\n                [enableDrag]=\"draggableEnabled\"\n                (kendoPress)=\"timelineContainerPress.emit($event)\"\n                (kendoDrag)=\"timelineContainerDrag.emit($event)\"\n                (kendoRelease)=\"timelineContainerRelease.emit($event)\"\n            >\n                <div class=\"k-gantt-tables\">\n                    <table\n                        class=\"k-gantt-rows\"\n                        [style.width.px]=\"tableWidth\"\n                        role=\"presentation\"\n                    >\n                        <tbody>\n                            <tr *ngFor=\"let item of rows; let i = index;\"\n                                [class.k-alt]=\"i % 2\"\n                            >\n                                <td></td>\n                            </tr>\n                        </tbody>\n                    </table>\n\n                    <table\n                        #timelineColumns\n                        class=\"k-gantt-columns\"\n                        role=\"presentation\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <colgroup>\n                            <col *ngFor=\"let item of slots\">\n                        </colgroup>\n\n                        <tbody>\n                            <tr>\n                                <td *ngFor=\"let item of slots\"\n                                    [class.k-nonwork-hour]=\"isNonWorking(item)\"\n                                >\n                                </td>\n                            </tr>\n                        </tbody>\n                    </table>\n\n                    <table\n                        #tasksContainer\n                        class=\"k-gantt-tasks\"\n                        role=\"presentation\"\n                        style=\"border-collapse: collapse;\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <tbody\n                            kendoGanttTasksTableBody\n                            [rows]=\"rows\"\n                            [activeView]=\"activeView\"\n                            [taskContentTemplate]=\"taskContentTemplate\"\n                            [taskTemplate]=\"taskTemplate\"\n                            [summaryTaskTemplate]=\"summaryTaskTemplate\"\n                            [taskClass]=\"taskClass\"\n                            [hasChildren]=\"hasChildren\"\n                            [isTaskSelected]=\"isTaskSelected\"\n                            [renderDependencyDragClues]=\"renderDependencyDragClues\"\n                        >\n                        </tbody>\n                    </table>\n                </div>\n                <svg class=\"k-gantt-dependencies-svg\">\n                    <polyline\n                        *ngFor=\"let dependency of dependencies\"\n                        kendoGanttDependency\n                        [dependency]=\"dependency\"\n                    />\n                    <polyline #dependencyDragCreatePolyline />\n                </svg>\n\n                <!-- placeholder for the dependency drag popup; its position is not arbitrary - the popup is intended to be absolutely positioned inside the .k-grid-content element -->\n                <ng-container #dragPopupContainer></ng-container>\n            </div>\n        </div>\n    "
+        Input('position'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], ToolbarTemplateDirective.prototype, "position", null);
+    ToolbarTemplateDirective = __decorate([
+        Directive({
+            selector: '[kendoGanttToolbarTemplate]'
         }),
-        __metadata("design:paramtypes", [ScrollSyncService,
-            DependencyDomService,
-            Renderer2,
-            NgZone])
-    ], GanttTimelineComponent);
-    return GanttTimelineComponent;
+        __param(0, Optional()),
+        __metadata("design:paramtypes", [TemplateRef])
+    ], ToolbarTemplateDirective);
+    return ToolbarTemplateDirective;
 }());
 
 /**
@@ -2277,7 +2745,7 @@ var DEFAULT_DRAG_SCROLL_SETTINGS = {
  * ```
  */
 var GanttComponent = /** @class */ (function () {
-    function GanttComponent(timelineViewService, scrollSyncService, renderer, mapper, optionChangesService, dependencyDomService, editService, localizationService, hostElement, zone) {
+    function GanttComponent(timelineViewService, scrollSyncService, renderer, mapper, optionChangesService, dependencyDomService, editService, localizationService, hostElement, zone, navigationService) {
         var _this = this;
         this.timelineViewService = timelineViewService;
         this.scrollSyncService = scrollSyncService;
@@ -2289,6 +2757,15 @@ var GanttComponent = /** @class */ (function () {
         this.localizationService = localizationService;
         this.hostElement = hostElement;
         this.zone = zone;
+        this.navigationService = navigationService;
+        /**
+         * @hidden
+         */
+        this.roleDescription = 'Gantt Chart';
+        /**
+         * @hidden
+         */
+        this.role = 'application';
         this.hostClasses = true;
         /**
          * Specifies a callback that determines if the given task is selected ([see example]({% slug selection_gantt %}#toc-custom-selection)).
@@ -2360,6 +2837,12 @@ var GanttComponent = /** @class */ (function () {
          * 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.
@@ -2403,7 +2886,8 @@ var GanttComponent = /** @class */ (function () {
          */
         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();
@@ -2538,7 +3022,13 @@ var GanttComponent = /** @class */ (function () {
         }));
         this.editService.getSelectedItem = this.getFirstSelectedItem.bind(this);
         this.editServiceSubscription.add(this.editService.showEditingDialog.subscribe(function (show) { return _this.showEditingDialog = show; }));
-        this.editServiceSubscription.add(this.editService.showConfirmationDialog.subscribe(function () { return _this.taskDelete.emit(); }));
+        this.editServiceSubscription.add(this.editService.taskDelete.subscribe(function (task) {
+            if (hasObservers(_this.taskDelete)) {
+                _this.zone.run(function () {
+                    return _this.notifyTaskDelete(task);
+                });
+            }
+        }));
         this.editServiceSubscription.add(this.editService.editEvent.subscribe(function (args) {
             _this[args.editResultType].emit({
                 taskFormGroup: args.taskFormGroup,
@@ -2549,6 +3039,9 @@ var GanttComponent = /** @class */ (function () {
             _this.showConfirmationDialog = _this.showEditingDialog = false;
             _this.editService.dataItem = _this.editService.taskFormGroup = null;
             _this.updateView();
+            if (_this.navigable) {
+                _this.focus();
+            }
         }));
         this.editServiceSubscription.add(this.editService.addEvent.subscribe(function (args) {
             var selectedItem = _this.getFirstSelectedItem();
@@ -2578,6 +3071,20 @@ var GanttComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(GanttComponent.prototype, "hostRoleDescriptionAttr", {
+        get: function () {
+            return this.roleDescription;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(GanttComponent.prototype, "hostRoleAttr", {
+        get: function () {
+            return this.role;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(GanttComponent.prototype, "dir", {
         get: function () {
             return this.direction;
@@ -2820,6 +3327,19 @@ var GanttComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(GanttComponent.prototype, "viewItems", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            if (!isPresent(this.treeList)) {
+                return [];
+            }
+            return this.treeList.view.data;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(GanttComponent.prototype, "filterMenu", {
         /**
          * @hidden
@@ -2883,6 +3403,16 @@ var GanttComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(GanttComponent.prototype, "isInEditMode", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this.showEditingDialog || this.showConfirmationDialog || this.treeList.isEditing();
+        },
+        enumerable: true,
+        configurable: true
+    });
     GanttComponent.prototype.ngOnChanges = function (changes) {
         if (anyChanged(['data', 'activeView', 'workWeekStart', 'workWeekEnd', 'workDayStart', 'workDayEnd'], changes)) {
             this.loadTimelineData();
@@ -2890,6 +3420,14 @@ var GanttComponent = /** @class */ (function () {
     };
     GanttComponent.prototype.ngAfterViewInit = function () {
         this.updateTreeListMargin();
+        if (this.navigable) {
+            this.navigationService.initialize({
+                gantt: this,
+                host: this.hostElement.nativeElement,
+                treeListElement: this.treeList.wrapper.nativeElement,
+                timelineElement: this.timeline.timelineContent.nativeElement
+            });
+        }
         var leftContainer = this.treeList.wrapper.nativeElement.querySelector('kendo-treelist-list > div');
         this.scrollSyncService.registerElement(leftContainer, 'treelist');
     };
@@ -2907,6 +3445,34 @@ var GanttComponent = /** @class */ (function () {
             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)).
+     */
+    GanttComponent.prototype.focus = function () {
+        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)).
+     */
+    GanttComponent.prototype.focusCell = function (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)).
+     */
+    GanttComponent.prototype.focusTask = function (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
@@ -2996,6 +3562,15 @@ var GanttComponent = /** @class */ (function () {
     GanttComponent.prototype.openConfirmationDialog = function () {
         this.showConfirmationDialog = true;
     };
+    /**
+     * @hidden
+     */
+    GanttComponent.prototype.handleConfirmationDialogClose = function () {
+        this.showConfirmationDialog = false;
+        if (this.navigable) {
+            this.focus();
+        }
+    };
     /**
      * Opens a cell for editing.
      */
@@ -3081,7 +3656,7 @@ var GanttComponent = /** @class */ (function () {
         if (hasObservers(this.taskClick)) {
             var taskIndex_1 = getClosestTaskIndex(target, gantt);
             var task_1 = this.renderedTreeListItems[taskIndex_1];
-            this.zone.run(function () { return _this.emitTaskClick(event, task_1, taskIndex_1); });
+            this.zone.run(function () { return _this.notifyTaskClick(event, task_1, taskIndex_1); });
         }
     };
     /**
@@ -3100,8 +3675,8 @@ var GanttComponent = /** @class */ (function () {
         if ((hasObservers(this.selectionChange) && !this.isSameSelection(selectionAction, task)) ||
             hasObservers(this.taskClick)) {
             this.zone.run(function () {
-                _this.emitSelectionChange(task, selectionAction);
-                _this.emitTaskClick(event, task, taskIndex);
+                _this.notifySelectionChange(task, selectionAction);
+                _this.notifyTaskClick(event, task, taskIndex);
             });
         }
     };
@@ -3139,7 +3714,7 @@ var GanttComponent = /** @class */ (function () {
         }
         var task = event.items.map(function (item) { return item.dataItem; })[0]; // single selection only currently available
         var action = event.action;
-        this.emitSelectionChange(task, action);
+        this.notifySelectionChange(task, action);
     };
     /**
      * @hidden
@@ -3191,7 +3766,7 @@ var GanttComponent = /** @class */ (function () {
                 dataItem: task_2,
                 originalEvent: event,
                 sender: _this,
-                rowIndex: taskIndex_2,
+                index: taskIndex_2,
                 type: 'dblclick'
             }); });
         }
@@ -3202,16 +3777,35 @@ var GanttComponent = /** @class */ (function () {
     GanttComponent.prototype.getText = function (token) {
         return this.localizationService.get(token);
     };
-    GanttComponent.prototype.emitTaskClick = function (event, dataItem, itemIndex) {
+    /**
+     * @hidden
+     */
+    GanttComponent.prototype.changeActiveView = function (view) {
+        if (view !== this.activeView) {
+            this.activeView = view;
+            this.loadTimelineData();
+            this.scrollSyncService.resetTimelineScrollLeft();
+            this.activeViewChange.emit(view);
+        }
+    };
+    /**
+     * @hidden
+     */
+    GanttComponent.prototype.notifyTaskClick = function (event, dataItem, itemIndex) {
+        // simulates the TreeList `cellClick` event triggered by enter press (type: 'click')
+        var 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
         });
     };
-    GanttComponent.prototype.emitSelectionChange = function (dataItem, action) {
+    /**
+     * @hidden
+     */
+    GanttComponent.prototype.notifySelectionChange = function (dataItem, action) {
         if (this.isSameSelection(action, dataItem)) {
             return;
         }
@@ -3222,6 +3816,30 @@ var GanttComponent = /** @class */ (function () {
         });
         this.treeList.updateView();
     };
+    /**
+     * @hidden
+     */
+    GanttComponent.prototype.notifyTaskDelete = function (task) {
+        this.editService.dataItem = task;
+        this.taskDelete.emit({
+            item: getEditItem(task, this.treeList.view.data, this.mapper),
+            sender: this
+        });
+    };
+    /**
+     * @hidden
+     */
+    GanttComponent.prototype.isSameSelection = function (action, dataItem) {
+        return action === 'select' && this.isSelected(dataItem);
+    };
+    /**
+     * @hidden
+     */
+    GanttComponent.prototype.getSelectionAction = function (_a, dataItem) {
+        var ctrlKey = _a.ctrlKey, metaKey = _a.metaKey;
+        var shouldToggleSelection = ctrlKey || metaKey;
+        return (shouldToggleSelection && this.isSelected(dataItem)) ? 'remove' : 'select';
+    };
     GanttComponent.prototype.updateTreeListGroupClass = function (columns) {
         if (columns === void 0) { columns = this.columns; }
         if (!isPresent(this.treeList)) {
@@ -3252,14 +3870,6 @@ var GanttComponent = /** @class */ (function () {
         }
         return this.views.find(function (view) { return view.type === _this.activeView; });
     };
-    GanttComponent.prototype.isSameSelection = function (action, dataItem) {
-        return action === 'select' && this.isSelected(dataItem);
-    };
-    GanttComponent.prototype.getSelectionAction = function (_a, dataItem) {
-        var ctrlKey = _a.ctrlKey, metaKey = _a.metaKey;
-        var shouldToggleSelection = ctrlKey || metaKey;
-        return (shouldToggleSelection && this.isSelected(dataItem)) ? 'remove' : 'select';
-    };
     GanttComponent.prototype.getFirstSelectedItem = function () {
         var isSelectedCallback = this.isSelected || isSelected;
         var loadedItems = this.renderedTreeListItems || [];
@@ -3340,6 +3950,24 @@ var GanttComponent = /** @class */ (function () {
         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)
@@ -3445,6 +4073,10 @@ var GanttComponent = /** @class */ (function () {
         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),
@@ -3610,9 +4242,10 @@ var GanttComponent = /** @class */ (function () {
                 MappingService,
                 OptionChangesService,
                 EditService,
-                TimelineScrollService
+                TimelineScrollService,
+                NavigationService
             ],
-            template: "\n        <ng-container kendoGanttLocalizedMessages\n            i18n-taskEditingGeneralTabTitle=\"kendo.gantt.taskEditingGeneralTabTitle|The title of the 'General' tab of the editing dialog TabStrip\"\n            taskEditingGeneralTabTitle=\"General\"\n\n            i18n-taskEditingPredecessorsTabTitle=\"kendo.gantt.taskEditingPredecessorsTabTitle|The title of the 'Predecessors' dependencies tab of the editing dialog TabStrip\"\n            taskEditingPredecessorsTabTitle=\"Predecessors\"\n\n            i18n-taskEditingSuccessorsTabTitle=\"kendo.gantt.taskEditingSuccessorsTabTitle|The title of the 'Successors' dependencies tab of the editing dialog TabStrip\"\n            taskEditingSuccessorsTabTitle=\"Successors\"\n\n            i18n-taskEditingDependenciesAddButtonText=\"kendo.gantt.taskEditingDependenciesAddButtonText|The text of the 'Add' button in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesAddButtonText=\"Add\"\n\n            i18n-taskEditingDependenciesRemoveButtonText=\"kendo.gantt.taskEditingDependenciesRemoveButtonText|The text of the 'Remove' button in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesRemoveButtonText=\"Remove\"\n\n            i18n-taskEditingDependenciesGridNameColumnTitle=\"kendo.gantt.taskEditingDependenciesGridNameColumnTitle|The title of the 'Task Title' Grid column in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesGridNameColumnTitle=\"Task Title\"\n\n            i18n-taskEditingDependenciesGridTypeColumnTitle=\"kendo.gantt.taskEditingDependenciesGridTypeColumnTitle|The title of the 'Type' Grid column in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesGridTypeColumnTitle=\"Type\"\n\n            i18n-taskDeleteLabel=\"kendo.gantt.taskDeleteLabel|The label of the task delete icon\"\n            taskDeleteLabel=\"Delete\"\n\n            i18n-taskEditingDialogTitle=\"kendo.gantt.taskEditingDialogTitle|The title of the task editing dialog\"\n            taskEditingDialogTitle=\"Editing Task\"\n\n            i18n-taskEditingDialogCloseTitle=\"kendo.gantt.taskEditingDialogCloseTitle|The title of the task editing dialog close button\"\n            taskEditingDialogCloseTitle=\"Close\"\n\n            i18n-confirmationDialogCloseTitle=\"kendo.gantt.confirmationDialogCloseTitle|The title of the confirmation dialog close button\"\n            confirmationDialogCloseTitle=\"Close\"\n\n            i18n-confirmationDialogTitle=\"kendo.gantt.confirmationDialogTitle|The title of the delete task confirmation dialog\"\n            confirmationDialogTitle=\"Delete Task\"\n\n            i18n-confirmationDialogContent=\"kendo.gantt.confirmationDialogContent|The content of the delete task confirmation dialog\"\n            confirmationDialogContent=\"Are you sure you want to delete this task?\"\n\n            i18n-deleteButtonText=\"kendo.gantt.deleteButtonText|The text of the task editing dialog 'Delete' button\"\n            deleteButtonText=\"Delete\"\n\n            i18n-cancelButtonText=\"kendo.gantt.cancelButtonText|The text of the task editing dialog 'Cancel' button\"\n            cancelButtonText=\"Cancel\"\n\n            i18n-saveButtonText=\"kendo.gantt.saveButtonText|The text of the task editing dialog 'Save' button\"\n            saveButtonText=\"Save\"\n\n            i18n-titleFieldInputLabel=\"kendo.gantt.titleFieldInputLabel|The label of the 'title' field input in editing mode\"\n            titleFieldInputLabel=\"Title\"\n\n            i18n-startFieldInputLabel=\"kendo.gantt.startFieldInputLabel|The label of the 'start' field input in editing mode\"\n            startFieldInputLabel=\"Start\"\n\n            i18n-endFieldInputLabel=\"kendo.gantt.endFieldInputLabel|The label of the 'end' field input in editing mode\"\n            endFieldInputLabel=\"End\"\n\n            i18n-completionRatioFieldInputLabel=\"kendo.gantt.completionRatioFieldInputLabel|The label of the 'completionRatio' field input in editing mode\"\n            completionRatioFieldInputLabel=\"Progress\"\n\n            i18n-dayViewText=\"kendo.gantt.dayViewText|The text of the day view in the ViewSelector component\"\n            dayViewText=\"Day\"\n\n            i18n-weekViewText=\"kendo.gantt.weekViewText|The text of the week view in the ViewSelector component\"\n            weekViewText=\"Week\"\n\n            i18n-monthViewText=\"kendo.gantt.monthViewText|The text of the month view in the ViewSelector component\"\n            monthViewText=\"Month\"\n\n            i18n-yearViewText-disabled=\"kendo.gantt.yearViewText|The text of the year view in the ViewSelector component\"\n            yearViewText=\"Year\"\n\n            i18n-addTaskText=\"kendo.gantt.addTaskText|The text of the DropDownButton in the AddTask component\"\n            addTaskText=\"Add Task\"\n\n            i18n-addChildText=\"kendo.gantt.addChildText|The text of the 'Add Child' option in the AddTask component\"\n            addChildText=\"Add Child\"\n\n            i18n-addAboveText=\"kendo.gantt.addAboveText|The text of the 'Add Above' option in the AddTask component\"\n            addAboveText=\"Add Above\"\n\n            i18n-addBelowText=\"kendo.gantt.addBelowText|The text of the 'Add Below' option in the AddTask component\"\n            addBelowText=\"Add Below\"\n\n            i18n-noRecords=\"kendo.gantt.noRecords|The label visible in the TreeList when there are no records\"\n            noRecords=\"No records available.\"\n\n            i18n-filter=\"kendo.gantt.filter|The label of the filter cell or icon\"\n            filter=\"Filter\"\n\n            i18n-filterEqOperator=\"kendo.gantt.filterEqOperator|The text of the equal filter operator\"\n            filterEqOperator=\"Is equal to\"\n\n            i18n-filterNotEqOperator=\"kendo.gantt.filterNotEqOperator|The text of the not equal filter operator\"\n            filterNotEqOperator=\"Is not equal to\"\n\n            i18n-filterIsNullOperator=\"kendo.gantt.filterIsNullOperator|The text of the is null filter operator\"\n            filterIsNullOperator=\"Is null\"\n\n            i18n-filterIsNotNullOperator=\"kendo.gantt.filterIsNotNullOperator|The text of the is not null filter operator\"\n            filterIsNotNullOperator=\"Is not null\"\n\n            i18n-filterIsEmptyOperator=\"kendo.gantt.filterIsEmptyOperator|The text of the is empty filter operator\"\n            filterIsEmptyOperator=\"Is empty\"\n\n            i18n-filterIsNotEmptyOperator=\"kendo.gantt.filterIsNotEmptyOperator|The text of the is not empty filter operator\"\n            filterIsNotEmptyOperator=\"Is not empty\"\n\n            i18n-filterStartsWithOperator=\"kendo.gantt.filterStartsWithOperator|The text of the starts with filter operator\"\n            filterStartsWithOperator=\"Starts with\"\n\n            i18n-filterContainsOperator=\"kendo.gantt.filterContainsOperator|The text of the contains filter operator\"\n            filterContainsOperator=\"Contains\"\n\n            i18n-filterNotContainsOperator=\"kendo.gantt.filterNotContainsOperator|The text of the does not contain filter operator\"\n            filterNotContainsOperator=\"Does not contain\"\n\n            i18n-filterEndsWithOperator=\"kendo.gantt.filterEndsWithOperator|The text of the ends with filter operator\"\n            filterEndsWithOperator=\"Ends with\"\n\n            i18n-filterGteOperator=\"kendo.gantt.filterGteOperator|The text of the greater than or equal filter operator\"\n            filterGteOperator=\"Is greater than or equal to\"\n\n            i18n-filterGtOperator=\"kendo.gantt.filterGtOperator|The text of the greater than filter operator\"\n            filterGtOperator=\"Is greater than\"\n\n            i18n-filterLteOperator=\"kendo.gantt.filterLteOperator|The text of the less than or equal filter operator\"\n            filterLteOperator=\"Is less than or equal to\"\n\n            i18n-filterLtOperator=\"kendo.gantt.filterLtOperator|The text of the less than filter operator\"\n            filterLtOperator=\"Is less than\"\n\n            i18n-filterIsTrue=\"kendo.gantt.filterIsTrue|The text of the IsTrue boolean filter option\"\n            filterIsTrue=\"Is True\"\n\n            i18n-filterIsFalse=\"kendo.gantt.filterIsFalse|The text of the IsFalse boolean filter option\"\n            filterIsFalse=\"Is False\"\n\n            i18n-filterBooleanAll=\"kendo.gantt.filterBooleanAll|The text of the (All) boolean filter option\"\n            filterBooleanAll=\"(All)\"\n\n            i18n-filterAfterOrEqualOperator=\"kendo.gantt.filterAfterOrEqualOperator|The text of the after or equal date filter operator\"\n            filterAfterOrEqualOperator=\"Is after or equal to\"\n\n            i18n-filterAfterOperator=\"kendo.gantt.filterAfterOperator|The text of the after date filter operator\"\n            filterAfterOperator=\"Is after\"\n\n            i18n-filterBeforeOperator=\"kendo.gantt.filterBeforeOperator|The text of the before date filter operator\"\n            filterBeforeOperator=\"Is before\"\n\n            i18n-filterBeforeOrEqualOperator=\"kendo.gantt.filterBeforeOrEqualOperator|The text of the before or equal date filter operator\"\n            filterBeforeOrEqualOperator=\"Is before or equal to\"\n\n            i18n-filterFilterButton=\"kendo.gantt.filterFilterButton|The text of the filter button\"\n            filterFilterButton=\"Filter\"\n\n            i18n-filterClearButton=\"kendo.gantt.filterClearButton|The text of the clear filter button\"\n            filterClearButton=\"Clear\"\n\n            i18n-filterAndLogic=\"kendo.gantt.filterAndLogic|The text of the And filter logic\"\n            filterAndLogic=\"And\"\n\n            i18n-filterOrLogic=\"kendo.gantt.filterOrLogic|The text of the Or filter logic\"\n            filterOrLogic=\"Or\"\n\n            i18n-loading=\"kendo.gantt.loading|The loading text\"\n            loading=\"Loading\"\n\n            i18n-columnMenu=\"kendo.gantt.columnMenu|The title of the column menu icon\"\n            columnMenu=\"Column Menu\"\n\n            i18n-columns=\"kendo.gantt.columns|The text shown in the column menu for the columns item\"\n            columns=\"Columns\"\n\n            i18n-lock-disabled=\"kendo.gantt.lock|The text shown in the column menu for the lock item\"\n            lock-disabled=\"Lock\"\n\n            i18n-unlock-disabled=\"kendo.gantt.unlock|The text shown in the column menu for the unlock item\"\n            unlock-disabled=\"Unlock\"\n\n            i18n-sortable=\"kendo.gantt.sortable|The label of the sort icon\"\n            sortable=\"Sortable\"\n\n            i18n-sortAscending=\"kendo.gantt.sortAscending|The text shown in the column menu for the sort ascending item\"\n            sortAscending=\"Sort Ascending\"\n\n            i18n-sortDescending=\"kendo.gantt.sortDescending|The text shown in the column menu for the sort descending item\"\n            sortDescending=\"Sort Descending\"\n\n            i18n-sortedAscending=\"kendo.gantt.sortedAscending|The status announcement when a column is sorted ascending\"\n            sortedAscending=\"Sorted Ascending\"\n\n            i18n-sortedDescending=\"kendo.gantt.sortedDescending|The status announcement when a column is sorted descending\"\n            sortedDescending=\"Sorted Descending\"\n\n            i18n-sortedDefault=\"kendo.gantt.sortedDefault|The status announcement when a column is no longer sorted\"\n            sortedDefault=\"Not Sorted\"\n\n            i18n-columnsApply=\"kendo.gantt.columnsApply|The text shown in the column menu or column chooser for the columns apply button\"\n            columnsApply=\"Apply\"\n\n            i18n-columnsReset=\"kendo.gantt.columnsReset|The text shown in the column menu or column chooser for the columns reset button\"\n            columnsReset=\"Reset\"></ng-container>\n        <kendo-gantt-toolbar\n            *ngIf=\"showToolbar('top')\"\n            [showAddTask]=\"toolbarSettings.addTaskTool === 'top' || toolbarSettings.addTaskTool === 'both'\"\n            [showViewSelector]=\"toolbarSettings.viewSelectorTool === 'top' || toolbarSettings.viewSelectorTool === 'both'\"\n            class=\"k-gantt-header k-toolbar k-gantt-toolbar\"\n            position=\"top\"></kendo-gantt-toolbar>\n        <div class=\"k-gantt-content\">\n            <kendo-splitter [style.border]=\"0\">\n                <kendo-splitter-pane\n                    class=\"k-gantt-treelist k-gantt-treelist-scrollable\"\n                    [collapsible]=\"treeListPaneOptions?.collapsible\"\n                    [collapsed]=\"treeListPaneOptions?.collapsed\"\n                    (collapsedChange)=\"onTreeListCollapsedChange($event)\"\n                    [scrollable]=\"false\">\n                    <kendo-treelist\n                        [idField]=\"taskIdField\"\n                        [columns]=\"columns\"\n                        [data]=\"data\"\n                        [hasChildren]=\"hasChildren\"\n                        [fetchChildren]=\"fetchChildren\"\n                        [isExpanded]=\"isExpanded\"\n                        [autoSize]=\"columnsAutoSize\"\n                        [columnMenu]=\"columnMenu\"\n                        [reorderable]=\"columnsReorderable\"\n                        [resizable]=\"columnsResizable\"\n                        [rowClass]=\"rowClass\"\n                        [isSelected]=\"isSelected\"\n                        [selectable]=\"selectable\"\n                        [sortable]=\"sortable\"\n                        [sort]=\"sort\"\n                        [filterable]=\"filterMenu\"\n                        [filter]=\"filter\"\n                        (filterChange)=\"filterChange.emit($event)\"\n                        (sortChange)=\"sortChange.emit($event)\"\n                        (dataStateChange)=\"dataStateChange.emit({\n                            filter: $event.filter,\n                            sort: $event.sort\n                        })\"\n                        (expandStateChange)=\"expandStateChange.emit($event)\"\n                        (expand)=\"rowExpand.emit({ dataItem: $event.dataItem })\"\n                        (collapse)=\"rowCollapse.emit({ dataItem: $event.dataItem })\"\n                        (columnReorder)=\"columnReorder.emit($event)\"\n                        (columnResize)=\"columnResize.emit($event)\"\n                        (columnVisibilityChange)=\"handleColumnVisibilityChange($event)\"\n                        (columnLockedChange)=\"columnLockedChange.emit($event)\"\n                        (selectionChange)=\"handleTreeListSelectionChange($event)\"\n                        (cellClick)=\"handleTreeListCellClick($event)\"\n                        (cellClose)=\"handleCellClose($event)\"\n                        [kendoEventsOutsideAngular]=\"{\n                            dblclick: handleTreeListDoubleClick\n                        }\"\n                        [scope]=\"this\"\n                    >\n                        <kendo-treelist-messages\n                            [noRecords]=\"getText('noRecords')\"\n                            [filter]=\"getText('filter')\"\n                            [filterEqOperator]=\"getText('filterEqOperator')\"\n                            [filterNotEqOperator]=\"getText('filterNotEqOperator')\"\n                            [filterIsNullOperator]=\"getText('filterIsNullOperator')\"\n                            [filterIsNotNullOperator]=\"getText('filterIsNotNullOperator')\"\n                            [filterIsEmptyOperator]=\"getText('filterIsEmptyOperator')\"\n                            [filterIsNotEmptyOperator]=\"getText('filterIsNotEmptyOperator')\"\n                            [filterStartsWithOperator]=\"getText('filterStartsWithOperator')\"\n                            [filterContainsOperator]=\"getText('filterContainsOperator')\"\n                            [filterNotContainsOperator]=\"getText('filterNotContainsOperator')\"\n                            [filterEndsWithOperator]=\"getText('filterEndsWithOperator')\"\n                            [filterGteOperator]=\"getText('filterGteOperator')\"\n                            [filterGtOperator]=\"getText('filterGtOperator')\"\n                            [filterLteOperator]=\"getText('filterLteOperator')\"\n                            [filterLtOperator]=\"getText('filterLtOperator')\"\n                            [filterIsTrue]=\"getText('filterIsTrue')\"\n                            [filterIsFalse]=\"getText('filterIsFalse')\"\n                            [filterBooleanAll]=\"getText('filterBooleanAll')\"\n                            [filterAfterOrEqualOperator]=\"getText('filterAfterOrEqualOperator')\"\n                            [filterAfterOperator]=\"getText('filterAfterOperator')\"\n                            [filterBeforeOperator]=\"getText('filterBeforeOperator')\"\n                            [filterBeforeOrEqualOperator]=\"getText('filterBeforeOrEqualOperator')\"\n                            [filterFilterButton]=\"getText('filterFilterButton')\"\n                            [filterClearButton]=\"getText('filterClearButton')\"\n                            [filterAndLogic]=\"getText('filterAndLogic')\"\n                            [filterOrLogic]=\"getText('filterOrLogic')\"\n                            [loading]=\"getText('loading')\"\n                            [columnMenu]=\"getText('columnMenu')\"\n                            [columns]=\"getText('columns')\"\n                            [sortable]=\"getText('sortable')\"\n                            [sortAscending]=\"getText('sortAscending')\"\n                            [sortDescending]=\"getText('sortDescending')\"\n                            [sortedAscending]=\"getText('sortedAscending')\"\n                            [sortedDescending]=\"getText('sortedDescending')\"\n                            [sortedDefault]=\"getText('sortedDefault')\"\n                            [columnsApply]=\"getText('columnsApply')\"\n                            [columnsReset]=\"getText('columnsReset')\"\n                        >\n                        </kendo-treelist-messages>\n                    </kendo-treelist>\n                </kendo-splitter-pane>\n                <kendo-splitter-pane\n                    [collapsible]=\"timelinePaneOptions?.collapsible\"\n                    [resizable]=\"timelinePaneOptions?.resizable\"\n                    [collapsed]=\"timelinePaneOptions?.collapsed\"\n                    [min]=\"timelinePaneOptions?.min\"\n                    [max]=\"timelinePaneOptions?.max\"\n                    [size]=\"timelinePaneOptions?.size\"\n                    (collapsedChange)=\"onTimelineCollapsedChange($event)\"\n                    (sizeChange)=\"onTimelinePaneSizeChange($event)\"\n                    [scrollable]=\"false\">\n                    <kendo-gantt-timeline\n                        *ngIf=\"views && views.length\"\n                        [renderDependencyDragClues]=\"renderDependencyDragClues\"\n                        [dragScrollSettings]=\"dragScrollSettings\"\n                        [rows]=\"renderedTreeListItems\"\n                        [slots]=\"timelineSlots\"\n                        [groupSlots]=\"timelineGroupSlots\"\n                        [tableWidth]=\"tableWidth\"\n                        [activeView]=\"activeView\"\n                        [taskContentTemplate]=\"taskContentTemplate?.templateRef\"\n                        [taskTemplate]=\"taskTemplate?.templateRef\"\n                        [summaryTaskTemplate]=\"summaryTaskTemplate?.templateRef\"\n                        [taskClass]=\"taskClass\"\n                        [dependencies]=\"dependencies\"\n                        [hasChildren]=\"hasChildren\"\n                        [isTaskSelected]=\"isTaskSelected\"\n                        [kendoEventsOutsideAngular]=\"{\n                            click: handleTimelineClick,\n                            contextmenu: handleTimelineRightClick,\n                            dblclick: handleTimelineDblClick,\n                            mousedown: handleTimelineMouseDown\n                        }\"\n                        [scope]=\"this\"\n                    ></kendo-gantt-timeline>\n                </kendo-splitter-pane>\n            </kendo-splitter>\n        </div>\n        <kendo-gantt-toolbar\n            *ngIf=\"showToolbar('bottom')\"\n            [showAddTask]=\"toolbarSettings.addTaskTool === 'bottom' || toolbarSettings.addTaskTool === 'both'\"\n            [showViewSelector]=\"toolbarSettings.viewSelectorTool === 'bottom' || toolbarSettings.viewSelectorTool === 'both'\"\n            class=\"k-gantt-footer k-toolbar k-gantt-toolbar\"\n            position=\"bottom\"></kendo-gantt-toolbar>\n        <kendo-gantt-edit-dialog\n            *ngIf=\"showEditingDialog\"\n            [data]=\"data\">\n        </kendo-gantt-edit-dialog>\n        <kendo-dialog\n            *ngIf=\"showConfirmationDialog\"\n            [width]=\"575\"\n            [height]=\"170\"\n            [title]=\"getText('confirmationDialogTitle')\"\n            (close)=\"showConfirmationDialog = false;\">\n            <span>{{ getText('confirmationDialogContent') }}</span>\n            <kendo-dialog-actions layout=\"normal\">\n                <kendo-treelist-spacer></kendo-treelist-spacer>\n                <button kendoButton [primary]=\"true\" (click)=\"handleDeleteConfirmation()\">{{ getText('deleteButtonText') }}</button>\n                <button kendoButton (click)=\"showConfirmationDialog = false;\">{{ getText('cancelButtonText') }}</button>\n            </kendo-dialog-actions>\n        </kendo-dialog>\n   "
+            template: "\n        <ng-container kendoGanttLocalizedMessages\n            i18n-taskEditingGeneralTabTitle=\"kendo.gantt.taskEditingGeneralTabTitle|The title of the 'General' tab of the editing dialog TabStrip\"\n            taskEditingGeneralTabTitle=\"General\"\n\n            i18n-taskEditingPredecessorsTabTitle=\"kendo.gantt.taskEditingPredecessorsTabTitle|The title of the 'Predecessors' dependencies tab of the editing dialog TabStrip\"\n            taskEditingPredecessorsTabTitle=\"Predecessors\"\n\n            i18n-taskEditingSuccessorsTabTitle=\"kendo.gantt.taskEditingSuccessorsTabTitle|The title of the 'Successors' dependencies tab of the editing dialog TabStrip\"\n            taskEditingSuccessorsTabTitle=\"Successors\"\n\n            i18n-taskEditingDependenciesAddButtonText=\"kendo.gantt.taskEditingDependenciesAddButtonText|The text of the 'Add' button in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesAddButtonText=\"Add\"\n\n            i18n-taskEditingDependenciesRemoveButtonText=\"kendo.gantt.taskEditingDependenciesRemoveButtonText|The text of the 'Remove' button in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesRemoveButtonText=\"Remove\"\n\n            i18n-taskEditingDependenciesGridNameColumnTitle=\"kendo.gantt.taskEditingDependenciesGridNameColumnTitle|The title of the 'Task Title' Grid column in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesGridNameColumnTitle=\"Task Title\"\n\n            i18n-taskEditingDependenciesGridTypeColumnTitle=\"kendo.gantt.taskEditingDependenciesGridTypeColumnTitle|The title of the 'Type' Grid column in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesGridTypeColumnTitle=\"Type\"\n\n            i18n-taskDeleteLabel=\"kendo.gantt.taskDeleteLabel|The label of the task delete icon\"\n            taskDeleteLabel=\"Delete\"\n\n            i18n-taskEditingDialogTitle=\"kendo.gantt.taskEditingDialogTitle|The title of the task editing dialog\"\n            taskEditingDialogTitle=\"Editing Task\"\n\n            i18n-taskEditingDialogCloseTitle=\"kendo.gantt.taskEditingDialogCloseTitle|The title of the task editing dialog close button\"\n            taskEditingDialogCloseTitle=\"Close\"\n\n            i18n-confirmationDialogCloseTitle=\"kendo.gantt.confirmationDialogCloseTitle|The title of the confirmation dialog close button\"\n            confirmationDialogCloseTitle=\"Close\"\n\n            i18n-confirmationDialogTitle=\"kendo.gantt.confirmationDialogTitle|The title of the delete task confirmation dialog\"\n            confirmationDialogTitle=\"Delete Task\"\n\n            i18n-confirmationDialogContent=\"kendo.gantt.confirmationDialogContent|The content of the delete task confirmation dialog\"\n            confirmationDialogContent=\"Are you sure you want to delete this task?\"\n\n            i18n-deleteButtonText=\"kendo.gantt.deleteButtonText|The text of the task editing dialog 'Delete' button\"\n            deleteButtonText=\"Delete\"\n\n            i18n-cancelButtonText=\"kendo.gantt.cancelButtonText|The text of the task editing dialog 'Cancel' button\"\n            cancelButtonText=\"Cancel\"\n\n            i18n-saveButtonText=\"kendo.gantt.saveButtonText|The text of the task editing dialog 'Save' button\"\n            saveButtonText=\"Save\"\n\n            i18n-titleFieldInputLabel=\"kendo.gantt.titleFieldInputLabel|The label of the 'title' field input in editing mode\"\n            titleFieldInputLabel=\"Title\"\n\n            i18n-startFieldInputLabel=\"kendo.gantt.startFieldInputLabel|The label of the 'start' field input in editing mode\"\n            startFieldInputLabel=\"Start\"\n\n            i18n-endFieldInputLabel=\"kendo.gantt.endFieldInputLabel|The label of the 'end' field input in editing mode\"\n            endFieldInputLabel=\"End\"\n\n            i18n-completionRatioFieldInputLabel=\"kendo.gantt.completionRatioFieldInputLabel|The label of the 'completionRatio' field input in editing mode\"\n            completionRatioFieldInputLabel=\"Progress\"\n\n            i18n-dayViewText=\"kendo.gantt.dayViewText|The text of the day view in the ViewSelector component\"\n            dayViewText=\"Day\"\n\n            i18n-weekViewText=\"kendo.gantt.weekViewText|The text of the week view in the ViewSelector component\"\n            weekViewText=\"Week\"\n\n            i18n-monthViewText=\"kendo.gantt.monthViewText|The text of the month view in the ViewSelector component\"\n            monthViewText=\"Month\"\n\n            i18n-yearViewText-disabled=\"kendo.gantt.yearViewText|The text of the year view in the ViewSelector component\"\n            yearViewText=\"Year\"\n\n            i18n-addTaskText=\"kendo.gantt.addTaskText|The text of the DropDownButton in the AddTask component\"\n            addTaskText=\"Add Task\"\n\n            i18n-addChildText=\"kendo.gantt.addChildText|The text of the 'Add Child' option in the AddTask component\"\n            addChildText=\"Add Child\"\n\n            i18n-addAboveText=\"kendo.gantt.addAboveText|The text of the 'Add Above' option in the AddTask component\"\n            addAboveText=\"Add Above\"\n\n            i18n-addBelowText=\"kendo.gantt.addBelowText|The text of the 'Add Below' option in the AddTask component\"\n            addBelowText=\"Add Below\"\n\n            i18n-noRecords=\"kendo.gantt.noRecords|The label visible in the TreeList when there are no records\"\n            noRecords=\"No records available.\"\n\n            i18n-filter=\"kendo.gantt.filter|The label of the filter cell or icon\"\n            filter=\"Filter\"\n\n            i18n-filterEqOperator=\"kendo.gantt.filterEqOperator|The text of the equal filter operator\"\n            filterEqOperator=\"Is equal to\"\n\n            i18n-filterNotEqOperator=\"kendo.gantt.filterNotEqOperator|The text of the not equal filter operator\"\n            filterNotEqOperator=\"Is not equal to\"\n\n            i18n-filterIsNullOperator=\"kendo.gantt.filterIsNullOperator|The text of the is null filter operator\"\n            filterIsNullOperator=\"Is null\"\n\n            i18n-filterIsNotNullOperator=\"kendo.gantt.filterIsNotNullOperator|The text of the is not null filter operator\"\n            filterIsNotNullOperator=\"Is not null\"\n\n            i18n-filterIsEmptyOperator=\"kendo.gantt.filterIsEmptyOperator|The text of the is empty filter operator\"\n            filterIsEmptyOperator=\"Is empty\"\n\n            i18n-filterIsNotEmptyOperator=\"kendo.gantt.filterIsNotEmptyOperator|The text of the is not empty filter operator\"\n            filterIsNotEmptyOperator=\"Is not empty\"\n\n            i18n-filterStartsWithOperator=\"kendo.gantt.filterStartsWithOperator|The text of the starts with filter operator\"\n            filterStartsWithOperator=\"Starts with\"\n\n            i18n-filterContainsOperator=\"kendo.gantt.filterContainsOperator|The text of the contains filter operator\"\n            filterContainsOperator=\"Contains\"\n\n            i18n-filterNotContainsOperator=\"kendo.gantt.filterNotContainsOperator|The text of the does not contain filter operator\"\n            filterNotContainsOperator=\"Does not contain\"\n\n            i18n-filterEndsWithOperator=\"kendo.gantt.filterEndsWithOperator|The text of the ends with filter operator\"\n            filterEndsWithOperator=\"Ends with\"\n\n            i18n-filterGteOperator=\"kendo.gantt.filterGteOperator|The text of the greater than or equal filter operator\"\n            filterGteOperator=\"Is greater than or equal to\"\n\n            i18n-filterGtOperator=\"kendo.gantt.filterGtOperator|The text of the greater than filter operator\"\n            filterGtOperator=\"Is greater than\"\n\n            i18n-filterLteOperator=\"kendo.gantt.filterLteOperator|The text of the less than or equal filter operator\"\n            filterLteOperator=\"Is less than or equal to\"\n\n            i18n-filterLtOperator=\"kendo.gantt.filterLtOperator|The text of the less than filter operator\"\n            filterLtOperator=\"Is less than\"\n\n            i18n-filterIsTrue=\"kendo.gantt.filterIsTrue|The text of the IsTrue boolean filter option\"\n            filterIsTrue=\"Is True\"\n\n            i18n-filterIsFalse=\"kendo.gantt.filterIsFalse|The text of the IsFalse boolean filter option\"\n            filterIsFalse=\"Is False\"\n\n            i18n-filterBooleanAll=\"kendo.gantt.filterBooleanAll|The text of the (All) boolean filter option\"\n            filterBooleanAll=\"(All)\"\n\n            i18n-filterAfterOrEqualOperator=\"kendo.gantt.filterAfterOrEqualOperator|The text of the after or equal date filter operator\"\n            filterAfterOrEqualOperator=\"Is after or equal to\"\n\n            i18n-filterAfterOperator=\"kendo.gantt.filterAfterOperator|The text of the after date filter operator\"\n            filterAfterOperator=\"Is after\"\n\n            i18n-filterBeforeOperator=\"kendo.gantt.filterBeforeOperator|The text of the before date filter operator\"\n            filterBeforeOperator=\"Is before\"\n\n            i18n-filterBeforeOrEqualOperator=\"kendo.gantt.filterBeforeOrEqualOperator|The text of the before or equal date filter operator\"\n            filterBeforeOrEqualOperator=\"Is before or equal to\"\n\n            i18n-filterFilterButton=\"kendo.gantt.filterFilterButton|The text of the filter button\"\n            filterFilterButton=\"Filter\"\n\n            i18n-filterClearButton=\"kendo.gantt.filterClearButton|The text of the clear filter button\"\n            filterClearButton=\"Clear\"\n\n            i18n-filterAndLogic=\"kendo.gantt.filterAndLogic|The text of the And filter logic\"\n            filterAndLogic=\"And\"\n\n            i18n-filterOrLogic=\"kendo.gantt.filterOrLogic|The text of the Or filter logic\"\n            filterOrLogic=\"Or\"\n\n            i18n-loading=\"kendo.gantt.loading|The loading text\"\n            loading=\"Loading\"\n\n            i18n-columnMenu=\"kendo.gantt.columnMenu|The title of the column menu icon\"\n            columnMenu=\"Column Menu\"\n\n            i18n-columns=\"kendo.gantt.columns|The text shown in the column menu for the columns item\"\n            columns=\"Columns\"\n\n            i18n-lock-disabled=\"kendo.gantt.lock|The text shown in the column menu for the lock item\"\n            lock-disabled=\"Lock\"\n\n            i18n-unlock-disabled=\"kendo.gantt.unlock|The text shown in the column menu for the unlock item\"\n            unlock-disabled=\"Unlock\"\n\n            i18n-sortable=\"kendo.gantt.sortable|The label of the sort icon\"\n            sortable=\"Sortable\"\n\n            i18n-sortAscending=\"kendo.gantt.sortAscending|The text shown in the column menu for the sort ascending item\"\n            sortAscending=\"Sort Ascending\"\n\n            i18n-sortDescending=\"kendo.gantt.sortDescending|The text shown in the column menu for the sort descending item\"\n            sortDescending=\"Sort Descending\"\n\n            i18n-sortedAscending=\"kendo.gantt.sortedAscending|The status announcement when a column is sorted ascending\"\n            sortedAscending=\"Sorted Ascending\"\n\n            i18n-sortedDescending=\"kendo.gantt.sortedDescending|The status announcement when a column is sorted descending\"\n            sortedDescending=\"Sorted Descending\"\n\n            i18n-sortedDefault=\"kendo.gantt.sortedDefault|The status announcement when a column is no longer sorted\"\n            sortedDefault=\"Not Sorted\"\n\n            i18n-columnsApply=\"kendo.gantt.columnsApply|The text shown in the column menu or column chooser for the columns apply button\"\n            columnsApply=\"Apply\"\n\n            i18n-columnsReset=\"kendo.gantt.columnsReset|The text shown in the column menu or column chooser for the columns reset button\"\n            columnsReset=\"Reset\"></ng-container>\n        <kendo-gantt-toolbar\n            *ngIf=\"showToolbar('top')\"\n            [showAddTask]=\"toolbarSettings.addTaskTool === 'top' || toolbarSettings.addTaskTool === 'both'\"\n            [showViewSelector]=\"toolbarSettings.viewSelectorTool === 'top' || toolbarSettings.viewSelectorTool === 'both'\"\n            class=\"k-gantt-header k-toolbar k-gantt-toolbar\"\n            position=\"top\"></kendo-gantt-toolbar>\n        <div class=\"k-gantt-content\">\n            <kendo-splitter [style.border]=\"0\">\n                <kendo-splitter-pane\n                    class=\"k-gantt-treelist k-gantt-treelist-scrollable\"\n                    [collapsible]=\"treeListPaneOptions?.collapsible\"\n                    [collapsed]=\"treeListPaneOptions?.collapsed\"\n                    (collapsedChange)=\"onTreeListCollapsedChange($event)\"\n                    [scrollable]=\"false\">\n                    <kendo-treelist\n                        [idField]=\"taskIdField\"\n                        [columns]=\"columns\"\n                        [data]=\"data\"\n                        [hasChildren]=\"hasChildren\"\n                        [fetchChildren]=\"fetchChildren\"\n                        [navigable]=\"navigable\"\n                        [isExpanded]=\"isExpanded\"\n                        [autoSize]=\"columnsAutoSize\"\n                        [columnMenu]=\"columnMenu\"\n                        [reorderable]=\"columnsReorderable\"\n                        [resizable]=\"columnsResizable\"\n                        [rowClass]=\"rowClass\"\n                        [isSelected]=\"isSelected\"\n                        [selectable]=\"selectable\"\n                        [sortable]=\"sortable\"\n                        [sort]=\"sort\"\n                        [filterable]=\"filterMenu\"\n                        [filter]=\"filter\"\n                        (filterChange)=\"filterChange.emit($event)\"\n                        (sortChange)=\"sortChange.emit($event)\"\n                        (dataStateChange)=\"dataStateChange.emit({\n                            filter: $event.filter,\n                            sort: $event.sort\n                        })\"\n                        (expandStateChange)=\"expandStateChange.emit($event)\"\n                        (expand)=\"rowExpand.emit({ dataItem: $event.dataItem })\"\n                        (collapse)=\"rowCollapse.emit({ dataItem: $event.dataItem })\"\n                        (columnReorder)=\"columnReorder.emit($event)\"\n                        (columnResize)=\"columnResize.emit($event)\"\n                        (columnVisibilityChange)=\"handleColumnVisibilityChange($event)\"\n                        (columnLockedChange)=\"columnLockedChange.emit($event)\"\n                        (selectionChange)=\"handleTreeListSelectionChange($event)\"\n                        (cellClick)=\"handleTreeListCellClick($event)\"\n                        (cellClose)=\"handleCellClose($event)\"\n                        [kendoEventsOutsideAngular]=\"{\n                            dblclick: handleTreeListDoubleClick\n                        }\"\n                        [scope]=\"this\"\n                    >\n                        <kendo-treelist-messages\n                            [noRecords]=\"getText('noRecords')\"\n                            [filter]=\"getText('filter')\"\n                            [filterEqOperator]=\"getText('filterEqOperator')\"\n                            [filterNotEqOperator]=\"getText('filterNotEqOperator')\"\n                            [filterIsNullOperator]=\"getText('filterIsNullOperator')\"\n                            [filterIsNotNullOperator]=\"getText('filterIsNotNullOperator')\"\n                            [filterIsEmptyOperator]=\"getText('filterIsEmptyOperator')\"\n                            [filterIsNotEmptyOperator]=\"getText('filterIsNotEmptyOperator')\"\n                            [filterStartsWithOperator]=\"getText('filterStartsWithOperator')\"\n                            [filterContainsOperator]=\"getText('filterContainsOperator')\"\n                            [filterNotContainsOperator]=\"getText('filterNotContainsOperator')\"\n                            [filterEndsWithOperator]=\"getText('filterEndsWithOperator')\"\n                            [filterGteOperator]=\"getText('filterGteOperator')\"\n                            [filterGtOperator]=\"getText('filterGtOperator')\"\n                            [filterLteOperator]=\"getText('filterLteOperator')\"\n                            [filterLtOperator]=\"getText('filterLtOperator')\"\n                            [filterIsTrue]=\"getText('filterIsTrue')\"\n                            [filterIsFalse]=\"getText('filterIsFalse')\"\n                            [filterBooleanAll]=\"getText('filterBooleanAll')\"\n                            [filterAfterOrEqualOperator]=\"getText('filterAfterOrEqualOperator')\"\n                            [filterAfterOperator]=\"getText('filterAfterOperator')\"\n                            [filterBeforeOperator]=\"getText('filterBeforeOperator')\"\n                            [filterBeforeOrEqualOperator]=\"getText('filterBeforeOrEqualOperator')\"\n                            [filterFilterButton]=\"getText('filterFilterButton')\"\n                            [filterClearButton]=\"getText('filterClearButton')\"\n                            [filterAndLogic]=\"getText('filterAndLogic')\"\n                            [filterOrLogic]=\"getText('filterOrLogic')\"\n                            [loading]=\"getText('loading')\"\n                            [columnMenu]=\"getText('columnMenu')\"\n                            [columns]=\"getText('columns')\"\n                            [sortable]=\"getText('sortable')\"\n                            [sortAscending]=\"getText('sortAscending')\"\n                            [sortDescending]=\"getText('sortDescending')\"\n                            [sortedAscending]=\"getText('sortedAscending')\"\n                            [sortedDescending]=\"getText('sortedDescending')\"\n                            [sortedDefault]=\"getText('sortedDefault')\"\n                            [columnsApply]=\"getText('columnsApply')\"\n                            [columnsReset]=\"getText('columnsReset')\"\n                        >\n                        </kendo-treelist-messages>\n                    </kendo-treelist>\n                </kendo-splitter-pane>\n                <kendo-splitter-pane\n                    [collapsible]=\"timelinePaneOptions?.collapsible\"\n                    [resizable]=\"timelinePaneOptions?.resizable\"\n                    [collapsed]=\"timelinePaneOptions?.collapsed\"\n                    [min]=\"timelinePaneOptions?.min\"\n                    [max]=\"timelinePaneOptions?.max\"\n                    [size]=\"timelinePaneOptions?.size\"\n                    (collapsedChange)=\"onTimelineCollapsedChange($event)\"\n                    (sizeChange)=\"onTimelinePaneSizeChange($event)\"\n                    [scrollable]=\"false\">\n                    <kendo-gantt-timeline\n                        *ngIf=\"views && views.length\"\n                        [renderDependencyDragClues]=\"renderDependencyDragClues\"\n                        [dragScrollSettings]=\"dragScrollSettings\"\n                        [rows]=\"viewItems\"\n                        [slots]=\"timelineSlots\"\n                        [groupSlots]=\"timelineGroupSlots\"\n                        [tableWidth]=\"tableWidth\"\n                        [activeView]=\"activeView\"\n                        [taskContentTemplate]=\"taskContentTemplate?.templateRef\"\n                        [taskTemplate]=\"taskTemplate?.templateRef\"\n                        [summaryTaskTemplate]=\"summaryTaskTemplate?.templateRef\"\n                        [taskClass]=\"taskClass\"\n                        [dependencies]=\"dependencies\"\n                        [isExpanded]=\"isExpanded\"\n                        [selectable]=\"selectable\"\n                        [isTaskSelected]=\"isTaskSelected\"\n                        [kendoEventsOutsideAngular]=\"{\n                            click: handleTimelineClick,\n                            contextmenu: handleTimelineRightClick,\n                            dblclick: handleTimelineDblClick,\n                            mousedown: handleTimelineMouseDown\n                        }\"\n                        [scope]=\"this\"\n                    ></kendo-gantt-timeline>\n                </kendo-splitter-pane>\n            </kendo-splitter>\n        </div>\n        <kendo-gantt-toolbar\n            *ngIf=\"showToolbar('bottom')\"\n            [showAddTask]=\"toolbarSettings.addTaskTool === 'bottom' || toolbarSettings.addTaskTool === 'both'\"\n            [showViewSelector]=\"toolbarSettings.viewSelectorTool === 'bottom' || toolbarSettings.viewSelectorTool === 'both'\"\n            class=\"k-gantt-footer k-toolbar k-gantt-toolbar\"\n            position=\"bottom\"></kendo-gantt-toolbar>\n        <kendo-gantt-edit-dialog\n            *ngIf=\"showEditingDialog\"\n            [data]=\"data\">\n        </kendo-gantt-edit-dialog>\n        <kendo-dialog\n            *ngIf=\"showConfirmationDialog\"\n            [width]=\"575\"\n            [height]=\"170\"\n            [title]=\"getText('confirmationDialogTitle')\"\n            (close)=\"handleConfirmationDialogClose()\">\n            <span>{{ getText('confirmationDialogContent') }}</span>\n            <kendo-dialog-actions layout=\"normal\">\n                <kendo-treelist-spacer></kendo-treelist-spacer>\n                <button kendoButton [primary]=\"true\" (click)=\"handleDeleteConfirmation()\">{{ getText('deleteButtonText') }}</button>\n                <button kendoButton (click)=\"handleConfirmationDialogClose()\">{{ getText('cancelButtonText') }}</button>\n            </kendo-dialog-actions>\n        </kendo-dialog>\n   "
         }),
         __metadata("design:paramtypes", [TimelineViewService,
             ScrollSyncService,
@@ -3623,7 +4256,8 @@ var GanttComponent = /** @class */ (function () {
             EditService,
             LocalizationService,
             ElementRef,
-            NgZone])
+            NgZone,
+            NavigationService])
     ], GanttComponent);
     return GanttComponent;
 }());
@@ -3652,14 +4286,18 @@ var GanttTasksTableBodyComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    GanttTasksTableBodyComponent.prototype.isMileStone = function (task) {
-        return !this.hasChildren(task) && isEqual(this.mapper.extractFromTask(task, 'start'), this.mapper.extractFromTask(task, 'end'));
+    GanttTasksTableBodyComponent.prototype.isMileStone = function (item) {
+        return !item.hasChildren && isEqual(this.mapper.extractFromTask(item.data, 'start'), this.mapper.extractFromTask(item.data, 'end'));
     };
     __decorate([
         ViewChild('timelineRow', { static: false }),
         __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)
@@ -3687,7 +4325,7 @@ var GanttTasksTableBodyComponent = /** @class */ (function () {
     __decorate([
         Input(),
         __metadata("design:type", Function)
-    ], GanttTasksTableBodyComponent.prototype, "hasChildren", void 0);
+    ], GanttTasksTableBodyComponent.prototype, "isExpanded", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Function)
@@ -3699,7 +4337,7 @@ var GanttTasksTableBodyComponent = /** @class */ (function () {
     GanttTasksTableBodyComponent = __decorate([
         Component({
             selector: '[kendoGanttTasksTableBody]',
-            template: "\n        <tr #timelineRow *ngFor=\"let item of rows; let index = index\">\n            <td>\n                <kendo-gantt-milestone-task\n                    *ngIf=\"isMileStone(item); else task\"\n                    [dataItem]=\"item\"\n                    [activeView]=\"activeView\"\n                    [taskClass]=\"taskClass\"\n                    [isSelected]=\"isTaskSelected\"\n                    [attr.data-task-index]=\"index\"\n                    [renderDependencyDragClues]=\"renderDependencyDragClues\"\n                >\n                </kendo-gantt-milestone-task>\n                <ng-template #task>\n                    <kendo-gantt-summary-task\n                        *ngIf=\"hasChildren(item)\"\n                        [dataItem]=\"item\"\n                        [template]=\"summaryTaskTemplate\"\n                        [activeView]=\"activeView\"\n                        [taskClass]=\"taskClass\"\n                        [isSelected]=\"isTaskSelected\"\n                        [attr.data-task-index]=\"index\"\n                        [renderDependencyDragClues]=\"renderDependencyDragClues\"\n                    >\n                    </kendo-gantt-summary-task>\n                    <kendo-gantt-task\n                        *ngIf=\"!hasChildren(item)\"\n                        [dataItem]=\"item\"\n                        [taskContentTemplate]=\"taskContentTemplate\"\n                        [taskTemplate]=\"taskTemplate\"\n                        [activeView]=\"activeView\"\n                        [taskClass]=\"taskClass\"\n                        [isSelected]=\"isTaskSelected\"\n                        [attr.data-task-index]=\"index\"\n                        [renderDependencyDragClues]=\"renderDependencyDragClues\"\n                    >\n                    </kendo-gantt-task>\n                </ng-template>\n            </td>\n        </tr>\n    "
+            template: "\n        <tr #timelineRow *ngFor=\"let item of rows; let index = index\">\n            <td>\n                <kendo-gantt-milestone-task\n                    *ngIf=\"isMileStone(item); else task\"\n                    [dataItem]=\"item.data\"\n                    [level]=\"item.level\"\n                    [activeView]=\"activeView\"\n                    [taskClass]=\"taskClass\"\n                    [selectable]=\"selectable\"\n                    [isSelected]=\"isTaskSelected\"\n                    [index]=\"index\"\n                    [renderDependencyDragClues]=\"renderDependencyDragClues\"\n                >\n                </kendo-gantt-milestone-task>\n                <ng-template #task>\n                    <kendo-gantt-summary-task\n                        *ngIf=\"item.hasChildren\"\n                        [dataItem]=\"item.data\"\n                        [level]=\"item.level\"\n                        [template]=\"summaryTaskTemplate\"\n                        [activeView]=\"activeView\"\n                        [taskClass]=\"taskClass\"\n                        [selectable]=\"selectable\"\n                        [isSelected]=\"isTaskSelected\"\n                        [isExpanded]=\"isExpanded\"\n                        [index]=\"index\"\n                        [renderDependencyDragClues]=\"renderDependencyDragClues\"\n                    >\n                    </kendo-gantt-summary-task>\n                    <kendo-gantt-task\n                        *ngIf=\"!item.hasChildren\"\n                        [dataItem]=\"item.data\"\n                        [level]=\"item.level\"\n                        [taskContentTemplate]=\"taskContentTemplate\"\n                        [taskTemplate]=\"taskTemplate\"\n                        [activeView]=\"activeView\"\n                        [taskClass]=\"taskClass\"\n                        [selectable]=\"selectable\"\n                        [isSelected]=\"isTaskSelected\"\n                        [index]=\"index\"\n                        [renderDependencyDragClues]=\"renderDependencyDragClues\"\n                    >\n                    </kendo-gantt-task>\n                </ng-template>\n            </td>\n        </tr>\n    "
         }),
         __metadata("design:paramtypes", [DependencyDomService,
             MappingService])
@@ -3735,24 +4373,42 @@ var slotUnitDuration = {
     week: MS_PER_DAY,
     month: MS_PER_DAY * 7
 };
+var FOCUSED_CLASS = 'k-focus';
 /**
  * @hidden
  */
 var GanttTaskBase = /** @class */ (function () {
     function GanttTaskBase(mapper, // left public to be available for usage in the templates
-    timelineViewService, dependencyDomService, optionChangesService, cdr) {
+    timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
         var _this = this;
         this.mapper = mapper;
         this.timelineViewService = timelineViewService;
         this.dependencyDomService = dependencyDomService;
         this.optionChangesService = optionChangesService;
         this.cdr = cdr;
+        this.navigationService = navigationService;
         this.wrapperClass = true;
-        this.viewChangesSubscription = new Subscription();
-        this.viewChangesSubscription.add(this.optionChangesService.viewChanges.subscribe(function () {
-            _this.cdr.markForCheck();
-        }));
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(this.optionChangesService.viewChanges
+            .subscribe(function () { return _this.cdr.markForCheck(); }));
+        this.subscriptions.add(this.navigationService.taskStatusChanges
+            .subscribe(this.updateActiveState.bind(this)));
     }
+    Object.defineProperty(GanttTaskBase.prototype, "taskIndexAttribute", {
+        get: function () {
+            return this.index;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(GanttTaskBase.prototype, "ariaSelected", {
+        get: function () {
+            // assinging null will not render the attribute at all (desired in selectable="false" mode)
+            return this.selectable ? String(this.isSelected(this.dataItem)) : null;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(GanttTaskBase.prototype, "slotUnitDuration", {
         get: function () {
             return slotUnitDuration[this.activeView];
@@ -3819,17 +4475,38 @@ var GanttTaskBase = /** @class */ (function () {
         else if (isPresent(changes.activeView)) {
             this.dependencyDomService.notifyChanges();
         }
+        if (this.navigationService.enabled && isPresent(changes.index)) {
+            this.updateActiveState(this.navigationService.activeTask);
+        }
     };
     GanttTaskBase.prototype.ngOnDestroy = function () {
         if (isPresent(this.dataItem)) {
             this.dependencyDomService.unregisterTask(this.dataItem);
         }
-        this.viewChangesSubscription.unsubscribe();
+        this.subscriptions.unsubscribe();
+    };
+    GanttTaskBase.prototype.updateActiveState = function (_a) {
+        var activeIndex = _a.activeIndex, isFocused = _a.isFocused;
+        var isActive = activeIndex === this.index;
+        var tabindex = isActive ? '0' : '-1';
+        this.taskElement.nativeElement.setAttribute('tabindex', tabindex);
+        if (isActive && isFocused) {
+            this.taskElement.nativeElement.focus();
+            this.taskElement.nativeElement.classList.add(FOCUSED_CLASS);
+        }
+        else {
+            this.taskElement.nativeElement.classList.remove(FOCUSED_CLASS);
+        }
     };
     __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)
@@ -3838,10 +4515,22 @@ var GanttTaskBase = /** @class */ (function () {
         Input(),
         __metadata("design:type", Object)
     ], GanttTaskBase.prototype, "dataItem", void 0);
+    __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)
@@ -3867,8 +4556,8 @@ var GanttTaskBase = /** @class */ (function () {
  */
 var GanttTaskComponent = /** @class */ (function (_super) {
     __extends(GanttTaskComponent, _super);
-    function GanttTaskComponent(editService, touchEnabled$$1, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
-        var _this = _super.call(this, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) || this;
+    function GanttTaskComponent(editService, touchEnabled$$1, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
+        var _this = _super.call(this, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) || this;
         _this.editService = editService;
         _this.touchEnabled = touchEnabled$$1;
         return _this;
@@ -3876,7 +4565,7 @@ var GanttTaskComponent = /** @class */ (function (_super) {
     GanttTaskComponent_1 = GanttTaskComponent;
     GanttTaskComponent.prototype.onTaskDelete = function () {
         this.editService.dataItem = this.dataItem;
-        this.editService.showConfirmationDialog.next();
+        this.editService.taskDelete.next(this.dataItem);
     };
     var GanttTaskComponent_1;
     __decorate([
@@ -3896,14 +4585,16 @@ var GanttTaskComponent = /** @class */ (function (_super) {
                     useExisting: forwardRef(function () { return GanttTaskComponent_1; })
                 }
             ],
-            template: "\n        <div\n            #task\n            class=\"k-task k-task-single\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [style.width.px]=\"taskWidth\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [class.k-state-selected]=\"isSelected(dataItem)\"\n        >\n            <ng-container *ngIf=\"!taskTemplate\">\n                <div\n                    class=\"k-task-complete\"\n                    [style.width.px]=\"completionOverlayWidth\"\n                >\n                </div>\n                <div class=\"k-task-content\">\n                    <div class=\"k-task-template\">\n                        <ng-container *ngIf=\"!taskContentTemplate; else taskContent\">\n                            {{ mapper.extractFromTask(dataItem, 'title') }}\n                        </ng-container>\n                        <ng-template\n                            #taskContent\n                            [ngTemplateOutlet]=\"taskContentTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"\n                        >\n                        </ng-template>\n                    </div>\n                    <span class=\"k-task-actions\">\n                        <span\n                            (click)=\"onTaskDelete()\"\n                            class=\"k-link k-task-delete\">\n                            <span class=\"k-icon k-i-close\"></span>\n                        </span>\n                    </span>\n                </div>\n            </ng-container>\n            <ng-template\n                *ngIf=\"taskTemplate\"\n                [ngTemplateOutlet]=\"taskTemplate\"\n                [ngTemplateOutletContext]=\"{\n                    $implicit: dataItem,\n                    elementWidth: taskWidth\n                }\"\n            >\n            </ng-template>\n        </div>\n        <ng-container *ngIf=\"renderDependencyDragClues\">\n            <div\n                class=\"k-task-dot k-task-start k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n            <div\n                class=\"k-task-dot k-task-end k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n        </ng-container>\n    "
+            template: "\n        <div\n            #task\n            class=\"k-task k-task-single\"\n            role=\"treeitem\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [style.width.px]=\"taskWidth\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [class.k-state-selected]=\"isSelected(dataItem)\"\n            [attr.aria-selected]=\"ariaSelected\"\n            [attr.aria-level]=\"level + 1\"\n        >\n            <ng-container *ngIf=\"!taskTemplate\">\n                <div\n                    class=\"k-task-complete\"\n                    [style.width.px]=\"completionOverlayWidth\"\n                        aria-hidden=\"true\"\n                >\n                </div>\n                <div class=\"k-task-content\">\n                    <div class=\"k-task-template\">\n                        <ng-container *ngIf=\"!taskContentTemplate; else taskContent\">\n                            {{ mapper.extractFromTask(dataItem, 'title') }}\n                        </ng-container>\n                        <ng-template\n                            #taskContent\n                            [ngTemplateOutlet]=\"taskContentTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"\n                        >\n                        </ng-template>\n                    </div>\n                    <span\n                        class=\"k-task-actions\"\n                        aria-hidden=\"true\"\n                    >\n                        <span\n                            class=\"k-link k-task-delete\"\n                            [kendoEventsOutsideAngular]=\"{\n                                click: onTaskDelete\n                            }\"\n                            [scope]=\"this\"\n                        >\n                            <span class=\"k-icon k-i-close\"></span>\n                        </span>\n                    </span>\n                </div>\n            </ng-container>\n            <ng-template\n                *ngIf=\"taskTemplate\"\n                [ngTemplateOutlet]=\"taskTemplate\"\n                [ngTemplateOutletContext]=\"{\n                    $implicit: dataItem,\n                    elementWidth: taskWidth\n                }\"\n            >\n            </ng-template>\n        </div>\n        <ng-container *ngIf=\"renderDependencyDragClues\">\n            <div\n                class=\"k-task-dot k-task-start k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n            <div\n                class=\"k-task-dot k-task-end k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n        </ng-container>\n    ",
+            styles: ["\n        .k-task.k-focus {\n            box-shadow: 0 0 4px 3px grey;\n            outline: none;\n        }\n        .k-task.k-focus.k-state-selected {\n            box-shadow: 0 0 4px 3px #ffaea8;\n        }\n    "]
         }),
         __param(1, Inject(TOUCH_ENABLED)),
         __metadata("design:paramtypes", [EditService, Boolean, MappingService,
             TimelineViewService,
             DependencyDomService,
             OptionChangesService,
-            ChangeDetectorRef])
+            ChangeDetectorRef,
+            NavigationService])
     ], GanttTaskComponent);
     return GanttTaskComponent;
 }(GanttTaskBase));
@@ -3913,13 +4604,23 @@ var GanttTaskComponent = /** @class */ (function (_super) {
  */
 var GanttSummaryTaskComponent = /** @class */ (function (_super) {
     __extends(GanttSummaryTaskComponent, _super);
-    function GanttSummaryTaskComponent(touchEnabled$$1, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
-        var _this = _super.call(this, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) || this;
+    function GanttSummaryTaskComponent(touchEnabled$$1, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
+        var _this = _super.call(this, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) || this;
         _this.touchEnabled = touchEnabled$$1;
         _this.summaryWrapperClass = true;
         return _this;
     }
     GanttSummaryTaskComponent_1 = GanttSummaryTaskComponent;
+    Object.defineProperty(GanttSummaryTaskComponent.prototype, "ariaExpanded", {
+        get: function () {
+            // if no callback is provided, all child items are displayed and the item is regarded as expanded
+            // replicates the TreeList aria-expanded behavior
+            var isExpanded = !isPresent(this.isExpanded) || this.isExpanded(this.dataItem);
+            return String(isExpanded);
+        },
+        enumerable: true,
+        configurable: true
+    });
     var GanttSummaryTaskComponent_1;
     __decorate([
         HostBinding('class.k-summary-wrap'),
@@ -3929,6 +4630,10 @@ var GanttSummaryTaskComponent = /** @class */ (function (_super) {
         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',
@@ -3938,14 +4643,16 @@ var GanttSummaryTaskComponent = /** @class */ (function (_super) {
                     useExisting: forwardRef(function () { return GanttSummaryTaskComponent_1; })
                 }
             ],
-            template: "\n        <div\n            #task\n            class=\"k-task k-task-summary\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [style.width.px]=\"taskWidth\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [class.k-state-selected]=\"isSelected(dataItem)\"\n        >\n            <div *ngIf=\"!template; else summaryTemplate\"\n                class=\"k-task-summary-progress\"\n                [style.width.px]=\"taskWidth\">\n                <div\n                    class=\"k-task-summary-complete\"\n                    [style.width.px]=\"completionOverlayWidth\"\n                >\n                </div>\n            </div>\n            <ng-template\n                #summaryTemplate\n                [ngTemplateOutlet]=\"template\"\n                [ngTemplateOutletContext]=\"{\n                    $implicit: dataItem,\n                    elementWidth: taskWidth\n                }\"\n            >\n            </ng-template>\n        </div>\n        <ng-container *ngIf=\"renderDependencyDragClues\">\n            <div\n                class=\"k-task-dot k-task-start k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n            <div\n                class=\"k-task-dot k-task-end k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n        </ng-container>\n    "
+            template: "\n        <div\n            #task\n            role=\"treeitem\"\n            class=\"k-task k-task-summary\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [style.width.px]=\"taskWidth\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [class.k-state-selected]=\"isSelected(dataItem)\"\n            [attr.aria-selected]=\"ariaSelected\"\n            [attr.aria-expanded]=\"ariaExpanded\"\n            [attr.aria-level]=\"level + 1\"\n        >\n            <div *ngIf=\"!template; else summaryTemplate\"\n                class=\"k-task-summary-progress\"\n                [style.width.px]=\"taskWidth\">\n                <div\n                    class=\"k-task-summary-complete\"\n                    [style.width.px]=\"completionOverlayWidth\"\n                >\n                </div>\n            </div>\n            <ng-template\n                #summaryTemplate\n                [ngTemplateOutlet]=\"template\"\n                [ngTemplateOutletContext]=\"{\n                    $implicit: dataItem,\n                    elementWidth: taskWidth\n                }\"\n            >\n            </ng-template>\n        </div>\n        <ng-container *ngIf=\"renderDependencyDragClues\">\n            <div\n                class=\"k-task-dot k-task-start k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n            <div\n                class=\"k-task-dot k-task-end k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n        </ng-container>\n    ",
+            styles: ["\n        .k-task.k-focus {\n            box-shadow: 0 0 4px 3px grey;\n            outline: none;\n        }\n        .k-task.k-focus.k-state-selected {\n            box-shadow: 0 0 4px 3px #ffaea8;\n        }\n    "]
         }),
         __param(0, Inject(TOUCH_ENABLED)),
         __metadata("design:paramtypes", [Boolean, MappingService,
             TimelineViewService,
             DependencyDomService,
             OptionChangesService,
-            ChangeDetectorRef])
+            ChangeDetectorRef,
+            NavigationService])
     ], GanttSummaryTaskComponent);
     return GanttSummaryTaskComponent;
 }(GanttTaskBase));
@@ -3955,8 +4662,8 @@ var GanttSummaryTaskComponent = /** @class */ (function (_super) {
  */
 var GanttMilestoneTaskComponent = /** @class */ (function (_super) {
     __extends(GanttMilestoneTaskComponent, _super);
-    function GanttMilestoneTaskComponent(touchEnabled$$1, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
-        var _this = _super.call(this, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) || this;
+    function GanttMilestoneTaskComponent(touchEnabled$$1, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
+        var _this = _super.call(this, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) || this;
         _this.touchEnabled = touchEnabled$$1;
         _this.milestoneWrapperClass = true;
         return _this;
@@ -3976,14 +4683,16 @@ var GanttMilestoneTaskComponent = /** @class */ (function (_super) {
                     useExisting: forwardRef(function () { return GanttMilestoneTaskComponent_1; })
                 }
             ],
-            template: "\n        <div\n            #task\n            class=\"k-task k-task-milestone\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [class.k-state-selected]=\"isSelected(dataItem)\"\n        >\n        </div>\n        <ng-container *ngIf=\"renderDependencyDragClues\">\n            <div\n                class=\"k-task-dot k-task-start k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n            <div\n                class=\"k-task-dot k-task-end k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n        </ng-container>\n    "
+            template: "\n        <div\n            #task\n            role=\"treeitem\"\n            class=\"k-task k-task-milestone\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [class.k-state-selected]=\"isSelected(dataItem)\"\n            [attr.aria-selected]=\"ariaSelected\"\n            [attr.aria-level]=\"level + 1\"\n        >\n        </div>\n        <ng-container *ngIf=\"renderDependencyDragClues\">\n            <div\n                class=\"k-task-dot k-task-start k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n            <div\n                class=\"k-task-dot k-task-end k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n        </ng-container>\n    ",
+            styles: ["\n        .k-task.k-focus {\n            box-shadow: 0 0 4px 3px grey;\n            outline: none;\n        }\n        .k-task.k-focus.k-state-selected {\n            box-shadow: 0 0 4px 3px #ffaea8;\n        }\n    "]
         }),
         __param(0, Inject(TOUCH_ENABLED)),
         __metadata("design:paramtypes", [Boolean, MappingService,
             TimelineViewService,
             DependencyDomService,
             OptionChangesService,
-            ChangeDetectorRef])
+            ChangeDetectorRef,
+            NavigationService])
     ], GanttMilestoneTaskComponent);
     return GanttMilestoneTaskComponent;
 }(GanttTaskBase));
@@ -4201,10 +4910,10 @@ var SelectableDirective = /** @class */ (function () {
  * @hidden
  */
 var ToolbarComponent = /** @class */ (function () {
-    function ToolbarComponent(gantt, scrollSyncService) {
+    function ToolbarComponent(gantt) {
         this.gantt = gantt;
-        this.scrollSyncService = scrollSyncService;
         this.context = {};
+        this.role = 'toolbar';
     }
     Object.defineProperty(ToolbarComponent.prototype, "position", {
         get: function () {
@@ -4232,12 +4941,13 @@ var ToolbarComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    ToolbarComponent.prototype.onViewChange = function (e) {
-        this.gantt.activeView = e; // TODO: may be load the timeline data directly in an activeView setter?
-        this.gantt.loadTimelineData();
-        this.gantt.activeViewChange.emit(e);
-        this.scrollSyncService.resetTimelineScrollLeft();
+    ToolbarComponent.prototype.handleViewChange = function (view) {
+        this.gantt.changeActiveView(view);
     };
+    __decorate([
+        HostBinding('attr.role'),
+        __metadata("design:type", String)
+    ], ToolbarComponent.prototype, "role", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Boolean)
@@ -4254,10 +4964,9 @@ var ToolbarComponent = /** @class */ (function () {
     ToolbarComponent = __decorate([
         Component({
             selector: 'kendo-gantt-toolbar',
-            template: "\n        <ng-container *ngIf=\"!renderTemplate\">\n            <kendo-gantt-add-task *ngIf=\"showAddTask\"></kendo-gantt-add-task>\n            <span class=\"k-spacer k-toolbar-spacer\"></span>\n            <kendo-gantt-view-selector\n                *ngIf=\"showViewSelector\"\n                [views]=\"gantt.viewTypes\"\n                [activeView]=\"gantt.activeView\"\n                (activeViewChange)=\"onViewChange($event)\"></kendo-gantt-view-selector>\n        </ng-container>\n        <ng-template\n            *ngIf=\"renderTemplate\"\n            [ngTemplateOutlet]=\"toolbarTemplateRef\"\n            [ngTemplateOutletContext]=\"context\"\n            >\n        </ng-template>\n    "
+            template: "\n        <ng-container *ngIf=\"!renderTemplate\">\n            <kendo-gantt-add-task *ngIf=\"showAddTask\"></kendo-gantt-add-task>\n            <span class=\"k-spacer k-toolbar-spacer\"></span>\n            <kendo-gantt-view-selector\n                *ngIf=\"showViewSelector\"\n                [views]=\"gantt.viewTypes\"\n                [activeView]=\"gantt.activeView\"\n                (activeViewChange)=\"handleViewChange($event)\"></kendo-gantt-view-selector>\n        </ng-container>\n        <ng-template\n            *ngIf=\"renderTemplate\"\n            [ngTemplateOutlet]=\"toolbarTemplateRef\"\n            [ngTemplateOutletContext]=\"context\"\n            >\n        </ng-template>\n    "
         }),
-        __metadata("design:paramtypes", [GanttComponent,
-            ScrollSyncService])
+        __metadata("design:paramtypes", [GanttComponent])
     ], ToolbarComponent);
     return ToolbarComponent;
 }());
@@ -4312,7 +5021,7 @@ var ViewSelectorComponent = /** @class */ (function () {
     ViewSelectorComponent = __decorate([
         Component({
             selector: 'kendo-gantt-view-selector',
-            template: "\n        <select class=\"k-dropdown k-views-dropdown\"\n            [value]=\"activeView\"\n            (change)=\"activeViewChange.emit($event.target.value)\">\n            <option *ngFor=\"let view of views\" [value]=\"view\">{{getViewTypeText(view)}}</option>\n        </select>\n        <kendo-buttongroup class=\"k-gantt-views\" selection=\"single\">\n            <button *ngFor=\"let view of views\"\n                kendoButton\n                type=\"button\"\n                [selected]=\"view === activeView\"\n                (click)=\"onClick(view)\">{{getViewTypeText(view)}}</button>\n        </kendo-buttongroup>\n    "
+            template: "\n        <select\n            class=\"k-dropdown k-views-dropdown\"\n            aria-label=\"View Selector\"\n            [value]=\"activeView\"\n            (change)=\"activeViewChange.emit($event.target.value)\">\n            <option *ngFor=\"let view of views\" [value]=\"view\">{{getViewTypeText(view)}}</option>\n        </select>\n        <kendo-buttongroup class=\"k-gantt-views\" selection=\"single\">\n            <button *ngFor=\"let view of views\"\n                kendoButton\n                type=\"button\"\n                [selected]=\"view === activeView\"\n                (click)=\"onClick(view)\">{{getViewTypeText(view)}}</button>\n        </kendo-buttongroup>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService])
     ], ViewSelectorComponent);
@@ -5239,8 +5948,8 @@ var EditDialogComponent = /** @class */ (function () {
     EditDialogComponent.prototype.handleEditingResult = function (editResultType) {
         this.editService.triggerEditEvent(editResultType);
     };
-    EditDialogComponent.prototype.onTaskDelete = function () {
-        this.editService.showConfirmationDialog.next();
+    EditDialogComponent.prototype.handleTaskDelete = function () {
+        this.editService.taskDelete.next(this.editService.dataItem);
     };
     __decorate([
         Input(),
@@ -5249,7 +5958,7 @@ var EditDialogComponent = /** @class */ (function () {
     EditDialogComponent = __decorate([
         Component({
             selector: 'kendo-gantt-edit-dialog',
-            template: "\n        <kendo-dialog\n            [title]=\"getText('taskEditingDialogTitle')\"\n            [width]=\"575\"\n            [height]=\"470\"\n            (close)=\"handleEditingResult('cancel')\">\n            <kendo-dialog-messages\n                [closeTitle]=\"getText('taskEditingDialogCloseTitle')\"></kendo-dialog-messages>\n\n            <kendo-tabstrip [keepTabContent]=\"true\">\n                <kendo-tabstrip-tab [title]=\"getText('taskEditingGeneralTabTitle')\" [selected]=\"true\">\n                    <ng-template kendoTabContent>\n                    <kendo-gantt-task-fields></kendo-gantt-task-fields>\n                    </ng-template>\n                </kendo-tabstrip-tab>\n                <kendo-tabstrip-tab [title]=\"getText('taskEditingPredecessorsTabTitle')\">\n                    <ng-template kendoTabContent>\n                        <kendo-gantt-dependencies-table\n                            [tasks]=\"loadedTasks\"\n                            [(dependencies)]=\"predecessors\"\n                            dependencyType=\"predecessor\"\n                        >\n                        </kendo-gantt-dependencies-table>\n                    </ng-template>\n                </kendo-tabstrip-tab>\n                <kendo-tabstrip-tab [title]=\"getText('taskEditingSuccessorsTabTitle')\">\n                    <ng-template kendoTabContent>\n                        <kendo-gantt-dependencies-table\n                            [tasks]=\"loadedTasks\"\n                            [(dependencies)]=\"successors\"\n                            dependencyType=\"successor\">\n                        </kendo-gantt-dependencies-table>\n                    </ng-template>\n                </kendo-tabstrip-tab>\n            </kendo-tabstrip>\n\n            <kendo-dialog-actions layout=\"normal\">\n                <button kendoButton (click)=\"onTaskDelete()\">{{ getText('deleteButtonText') }}</button>\n                <kendo-treelist-spacer></kendo-treelist-spacer>\n                <button kendoButton [primary]=\"true\" (click)=\"handleEditingResult('save')\">{{ getText('saveButtonText') }}</button>\n                <button kendoButton (click)=\"handleEditingResult('cancel')\">{{ getText('cancelButtonText') }}</button>\n            </kendo-dialog-actions>\n        </kendo-dialog>\n    "
+            template: "\n        <kendo-dialog\n            [title]=\"getText('taskEditingDialogTitle')\"\n            [width]=\"575\"\n            [height]=\"470\"\n            (close)=\"handleEditingResult('cancel')\">\n            <kendo-dialog-messages\n                [closeTitle]=\"getText('taskEditingDialogCloseTitle')\"></kendo-dialog-messages>\n\n            <kendo-tabstrip [keepTabContent]=\"true\">\n                <kendo-tabstrip-tab [title]=\"getText('taskEditingGeneralTabTitle')\" [selected]=\"true\">\n                    <ng-template kendoTabContent>\n                    <kendo-gantt-task-fields></kendo-gantt-task-fields>\n                    </ng-template>\n                </kendo-tabstrip-tab>\n                <kendo-tabstrip-tab [title]=\"getText('taskEditingPredecessorsTabTitle')\">\n                    <ng-template kendoTabContent>\n                        <kendo-gantt-dependencies-table\n                            [tasks]=\"loadedTasks\"\n                            [(dependencies)]=\"predecessors\"\n                            dependencyType=\"predecessor\"\n                        >\n                        </kendo-gantt-dependencies-table>\n                    </ng-template>\n                </kendo-tabstrip-tab>\n                <kendo-tabstrip-tab [title]=\"getText('taskEditingSuccessorsTabTitle')\">\n                    <ng-template kendoTabContent>\n                        <kendo-gantt-dependencies-table\n                            [tasks]=\"loadedTasks\"\n                            [(dependencies)]=\"successors\"\n                            dependencyType=\"successor\">\n                        </kendo-gantt-dependencies-table>\n                    </ng-template>\n                </kendo-tabstrip-tab>\n            </kendo-tabstrip>\n\n            <kendo-dialog-actions layout=\"normal\">\n                <button\n                    kendoButton\n                    [kendoEventsOutsideAngular]=\"{\n                        click: handleTaskDelete\n                    }\"\n                    [scope]=\"this\"\n                >\n                    {{ getText('deleteButtonText') }}\n                </button>\n                <kendo-treelist-spacer></kendo-treelist-spacer>\n                <button kendoButton [primary]=\"true\" (click)=\"handleEditingResult('save')\">{{ getText('saveButtonText') }}</button>\n                <button kendoButton (click)=\"handleEditingResult('cancel')\">{{ getText('cancelButtonText') }}</button>\n            </kendo-dialog-actions>\n        </kendo-dialog>\n    "
         }),
         __metadata("design:paramtypes", [MappingService,
             EditService,
@@ -5962,4 +6671,4 @@ var GanttModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { MappingService, OptionChangesService, TOUCH_ENABLED, DependencyDomService, GanttDependencyDirective, DragValidationTooltipComponent, GanttAddTaskComponent, DependenciesTableComponent, EditDialogComponent, EditService, TaskFieldsComponent, CustomMessagesComponent, GanttLocalizationService, LocalizedMessagesDirective, Messages, PreventableEvent, GanttHeaderTableBodyComponent, GanttMilestoneTaskComponent, GanttSummaryTaskComponent, GanttTaskBase, GanttTaskComponent, GanttTasksTableBodyComponent, ScrollSyncService, TimelineScrollableDirective, TimelineScrollService, GanttTimelineComponent, TimelineBaseViewService, TimelineDayViewComponent, TimelineDayViewService, TimelineMonthViewComponent, TimelineMonthViewService, TimelineViewService, TimelineWeekViewComponent, TimelineWeekViewService, ViewBase, ToolbarComponent, ViewSelectorComponent, GanttComponent, GanttModule, GanttHierarchyBindingDirective, GanttFlatBindingDirective, GanttExpandableDirective, DependencyDragCreateDirective, GanttTaskTemplateDirective, GanttTaskContentTemplateDirective, GanttSummaryTaskTemplateDirective, ToolbarTemplateDirective, SelectableDirective, DependencyType, CellCloseEvent, GanttColumnBase, GanttColumnComponent, GanttColumnGroupComponent, GanttSpanColumnComponent, CellTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ColumnMenuTemplateDirective, FilterCellTemplateDirective, FilterMenuTemplateDirective, EditTemplateDirective };
+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 };