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

package/dist/fesm2015/index.js

@@ -3,17 +3,17 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __metadata, __param } from 'tslib';
-import { Input, EventEmitter, Injectable, Directive, Optional, TemplateRef, QueryList, ContentChildren, ContentChild, Component, forwardRef, SkipSelf, Host, Injector, NgZone, ViewChild, ElementRef, ViewContainerRef, HostBinding, Output, Renderer2, isDevMode, InjectionToken, Inject, ChangeDetectorRef, NgModule } from '@angular/core';
+import { Injectable, NgZone, EventEmitter, ViewChild, ElementRef, ViewContainerRef, HostBinding, Input, TemplateRef, Output, Component, Renderer2, Directive, Optional, QueryList, ContentChildren, ContentChild, forwardRef, SkipSelf, Host, Injector, isDevMode, InjectionToken, Inject, ChangeDetectorRef, NgModule } from '@angular/core';
 import { ColumnBase, ColumnComponent, ColumnGroupComponent, SpanColumnComponent, TreeListComponent, DataBoundTreeComponent, ExpandableTreeComponent, FlatBindingDirective, HierarchyBindingDirective, ExpandableDirective, TreeListModule } from '@progress/kendo-angular-treelist';
 import { cloneDate, addWeeks, firstDayInWeek, addDays, getDate, lastDayOfMonth, firstDayOfMonth, addMonths, isEqual, MS_PER_HOUR, MS_PER_DAY } from '@progress/kendo-date-math';
-import { of, Subject, Subscription, fromEvent, forkJoin, EMPTY, isObservable } from 'rxjs';
+import { Subject, Subscription, fromEvent, 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 { FormArray, FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import { SplitterModule, TabStripModule } from '@progress/kendo-angular-layout';
@@ -33,926 +33,1407 @@ const 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'
 };
 
-/**
- * The base class for the column components of the Gantt.
- */
-class GanttColumnBase extends ColumnBase {
-    constructor() {
-        super(...arguments);
-        /**
-         * Toggles the locked (frozen) state of the columns.
-         *
-         * @default false
-         * @hidden
-         */
-        this.locked = false;
-    }
-}
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], GanttColumnBase.prototype, "locked", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], GanttColumnBase.prototype, "lockable", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], GanttColumnBase.prototype, "hidden", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], GanttColumnBase.prototype, "media", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GanttColumnBase.prototype, "style", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GanttColumnBase.prototype, "headerStyle", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GanttColumnBase.prototype, "footerStyle", void 0);
-__decorate([
-    Input('class'),
-    __metadata("design:type", Object)
-], GanttColumnBase.prototype, "cssClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GanttColumnBase.prototype, "headerClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GanttColumnBase.prototype, "footerClass", void 0);
-
 /**
  * @hidden
  */
-let OptionChangesService = class OptionChangesService {
-    /**
-     * @hidden
-     */
-    constructor() {
-        this.viewChanges = new EventEmitter();
-        this.columnChanges = new EventEmitter();
+let ScrollSyncService = class ScrollSyncService {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this.changes = new Subject();
+        this.elements = [];
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(this.changes.subscribe(args => {
+            this.scroll(args);
+        }));
     }
-    notifyColumnChanges() {
-        this.columnChanges.emit();
+    registerElement(el, sourceType) {
+        this.elements.push({ element: el, sourceType });
+        if (sourceType === "timeline" || sourceType === "treelist") {
+            this.ngZone.runOutsideAngular(() => {
+                const obs = fromEvent(el, 'scroll').pipe(map(({ target: { scrollTop, scrollLeft } }) => ({
+                    scrollTop,
+                    scrollLeft,
+                    sourceType
+                })));
+                const comparisonFn = sourceType === 'timeline' ?
+                    (x, y) => (x.scrollTop === y.scrollTop) && (x.scrollLeft === y.scrollLeft) :
+                    (x, y) => (x.scrollTop === y.scrollTop);
+                this.subscriptions.add(obs.pipe(distinctUntilChanged(comparisonFn))
+                    .subscribe((event) => this.changes.next(event)));
+            });
+        }
     }
-    notifyViewChanges() {
-        this.viewChanges.emit();
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+        this.elements = null;
+    }
+    syncScrollTop(sourceType, targetType) {
+        const source = this.elements.find(element => element.sourceType === sourceType);
+        const target = this.elements.find(element => element.sourceType === targetType);
+        // Need to wait for the splitter pane's content to be rendered
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => target.element.scrollTop = source.element.scrollTop);
+    }
+    resetTimelineScrollLeft() {
+        const source = this.elements.find(element => element.sourceType === 'timeline');
+        source.element.scrollLeft = 0;
+    }
+    scroll({ scrollTop, scrollLeft, sourceType }) {
+        this.ngZone.runOutsideAngular(() => {
+            if (sourceType === 'timeline') {
+                const header = this.elements.find(element => element.sourceType === 'header').element;
+                header.scrollLeft = scrollLeft;
+                if (!this.syncingTimeline) {
+                    this.syncingTreeList = true;
+                    const treelist = this.elements.find(element => element.sourceType === 'treelist').element;
+                    treelist.scrollTop = scrollTop;
+                }
+                this.syncingTimeline = false;
+            }
+            if (sourceType === 'treelist') {
+                if (!this.syncingTreeList) {
+                    this.syncingTimeline = true;
+                    const timeline = this.elements.find(element => element.sourceType === 'timeline').element;
+                    timeline.scrollTop = scrollTop;
+                }
+                this.syncingTreeList = false;
+            }
+        });
     }
 };
-OptionChangesService = __decorate([
-    Injectable()
-], OptionChangesService);
+ScrollSyncService = __decorate([
+    Injectable(),
+    __metadata("design:paramtypes", [NgZone])
+], ScrollSyncService);
 
 /**
- * Represents the column cell template of the Gantt.
- * Helps to customize the content of the cells. To define the cell template, nest an `<ng-template>` tag
- * with the `kendoGanttCellTemplate` directive inside the respective column tag.
- *
- * The template context is set to the current data item and the following additional fields are passed:
- * - `dataItem`&mdash;The current data item. Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax&mdash;for example, `let-dataItem`.
- * - `columnIndex`&mdash;The current column index. Use it as an alias for a template variable by utilizing the `let-columnIndex="columnIndex"` syntax.
- * - `column`&mdash;The current column instance. Use it as an alias for a template variable by utilizing the `let-column="column"` syntax.
- * - `cellContext`&mdash;An object used to pass context information to built-in directives.
- * - `hasChildren`&mdash;Specifies if the item has children.
- * - `isExpanded`&mdash;Specifies if the item is expanded.
- * - `level`&mdash;The hierarchy level of the item.
- * - `loading`&mdash;Specifies if the item children are currently loading.
- * - `rowIndex`&mdash;The current row index. Use it as an alias for a template variable by utilizing the `let-rowIndex="rowIndex"` syntax.
+ * @hidden
  */
-let CellTemplateDirective = class CellTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-};
-CellTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoGanttCellTemplate]'
-    }),
-    __param(0, Optional()),
-    __metadata("design:paramtypes", [TemplateRef])
-], CellTemplateDirective);
+const DEFAULT_DEPENDENCY_MODEL_FIELDS = Object.freeze({
+    toId: 'toId',
+    fromId: 'fromId',
+    id: 'id',
+    type: 'type'
+});
 
 /**
- * Represents the template for the column menu in the Gantt. Provides an option for
- * customizing the content of the column menu for all or for specific columns.
- * To define the content template, nest an `<ng-template>` tag with the
- * `kendoGanttColumnMenuTemplate` directive inside the `<kendo-gantt-column>` component.
+ * @hidden
+ */
+const DEFAULT_TASK_MODEL_FIELDS = Object.freeze({
+    id: 'id',
+    start: 'start',
+    end: 'end',
+    title: 'title',
+    completionRatio: 'completionRatio',
+    children: 'children'
+});
+
+/**
+ * The dependency type when two tasks are connected.
  *
- *  The column menu service and the current column are available as context variables:
- * - `service`&mdash;Represents the ColumnMenuService.
- * - `column`&mdash;Represents the Gantt column.
+ * 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'
  */
-let ColumnMenuTemplateDirective = class ColumnMenuTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-};
-ColumnMenuTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoGanttColumnMenuTemplate]'
-    }),
-    __param(0, Optional()),
-    __metadata("design:paramtypes", [TemplateRef])
-], ColumnMenuTemplateDirective);
+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
- * Represents the filter-cell template.
- *
- * The template context is set to the filter descriptor and the following additional fields are passed:
- * - `column`&mdash;The current column instance. Use it as an alias for a template variable by utilizing the `let-column="column"` syntax.
- * - `filter`&mdash;The filter descriptor.
- * - `cellContext`&mdash;An object used to pass context information to built-in directives.
  */
-let FilterCellTemplateDirective = class FilterCellTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
+const isWorkDay = (date, start, end) => {
+    return date.getDay() >= start && date.getDay() <= end;
 };
-FilterCellTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoGanttFilterCellTemplate]'
-    }),
-    __param(0, Optional()),
-    __metadata("design:paramtypes", [TemplateRef])
-], FilterCellTemplateDirective);
-
 /**
- * Represents the filter-menu template.
- *
- * The column, current filter and the filter service are available as context variables:
- * - `column`&mdash;The current column instance. Use it as an alias for a template variable by utilizing the `let-column="column"` syntax.
- * - `filter`&mdash;The filter descriptor.
- * - `cellContext`&mdash;An object used to pass context information to built-in directives.
+ * @hidden
  */
-let FilterMenuTemplateDirective = class FilterMenuTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
+const isWorkHour = (date, start, end) => {
+    return date.getHours() >= start && date.getHours() <= end;
 };
-FilterMenuTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoGanttFilterMenuTemplate]'
-    }),
-    __param(0, Optional()),
-    __metadata("design:paramtypes", [TemplateRef])
-], FilterMenuTemplateDirective);
-
 /**
- * Represents the column footer cell template of the Gantt.
- *
- * Helps to customize the table footer cell for the column.
- * To define a footer template, nest an `<ng-template>` tag with the
- * [`kendoGanttFooterTemplate`]({% slug api_gantt_footertemplatedirective %}) directive inside the `<kendo-gantt-column>` tag.
+ * @hidden
+ */
+const isPresent = (item) => item !== null && item !== undefined;
+/**
+ * @hidden
  *
- *  The current column, column index and field are available as context variables:
- * * `column`&mdash;Points to the instance of the current [`ColumnComponent`]({% slug api_gantt_ganttcolumncomponent %}).
- * * `columnIndex`&mdash;Defines the current column index.
- * * `field`&mdash;The name of the column field, if set.
+ * Normalized the data to an array in case a falsy value is passed
+ * or a TreeListDataResult object (applicable for the data-binding directives).
  */
-let FooterTemplateDirective = class FooterTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
+const normalizeGanttData = (data) => {
+    if (!isPresent(data)) {
+        return [];
+    }
+    else if (Array.isArray(data.data)) {
+        return data.data;
+    }
+    else {
+        return data;
     }
 };
-FooterTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoGanttFooterTemplate]'
-    }),
-    __param(0, Optional()),
-    __metadata("design:paramtypes", [TemplateRef])
-], FooterTemplateDirective);
-
 /**
- * Represents the column header cell template of the Gantt.
- * Helps to customize the table header cell for the column.
- * To define a header template, nest an `<ng-template>` tag with the
- * [`kendoGanttHeaderTemplate`]({% slug api_gantt_headertemplatedirective %}) directive inside the `<kendo-gantt-column>` tag.
+ * @hidden
  *
- *  The current column and column index are available as context variables:
- * * `column`&mdash;Points to the instance of the current [`ColumnComponent`]({% slug api_gantt_ganttcolumncomponent %}).
- * * `columnIndex`&mdash;Defines the current column index.
+ * 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.
  */
-let HeaderTemplateDirective = class HeaderTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
+const setTime = (date, hours, minutes = 0, seconds = 0, milliseconds = 0) => {
+    if (!isPresent(date)) {
+        return null;
     }
+    const result = cloneDate(date);
+    result.setHours(hours);
+    result.setMinutes(minutes);
+    result.setSeconds(seconds);
+    result.setMilliseconds(milliseconds);
+    return result;
 };
-HeaderTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoGanttHeaderTemplate]'
-    }),
-    __param(0, Optional()),
-    __metadata("design:paramtypes", [TemplateRef])
-], HeaderTemplateDirective);
-
 /**
- * Represents the column edit-cell template of the Gantt.
- * Helps to customize the content of the edited cells. To define the cell template, nest an `<ng-template>`
- * tag with the `kendoGanttEditTemplate` directive inside a `<kendo-gantt-column>` tag.
+ * @hidden
  *
- * The template context contains the following fields:
- * - `column`&mdash;The current column instance.
- * - `dataItem`&mdash;The current data item.
- * - `cellContext`&mdash;An object used to pass context information to built-in directives.
- * - `formGroup`&mdash;The current [`FormGroup`]({{ site.data.urls.angular['formgroupapi'] }}).
- * If you use the Gantt inside [Template-Driven Forms]({{ site.data.urls.angular['forms'] }}), it will be `undefined`.
- * - `isNew`&mdash;The state of the current item.
- * - `rowIndex`&mdash;The current row index. If inside a new item row, `rowIndex` is `-1`.
+ * 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.)
  */
-let EditTemplateDirective = class EditTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
+const lastDayOfWeek = (standingPoint, firstWeekDay) => {
+    const followingWeek = addWeeks(standingPoint, 1);
+    const firstDayOfFollowingWeek = firstDayInWeek(followingWeek, firstWeekDay);
+    const lastDayOfTargetWeek = addDays(firstDayOfFollowingWeek, -1);
+    return lastDayOfTargetWeek;
+};
+/**
+ * Persists the intially resolved scrollbar width value.
+ */
+let SCROLLBAR_WIDTH;
+/**
+ * @hidden
+ *
+ * Gets the default scrollbar width accoring to the current environment.
+ */
+const scrollbarWidth = () => {
+    if (!isDocumentAvailable()) {
+        return;
+    }
+    // calculate scrollbar width only once, then return the cached value
+    if (isNaN(SCROLLBAR_WIDTH)) {
+        const div = document.createElement('div');
+        div.style.cssText = 'overflow: scroll; overflow-x: hidden; zoom: 1; clear: both; display: block;';
+        div.innerHTML = '&nbsp;';
+        document.body.appendChild(div);
+        SCROLLBAR_WIDTH = div.offsetWidth - div.scrollWidth;
+        document.body.removeChild(div);
     }
+    return SCROLLBAR_WIDTH;
 };
-EditTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoGanttEditTemplate]'
-    }),
-    __param(0, Optional()),
-    __metadata("design:paramtypes", [TemplateRef])
-], EditTemplateDirective);
-
-var GanttColumnComponent_1;
-let GanttColumnComponent = GanttColumnComponent_1 = class GanttColumnComponent extends ColumnComponent {
-    constructor(options, parent) {
-        super(parent);
-        this.options = options;
-        this.headerTemplates = new QueryList();
-        this.columnMenuTemplates = new QueryList();
-        /**
-         * Defines the filter type that is displayed inside the filter row. The default value is `text`.
-         */
-        this.filter = 'text';
-        /**
-         * Defines if a filter UI will be displayed for this column. The default value is `true`.
-         */
-        this.filterable = true;
-        /**
-         * @hidden
-         *
-         * Defines the editor type.
-         * Used when the column enters the edit mode. The default value is `text`.
-         */
-        this.editor = 'text';
-        /**
-         * @hidden
-         *
-         * Defines whether the column is editable. The default value is `true`.
-         */
-        this.editable = true;
-        /**
-         * Toggles the locked (frozen) state of the columns.
-         * @hidden
-         * @default false
-         */
-        this.locked = false;
+/**
+ * @hidden
+ */
+const isColumnGroup = (column) => column.isColumnGroup;
+/**
+ * @hidden
+ */
+const isNumber = (contender) => typeof contender === 'number' && !isNaN(contender);
+/**
+ * @hidden
+ */
+const isString = (contender) => typeof contender === 'string';
+/**
+ * @hidden
+ *
+ * Gets the closest timeline task wrapper element from an event target.
+ * Restricts the search up to the provided parent element from the second param.
+ */
+const getClosestTaskWrapper = (element, parentScope) => {
+    return closestInScope(element, matchesClasses('k-task-wrap'), parentScope);
+};
+/**
+ * @hidden
+ *
+ * Checks whether the queried item or its parent items has a `k-task-wrap` selector.
+ * Restricts the search up to the provided parent element from the second param.
+ */
+const isTaskWrapper = (contender, parentScope) => {
+    const taskWrapper = closestInScope(contender, matchesClasses('k-task-wrap'), parentScope);
+    return isPresent(taskWrapper);
+};
+/**
+ * @hidden
+ *
+ * Gets the closest timeline task element index from an event target.
+ * Uses the `data-task-index` attribute assigned to each task.
+ * Restricts the search up to the provided parent element from the second param.
+ */
+const getClosestTaskIndex = (element, parentScope) => {
+    const task = closestInScope(element, matchesClasses('k-task-wrap'), parentScope);
+    if (!isPresent(task)) {
+        return null;
     }
-    ngOnChanges() {
-        this.options.notifyColumnChanges();
+    return Number(task.getAttribute('data-task-index'));
+};
+/**
+ * @hidden
+ *
+ * Checks whether the queried item or its parent items has a `k-task` selector.
+ * Restricts the search up to the provided parent element from the second param.
+ */
+const isTask = (contender, parentScope) => {
+    const task = closestInScope(contender, matchesClasses('k-task'), parentScope);
+    return isPresent(task);
+};
+/**
+ * @hidden
+ *
+ * Checks whether the queried item or its parent items has a `k-toolbar` selector.
+ * Restricts the search up to the provided parent element from the second param.
+ */
+const isToolbar = (contender, parentScope) => {
+    const toolbar = closestInScope(contender, matchesClasses('k-gantt-toolbar'), parentScope);
+    return isPresent(toolbar);
+};
+/**
+ * @hidden
+ *
+ * Checks whether the queried item or its parent items has a `k-task-actions` selector - used for the clear button.
+ * Restricts the search up to the provided parent element from the second param.
+ */
+const isClearButton = (contender, parentScope) => {
+    const clearButtonContainer = closestInScope(contender, matchesClasses('k-task-actions'), parentScope);
+    return isPresent(clearButtonContainer);
+};
+/**
+ * @hidden
+ *
+ * Checks whether the queried item has a `k-task-dot` selector - used for the dependency drag clues.
+ */
+const isDependencyDragClue = (element) => {
+    if (!isPresent(element)) {
+        return false;
     }
+    return element.classList.contains('k-task-dot');
 };
-__decorate([
-    ContentChildren(HeaderTemplateDirective, { descendants: false }),
-    __metadata("design:type", QueryList)
-], GanttColumnComponent.prototype, "headerTemplates", void 0);
-__decorate([
-    ContentChild(FooterTemplateDirective, { static: false }),
-    __metadata("design:type", FooterTemplateDirective)
-], GanttColumnComponent.prototype, "footerTemplate", void 0);
-__decorate([
-    ContentChildren(ColumnMenuTemplateDirective),
-    __metadata("design:type", QueryList)
-], GanttColumnComponent.prototype, "columnMenuTemplates", void 0);
-__decorate([
-    ContentChild(CellTemplateDirective, { static: false }),
-    __metadata("design:type", CellTemplateDirective)
-], GanttColumnComponent.prototype, "template", void 0);
-__decorate([
-    ContentChild(EditTemplateDirective, { static: false }),
-    __metadata("design:type", EditTemplateDirective)
-], GanttColumnComponent.prototype, "editTemplate", void 0);
-__decorate([
-    ContentChild(FilterCellTemplateDirective, { static: false }),
-    __metadata("design:type", FilterCellTemplateDirective)
-], GanttColumnComponent.prototype, "filterCellTemplate", void 0);
-__decorate([
-    ContentChild(FilterMenuTemplateDirective, { static: false }),
-    __metadata("design:type", FilterMenuTemplateDirective)
-], GanttColumnComponent.prototype, "filterMenuTemplate", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GanttColumnComponent.prototype, "format", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], GanttColumnComponent.prototype, "filter", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], GanttColumnComponent.prototype, "filterable", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], GanttColumnComponent.prototype, "editor", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], GanttColumnComponent.prototype, "editable", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], GanttColumnComponent.prototype, "locked", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], GanttColumnComponent.prototype, "lockable", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], GanttColumnComponent.prototype, "hidden", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], GanttColumnComponent.prototype, "media", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GanttColumnComponent.prototype, "style", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GanttColumnComponent.prototype, "headerStyle", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GanttColumnComponent.prototype, "footerStyle", void 0);
-__decorate([
-    Input('class'),
-    __metadata("design:type", Object)
-], GanttColumnComponent.prototype, "cssClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GanttColumnComponent.prototype, "headerClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GanttColumnComponent.prototype, "footerClass", void 0);
-GanttColumnComponent = GanttColumnComponent_1 = __decorate([
-    Component({
-        selector: 'kendo-gantt-column',
-        template: '',
-        providers: [
-            {
-                provide: GanttColumnBase,
-                useExisting: forwardRef(() => GanttColumnComponent_1)
-            }
-        ]
-    }),
-    __param(1, SkipSelf()), __param(1, Host()), __param(1, Optional()),
-    __metadata("design:paramtypes", [OptionChangesService,
-        GanttColumnBase])
-], GanttColumnComponent);
-
-var GanttColumnGroupComponent_1;
-let GanttColumnGroupComponent = GanttColumnGroupComponent_1 = class GanttColumnGroupComponent extends ColumnGroupComponent {
-    constructor(options, parent) {
-        super(parent);
-        this.options = options;
-        /**
-         * @hidden
-         */
-        this.children = new QueryList();
-        /**
-         * Toggles the locked (frozen) state of the columns.
-         *
-         * @default false
-         * @hidden
-         */
-        this.locked = false;
-        /**
-         * Allows the column headers to be clicked and the `sortChange` event emitted.
-         * You have to handle the `sortChange` event yourself and sort the data.
-         */
-        this.sortable = true;
-        if (parent && parent.isSpanColumn) {
-            throw new Error('ColumnGroupComponent cannot be nested inside SpanColumnComponent');
-        }
+/**
+ * @hidden
+ *
+ * Checks whether the queried item has a `k-task-dot` & `k-task-start` selector - used for the dependency drag start clues.
+ */
+const isDependencyDragStartClue = (element) => {
+    if (!isPresent(element)) {
+        return false;
     }
-    ngOnChanges() {
-        this.options.notifyColumnChanges();
+    return element.classList.contains('k-task-dot') && element.classList.contains('k-task-start');
+};
+/**
+ * @hidden
+ *
+ * Gets the `DependencyType` for an attempted dependency create from the provided two elements.
+ * The two linked drag clue HTML elements are used to extract this data (via their CSS classes).
+ */
+const getDependencyTypeFromTargetTasks = (fromTaskClue, toTaskClue) => {
+    if (!isDependencyDragClue(fromTaskClue) || !isDependencyDragClue(toTaskClue)) {
+        return null;
+    }
+    const fromTaskType = isDependencyDragStartClue(fromTaskClue) ? 'S' : 'F';
+    const toTaskType = isDependencyDragStartClue(toTaskClue) ? 'S' : 'F';
+    const dependencyTypeName = `${fromTaskType}${toTaskType}`;
+    switch (dependencyTypeName) {
+        case 'FF': return DependencyType.FF;
+        case 'FS': return DependencyType.FS;
+        case 'SF': return DependencyType.SF;
+        case 'SS': return DependencyType.SS;
+        default: return null;
     }
 };
-__decorate([
-    ContentChildren(GanttColumnBase),
-    __metadata("design:type", QueryList)
-], GanttColumnGroupComponent.prototype, "children", void 0);
-__decorate([
-    ContentChildren(HeaderTemplateDirective),
-    __metadata("design:type", QueryList)
-], GanttColumnGroupComponent.prototype, "headerTemplates", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], GanttColumnGroupComponent.prototype, "locked", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], GanttColumnGroupComponent.prototype, "lockable", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], GanttColumnGroupComponent.prototype, "hidden", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GanttColumnGroupComponent.prototype, "sortable", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], GanttColumnGroupComponent.prototype, "media", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GanttColumnGroupComponent.prototype, "style", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GanttColumnGroupComponent.prototype, "headerStyle", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GanttColumnGroupComponent.prototype, "footerStyle", void 0);
-__decorate([
-    Input('class'),
-    __metadata("design:type", Object)
-], GanttColumnGroupComponent.prototype, "cssClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GanttColumnGroupComponent.prototype, "headerClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GanttColumnGroupComponent.prototype, "footerClass", void 0);
-GanttColumnGroupComponent = GanttColumnGroupComponent_1 = __decorate([
-    Component({
-        selector: 'kendo-gantt-column-group',
-        template: '',
-        providers: [
-            {
-                provide: GanttColumnBase,
-                useExisting: forwardRef(() => GanttColumnGroupComponent_1)
-            }
-        ]
-    }),
-    __param(1, SkipSelf()), __param(1, Host()), __param(1, Optional()),
-    __metadata("design:paramtypes", [OptionChangesService,
-        GanttColumnBase])
-], GanttColumnGroupComponent);
-
-var GanttSpanColumnComponent_1;
-let GanttSpanColumnComponent = GanttSpanColumnComponent_1 = class GanttSpanColumnComponent extends SpanColumnComponent {
-    constructor(options, parent) {
-        super(parent);
-        this.options = options;
-        /**
-         * @hidden
-         */
-        this.childColumns = new QueryList();
-        this.template = new QueryList();
-        this.editTemplate = new QueryList();
+/**
+ * @hidden
+ *
+ * Checks whether the two provided drag clues belong to the same task element.
+ */
+const sameTaskClues = (fromTaskClue, toTaskClue, parentScope) => {
+    if (!isPresent(fromTaskClue) || !isPresent(toTaskClue)) {
+        return false;
     }
-    ngOnChanges() {
-        this.options.notifyColumnChanges();
+    const fromTaskWrapper = getClosestTaskWrapper(fromTaskClue, parentScope);
+    const toTaskWrapper = getClosestTaskWrapper(toTaskClue, parentScope);
+    return fromTaskWrapper === toTaskWrapper;
+};
+/**
+ * @hidden
+ *
+ * Fits a contender number between a min and max range.
+ * If the contender is below the min value, the min value is returned.
+ * If the contender is above the max value, the max value is returned.
+ */
+const fitToRange = (contender, min, max) => {
+    if (!isPresent(contender) || contender < min) {
+        return min;
+    }
+    else if (contender > max) {
+        return max;
+    }
+    else {
+        return contender;
     }
 };
-__decorate([
-    ContentChildren(GanttColumnComponent),
-    __metadata("design:type", QueryList)
-], GanttSpanColumnComponent.prototype, "childColumns", void 0);
-__decorate([
-    ContentChildren(CellTemplateDirective, { descendants: false }),
-    __metadata("design:type", QueryList)
-], GanttSpanColumnComponent.prototype, "template", void 0);
-__decorate([
-    ContentChildren(EditTemplateDirective, { descendants: false }),
-    __metadata("design:type", QueryList)
-], GanttSpanColumnComponent.prototype, "editTemplate", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], GanttSpanColumnComponent.prototype, "locked", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], GanttSpanColumnComponent.prototype, "lockable", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], GanttSpanColumnComponent.prototype, "editable", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], GanttSpanColumnComponent.prototype, "hidden", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], GanttSpanColumnComponent.prototype, "media", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GanttSpanColumnComponent.prototype, "style", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GanttSpanColumnComponent.prototype, "headerStyle", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GanttSpanColumnComponent.prototype, "footerStyle", void 0);
-__decorate([
-    Input('class'),
-    __metadata("design:type", Object)
-], GanttSpanColumnComponent.prototype, "cssClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GanttSpanColumnComponent.prototype, "headerClass", void 0);
-__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(() => GanttSpanColumnComponent_1)
-            }
-        ]
-    }),
-    __param(1, SkipSelf()), __param(1, Host()), __param(1, Optional()),
-    __metadata("design:paramtypes", [OptionChangesService,
-        GanttColumnBase])
-], GanttSpanColumnComponent);
-
-/**
- * @hidden
- */
-const hasChildren = () => false;
-/**
- * @hidden
- */
-const fetchChildren = () => of([]);
-/**
- * @hidden
- */
-const rowClassCallback = () => null;
 /**
  * @hidden
+ *
+ * Checks whether either of the two provided tasks is a parent of the other.
  */
-const taskClassCallback = () => null;
+const areParentChild = (taskA, taskB) => {
+    let parentChildRelationship = false;
+    let taskAParent = taskA;
+    while (isPresent(taskAParent) && isPresent(taskAParent.data)) {
+        if (taskAParent.data === taskB.data) {
+            parentChildRelationship = true;
+            break;
+        }
+        taskAParent = taskAParent.parent;
+    }
+    let taskBParent = taskB;
+    while (!parentChildRelationship && isPresent(taskBParent) && isPresent(taskBParent.data)) {
+        if (taskBParent.data === taskA.data) {
+            parentChildRelationship = true;
+            break;
+        }
+        taskBParent = taskBParent.parent;
+    }
+    return parentChildRelationship;
+};
 /**
  * @hidden
- */
-const isSelected = () => 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'
+ * 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 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 = {}));
+const elementFromPoint = (clientX, clientY) => {
+    if (!isDocumentAvailable()) {
+        return null;
+    }
+    return document.elementFromPoint(clientX, clientY);
+};
 
 /**
  * @hidden
  */
-class PreventableEvent {
+let MappingService = class MappingService {
+    /**
+     * @hidden
+     */
     constructor() {
-        this.prevented = false;
+        this._taskFields = Object.assign({}, DEFAULT_TASK_MODEL_FIELDS);
+        this._dependencyFields = Object.assign({}, DEFAULT_DEPENDENCY_MODEL_FIELDS);
     }
     /**
-     * Prevents the default action for a specified event.
-     * In this way, the source component suppresses
-     * the built-in behavior that follows the event.
+     * Gets or sets the model fields for the task data items.
+     * Uses the default values for fields which are not specified.
      */
-    preventDefault() {
-        this.prevented = true;
+    set taskFields(fields) {
+        this._taskFields = Object.assign({}, DEFAULT_TASK_MODEL_FIELDS, fields);
+    }
+    get taskFields() {
+        return this._taskFields;
     }
     /**
-     * Returns `true` if the event was prevented
-     * by any of its subscribers.
-     *
-     * @returns `true` if the default action was prevented.
-     * Otherwise, returns `false`.
+     * Gets or sets the model fields for the depenency data items.
+     * Uses the default values for fields which are not specified.
      */
-    isDefaultPrevented() {
-        return this.prevented;
+    set dependencyFields(fields) {
+        this._dependencyFields = Object.assign({}, DEFAULT_DEPENDENCY_MODEL_FIELDS, fields);
     }
-}
-
-/**
- * Called every time a user leaves an edited cell.
- */
-class CellCloseEvent extends PreventableEvent {
-    constructor(options) {
-        super();
-        Object.assign(this, options);
+    get dependencyFields() {
+        return this._dependencyFields;
+    }
+    /**
+     * Retrieves the value for the specified task field.
+     * Supports nested fields as well (e.g. 'manager.id').
+     */
+    extractFromTask(dataItem, field) {
+        if (!isPresent(this.taskFields)) {
+            return null;
+        }
+        return getter(this.taskFields[field])(dataItem);
+    }
+    /**
+     * Retrieves the value for the specified dependency field.
+     * Supports nested fields as well (e.g. 'manager.id').
+     */
+    extractFromDependency(dataItem, field) {
+        if (!isPresent(this.dependencyFields)) {
+            return null;
+        }
+        return getter(this.dependencyFields[field])(dataItem);
     }
-}
-
-/**
- * @hidden
- */
-const isWorkDay = (date, start, end) => {
-    return date.getDay() >= start && date.getDay() <= end;
-};
-/**
- * @hidden
- */
-const isWorkHour = (date, start, end) => {
-    return date.getHours() >= start && date.getHours() <= end;
 };
+MappingService = __decorate([
+    Injectable()
+], MappingService);
+
 /**
  * @hidden
  */
-const isPresent = (item) => item !== null && item !== undefined;
-/**
- * @hidden
- *
- * Normalized the data to an array in case a falsy value is passed
- * or a TreeListDataResult object (applicable for the data-binding directives).
- */
-const normalizeGanttData = (data) => {
-    if (!isPresent(data)) {
-        return [];
+let DependencyDomService = class DependencyDomService {
+    constructor(mapper) {
+        this.mapper = mapper;
+        this.notifier = new Subject();
+        /**
+         * Maps each rendered task to its HTML element.
+         * Uses the task ID field value as key.
+         */
+        this.tasks = new Map();
     }
-    else if (Array.isArray(data.data)) {
-        return data.data;
+    /**
+     * Emits each time some of the tasks or the view have changed.
+     * Fires also on the first change of the table rows and the parent container.
+     */
+    get taskChanges() {
+        return this.notifier.asObservable();
     }
-    else {
-        return data;
+    get dependencyDomArgs() {
+        return {
+            tasks: this.tasks,
+            contentContainer: this.contentContainer,
+            timelineRow: this.timelineRow
+        };
     }
-};
-/**
- * @hidden
- *
- * Returns a new date with the specified hours, minutes, seconds and millliseconds set.
- * Only the hours are required, the rest of the params are set to `0` by default.
- */
-const setTime = (date, hours, minutes = 0, seconds = 0, milliseconds = 0) => {
-    if (!isPresent(date)) {
-        return null;
+    ngOnDestroy() {
+        this.tasks.clear();
+        this.tasks = null;
+        this.contentContainer = null;
     }
-    const result = cloneDate(date);
-    result.setHours(hours);
-    result.setMinutes(minutes);
-    result.setSeconds(seconds);
-    result.setMilliseconds(milliseconds);
-    return result;
-};
-/**
- * @hidden
- *
- * Returns the last day of a week.
- * @param standingPoint - Any day of the target week.
- * @param firstWeekDay - The week's starting day (e.g. Monday, Tuesday, etc.)
- */
-const lastDayOfWeek = (standingPoint, firstWeekDay) => {
-    const followingWeek = addWeeks(standingPoint, 1);
-    const firstDayOfFollowingWeek = firstDayInWeek(followingWeek, firstWeekDay);
-    const lastDayOfTargetWeek = addDays(firstDayOfFollowingWeek, -1);
-    return lastDayOfTargetWeek;
-};
-/**
- * Persists the intially resolved scrollbar width value.
- */
-let SCROLLBAR_WIDTH;
-/**
- * @hidden
- *
- * Gets the default scrollbar width accoring to the current environment.
- */
-const scrollbarWidth = () => {
-    if (!isDocumentAvailable()) {
-        return;
-    }
-    // calculate scrollbar width only once, then return the cached value
-    if (isNaN(SCROLLBAR_WIDTH)) {
-        const div = document.createElement('div');
-        div.style.cssText = 'overflow: scroll; overflow-x: hidden; zoom: 1; clear: both; display: block;';
-        div.innerHTML = '&nbsp;';
-        document.body.appendChild(div);
-        SCROLLBAR_WIDTH = div.offsetWidth - div.scrollWidth;
-        document.body.removeChild(div);
-    }
-    return SCROLLBAR_WIDTH;
-};
-/**
- * @hidden
- */
-const isColumnGroup = (column) => column.isColumnGroup;
-/**
- * @hidden
- */
-const isNumber = (contender) => typeof contender === 'number' && !isNaN(contender);
-/**
- * @hidden
- */
-const isString = (contender) => typeof contender === 'string';
-/**
- * @hidden
- *
- * Gets the closest timeline task wrapper element from an event target.
- * Restricts the search up to the provided parent element from the second param.
- */
-const getClosestTaskWrapper = (element, parentScope) => {
-    return closestInScope(element, matchesClasses('k-task-wrap'), parentScope);
-};
-/**
- * @hidden
- *
- * Checks whether the queried item or its parent items has a `k-task-wrap` selector.
- * Restricts the search up to the provided parent element from the second param.
- */
-const isTaskWrapper = (contender, parentScope) => {
-    const taskWrapper = closestInScope(contender, matchesClasses('k-task-wrap'), parentScope);
-    return isPresent(taskWrapper);
-};
-/**
- * @hidden
- *
- * Gets the closest timeline task element index from an event target.
- * Uses the `data-task-index` attribute assigned to each task.
- * Restricts the search up to the provided parent element from the second param.
- */
-const getClosestTaskIndex = (element, parentScope) => {
-    const task = closestInScope(element, matchesClasses('k-task-wrap'), parentScope);
-    if (!isPresent(task)) {
-        return null;
-    }
-    return Number(task.getAttribute('data-task-index'));
-};
-/**
- * @hidden
- *
- * Checks whether the queried item or its parent items has a `k-task` selector.
- * Restricts the search up to the provided parent element from the second param.
- */
-const isTask = (contender, parentScope) => {
-    const task = closestInScope(contender, matchesClasses('k-task'), parentScope);
-    return isPresent(task);
-};
-/**
- * @hidden
- *
- * Checks whether the queried item or its parent items has a `k-task-actions` selector - used for the clear button.
- * Restricts the search up to the provided parent element from the second param.
- */
-const isClearButton = (contender, parentScope) => {
-    const clearButtonContainer = closestInScope(contender, matchesClasses('k-task-actions'), parentScope);
-    return isPresent(clearButtonContainer);
-};
-/**
- * @hidden
- *
- * Checks whether the queried item has a `k-task-dot` selector - used for the dependency drag clues.
- */
-const isDependencyDragClue = (element) => {
-    if (!isPresent(element)) {
-        return false;
+    registerTimelineRow(timelineRow) {
+        this.timelineRow = timelineRow;
+        this.notifyChanges();
     }
-    return element.classList.contains('k-task-dot');
-};
-/**
- * @hidden
- *
- * Checks whether the queried item has a `k-task-dot` & `k-task-start` selector - used for the dependency drag start clues.
- */
-const isDependencyDragStartClue = (element) => {
-    if (!isPresent(element)) {
-        return false;
+    registerContentContainer(contentContainer) {
+        this.contentContainer = contentContainer;
+        this.notifyChanges();
     }
-    return element.classList.contains('k-task-dot') && element.classList.contains('k-task-start');
-};
-/**
- * @hidden
- *
- * Gets the `DependencyType` for an attempted dependency create from the provided two elements.
- * The two linked drag clue HTML elements are used to extract this data (via their CSS classes).
- */
-const getDependencyTypeFromTargetTasks = (fromTaskClue, toTaskClue) => {
-    if (!isDependencyDragClue(fromTaskClue) || !isDependencyDragClue(toTaskClue)) {
-        return null;
+    registerTask(task, element) {
+        const id = this.mapper.extractFromTask(task, 'id');
+        this.tasks.set(id, element);
+        this.notifyChanges();
     }
-    const fromTaskType = isDependencyDragStartClue(fromTaskClue) ? 'S' : 'F';
-    const toTaskType = isDependencyDragStartClue(toTaskClue) ? 'S' : 'F';
-    const dependencyTypeName = `${fromTaskType}${toTaskType}`;
-    switch (dependencyTypeName) {
-        case 'FF': return DependencyType.FF;
-        case 'FS': return DependencyType.FS;
-        case 'SF': return DependencyType.SF;
-        case 'SS': return DependencyType.SS;
-        default: return null;
+    unregisterTask(task) {
+        const id = this.mapper.extractFromTask(task, 'id');
+        this.tasks.delete(id);
+        this.notifyChanges();
     }
-};
-/**
- * @hidden
- *
- * Checks whether the two provided drag clues belong to the same task element.
- */
-const sameTaskClues = (fromTaskClue, toTaskClue, parentScope) => {
-    if (!isPresent(fromTaskClue) || !isPresent(toTaskClue)) {
-        return false;
+    /**
+     * Notifies all dependency directives that a change in one of the elements has occured.
+     */
+    notifyChanges() {
+        this.notifier.next(this.dependencyDomArgs);
     }
-    const fromTaskWrapper = getClosestTaskWrapper(fromTaskClue, parentScope);
-    const toTaskWrapper = getClosestTaskWrapper(toTaskClue, parentScope);
-    return fromTaskWrapper === toTaskWrapper;
 };
+DependencyDomService = __decorate([
+    Injectable(),
+    __metadata("design:paramtypes", [MappingService])
+], DependencyDomService);
+
 /**
  * @hidden
- *
- * Fits a contender number between a min and max range.
- * If the contender is below the min value, the min value is returned.
- * If the contender is above the max value, the max value is returned.
  */
-const fitToRange = (contender, min, max) => {
-    if (contender > max) {
-        return max;
-    }
-    else if (contender < min) {
-        return min;
+let GanttTimelineComponent = class GanttTimelineComponent {
+    constructor(scrollSyncService, dependencyDomService, renderer, zone) {
+        this.scrollSyncService = scrollSyncService;
+        this.dependencyDomService = dependencyDomService;
+        this.renderer = renderer;
+        this.zone = zone;
+        this.hostClass = true;
+        this.dependencies = [];
+        // as all drag-and-drop operations are on the timeline container, use a single draggable instance
+        this.timelineContainerPress = new EventEmitter();
+        this.timelineContainerDrag = new EventEmitter();
+        this.timelineContainerRelease = new EventEmitter();
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(
+        // task changes indicates change in row content, number, height, etc.
+        this.dependencyDomService.taskChanges
+            .pipe(filter(args => isPresent(args.timelineRow)), switchMap(args => this.zone.onStable.pipe(take(1), map(() => args))) // ensure the content is rendered
+        )
+            .subscribe(({ timelineRow }) => {
+            const timelineRowHeight = isDocumentAvailable() ? timelineRow.getBoundingClientRect().height : 0;
+            this.renderer.setStyle(this.timelineColumns.nativeElement, 'height', `${(this.rows || []).length * timelineRowHeight}px`);
+        }));
     }
-    else {
-        return contender;
+    /**
+     * Specifies whether the draggable will attach or detach its pointer event listeners.
+     */
+    get draggableEnabled() {
+        return this.renderDependencyDragClues;
     }
-};
-/**
- * @hidden
- *
- * Checks whether either of the two provided tasks is a parent of the other.
- */
-const areParentChild = (taskA, taskB) => {
-    let parentChildRelationship = false;
-    let taskAParent = taskA;
-    while (isPresent(taskAParent) && isPresent(taskAParent.data)) {
-        if (taskAParent.data === taskB.data) {
-            parentChildRelationship = true;
-            break;
-        }
-        taskAParent = taskAParent.parent;
+    ngAfterViewInit() {
+        const timelineHeader = this.timelineHeaderWrap.nativeElement;
+        const rightContainer = this.timelineContent.nativeElement;
+        this.scrollSyncService.registerElement(rightContainer, 'timeline');
+        this.scrollSyncService.registerElement(timelineHeader, 'header');
+        this.dependencyDomService.registerContentContainer(this.tasksContainer.nativeElement);
     }
-    let taskBParent = taskB;
-    while (!parentChildRelationship && isPresent(taskBParent) && isPresent(taskBParent.data)) {
-        if (taskBParent.data === taskA.data) {
-            parentChildRelationship = true;
-            break;
-        }
-        taskBParent = taskBParent.parent;
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
     }
-    return parentChildRelationship;
-};
-/**
- * @hidden
- *
- * Extracts an element from the provided client coords.
- * Using the `event.target` is not reliable under mobile devices with the current implementation of the draggable, so use this instead.
- */
-const elementFromPoint = (clientX, clientY) => {
-    if (!isDocumentAvailable()) {
-        return null;
+    isNonWorking(item) {
+        return item.hasOwnProperty('isWorking') && !item.isWorking;
     }
-    return document.elementFromPoint(clientX, clientY);
 };
-
+__decorate([
+    ViewChild('timelineContent', { static: true }),
+    __metadata("design:type", ElementRef)
+], GanttTimelineComponent.prototype, "timelineContent", void 0);
+__decorate([
+    ViewChild('timelineColumns', { static: true }),
+    __metadata("design:type", ElementRef)
+], GanttTimelineComponent.prototype, "timelineColumns", void 0);
+__decorate([
+    ViewChild('timelineHeaderWrap', { static: true }),
+    __metadata("design:type", ElementRef)
+], GanttTimelineComponent.prototype, "timelineHeaderWrap", void 0);
+__decorate([
+    ViewChild('tasksContainer', { static: true }),
+    __metadata("design:type", ElementRef)
+], GanttTimelineComponent.prototype, "tasksContainer", void 0);
+__decorate([
+    ViewChild('dragPopupContainer', { static: false, read: ViewContainerRef }),
+    __metadata("design:type", ViewContainerRef)
+], GanttTimelineComponent.prototype, "dragPopupContainer", void 0);
+__decorate([
+    ViewChild('dependencyDragCreatePolyline', { static: false }),
+    __metadata("design:type", ElementRef)
+], GanttTimelineComponent.prototype, "dependencyDragCreatePolyline", void 0);
+__decorate([
+    HostBinding('class.k-gantt-timeline'),
+    __metadata("design:type", Boolean)
+], GanttTimelineComponent.prototype, "hostClass", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Array)
+], GanttTimelineComponent.prototype, "rows", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Array)
+], GanttTimelineComponent.prototype, "slots", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Array)
+], GanttTimelineComponent.prototype, "groupSlots", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Number)
+], GanttTimelineComponent.prototype, "tableWidth", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], GanttTimelineComponent.prototype, "activeView", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", TemplateRef)
+], GanttTimelineComponent.prototype, "taskContentTemplate", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", TemplateRef)
+], GanttTimelineComponent.prototype, "taskTemplate", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", TemplateRef)
+], GanttTimelineComponent.prototype, "summaryTaskTemplate", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], GanttTimelineComponent.prototype, "taskClass", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttTimelineComponent.prototype, "renderDependencyDragClues", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttTimelineComponent.prototype, "dragScrollSettings", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttTimelineComponent.prototype, "selectable", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], GanttTimelineComponent.prototype, "isTaskSelected", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], GanttTimelineComponent.prototype, "isExpanded", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Array)
+], GanttTimelineComponent.prototype, "dependencies", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], GanttTimelineComponent.prototype, "timelineContainerPress", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], GanttTimelineComponent.prototype, "timelineContainerDrag", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], GanttTimelineComponent.prototype, "timelineContainerRelease", void 0);
+GanttTimelineComponent = __decorate([
+    Component({
+        selector: 'kendo-gantt-timeline',
+        template: `
+        <div class="k-timeline k-grid k-widget">
+            <div class="k-grid-header">
+                <div #timelineHeaderWrap class="k-grid-header-wrap">
+                    <table
+                        role="presentation"
+                        [style.width.px]="tableWidth"
+                    >
+                        <tbody
+                            kendoGanttHeaderTableBody
+                            [groupSlots]="groupSlots"
+                            [slots]="slots">
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <!-- tabindex="-1" required for https://bugzilla.mozilla.org/show_bug.cgi?id=1069739 -->
+            <div
+                #timelineContent
+                class="k-grid-content"
+                tabindex="-1"
+                role="tree"
+                aria-roledescription="Timeline"
+                kendoGanttTimelineScrollable
+                [scrollSettings]="dragScrollSettings"
+                kendoDraggable
+                [enableDrag]="draggableEnabled"
+                (kendoPress)="timelineContainerPress.emit($event)"
+                (kendoDrag)="timelineContainerDrag.emit($event)"
+                (kendoRelease)="timelineContainerRelease.emit($event)"
+            >
+                <div class="k-gantt-tables">
+                    <table
+                        class="k-gantt-rows"
+                        [style.width.px]="tableWidth"
+                        role="presentation"
+                    >
+                        <tbody>
+                            <tr *ngFor="let item of rows; let i = index;"
+                                [class.k-alt]="i % 2"
+                            >
+                                <td></td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <table
+                        #timelineColumns
+                        class="k-gantt-columns"
+                        role="presentation"
+                        [style.width.px]="tableWidth"
+                    >
+                        <colgroup>
+                            <col *ngFor="let item of slots">
+                        </colgroup>
+
+                        <tbody>
+                            <tr>
+                                <td *ngFor="let item of slots"
+                                    [class.k-nonwork-hour]="isNonWorking(item)"
+                                >
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <table
+                        #tasksContainer
+                        class="k-gantt-tasks"
+                        role="presentation"
+                        style="border-collapse: collapse;"
+                        [style.width.px]="tableWidth"
+                    >
+                        <tbody
+                            kendoGanttTasksTableBody
+                            [rows]="rows"
+                            [activeView]="activeView"
+                            [taskContentTemplate]="taskContentTemplate"
+                            [taskTemplate]="taskTemplate"
+                            [summaryTaskTemplate]="summaryTaskTemplate"
+                            [taskClass]="taskClass"
+                            [isExpanded]="isExpanded"
+                            [selectable]="selectable"
+                            [isTaskSelected]="isTaskSelected"
+                            [renderDependencyDragClues]="renderDependencyDragClues"
+                        >
+                        </tbody>
+                    </table>
+                </div>
+                <svg class="k-gantt-dependencies-svg">
+                    <polyline
+                        *ngFor="let dependency of dependencies"
+                        kendoGanttDependency
+                        [dependency]="dependency"
+                    />
+                    <polyline #dependencyDragCreatePolyline />
+                </svg>
+
+                <!-- placeholder for the dependency drag popup; its position is not arbitrary - the popup is intended to be absolutely positioned inside the .k-grid-content element -->
+                <ng-container #dragPopupContainer></ng-container>
+            </div>
+        </div>
+    `
+    }),
+    __metadata("design:paramtypes", [ScrollSyncService,
+        DependencyDomService,
+        Renderer2,
+        NgZone])
+], GanttTimelineComponent);
+
+/**
+ * The base class for the column components of the Gantt.
+ */
+class GanttColumnBase extends ColumnBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * Toggles the locked (frozen) state of the columns.
+         *
+         * @default false
+         * @hidden
+         */
+        this.locked = false;
+    }
+}
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttColumnBase.prototype, "locked", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttColumnBase.prototype, "lockable", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttColumnBase.prototype, "hidden", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], GanttColumnBase.prototype, "media", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttColumnBase.prototype, "style", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttColumnBase.prototype, "headerStyle", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttColumnBase.prototype, "footerStyle", void 0);
+__decorate([
+    Input('class'),
+    __metadata("design:type", Object)
+], GanttColumnBase.prototype, "cssClass", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttColumnBase.prototype, "headerClass", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttColumnBase.prototype, "footerClass", void 0);
+
+/**
+ * @hidden
+ */
+let OptionChangesService = class OptionChangesService {
+    /**
+     * @hidden
+     */
+    constructor() {
+        this.viewChanges = new EventEmitter();
+        this.columnChanges = new EventEmitter();
+    }
+    notifyColumnChanges() {
+        this.columnChanges.emit();
+    }
+    notifyViewChanges() {
+        this.viewChanges.emit();
+    }
+};
+OptionChangesService = __decorate([
+    Injectable()
+], OptionChangesService);
+
+/**
+ * Represents the column cell template of the Gantt.
+ * Helps to customize the content of the cells. To define the cell template, nest an `<ng-template>` tag
+ * with the `kendoGanttCellTemplate` directive inside the respective column tag.
+ *
+ * The template context is set to the current data item and the following additional fields are passed:
+ * - `dataItem`&mdash;The current data item. Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax&mdash;for example, `let-dataItem`.
+ * - `columnIndex`&mdash;The current column index. Use it as an alias for a template variable by utilizing the `let-columnIndex="columnIndex"` syntax.
+ * - `column`&mdash;The current column instance. Use it as an alias for a template variable by utilizing the `let-column="column"` syntax.
+ * - `cellContext`&mdash;An object used to pass context information to built-in directives.
+ * - `hasChildren`&mdash;Specifies if the item has children.
+ * - `isExpanded`&mdash;Specifies if the item is expanded.
+ * - `level`&mdash;The hierarchy level of the item.
+ * - `loading`&mdash;Specifies if the item children are currently loading.
+ * - `rowIndex`&mdash;The current row index. Use it as an alias for a template variable by utilizing the `let-rowIndex="rowIndex"` syntax.
+ */
+let CellTemplateDirective = class CellTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+};
+CellTemplateDirective = __decorate([
+    Directive({
+        selector: '[kendoGanttCellTemplate]'
+    }),
+    __param(0, Optional()),
+    __metadata("design:paramtypes", [TemplateRef])
+], CellTemplateDirective);
+
+/**
+ * Represents the template for the column menu in the Gantt. Provides an option for
+ * customizing the content of the column menu for all or for specific columns.
+ * To define the content template, nest an `<ng-template>` tag with the
+ * `kendoGanttColumnMenuTemplate` directive inside the `<kendo-gantt-column>` component.
+ *
+ *  The column menu service and the current column are available as context variables:
+ * - `service`&mdash;Represents the ColumnMenuService.
+ * - `column`&mdash;Represents the Gantt column.
+ */
+let ColumnMenuTemplateDirective = class ColumnMenuTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+};
+ColumnMenuTemplateDirective = __decorate([
+    Directive({
+        selector: '[kendoGanttColumnMenuTemplate]'
+    }),
+    __param(0, Optional()),
+    __metadata("design:paramtypes", [TemplateRef])
+], ColumnMenuTemplateDirective);
+
+/**
+ * @hidden
+ * Represents the filter-cell template.
+ *
+ * The template context is set to the filter descriptor and the following additional fields are passed:
+ * - `column`&mdash;The current column instance. Use it as an alias for a template variable by utilizing the `let-column="column"` syntax.
+ * - `filter`&mdash;The filter descriptor.
+ * - `cellContext`&mdash;An object used to pass context information to built-in directives.
+ */
+let FilterCellTemplateDirective = class FilterCellTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+};
+FilterCellTemplateDirective = __decorate([
+    Directive({
+        selector: '[kendoGanttFilterCellTemplate]'
+    }),
+    __param(0, Optional()),
+    __metadata("design:paramtypes", [TemplateRef])
+], FilterCellTemplateDirective);
+
+/**
+ * Represents the filter-menu template.
+ *
+ * The column, current filter and the filter service are available as context variables:
+ * - `column`&mdash;The current column instance. Use it as an alias for a template variable by utilizing the `let-column="column"` syntax.
+ * - `filter`&mdash;The filter descriptor.
+ * - `cellContext`&mdash;An object used to pass context information to built-in directives.
+ */
+let FilterMenuTemplateDirective = class FilterMenuTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+};
+FilterMenuTemplateDirective = __decorate([
+    Directive({
+        selector: '[kendoGanttFilterMenuTemplate]'
+    }),
+    __param(0, Optional()),
+    __metadata("design:paramtypes", [TemplateRef])
+], FilterMenuTemplateDirective);
+
+/**
+ * Represents the column footer cell template of the Gantt.
+ *
+ * Helps to customize the table footer cell for the column.
+ * To define a footer template, nest an `<ng-template>` tag with the
+ * [`kendoGanttFooterTemplate`]({% slug api_gantt_footertemplatedirective %}) directive inside the `<kendo-gantt-column>` tag.
+ *
+ *  The current column, column index and field are available as context variables:
+ * * `column`&mdash;Points to the instance of the current [`ColumnComponent`]({% slug api_gantt_ganttcolumncomponent %}).
+ * * `columnIndex`&mdash;Defines the current column index.
+ * * `field`&mdash;The name of the column field, if set.
+ */
+let FooterTemplateDirective = class FooterTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+};
+FooterTemplateDirective = __decorate([
+    Directive({
+        selector: '[kendoGanttFooterTemplate]'
+    }),
+    __param(0, Optional()),
+    __metadata("design:paramtypes", [TemplateRef])
+], FooterTemplateDirective);
+
+/**
+ * Represents the column header cell template of the Gantt.
+ * Helps to customize the table header cell for the column.
+ * To define a header template, nest an `<ng-template>` tag with the
+ * [`kendoGanttHeaderTemplate`]({% slug api_gantt_headertemplatedirective %}) directive inside the `<kendo-gantt-column>` tag.
+ *
+ *  The current column and column index are available as context variables:
+ * * `column`&mdash;Points to the instance of the current [`ColumnComponent`]({% slug api_gantt_ganttcolumncomponent %}).
+ * * `columnIndex`&mdash;Defines the current column index.
+ */
+let HeaderTemplateDirective = class HeaderTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+};
+HeaderTemplateDirective = __decorate([
+    Directive({
+        selector: '[kendoGanttHeaderTemplate]'
+    }),
+    __param(0, Optional()),
+    __metadata("design:paramtypes", [TemplateRef])
+], HeaderTemplateDirective);
+
+/**
+ * Represents the column edit-cell template of the Gantt.
+ * Helps to customize the content of the edited cells. To define the cell template, nest an `<ng-template>`
+ * tag with the `kendoGanttEditTemplate` directive inside a `<kendo-gantt-column>` tag.
+ *
+ * The template context contains the following fields:
+ * - `column`&mdash;The current column instance.
+ * - `dataItem`&mdash;The current data item.
+ * - `cellContext`&mdash;An object used to pass context information to built-in directives.
+ * - `formGroup`&mdash;The current [`FormGroup`]({{ site.data.urls.angular['formgroupapi'] }}).
+ * If you use the Gantt inside [Template-Driven Forms]({{ site.data.urls.angular['forms'] }}), it will be `undefined`.
+ * - `isNew`&mdash;The state of the current item.
+ * - `rowIndex`&mdash;The current row index. If inside a new item row, `rowIndex` is `-1`.
+ */
+let EditTemplateDirective = class EditTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+};
+EditTemplateDirective = __decorate([
+    Directive({
+        selector: '[kendoGanttEditTemplate]'
+    }),
+    __param(0, Optional()),
+    __metadata("design:paramtypes", [TemplateRef])
+], EditTemplateDirective);
+
+var GanttColumnComponent_1;
+let GanttColumnComponent = GanttColumnComponent_1 = class GanttColumnComponent extends ColumnComponent {
+    constructor(options, parent) {
+        super(parent);
+        this.options = options;
+        this.headerTemplates = new QueryList();
+        this.columnMenuTemplates = new QueryList();
+        /**
+         * Defines the filter type that is displayed inside the filter row. The default value is `text`.
+         */
+        this.filter = 'text';
+        /**
+         * Defines if a filter UI will be displayed for this column. The default value is `true`.
+         */
+        this.filterable = true;
+        /**
+         * @hidden
+         *
+         * Defines the editor type.
+         * Used when the column enters the edit mode. The default value is `text`.
+         */
+        this.editor = 'text';
+        /**
+         * @hidden
+         *
+         * Defines whether the column is editable. The default value is `true`.
+         */
+        this.editable = true;
+        /**
+         * Toggles the locked (frozen) state of the columns.
+         * @hidden
+         * @default false
+         */
+        this.locked = false;
+    }
+    ngOnChanges() {
+        this.options.notifyColumnChanges();
+    }
+};
+__decorate([
+    ContentChildren(HeaderTemplateDirective, { descendants: false }),
+    __metadata("design:type", QueryList)
+], GanttColumnComponent.prototype, "headerTemplates", void 0);
+__decorate([
+    ContentChild(FooterTemplateDirective, { static: false }),
+    __metadata("design:type", FooterTemplateDirective)
+], GanttColumnComponent.prototype, "footerTemplate", void 0);
+__decorate([
+    ContentChildren(ColumnMenuTemplateDirective),
+    __metadata("design:type", QueryList)
+], GanttColumnComponent.prototype, "columnMenuTemplates", void 0);
+__decorate([
+    ContentChild(CellTemplateDirective, { static: false }),
+    __metadata("design:type", CellTemplateDirective)
+], GanttColumnComponent.prototype, "template", void 0);
+__decorate([
+    ContentChild(EditTemplateDirective, { static: false }),
+    __metadata("design:type", EditTemplateDirective)
+], GanttColumnComponent.prototype, "editTemplate", void 0);
+__decorate([
+    ContentChild(FilterCellTemplateDirective, { static: false }),
+    __metadata("design:type", FilterCellTemplateDirective)
+], GanttColumnComponent.prototype, "filterCellTemplate", void 0);
+__decorate([
+    ContentChild(FilterMenuTemplateDirective, { static: false }),
+    __metadata("design:type", FilterMenuTemplateDirective)
+], GanttColumnComponent.prototype, "filterMenuTemplate", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttColumnComponent.prototype, "format", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], GanttColumnComponent.prototype, "filter", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttColumnComponent.prototype, "filterable", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], GanttColumnComponent.prototype, "editor", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttColumnComponent.prototype, "editable", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttColumnComponent.prototype, "locked", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttColumnComponent.prototype, "lockable", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttColumnComponent.prototype, "hidden", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], GanttColumnComponent.prototype, "media", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttColumnComponent.prototype, "style", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttColumnComponent.prototype, "headerStyle", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttColumnComponent.prototype, "footerStyle", void 0);
+__decorate([
+    Input('class'),
+    __metadata("design:type", Object)
+], GanttColumnComponent.prototype, "cssClass", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttColumnComponent.prototype, "headerClass", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttColumnComponent.prototype, "footerClass", void 0);
+GanttColumnComponent = GanttColumnComponent_1 = __decorate([
+    Component({
+        selector: 'kendo-gantt-column',
+        template: '',
+        providers: [
+            {
+                provide: GanttColumnBase,
+                useExisting: forwardRef(() => GanttColumnComponent_1)
+            }
+        ]
+    }),
+    __param(1, SkipSelf()), __param(1, Host()), __param(1, Optional()),
+    __metadata("design:paramtypes", [OptionChangesService,
+        GanttColumnBase])
+], GanttColumnComponent);
+
+var GanttColumnGroupComponent_1;
+let GanttColumnGroupComponent = GanttColumnGroupComponent_1 = class GanttColumnGroupComponent extends ColumnGroupComponent {
+    constructor(options, parent) {
+        super(parent);
+        this.options = options;
+        /**
+         * @hidden
+         */
+        this.children = new QueryList();
+        /**
+         * Toggles the locked (frozen) state of the columns.
+         *
+         * @default false
+         * @hidden
+         */
+        this.locked = false;
+        /**
+         * Allows the column headers to be clicked and the `sortChange` event emitted.
+         * You have to handle the `sortChange` event yourself and sort the data.
+         */
+        this.sortable = true;
+        if (parent && parent.isSpanColumn) {
+            throw new Error('ColumnGroupComponent cannot be nested inside SpanColumnComponent');
+        }
+    }
+    ngOnChanges() {
+        this.options.notifyColumnChanges();
+    }
+};
+__decorate([
+    ContentChildren(GanttColumnBase),
+    __metadata("design:type", QueryList)
+], GanttColumnGroupComponent.prototype, "children", void 0);
+__decorate([
+    ContentChildren(HeaderTemplateDirective),
+    __metadata("design:type", QueryList)
+], GanttColumnGroupComponent.prototype, "headerTemplates", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttColumnGroupComponent.prototype, "locked", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttColumnGroupComponent.prototype, "lockable", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttColumnGroupComponent.prototype, "hidden", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttColumnGroupComponent.prototype, "sortable", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], GanttColumnGroupComponent.prototype, "media", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttColumnGroupComponent.prototype, "style", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttColumnGroupComponent.prototype, "headerStyle", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttColumnGroupComponent.prototype, "footerStyle", void 0);
+__decorate([
+    Input('class'),
+    __metadata("design:type", Object)
+], GanttColumnGroupComponent.prototype, "cssClass", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttColumnGroupComponent.prototype, "headerClass", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttColumnGroupComponent.prototype, "footerClass", void 0);
+GanttColumnGroupComponent = GanttColumnGroupComponent_1 = __decorate([
+    Component({
+        selector: 'kendo-gantt-column-group',
+        template: '',
+        providers: [
+            {
+                provide: GanttColumnBase,
+                useExisting: forwardRef(() => GanttColumnGroupComponent_1)
+            }
+        ]
+    }),
+    __param(1, SkipSelf()), __param(1, Host()), __param(1, Optional()),
+    __metadata("design:paramtypes", [OptionChangesService,
+        GanttColumnBase])
+], GanttColumnGroupComponent);
+
+var GanttSpanColumnComponent_1;
+let GanttSpanColumnComponent = GanttSpanColumnComponent_1 = class GanttSpanColumnComponent extends SpanColumnComponent {
+    constructor(options, parent) {
+        super(parent);
+        this.options = options;
+        /**
+         * @hidden
+         */
+        this.childColumns = new QueryList();
+        this.template = new QueryList();
+        this.editTemplate = new QueryList();
+    }
+    ngOnChanges() {
+        this.options.notifyColumnChanges();
+    }
+};
+__decorate([
+    ContentChildren(GanttColumnComponent),
+    __metadata("design:type", QueryList)
+], GanttSpanColumnComponent.prototype, "childColumns", void 0);
+__decorate([
+    ContentChildren(CellTemplateDirective, { descendants: false }),
+    __metadata("design:type", QueryList)
+], GanttSpanColumnComponent.prototype, "template", void 0);
+__decorate([
+    ContentChildren(EditTemplateDirective, { descendants: false }),
+    __metadata("design:type", QueryList)
+], GanttSpanColumnComponent.prototype, "editTemplate", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttSpanColumnComponent.prototype, "locked", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttSpanColumnComponent.prototype, "lockable", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttSpanColumnComponent.prototype, "editable", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttSpanColumnComponent.prototype, "hidden", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], GanttSpanColumnComponent.prototype, "media", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttSpanColumnComponent.prototype, "style", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttSpanColumnComponent.prototype, "headerStyle", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttSpanColumnComponent.prototype, "footerStyle", void 0);
+__decorate([
+    Input('class'),
+    __metadata("design:type", Object)
+], GanttSpanColumnComponent.prototype, "cssClass", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GanttSpanColumnComponent.prototype, "headerClass", void 0);
+__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(() => GanttSpanColumnComponent_1)
+            }
+        ]
+    }),
+    __param(1, SkipSelf()), __param(1, Host()), __param(1, Optional()),
+    __metadata("design:paramtypes", [OptionChangesService,
+        GanttColumnBase])
+], GanttSpanColumnComponent);
+
+/**
+ * @hidden
+ */
+const hasChildren = () => false;
+/**
+ * @hidden
+ */
+const fetchChildren = () => of([]);
+/**
+ * @hidden
+ */
+const rowClassCallback = () => null;
+/**
+ * @hidden
+ */
+const taskClassCallback = () => null;
+/**
+ * @hidden
+ */
+const isSelected = () => false;
+
+/**
+ * @hidden
+ */
+class PreventableEvent {
+    constructor() {
+        this.prevented = false;
+    }
+    /**
+     * Prevents the default action for a specified event.
+     * In this way, the source component suppresses
+     * the built-in behavior that follows the event.
+     */
+    preventDefault() {
+        this.prevented = true;
+    }
+    /**
+     * Returns `true` if the event was prevented
+     * by any of its subscribers.
+     *
+     * @returns `true` if the default action was prevented.
+     * Otherwise, returns `false`.
+     */
+    isDefaultPrevented() {
+        return this.prevented;
+    }
+}
+
+/**
+ * Called every time a user leaves an edited cell.
+ */
+class CellCloseEvent extends PreventableEvent {
+    constructor(options) {
+        super();
+        Object.assign(this, options);
+    }
+}
+
 /**
  * @hidden
  */
@@ -1107,84 +1588,6 @@ class TimelineBaseViewService {
     }
 }
 
-/**
- * @hidden
- */
-const DEFAULT_DEPENDENCY_MODEL_FIELDS = Object.freeze({
-    toId: 'toId',
-    fromId: 'fromId',
-    id: 'id',
-    type: 'type'
-});
-
-/**
- * @hidden
- */
-const DEFAULT_TASK_MODEL_FIELDS = Object.freeze({
-    id: 'id',
-    start: 'start',
-    end: 'end',
-    title: 'title',
-    completionRatio: 'completionRatio',
-    children: 'children'
-});
-
-/**
- * @hidden
- */
-let MappingService = class MappingService {
-    /**
-     * @hidden
-     */
-    constructor() {
-        this._taskFields = Object.assign({}, DEFAULT_TASK_MODEL_FIELDS);
-        this._dependencyFields = Object.assign({}, DEFAULT_DEPENDENCY_MODEL_FIELDS);
-    }
-    /**
-     * Gets or sets the model fields for the task data items.
-     * Uses the default values for fields which are not specified.
-     */
-    set taskFields(fields) {
-        this._taskFields = Object.assign({}, DEFAULT_TASK_MODEL_FIELDS, fields);
-    }
-    get taskFields() {
-        return this._taskFields;
-    }
-    /**
-     * Gets or sets the model fields for the depenency data items.
-     * Uses the default values for fields which are not specified.
-     */
-    set dependencyFields(fields) {
-        this._dependencyFields = Object.assign({}, DEFAULT_DEPENDENCY_MODEL_FIELDS, fields);
-    }
-    get dependencyFields() {
-        return this._dependencyFields;
-    }
-    /**
-     * Retrieves the value for the specified task field.
-     * Supports nested fields as well (e.g. 'manager.id').
-     */
-    extractFromTask(dataItem, field) {
-        if (!isPresent(this.taskFields)) {
-            return null;
-        }
-        return getter(this.taskFields[field])(dataItem);
-    }
-    /**
-     * Retrieves the value for the specified dependency field.
-     * Supports nested fields as well (e.g. 'manager.id').
-     */
-    extractFromDependency(dataItem, field) {
-        if (!isPresent(this.dependencyFields)) {
-            return null;
-        }
-        return getter(this.dependencyFields[field])(dataItem);
-    }
-};
-MappingService = __decorate([
-    Injectable()
-], MappingService);
-
 /**
  * @hidden
  */
@@ -1353,157 +1756,23 @@ const services = {
     week: TimelineWeekViewService,
     month: TimelineMonthViewService
 };
-/**
- * @hidden
- */
-let TimelineViewService = class TimelineViewService {
-    constructor(injector) {
-        this.injector = injector;
-        this.viewChange = new EventEmitter();
-    }
-    service(view) {
-        const serviceType = services[view];
-        return serviceType ? this.injector.get(serviceType) : null;
-    }
-};
-TimelineViewService = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [Injector])
-], TimelineViewService);
-
-/**
- * @hidden
- */
-let ScrollSyncService = class ScrollSyncService {
-    constructor(ngZone) {
-        this.ngZone = ngZone;
-        this.changes = new Subject();
-        this.elements = [];
-        this.subscriptions = new Subscription();
-        this.subscriptions.add(this.changes.subscribe(args => {
-            this.scroll(args);
-        }));
-    }
-    registerElement(el, sourceType) {
-        this.elements.push({ element: el, sourceType });
-        if (sourceType === "timeline" || sourceType === "treelist") {
-            this.ngZone.runOutsideAngular(() => {
-                const obs = fromEvent(el, 'scroll').pipe(map(({ target: { scrollTop, scrollLeft } }) => ({
-                    scrollTop,
-                    scrollLeft,
-                    sourceType
-                })));
-                const comparisonFn = sourceType === 'timeline' ?
-                    (x, y) => (x.scrollTop === y.scrollTop) && (x.scrollLeft === y.scrollLeft) :
-                    (x, y) => (x.scrollTop === y.scrollTop);
-                this.subscriptions.add(obs.pipe(distinctUntilChanged(comparisonFn))
-                    .subscribe((event) => this.changes.next(event)));
-            });
-        }
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-        this.elements = null;
-    }
-    syncScrollTop(sourceType, targetType) {
-        const source = this.elements.find(element => element.sourceType === sourceType);
-        const target = this.elements.find(element => element.sourceType === targetType);
-        // Need to wait for the splitter pane's content to be rendered
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => target.element.scrollTop = source.element.scrollTop);
-    }
-    resetTimelineScrollLeft() {
-        const source = this.elements.find(element => element.sourceType === 'timeline');
-        source.element.scrollLeft = 0;
-    }
-    scroll({ scrollTop, scrollLeft, sourceType }) {
-        this.ngZone.runOutsideAngular(() => {
-            if (sourceType === 'timeline') {
-                const header = this.elements.find(element => element.sourceType === 'header').element;
-                header.scrollLeft = scrollLeft;
-                if (!this.syncingTimeline) {
-                    this.syncingTreeList = true;
-                    const treelist = this.elements.find(element => element.sourceType === 'treelist').element;
-                    treelist.scrollTop = scrollTop;
-                }
-                this.syncingTimeline = false;
-            }
-            if (sourceType === 'treelist') {
-                if (!this.syncingTreeList) {
-                    this.syncingTimeline = true;
-                    const timeline = this.elements.find(element => element.sourceType === 'timeline').element;
-                    timeline.scrollTop = scrollTop;
-                }
-                this.syncingTreeList = false;
-            }
-        });
-    }
-};
-ScrollSyncService = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [NgZone])
-], ScrollSyncService);
-
-/**
- * @hidden
- */
-let DependencyDomService = class DependencyDomService {
-    constructor(mapper) {
-        this.mapper = mapper;
-        this.notifier = new Subject();
-        /**
-         * Maps each rendered task to its HTML element.
-         * Uses the task ID field value as key.
-         */
-        this.tasks = new Map();
-    }
-    /**
-     * Emits each time some of the tasks or the view have changed.
-     * Fires also on the first change of the table rows and the parent container.
-     */
-    get taskChanges() {
-        return this.notifier.asObservable();
-    }
-    get dependencyDomArgs() {
-        return {
-            tasks: this.tasks,
-            contentContainer: this.contentContainer,
-            timelineRow: this.timelineRow
-        };
-    }
-    ngOnDestroy() {
-        this.tasks.clear();
-        this.tasks = null;
-        this.contentContainer = null;
-    }
-    registerTimelineRow(timelineRow) {
-        this.timelineRow = timelineRow;
-        this.notifyChanges();
-    }
-    registerContentContainer(contentContainer) {
-        this.contentContainer = contentContainer;
-        this.notifyChanges();
-    }
-    registerTask(task, element) {
-        const id = this.mapper.extractFromTask(task, 'id');
-        this.tasks.set(id, element);
-        this.notifyChanges();
-    }
-    unregisterTask(task) {
-        const id = this.mapper.extractFromTask(task, 'id');
-        this.tasks.delete(id);
-        this.notifyChanges();
+/**
+ * @hidden
+ */
+let TimelineViewService = class TimelineViewService {
+    constructor(injector) {
+        this.injector = injector;
+        this.viewChange = new EventEmitter();
     }
-    /**
-     * Notifies all dependency directives that a change in one of the elements has occured.
-     */
-    notifyChanges() {
-        this.notifier.next(this.dependencyDomArgs);
+    service(view) {
+        const serviceType = services[view];
+        return serviceType ? this.injector.get(serviceType) : null;
     }
 };
-DependencyDomService = __decorate([
+TimelineViewService = __decorate([
     Injectable(),
-    __metadata("design:paramtypes", [MappingService])
-], DependencyDomService);
+    __metadata("design:paramtypes", [Injector])
+], TimelineViewService);
 
 /**
  * @hidden
@@ -1512,9 +1781,11 @@ let EditService = class EditService {
     constructor(mapper) {
         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 = (item, data) => {
@@ -1659,512 +1930,671 @@ GanttLocalizationService = __decorate([
     __metadata("design:paramtypes", [LocalizationService])
 ], GanttLocalizationService);
 
+// TODO: add those keys to `import { Keys } from '@progress/kendo-angular-common';`
+var NumpadKeys;
+(function (NumpadKeys) {
+    NumpadKeys[NumpadKeys["Digit1"] = 97] = "Digit1";
+    NumpadKeys[NumpadKeys["Digit2"] = 98] = "Digit2";
+    NumpadKeys[NumpadKeys["Digit3"] = 99] = "Digit3";
+    NumpadKeys[NumpadKeys["Digit4"] = 100] = "Digit4";
+})(NumpadKeys || (NumpadKeys = {}));
 /**
  * @hidden
  */
-const DEFAULT_TREELIST_PANE_SETTINGS = Object.freeze({
-    collapsible: true,
-    collapsed: false
-});
+const isArrowUpDownKey = (keyCode) => [
+    Keys.ArrowUp,
+    Keys.ArrowDown
+].some(arrowKeyCode => keyCode === arrowKeyCode);
 /**
  * @hidden
  */
-const DEFAULT_TIMELINE_PANE_SETTINGS = Object.freeze({
-    collapsible: true,
-    collapsed: false,
-    size: '50%',
-    resizable: true
-});
-
-/**
- * Represents a template that defines the whole content of the task component.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoGanttTaskTemplate` directive inside the `<kendo-gantt>` tag.
- *
- * The template context is set to the current data item. The following additional field is passed:
- * - `elementWidth`&mdash;The current task wrapper element's calculated width in pixels based on its start and end date.
- * Use it as an alias for a template variable by utilizing the `let-elementWidth="elementWidth"` syntax.
- * Useful for calculations related to rendering custom elements representing the task progress.
- *
- * @example
- * ```ts-preview
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-gantt [kendoGanttHierarchyBinding]="data">
- *            <ng-template kendoGanttTaskTemplate let-dataItem let-elementWidth="elementWidth">
- *                {{ dataItem.title }} - {{ dataItem.completionRatio * 100 }}% complete
- *            </ng-template>
- *        </kendo-gantt>
- *    `
- * })
- * class AppComponent {
- *    public data: any[] = sampleTasks;
- * }
- * ```
- */
-let GanttTaskTemplateDirective = class GanttTaskTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-};
-GanttTaskTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoGanttTaskTemplate]'
-    }),
-    __param(0, Optional()),
-    __metadata("design:paramtypes", [TemplateRef])
-], GanttTaskTemplateDirective);
-
-/**
- * Represents a template that defines the whole content of the summary task component.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoGanttSummaryTaskTemplate` directive inside the `<kendo-gantt>` tag.
- *
- * The template context is set to the current data item. The following additional field is passed:
- * - `elementWidth`&mdash;The current summary task wrapper element's calculated width in pixels based on its start and end date.
- * Use it as an alias for a template variable by utilizing the `let-elementWidth="elementWidth"` syntax.
- * Useful for calculations related to rendering custom elements representing the task progress.
- *
- * @example
- * ```ts-preview
- * _@Component({
- *      selector: 'my-app',
- *      template: `
- *          <kendo-gantt [kendoGanttHierarchyBinding]="data">
- *              <ng-template kendoGanttSummaryTaskTemplate let-dataItem let-elementWidth="elementWidth">
- *                  <div style="color: white; font-size: 8px;">
- *                      {{ dataItem.title }} - {{ dataItem.completionRatio * 100 }}% complete; width: {{ elementWidth }}
- *                  </div>
- *              </ng-template>
- *          </kendo-gantt>
- *      `
- * })
- * class AppComponent {
- *     public data: any[] = sampleTasks;
- * }
- * ```
- */
-let GanttSummaryTaskTemplateDirective = class GanttSummaryTaskTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-};
-GanttSummaryTaskTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoGanttSummaryTaskTemplate]'
-    }),
-    __param(0, Optional()),
-    __metadata("design:paramtypes", [TemplateRef])
-], GanttSummaryTaskTemplateDirective);
-
-/**
- * Represents a template that defines the text content section of the task component.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoGanttTaskContentTemplate` directive inside the `<kendo-gantt>` tag.
- *
- * The template context is set to the current data item.
- *
- * @example
- * ```ts-preview
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-gantt [kendoGanttHierarchyBinding]="data">
- *            <ng-template kendoGanttTaskContentTemplate let-dataItem>
- *                {{ dataItem.title }} - {{ dataItem.completionRatio * 100 }}% complete
- *            </ng-template>
- *        </kendo-gantt>
- *    `
- * })
- * class AppComponent {
- *    public data: any[] = sampleTasks;
- * }
- * ```
- */
-let GanttTaskContentTemplateDirective = class GanttTaskContentTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-};
-GanttTaskContentTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoGanttTaskContentTemplate]'
-    }),
-    __param(0, Optional()),
-    __metadata("design:paramtypes", [TemplateRef])
-], GanttTaskContentTemplateDirective);
-
+const isNavigationKey = (keyCode) => [
+    Keys.ArrowUp,
+    Keys.ArrowDown,
+    Keys.Home,
+    Keys.End
+].some(navigationKeyCode => keyCode === navigationKeyCode);
 /**
- * Represents the toolbar template of the Gantt.
- *
- * The template context has the following field:
- * - `position`&mdash;The position at which the toolbar template is rendered. The possible values are `'top'` and `'bottom'`.
- *
- * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *       <div class="example-config">
- *         <input type="radio" id="top" name="position" class="k-radio" value="top" checked (click)="positionChange($event)"/>
- *         <label class="k-radio-label" for="top">Top</label><br/>
- *         <input type="radio" id="bottom" name="position" class="k-radio" value="bottom" (click)="positionChange($event)"/>
- *         <label class="k-radio-label" for="bottom">Bottom</label><br/>
- *         <input type="radio" id="both" name="position" value="both" class="k-radio" (click)="positionChange($event)"/>
- *         <label class="k-radio-label" for="both">Both</label><br/>
- *       </div>
- *       <kendo-gantt [[kendoGanttHierarchyBinding]="data"]="data" style="height: 400px">
- *            <ng-template kendoGanttToolbarTemplate [position]="position" let-position="position">
- *                <button (click)="onClick()" class="k-button">Custom action</button>
- *            </ng-template>
- *        </kendo-gantt>
- *     `
- * })
- *
- * class AppComponent {
- *     public position: 'top' | 'bottom' | 'both' = 'top';
- *
- *     public data = [{
- *       id: 7,
- *       title: "Software validation, research and implementation",
- *       orderId: 0,
- *       start: new Date("2014-06-02T00:00:00.000Z"),
- *       end: new Date("2014-07-12T00:00:00.000Z"),
- *       completionRatio: 0.45708333333333334,
- *       isExpanded: true,
- *       children: [{
- *               id: 11,
- *               title: "Research",
- *               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");
- *     }
- * }
- *
- * ```
- */
-let ToolbarTemplateDirective = class ToolbarTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-        this._position = "top";
-    }
-    /**
-     * 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 position(position) {
-        this._position = position;
-    }
-    get position() {
-        return this._position;
+ * @hidden
+ */
+const isExpandCollapseKey = (keyCode, altKey) => {
+    return altKey && [
+        Keys.ArrowLeft,
+        Keys.ArrowRight
+    ].some(navigationKeyCode => keyCode === navigationKeyCode);
+};
+/**
+ * @hidden
+ */
+const isViewDigitKey = (keyCode) => [
+    Keys.Digit1,
+    NumpadKeys.Digit1,
+    Keys.Digit2,
+    NumpadKeys.Digit2,
+    Keys.Digit3,
+    NumpadKeys.Digit3,
+    Keys.Digit4,
+    NumpadKeys.Digit4
+].some(digitKeyCode => keyCode === digitKeyCode);
+/**
+ * @hidden
+ *
+ * Returns the corresponding view index for the pressed digit key (Digit 1 => 0, Digit 2 => 1, etc.).
+ */
+const getIndexFromViewDigitKeyCode = (keyCode) => {
+    switch (keyCode) {
+        case NumpadKeys.Digit1:
+        case Keys.Digit1: return 0;
+        case NumpadKeys.Digit2:
+        case Keys.Digit2: return 1;
+        case NumpadKeys.Digit3:
+        case Keys.Digit3: return 2;
+        case NumpadKeys.Digit4:
+        case Keys.Digit4: return 3;
+        default: return null;
     }
 };
-__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);
 
 /**
  * @hidden
  */
-let GanttTimelineComponent = class GanttTimelineComponent {
-    constructor(scrollSyncService, dependencyDomService, renderer, zone) {
-        this.scrollSyncService = scrollSyncService;
-        this.dependencyDomService = dependencyDomService;
-        this.renderer = renderer;
+let NavigationService = class NavigationService {
+    constructor(zone, renderer, scrollSyncService) {
         this.zone = zone;
-        this.hostClass = true;
-        this.dependencies = [];
-        // as all drag-and-drop operations are on the timeline container, use a single draggable instance
-        this.timelineContainerPress = new EventEmitter();
-        this.timelineContainerDrag = new EventEmitter();
-        this.timelineContainerRelease = new EventEmitter();
-        this.subscriptions = new Subscription();
-        this.subscriptions.add(
-        // task changes indicates change in row content, number, height, etc.
-        this.dependencyDomService.taskChanges
-            .pipe(filter(args => isPresent(args.timelineRow)), switchMap(args => this.zone.onStable.pipe(take(1), map(() => args))) // ensure the content is rendered
-        )
-            .subscribe(({ timelineRow }) => {
-            const timelineRowHeight = isDocumentAvailable() ? timelineRow.getBoundingClientRect().height : 0;
-            this.renderer.setStyle(this.timelineColumns.nativeElement, 'height', `${(this.rows || []).length * timelineRowHeight}px`);
-        }));
+        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 };
     }
     /**
-     * Specifies whether the draggable will attach or detach its pointer event listeners.
+     * Specifies whether navigation is enabled.
      */
-    get draggableEnabled() {
-        return this.renderDependencyDragClues;
+    get enabled() {
+        return this._enabled;
     }
-    ngAfterViewInit() {
-        const timelineHeader = this.timelineHeaderWrap.nativeElement;
-        const rightContainer = this.timelineContent.nativeElement;
-        this.scrollSyncService.registerElement(rightContainer, 'timeline');
-        this.scrollSyncService.registerElement(timelineHeader, 'header');
-        this.dependencyDomService.registerContentContainer(this.tasksContainer.nativeElement);
+    /**
+     * Used to retrieve read-only data about the currently active task.
+     */
+    get activeTask() {
+        return {
+            activeIndex: this.activeTimelineIndex,
+            isFocused: this.isTimelineFocused
+        };
+    }
+    /**
+     * Persists the expected TreeList focused cell coords.
+     * When the tasks in the Timeline are navigated through, the expected TreeList focus target should also change,
+     * in order to allow back-tabbing from the Timeline to the same row in the TreeList.
+     */
+    set activeTreeListCell(cell) {
+        this._activeTreeListCell = cell;
+    }
+    get activeTreeListCell() {
+        const firstAvailableIndex = 0;
+        const lastAvailableRowIndex = this.treeListHeaderRowsCount + this.gantt.treeList.view.data.length - 1;
+        const rowIndex = fitToRange(this._activeTreeListCell.rowIndex, firstAvailableIndex, lastAvailableRowIndex);
+        const lastAvailableColIndex = this.gantt.columns.length;
+        const colIndex = fitToRange(this._activeTreeListCell.colIndex, firstAvailableIndex, lastAvailableColIndex);
+        return { rowIndex, colIndex };
+    }
+    /**
+     * Persists the expected Timeline focused task index.
+     * When the cells in the TreeList are navigated through, the expected Timeline focus target should also change,
+     * in order to allow tabbing from the TreeList to the same row in the Timeline.
+     */
+    set activeTimelineIndex(index) {
+        this._activeTimelineIndex = index;
+    }
+    get activeTimelineIndex() {
+        const firstAvailableIndex = 0;
+        const lastAvailableIndex = this.gantt.treeList.view.data.length - 1;
+        return fitToRange(this._activeTimelineIndex, firstAvailableIndex, lastAvailableIndex);
+    }
+    /**
+     * The TreeList row index takes into account the header and filter rows.
+     * Used when translating Timeline task indices to TreeList row indices.
+     */
+    get treeListHeaderRowsCount() {
+        // captures nested group header rows + filter row if we start supporting it at some point
+        return this.treeListElement.querySelectorAll('.k-grid-header tr').length;
+    }
+    initialize({ gantt, host, treeListElement, timelineElement }) {
+        // no private property setters in TypeScript, so use a getter and a poorly named private prop for this value
+        this._enabled = true;
+        this.gantt = gantt;
+        this.host = host;
+        this.treeListElement = treeListElement;
+        this.timelineElement = timelineElement;
+        // TODO: fix in the splitter package and remove
+        // move the splitbar HTML element between the two panes to keep the visial tabbing order in tact
+        const splitbar = this.host.querySelector('.k-splitbar');
+        if (isPresent(splitbar) && isPresent(splitbar.previousElementSibling) && isPresent(splitbar.after)) {
+            splitbar.after(splitbar.previousElementSibling);
+        }
+        this.zone.runOutsideAngular(() => {
+            this.eventListenerDisposers = [
+                this.renderer.listen(this.host, 'keydown', this.handleKeydown.bind(this)),
+                this.renderer.listen(this.treeListElement, 'mousedown', this.focusTreeList.bind(this)),
+                this.renderer.listen(this.treeListElement, 'focusin', this.handleTreeListFocusIn.bind(this)),
+                this.renderer.listen(this.timelineElement, 'mousedown', this.handleTimelineMousedown.bind(this)),
+                this.renderer.listen(this.timelineElement, 'focusin', this.handleTimelineFocusIn.bind(this)),
+                this.renderer.listen(this.timelineElement, 'focusout', this.handleTimelineFocusOut.bind(this))
+            ];
+        });
     }
     ngOnDestroy() {
-        this.subscriptions.unsubscribe();
+        if (isPresent(this.eventListenerDisposers)) {
+            this.eventListenerDisposers.forEach(removeListener => removeListener());
+            this.eventListenerDisposers = null;
+        }
+        this.gantt = null;
+        this.host = null;
+        this.treeListElement = null;
+        this.timelineElement = null;
     }
-    isNonWorking(item) {
-        return item.hasOwnProperty('isWorking') && !item.isWorking;
+    /**
+     * Focuses either the last active TreeList cell, or the last active Timeline task,
+     * dependening on which of the two last held focus.
+     *
+     * Focuses the first TreeList cell by default.
+     */
+    focusLastActiveItem() {
+        if (this.gantt.data.length === 0 || (!this.treeListLastActive && !this.timelineLastActive)) {
+            this.focusCell(0, 0);
+        }
+        else if (this.treeListLastActive) {
+            const { rowIndex, colIndex } = this.activeTreeListCell;
+            this.gantt.treeList.focusCell(rowIndex, colIndex);
+        }
+        else if (this.timelineLastActive) {
+            this.focusTask(this.activeTimelineIndex);
+        }
     }
-};
-__decorate([
-    ViewChild('timelineContent', { static: true }),
-    __metadata("design:type", ElementRef)
-], GanttTimelineComponent.prototype, "timelineContent", void 0);
-__decorate([
-    ViewChild('timelineColumns', { static: true }),
-    __metadata("design:type", ElementRef)
-], GanttTimelineComponent.prototype, "timelineColumns", void 0);
-__decorate([
-    ViewChild('timelineHeaderWrap', { static: true }),
-    __metadata("design:type", ElementRef)
-], GanttTimelineComponent.prototype, "timelineHeaderWrap", void 0);
-__decorate([
-    ViewChild('tasksContainer', { static: true }),
-    __metadata("design:type", ElementRef)
-], GanttTimelineComponent.prototype, "tasksContainer", void 0);
-__decorate([
-    ViewChild('dragPopupContainer', { static: false, read: ViewContainerRef }),
-    __metadata("design:type", ViewContainerRef)
-], GanttTimelineComponent.prototype, "dragPopupContainer", void 0);
-__decorate([
-    ViewChild('dependencyDragCreatePolyline', { static: false }),
-    __metadata("design:type", ElementRef)
-], GanttTimelineComponent.prototype, "dependencyDragCreatePolyline", void 0);
-__decorate([
-    HostBinding('class.k-gantt-timeline'),
-    __metadata("design:type", Boolean)
-], GanttTimelineComponent.prototype, "hostClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], GanttTimelineComponent.prototype, "rows", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], GanttTimelineComponent.prototype, "slots", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], GanttTimelineComponent.prototype, "groupSlots", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], GanttTimelineComponent.prototype, "tableWidth", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], GanttTimelineComponent.prototype, "activeView", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", TemplateRef)
-], GanttTimelineComponent.prototype, "taskContentTemplate", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", TemplateRef)
-], GanttTimelineComponent.prototype, "taskTemplate", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", TemplateRef)
-], GanttTimelineComponent.prototype, "summaryTaskTemplate", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Function)
-], GanttTimelineComponent.prototype, "taskClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Function)
-], GanttTimelineComponent.prototype, "isTaskSelected", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], GanttTimelineComponent.prototype, "renderDependencyDragClues", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GanttTimelineComponent.prototype, "dragScrollSettings", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Function)
-], GanttTimelineComponent.prototype, "hasChildren", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], GanttTimelineComponent.prototype, "dependencies", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], GanttTimelineComponent.prototype, "timelineContainerPress", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], GanttTimelineComponent.prototype, "timelineContainerDrag", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], GanttTimelineComponent.prototype, "timelineContainerRelease", void 0);
-GanttTimelineComponent = __decorate([
-    Component({
-        selector: 'kendo-gantt-timeline',
-        template: `
-        <div class="k-timeline k-grid k-widget">
-            <div class="k-grid-header">
-                <div #timelineHeaderWrap class="k-grid-header-wrap">
-                    <table
-                        role="presentation"
-                        [style.width.px]="tableWidth"
-                    >
-                        <tbody
-                            kendoGanttHeaderTableBody
-                            [groupSlots]="groupSlots"
-                            [slots]="slots">
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-            <div
-                #timelineContent
-                class="k-grid-content"
-                kendoGanttTimelineScrollable
-                [scrollSettings]="dragScrollSettings"
-                kendoDraggable
-                [enableDrag]="draggableEnabled"
-                (kendoPress)="timelineContainerPress.emit($event)"
-                (kendoDrag)="timelineContainerDrag.emit($event)"
-                (kendoRelease)="timelineContainerRelease.emit($event)"
-            >
-                <div class="k-gantt-tables">
-                    <table
-                        class="k-gantt-rows"
-                        [style.width.px]="tableWidth"
-                        role="presentation"
-                    >
-                        <tbody>
-                            <tr *ngFor="let item of rows; let i = index;"
-                                [class.k-alt]="i % 2"
-                            >
-                                <td></td>
-                            </tr>
-                        </tbody>
-                    </table>
+    /**
+     * Focuses the targeted TreeList cell regardless of the last peresisted target.
+     */
+    focusCell(rowIndex, colIndex) {
+        this.activeTreeListCell = { rowIndex, colIndex };
+        this.activeTimelineIndex = rowIndex - this.treeListHeaderRowsCount;
+        this.gantt.treeList.focusCell(this.activeTreeListCell.rowIndex, this.activeTreeListCell.colIndex);
+    }
+    /**
+     * Focuses the targeted Timeline task regardless of the last peresisted target.
+     */
+    focusTask(index) {
+        this.activeTimelineIndex = index;
+        this.isTimelineFocused = true;
+        this.activeTreeListCell = {
+            rowIndex: index + this.treeListHeaderRowsCount,
+            colIndex: this.activeTreeListCell.colIndex
+        };
+        this.notifyTaskStatusChange();
+    }
+    /**
+     * Updates the focus target flags and notifies the active task to update its focused state.
+     */
+    handleTimelineFocusIn({ target }) {
+        this.treeListLastActive = false;
+        this.timelineLastActive = true;
+        this.isTimelineFocused = true;
+        if (isTask(target, this.timelineElement)) {
+            this.notifyTaskStatusChange();
+        }
+    }
+    /**
+     * Updates the timeline focus state flag and notifies the active task to update its focused state.
+     */
+    handleTimelineFocusOut({ relatedTarget }) {
+        this.isTimelineFocused = this.timelineElement.contains(relatedTarget);
+        // update the task element only if the new focus target is not in the Timeline - focus change between tasks is handled in the focusin handler
+        if (!isTask(relatedTarget, this.timelineElement)) {
+            this.notifyTaskStatusChange();
+        }
+    }
+    /**
+     * 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.
+     */
+    handleTreeListFocusIn(event) {
+        this.treeListLastActive = true;
+        this.timelineLastActive = false;
+        // if the previous focus target was in the TreeList, rely on its component navigation and just record the focused item index
+        if (this.treeListElement.contains(event.relatedTarget)) {
+            const { colIndex, rowIndex } = this.gantt.treeList.activeCell;
+            this.activeTreeListCell = { colIndex, rowIndex };
+        }
+        else {
+            // if the previous focus target was outside the TreeList, ensure the expected focus coords are used
+            const { rowIndex, colIndex } = this.activeTreeListCell;
+            this.gantt.treeList.focusCell(rowIndex, colIndex); // activates the target cell even if it has tabindex="-1"
+        }
+        this.activeTimelineIndex = this.gantt.treeList.activeCell.dataRowIndex;
+        this.notifyTaskStatusChange();
+        if (this.gantt.treeList.activeCell.dataRowIndex >= 0) {
+            this.scrollHorizontallyToTask(this.activeTimelineIndex);
+            this.scrollSyncService.syncScrollTop('treelist', 'timeline');
+        }
+    }
+    handleKeydown(event) {
+        const { keyCode, target, altKey } = event;
+        const isTimelineActive = this.timelineElement.contains(target);
+        if (isTimelineActive) {
+            if (isArrowUpDownKey(keyCode)) {
+                const direction = keyCode === Keys.ArrowUp ? -1 : 1;
+                this.activeTimelineIndex = this.activeTimelineIndex + direction;
+                this.activeTreeListCell = {
+                    rowIndex: this.activeTimelineIndex + this.treeListHeaderRowsCount,
+                    colIndex: this.activeTreeListCell.colIndex
+                };
+            }
+            else if (keyCode === Keys.Home) {
+                this.activeTimelineIndex = 0;
+                this.activeTreeListCell = {
+                    rowIndex: this.activeTimelineIndex + this.treeListHeaderRowsCount,
+                    colIndex: this.activeTreeListCell.colIndex
+                };
+            }
+            else if (keyCode === Keys.End) {
+                const lastAvailableIndex = this.gantt.treeList.view.data.length - 1;
+                this.activeTimelineIndex = lastAvailableIndex;
+                this.activeTreeListCell = {
+                    rowIndex: this.activeTimelineIndex + this.treeListHeaderRowsCount,
+                    colIndex: this.activeTreeListCell.colIndex
+                };
+            }
+            if (isNavigationKey(keyCode)) {
+                this.scrollHorizontallyToTask(this.activeTimelineIndex);
+                this.scrollSyncService.syncScrollTop('timeline', 'treelist');
+                this.notifyTaskStatusChange();
+                event.preventDefault();
+            }
+            if (keyCode === Keys.Space && hasObservers(this.gantt.selectionChange)) {
+                const task = this.gantt.renderedTreeListItems[this.activeTimelineIndex];
+                const selectionAction = this.gantt.getSelectionAction(event, task);
+                if (isPresent(task) && !this.gantt.isSameSelection(selectionAction, task)) {
+                    this.zone.run(() => this.gantt.notifySelectionChange(task, selectionAction));
+                }
+                event.preventDefault();
+            }
+            if (keyCode === Keys.Enter && hasObservers(this.gantt.taskClick)) {
+                const task = this.gantt.renderedTreeListItems[this.activeTimelineIndex];
+                if (isPresent(task)) {
+                    this.zone.run(() => this.gantt.notifyTaskClick(event, task, this.activeTimelineIndex));
+                }
+                event.preventDefault();
+            }
+            if (isExpandCollapseKey(keyCode, altKey)) {
+                const task = this.gantt.renderedTreeListItems[this.activeTimelineIndex];
+                if (isPresent(task) && this.gantt.hasChildren(task)) {
+                    const shouldExpand = keyCode === Keys.ArrowRight;
+                    const isExpanded = this.gantt.isExpanded(task);
+                    const sameState = shouldExpand === isExpanded;
+                    if (!sameState) {
+                        this.zone.run(() => {
+                            const expandEvent = { dataItem: task };
+                            // order is not arbitrary
+                            // the TreeList emits the individual events first, then the combined `expandStateChange` event
+                            const individualEmitter = shouldExpand ? this.gantt.rowExpand : this.gantt.rowCollapse;
+                            individualEmitter.emit(expandEvent);
+                            this.gantt.expandStateChange.emit(Object.assign({}, expandEvent, { expand: shouldExpand }));
+                            this.gantt.updateView();
+                            this.scrollHorizontallyToTask(this.activeTimelineIndex);
+                        });
+                    }
+                }
+                event.preventDefault();
+            }
+        }
+        const isTreeListActive = this.treeListElement.contains(target);
+        if (keyCode === Keys.Delete && (isTimelineActive || isTreeListActive) && hasObservers(this.gantt.taskDelete)) {
+            const taskIndex = isTreeListActive ?
+                this.gantt.treeList.activeCell.dataRowIndex :
+                this.activeTimelineIndex;
+            const task = this.gantt.renderedTreeListItems[taskIndex];
+            if (isPresent(task)) {
+                this.zone.run(() => this.gantt.notifyTaskDelete(task));
+            }
+        }
+        if (isViewDigitKey(keyCode) && !isToolbar(target, this.host) && !this.gantt.isInEditMode) {
+            const targetViewIndex = getIndexFromViewDigitKeyCode(keyCode);
+            const availableViews = this.gantt.views.toArray();
+            const targetView = availableViews[targetViewIndex];
+            if (isPresent(targetView) && targetView.type !== this.gantt.activeView) {
+                this.zone.run(() => this.gantt.changeActiveView(targetView.type));
+            }
+        }
+    }
+    /**
+     * Filters for task mousedown in the Timeline.
+     */
+    handleTimelineMousedown({ target }) {
+        if (isTask(target, this.host) && !isClearButton(target, this.host)) {
+            const taskIndex = getClosestTaskIndex(target, this.host);
+            this.focusTask(taskIndex);
+        }
+    }
+    /**
+     * Scrolls horizontally to the beginning of the target task if the beginning of its content is not in the viewport.
+     */
+    scrollHorizontallyToTask(index) {
+        const task = this.timelineElement.querySelectorAll('.k-task-wrap').item(index);
+        if (!isPresent(task)) {
+            return;
+        }
+        // scroll horizontally to the item if less than 200px from the beginning of its content are visible
+        const targetVisibleWidth = 200;
+        const isScrollBeforeTask = (this.timelineElement.clientWidth + this.timelineElement.scrollLeft) < (task.offsetLeft + targetVisibleWidth);
+        const isScrollAfterTask = this.timelineElement.scrollLeft > task.offsetLeft;
+        if (isScrollBeforeTask || isScrollAfterTask) {
+            this.timelineElement.scrollLeft = task.offsetLeft;
+        }
+    }
+    /**
+     * Focus the TreeList on TreeList mousedown.
+     * A nasty hack to trick `handleTreeListFocusIn` into regarding the previous focus target as again the TreeList.
+     * Otherwise cell clicks are wrongly overwritten in `handleTreeListFocusIn` and the click focus target is not respected.
+     */
+    focusTreeList() {
+        this.gantt.treeList.focus();
+    }
+    /**
+     * Fires the `taskStatusChanges` event with active and focused status retrieved from
+     * `this.activeTimelineIndex` and `this.isTimelineFocused`.
+     */
+    notifyTaskStatusChange() {
+        this.taskStatusChanges.next(this.activeTask);
+    }
+};
+NavigationService = __decorate([
+    Injectable(),
+    __metadata("design:paramtypes", [NgZone,
+        Renderer2,
+        ScrollSyncService])
+], NavigationService);
 
-                    <table
-                        #timelineColumns
-                        class="k-gantt-columns"
-                        role="presentation"
-                        [style.width.px]="tableWidth"
-                    >
-                        <colgroup>
-                            <col *ngFor="let item of slots">
-                        </colgroup>
+/**
+ * @hidden
+ */
+const DEFAULT_TREELIST_PANE_SETTINGS = Object.freeze({
+    collapsible: true,
+    collapsed: false
+});
+/**
+ * @hidden
+ */
+const DEFAULT_TIMELINE_PANE_SETTINGS = Object.freeze({
+    collapsible: true,
+    collapsed: false,
+    size: '50%',
+    resizable: true
+});
 
-                        <tbody>
-                            <tr>
-                                <td *ngFor="let item of slots"
-                                    [class.k-nonwork-hour]="isNonWorking(item)"
-                                >
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
+/**
+ * Represents a template that defines the whole content of the task component.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoGanttTaskTemplate` directive inside the `<kendo-gantt>` tag.
+ *
+ * The template context is set to the current data item. The following additional field is passed:
+ * - `elementWidth`&mdash;The current task wrapper element's calculated width in pixels based on its start and end date.
+ * Use it as an alias for a template variable by utilizing the `let-elementWidth="elementWidth"` syntax.
+ * Useful for calculations related to rendering custom elements representing the task progress.
+ *
+ * @example
+ * ```ts-preview
+ * _@Component({
+ *    selector: 'my-app',
+ *    template: `
+ *        <kendo-gantt [kendoGanttHierarchyBinding]="data">
+ *            <ng-template kendoGanttTaskTemplate let-dataItem let-elementWidth="elementWidth">
+ *                {{ dataItem.title }} - {{ dataItem.completionRatio * 100 }}% complete
+ *            </ng-template>
+ *        </kendo-gantt>
+ *    `
+ * })
+ * class AppComponent {
+ *    public data: any[] = sampleTasks;
+ * }
+ * ```
+ */
+let GanttTaskTemplateDirective = class GanttTaskTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+};
+GanttTaskTemplateDirective = __decorate([
+    Directive({
+        selector: '[kendoGanttTaskTemplate]'
+    }),
+    __param(0, Optional()),
+    __metadata("design:paramtypes", [TemplateRef])
+], GanttTaskTemplateDirective);
 
-                    <table
-                        #tasksContainer
-                        class="k-gantt-tasks"
-                        role="presentation"
-                        style="border-collapse: collapse;"
-                        [style.width.px]="tableWidth"
-                    >
-                        <tbody
-                            kendoGanttTasksTableBody
-                            [rows]="rows"
-                            [activeView]="activeView"
-                            [taskContentTemplate]="taskContentTemplate"
-                            [taskTemplate]="taskTemplate"
-                            [summaryTaskTemplate]="summaryTaskTemplate"
-                            [taskClass]="taskClass"
-                            [hasChildren]="hasChildren"
-                            [isTaskSelected]="isTaskSelected"
-                            [renderDependencyDragClues]="renderDependencyDragClues"
-                        >
-                        </tbody>
-                    </table>
-                </div>
-                <svg class="k-gantt-dependencies-svg">
-                    <polyline
-                        *ngFor="let dependency of dependencies"
-                        kendoGanttDependency
-                        [dependency]="dependency"
-                    />
-                    <polyline #dependencyDragCreatePolyline />
-                </svg>
+/**
+ * Represents a template that defines the whole content of the summary task component.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoGanttSummaryTaskTemplate` directive inside the `<kendo-gantt>` tag.
+ *
+ * The template context is set to the current data item. The following additional field is passed:
+ * - `elementWidth`&mdash;The current summary task wrapper element's calculated width in pixels based on its start and end date.
+ * Use it as an alias for a template variable by utilizing the `let-elementWidth="elementWidth"` syntax.
+ * Useful for calculations related to rendering custom elements representing the task progress.
+ *
+ * @example
+ * ```ts-preview
+ * _@Component({
+ *      selector: 'my-app',
+ *      template: `
+ *          <kendo-gantt [kendoGanttHierarchyBinding]="data">
+ *              <ng-template kendoGanttSummaryTaskTemplate let-dataItem let-elementWidth="elementWidth">
+ *                  <div style="color: white; font-size: 8px;">
+ *                      {{ dataItem.title }} - {{ dataItem.completionRatio * 100 }}% complete; width: {{ elementWidth }}
+ *                  </div>
+ *              </ng-template>
+ *          </kendo-gantt>
+ *      `
+ * })
+ * class AppComponent {
+ *     public data: any[] = sampleTasks;
+ * }
+ * ```
+ */
+let GanttSummaryTaskTemplateDirective = class GanttSummaryTaskTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+};
+GanttSummaryTaskTemplateDirective = __decorate([
+    Directive({
+        selector: '[kendoGanttSummaryTaskTemplate]'
+    }),
+    __param(0, Optional()),
+    __metadata("design:paramtypes", [TemplateRef])
+], GanttSummaryTaskTemplateDirective);
 
-                <!-- placeholder for the dependency drag popup; its position is not arbitrary - the popup is intended to be absolutely positioned inside the .k-grid-content element -->
-                <ng-container #dragPopupContainer></ng-container>
-            </div>
-        </div>
-    `
+/**
+ * Represents a template that defines the text content section of the task component.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoGanttTaskContentTemplate` directive inside the `<kendo-gantt>` tag.
+ *
+ * The template context is set to the current data item.
+ *
+ * @example
+ * ```ts-preview
+ * _@Component({
+ *    selector: 'my-app',
+ *    template: `
+ *        <kendo-gantt [kendoGanttHierarchyBinding]="data">
+ *            <ng-template kendoGanttTaskContentTemplate let-dataItem>
+ *                {{ dataItem.title }} - {{ dataItem.completionRatio * 100 }}% complete
+ *            </ng-template>
+ *        </kendo-gantt>
+ *    `
+ * })
+ * class AppComponent {
+ *    public data: any[] = sampleTasks;
+ * }
+ * ```
+ */
+let GanttTaskContentTemplateDirective = class GanttTaskContentTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+};
+GanttTaskContentTemplateDirective = __decorate([
+    Directive({
+        selector: '[kendoGanttTaskContentTemplate]'
+    }),
+    __param(0, Optional()),
+    __metadata("design:paramtypes", [TemplateRef])
+], GanttTaskContentTemplateDirective);
+
+/**
+ * Represents the toolbar template of the Gantt.
+ *
+ * The template context has the following field:
+ * - `position`&mdash;The position at which the toolbar template is rendered. The possible values are `'top'` and `'bottom'`.
+ *
+ * @example
+ * ```ts-preview
+ *
+ * _@Component({
+ *     selector: 'my-app',
+ *     template: `
+ *       <div class="example-config">
+ *         <input type="radio" id="top" name="position" class="k-radio" value="top" checked (click)="positionChange($event)"/>
+ *         <label class="k-radio-label" for="top">Top</label><br/>
+ *         <input type="radio" id="bottom" name="position" class="k-radio" value="bottom" (click)="positionChange($event)"/>
+ *         <label class="k-radio-label" for="bottom">Bottom</label><br/>
+ *         <input type="radio" id="both" name="position" value="both" class="k-radio" (click)="positionChange($event)"/>
+ *         <label class="k-radio-label" for="both">Both</label><br/>
+ *       </div>
+ *       <kendo-gantt [[kendoGanttHierarchyBinding]="data"]="data" style="height: 400px">
+ *            <ng-template kendoGanttToolbarTemplate [position]="position" let-position="position">
+ *                <button (click)="onClick()" class="k-button">Custom action</button>
+ *            </ng-template>
+ *        </kendo-gantt>
+ *     `
+ * })
+ *
+ * class AppComponent {
+ *     public position: 'top' | 'bottom' | 'both' = 'top';
+ *
+ *     public data = [{
+ *       id: 7,
+ *       title: "Software validation, research and implementation",
+ *       orderId: 0,
+ *       start: new Date("2014-06-02T00:00:00.000Z"),
+ *       end: new Date("2014-07-12T00:00:00.000Z"),
+ *       completionRatio: 0.45708333333333334,
+ *       isExpanded: true,
+ *       children: [{
+ *               id: 11,
+ *               title: "Research",
+ *               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");
+ *     }
+ * }
+ *
+ * ```
+ */
+let ToolbarTemplateDirective = class ToolbarTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+        this._position = "top";
+    }
+    /**
+     * 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 position(position) {
+        this._position = position;
+    }
+    get position() {
+        return this._position;
+    }
+};
+__decorate([
+    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);
+    __param(0, Optional()),
+    __metadata("design:paramtypes", [TemplateRef])
+], ToolbarTemplateDirective);
 
 /**
  * The base class for the column components of the Gantt.
@@ -2289,7 +2719,7 @@ const DEFAULT_DRAG_SCROLL_SETTINGS = {
  * ```
  */
 let GanttComponent = GanttComponent_1 = class GanttComponent {
-    constructor(timelineViewService, scrollSyncService, renderer, mapper, optionChangesService, dependencyDomService, editService, localizationService, hostElement, zone) {
+    constructor(timelineViewService, scrollSyncService, renderer, mapper, optionChangesService, dependencyDomService, editService, localizationService, hostElement, zone, navigationService) {
         this.timelineViewService = timelineViewService;
         this.scrollSyncService = scrollSyncService;
         this.renderer = renderer;
@@ -2300,6 +2730,15 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         this.localizationService = localizationService;
         this.hostElement = hostElement;
         this.zone = zone;
+        this.navigationService = navigationService;
+        /**
+         * @hidden
+         */
+        this.roleDescription = 'Gantt Chart';
+        /**
+         * @hidden
+         */
+        this.role = 'application';
         this.hostClasses = true;
         /**
          * Specifies a callback that determines if the given task is selected ([see example]({% slug selection_gantt %}#toc-custom-selection)).
@@ -2371,6 +2810,12 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
          * The end of the work week (index based).
          */
         this.workWeekEnd = 5;
+        /**
+         * If set to `true`, the user can use dedicated shortcuts to interact with the Gantt.
+         * By default, navigation is disabled for the TreeList and Timeline parts of the component,
+         * ([see example]({% slug keyboard_navigation_gantt %})).
+         */
+        this.navigable = false;
         /**
          * Indicates whether the Gantt columns will be resized during initialization so that they fit their headers and row content.
          * Columns with autoSize set to false are excluded.
@@ -2414,7 +2859,8 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
          */
         this.cellClose = new EventEmitter();
         /**
-         * Fires when the end user clicks the `Delete` button in the task editing dialog or the task delete icon.
+         * Fires when the end user clicks the `Delete` button in the task editing dialog,
+         * the task delete icon, or presses the `Delete` key on the keyboard when a task in the timeline is focused.
          * Use the event handler to open a confirmation dialog when necessary.
          */
         this.taskDelete = new EventEmitter();
@@ -2549,7 +2995,11 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         }));
         this.editService.getSelectedItem = this.getFirstSelectedItem.bind(this);
         this.editServiceSubscription.add(this.editService.showEditingDialog.subscribe(show => this.showEditingDialog = show));
-        this.editServiceSubscription.add(this.editService.showConfirmationDialog.subscribe(() => this.taskDelete.emit()));
+        this.editServiceSubscription.add(this.editService.taskDelete.subscribe(task => {
+            if (hasObservers(this.taskDelete)) {
+                this.zone.run(() => this.notifyTaskDelete(task));
+            }
+        }));
         this.editServiceSubscription.add(this.editService.editEvent.subscribe(args => {
             this[args.editResultType].emit({
                 taskFormGroup: args.taskFormGroup,
@@ -2560,6 +3010,9 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
             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(args => {
             const selectedItem = this.getFirstSelectedItem();
@@ -2583,6 +3036,12 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
     set toolbarTemplate(customToolbarTemplate) {
         this._customToolbarTemplate = customToolbarTemplate;
     }
+    get hostRoleDescriptionAttr() {
+        return this.roleDescription;
+    }
+    get hostRoleAttr() {
+        return this.role;
+    }
     get dir() {
         return this.direction;
     }
@@ -2760,6 +3219,15 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         }
         return this.treeList.view.data.map(item => item.data);
     }
+    /**
+     * @hidden
+     */
+    get viewItems() {
+        if (!isPresent(this.treeList)) {
+            return [];
+        }
+        return this.treeList.view.data;
+    }
     /**
      * @hidden
      */
@@ -2803,6 +3271,12 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
     get viewTypes() {
         return this.views.map(view => view.type);
     }
+    /**
+     * @hidden
+     */
+    get isInEditMode() {
+        return this.showEditingDialog || this.showConfirmationDialog || this.treeList.isEditing();
+    }
     ngOnChanges(changes) {
         if (anyChanged(['data', 'activeView', 'workWeekStart', 'workWeekEnd', 'workDayStart', 'workDayEnd'], changes)) {
             this.loadTimelineData();
@@ -2810,6 +3284,14 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
     }
     ngAfterViewInit() {
         this.updateTreeListMargin();
+        if (this.navigable) {
+            this.navigationService.initialize({
+                gantt: this,
+                host: this.hostElement.nativeElement,
+                treeListElement: this.treeList.wrapper.nativeElement,
+                timelineElement: this.timeline.timelineContent.nativeElement
+            });
+        }
         const leftContainer = this.treeList.wrapper.nativeElement.querySelector('kendo-treelist-list > div');
         this.scrollSyncService.registerElement(leftContainer, 'treelist');
     }
@@ -2827,6 +3309,34 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
             this.localizationSubscription.unsubscribe();
         }
     }
+    /**
+     * Focuses the last active cell or task in the Gantt.
+     * If no item has previously been focused, the first cell of the TreeList part will receive focus,
+     * ([see example]({% slug keyboard_navigation_gantt %}#toc-controlling-the-focus)).
+     */
+    focus() {
+        if (this.navigable) {
+            this.navigationService.focusLastActiveItem();
+        }
+    }
+    /**
+     * Focuses the targeted cell in the TreeList part of the component,
+     * ([see example]({% slug keyboard_navigation_gantt %}#toc-controlling-the-focus)).
+     */
+    focusCell(rowIndex, colIndex) {
+        if (this.navigable) {
+            this.navigationService.focusCell(rowIndex, colIndex);
+        }
+    }
+    /**
+     * Focuses the targeted task in the Timeline part of the component,
+     * ([see example]({% slug keyboard_navigation_gantt %}#toc-controlling-the-focus)).
+     */
+    focusTask(taskIndex) {
+        if (this.navigable) {
+            this.navigationService.focusTask(taskIndex);
+        }
+    }
     /**
      * Applies the minimum possible width for the specified column,
      * so that the whole text fits without wrapping. This method expects the Gantt
@@ -2911,6 +3421,15 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
     openConfirmationDialog() {
         this.showConfirmationDialog = true;
     }
+    /**
+     * @hidden
+     */
+    handleConfirmationDialogClose() {
+        this.showConfirmationDialog = false;
+        if (this.navigable) {
+            this.focus();
+        }
+    }
     /**
      * Opens a cell for editing.
      */
@@ -2995,7 +3514,7 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         if (hasObservers(this.taskClick)) {
             const taskIndex = getClosestTaskIndex(target, gantt);
             const task = this.renderedTreeListItems[taskIndex];
-            this.zone.run(() => this.emitTaskClick(event, task, taskIndex));
+            this.zone.run(() => this.notifyTaskClick(event, task, taskIndex));
         }
     }
     /**
@@ -3013,8 +3532,8 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         if ((hasObservers(this.selectionChange) && !this.isSameSelection(selectionAction, task)) ||
             hasObservers(this.taskClick)) {
             this.zone.run(() => {
-                this.emitSelectionChange(task, selectionAction);
-                this.emitTaskClick(event, task, taskIndex);
+                this.notifySelectionChange(task, selectionAction);
+                this.notifyTaskClick(event, task, taskIndex);
             });
         }
     }
@@ -3051,7 +3570,7 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         }
         const task = event.items.map(item => item.dataItem)[0]; // single selection only currently available
         const action = event.action;
-        this.emitSelectionChange(task, action);
+        this.notifySelectionChange(task, action);
     }
     /**
      * @hidden
@@ -3102,7 +3621,7 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
                 dataItem: task,
                 originalEvent: event,
                 sender: this,
-                rowIndex: taskIndex,
+                index: taskIndex,
                 type: 'dblclick'
             }));
         }
@@ -3113,16 +3632,35 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
     getText(token) {
         return this.localizationService.get(token);
     }
-    emitTaskClick(event, dataItem, itemIndex) {
+    /**
+     * @hidden
+     */
+    changeActiveView(view) {
+        if (view !== this.activeView) {
+            this.activeView = view;
+            this.loadTimelineData();
+            this.scrollSyncService.resetTimelineScrollLeft();
+            this.activeViewChange.emit(view);
+        }
+    }
+    /**
+     * @hidden
+     */
+    notifyTaskClick(event, dataItem, itemIndex) {
+        // simulates the TreeList `cellClick` event triggered by enter press (type: 'click')
+        const type = event instanceof KeyboardEvent ? 'click' : event.type;
         this.taskClick.emit({
             originalEvent: event,
             dataItem: dataItem,
-            rowIndex: itemIndex,
-            type: event.type,
+            index: itemIndex,
+            type: type,
             sender: this
         });
     }
-    emitSelectionChange(dataItem, action) {
+    /**
+     * @hidden
+     */
+    notifySelectionChange(dataItem, action) {
         if (this.isSameSelection(action, dataItem)) {
             return;
         }
@@ -3133,6 +3671,29 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         });
         this.treeList.updateView();
     }
+    /**
+     * @hidden
+     */
+    notifyTaskDelete(task) {
+        this.editService.dataItem = task;
+        this.taskDelete.emit({
+            item: getEditItem(task, this.treeList.view.data, this.mapper),
+            sender: this
+        });
+    }
+    /**
+     * @hidden
+     */
+    isSameSelection(action, dataItem) {
+        return action === 'select' && this.isSelected(dataItem);
+    }
+    /**
+     * @hidden
+     */
+    getSelectionAction({ ctrlKey, metaKey }, dataItem) {
+        const shouldToggleSelection = ctrlKey || metaKey;
+        return (shouldToggleSelection && this.isSelected(dataItem)) ? 'remove' : 'select';
+    }
     updateTreeListGroupClass(columns = this.columns) {
         if (!isPresent(this.treeList)) {
             return;
@@ -3159,13 +3720,6 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         }
         return this.views.find(view => view.type === this.activeView);
     }
-    isSameSelection(action, dataItem) {
-        return action === 'select' && this.isSelected(dataItem);
-    }
-    getSelectionAction({ ctrlKey, metaKey }, dataItem) {
-        const shouldToggleSelection = ctrlKey || metaKey;
-        return (shouldToggleSelection && this.isSelected(dataItem)) ? 'remove' : 'select';
-    }
     getFirstSelectedItem() {
         const isSelectedCallback = this.isSelected || isSelected;
         const loadedItems = this.renderedTreeListItems || [];
@@ -3241,6 +3795,24 @@ __decorate([
     ContentChildren(ToolbarTemplateDirective),
     __metadata("design:type", QueryList)
 ], GanttComponent.prototype, "toolbarTemplateChildren", void 0);
+__decorate([
+    Input('aria-roledescription'),
+    __metadata("design:type", String)
+], GanttComponent.prototype, "roleDescription", void 0);
+__decorate([
+    HostBinding('attr.aria-roledescription'),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [])
+], GanttComponent.prototype, "hostRoleDescriptionAttr", null);
+__decorate([
+    Input('role'),
+    __metadata("design:type", String)
+], GanttComponent.prototype, "role", void 0);
+__decorate([
+    HostBinding('attr.role'),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [])
+], GanttComponent.prototype, "hostRoleAttr", null);
 __decorate([
     HostBinding('class.k-gantt'),
     __metadata("design:type", Boolean)
@@ -3346,6 +3918,10 @@ __decorate([
     Input(),
     __metadata("design:type", Number)
 ], GanttComponent.prototype, "workWeekEnd", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttComponent.prototype, "navigable", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Object),
@@ -3511,7 +4087,8 @@ GanttComponent = GanttComponent_1 = __decorate([
             MappingService,
             OptionChangesService,
             EditService,
-            TimelineScrollService
+            TimelineScrollService,
+            NavigationService
         ],
         template: `
         <ng-container kendoGanttLocalizedMessages
@@ -3738,6 +4315,7 @@ GanttComponent = GanttComponent_1 = __decorate([
                         [data]="data"
                         [hasChildren]="hasChildren"
                         [fetchChildren]="fetchChildren"
+                        [navigable]="navigable"
                         [isExpanded]="isExpanded"
                         [autoSize]="columnsAutoSize"
                         [columnMenu]="columnMenu"
@@ -3828,7 +4406,7 @@ GanttComponent = GanttComponent_1 = __decorate([
                         *ngIf="views && views.length"
                         [renderDependencyDragClues]="renderDependencyDragClues"
                         [dragScrollSettings]="dragScrollSettings"
-                        [rows]="renderedTreeListItems"
+                        [rows]="viewItems"
                         [slots]="timelineSlots"
                         [groupSlots]="timelineGroupSlots"
                         [tableWidth]="tableWidth"
@@ -3838,7 +4416,8 @@ GanttComponent = GanttComponent_1 = __decorate([
                         [summaryTaskTemplate]="summaryTaskTemplate?.templateRef"
                         [taskClass]="taskClass"
                         [dependencies]="dependencies"
-                        [hasChildren]="hasChildren"
+                        [isExpanded]="isExpanded"
+                        [selectable]="selectable"
                         [isTaskSelected]="isTaskSelected"
                         [kendoEventsOutsideAngular]="{
                             click: handleTimelineClick,
@@ -3866,12 +4445,12 @@ GanttComponent = GanttComponent_1 = __decorate([
             [width]="575"
             [height]="170"
             [title]="getText('confirmationDialogTitle')"
-            (close)="showConfirmationDialog = false;">
+            (close)="handleConfirmationDialogClose()">
             <span>{{ getText('confirmationDialogContent') }}</span>
             <kendo-dialog-actions layout="normal">
                 <kendo-treelist-spacer></kendo-treelist-spacer>
                 <button kendoButton [primary]="true" (click)="handleDeleteConfirmation()">{{ getText('deleteButtonText') }}</button>
-                <button kendoButton (click)="showConfirmationDialog = false;">{{ getText('cancelButtonText') }}</button>
+                <button kendoButton (click)="handleConfirmationDialogClose()">{{ getText('cancelButtonText') }}</button>
             </kendo-dialog-actions>
         </kendo-dialog>
    `
@@ -3885,7 +4464,8 @@ GanttComponent = GanttComponent_1 = __decorate([
         EditService,
         LocalizationService,
         ElementRef,
-        NgZone])
+        NgZone,
+        NavigationService])
 ], GanttComponent);
 
 /**
@@ -3908,8 +4488,8 @@ let GanttTasksTableBodyComponent = class GanttTasksTableBodyComponent {
             this.dependencyDomService.registerTimelineRow(timelineRow.nativeElement);
         }
     }
-    isMileStone(task) {
-        return !this.hasChildren(task) && isEqual(this.mapper.extractFromTask(task, 'start'), this.mapper.extractFromTask(task, 'end'));
+    isMileStone(item) {
+        return !item.hasChildren && isEqual(this.mapper.extractFromTask(item.data, 'start'), this.mapper.extractFromTask(item.data, 'end'));
     }
 };
 __decorate([
@@ -3917,6 +4497,10 @@ __decorate([
     __metadata("design:type", ElementRef),
     __metadata("design:paramtypes", [ElementRef])
 ], GanttTasksTableBodyComponent.prototype, "timelineRow", null);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttTasksTableBodyComponent.prototype, "selectable", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Array)
@@ -3944,7 +4528,7 @@ __decorate([
 __decorate([
     Input(),
     __metadata("design:type", Function)
-], GanttTasksTableBodyComponent.prototype, "hasChildren", void 0);
+], GanttTasksTableBodyComponent.prototype, "isExpanded", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Function)
@@ -3961,35 +4545,42 @@ GanttTasksTableBodyComponent = __decorate([
             <td>
                 <kendo-gantt-milestone-task
                     *ngIf="isMileStone(item); else task"
-                    [dataItem]="item"
+                    [dataItem]="item.data"
+                    [level]="item.level"
                     [activeView]="activeView"
                     [taskClass]="taskClass"
+                    [selectable]="selectable"
                     [isSelected]="isTaskSelected"
-                    [attr.data-task-index]="index"
+                    [index]="index"
                     [renderDependencyDragClues]="renderDependencyDragClues"
                 >
                 </kendo-gantt-milestone-task>
                 <ng-template #task>
                     <kendo-gantt-summary-task
-                        *ngIf="hasChildren(item)"
-                        [dataItem]="item"
+                        *ngIf="item.hasChildren"
+                        [dataItem]="item.data"
+                        [level]="item.level"
                         [template]="summaryTaskTemplate"
                         [activeView]="activeView"
                         [taskClass]="taskClass"
+                        [selectable]="selectable"
                         [isSelected]="isTaskSelected"
-                        [attr.data-task-index]="index"
+                        [isExpanded]="isExpanded"
+                        [index]="index"
                         [renderDependencyDragClues]="renderDependencyDragClues"
                     >
                     </kendo-gantt-summary-task>
                     <kendo-gantt-task
-                        *ngIf="!hasChildren(item)"
-                        [dataItem]="item"
+                        *ngIf="!item.hasChildren"
+                        [dataItem]="item.data"
+                        [level]="item.level"
                         [taskContentTemplate]="taskContentTemplate"
                         [taskTemplate]="taskTemplate"
                         [activeView]="activeView"
                         [taskClass]="taskClass"
+                        [selectable]="selectable"
                         [isSelected]="isTaskSelected"
-                        [attr.data-task-index]="index"
+                        [index]="index"
                         [renderDependencyDragClues]="renderDependencyDragClues"
                     >
                     </kendo-gantt-task>
@@ -4035,22 +4626,32 @@ const slotUnitDuration = {
     week: MS_PER_DAY,
     month: MS_PER_DAY * 7
 };
+const FOCUSED_CLASS = 'k-focus';
 /**
  * @hidden
  */
 class GanttTaskBase {
     constructor(mapper, // left public to be available for usage in the templates
-    timelineViewService, dependencyDomService, optionChangesService, cdr) {
+    timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
         this.mapper = mapper;
         this.timelineViewService = timelineViewService;
         this.dependencyDomService = dependencyDomService;
         this.optionChangesService = optionChangesService;
         this.cdr = cdr;
+        this.navigationService = navigationService;
         this.wrapperClass = true;
-        this.viewChangesSubscription = new Subscription();
-        this.viewChangesSubscription.add(this.optionChangesService.viewChanges.subscribe(() => {
-            this.cdr.markForCheck();
-        }));
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(this.optionChangesService.viewChanges
+            .subscribe(() => this.cdr.markForCheck()));
+        this.subscriptions.add(this.navigationService.taskStatusChanges
+            .subscribe(this.updateActiveState.bind(this)));
+    }
+    get taskIndexAttribute() {
+        return this.index;
+    }
+    get ariaSelected() {
+        // assinging null will not render the attribute at all (desired in selectable="false" mode)
+        return this.selectable ? String(this.isSelected(this.dataItem)) : null;
     }
     get slotUnitDuration() {
         return slotUnitDuration[this.activeView];
@@ -4094,18 +4695,38 @@ class GanttTaskBase {
         else if (isPresent(changes.activeView)) {
             this.dependencyDomService.notifyChanges();
         }
+        if (this.navigationService.enabled && isPresent(changes.index)) {
+            this.updateActiveState(this.navigationService.activeTask);
+        }
     }
     ngOnDestroy() {
         if (isPresent(this.dataItem)) {
             this.dependencyDomService.unregisterTask(this.dataItem);
         }
-        this.viewChangesSubscription.unsubscribe();
+        this.subscriptions.unsubscribe();
+    }
+    updateActiveState({ activeIndex, isFocused }) {
+        const isActive = activeIndex === this.index;
+        const tabindex = isActive ? '0' : '-1';
+        this.taskElement.nativeElement.setAttribute('tabindex', tabindex);
+        if (isActive && isFocused) {
+            this.taskElement.nativeElement.focus();
+            this.taskElement.nativeElement.classList.add(FOCUSED_CLASS);
+        }
+        else {
+            this.taskElement.nativeElement.classList.remove(FOCUSED_CLASS);
+        }
     }
 }
 __decorate([
     HostBinding('class.k-task-wrap'),
     __metadata("design:type", Boolean)
 ], GanttTaskBase.prototype, "wrapperClass", void 0);
+__decorate([
+    HostBinding('attr.data-task-index'),
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [])
+], GanttTaskBase.prototype, "taskIndexAttribute", null);
 __decorate([
     ViewChild('task', { static: true }),
     __metadata("design:type", ElementRef)
@@ -4114,10 +4735,22 @@ __decorate([
     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)
@@ -4141,14 +4774,14 @@ var GanttTaskComponent_1;
  * @hidden
  */
 let GanttTaskComponent = GanttTaskComponent_1 = class GanttTaskComponent extends GanttTaskBase {
-    constructor(editService, touchEnabled$$1, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
-        super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr);
+    constructor(editService, touchEnabled$$1, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
+        super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService);
         this.editService = editService;
         this.touchEnabled = touchEnabled$$1;
     }
     onTaskDelete() {
         this.editService.dataItem = this.dataItem;
-        this.editService.showConfirmationDialog.next();
+        this.editService.taskDelete.next(this.dataItem);
     }
 };
 __decorate([
@@ -4172,15 +4805,19 @@ GanttTaskComponent = GanttTaskComponent_1 = __decorate([
         <div
             #task
             class="k-task k-task-single"
+            role="treeitem"
             [ngClass]="taskClass(dataItem)"
             [style.width.px]="taskWidth"
             [attr.title]="mapper.extractFromTask(dataItem, 'title')"
             [class.k-state-selected]="isSelected(dataItem)"
+            [attr.aria-selected]="ariaSelected"
+            [attr.aria-level]="level + 1"
         >
             <ng-container *ngIf="!taskTemplate">
                 <div
                     class="k-task-complete"
                     [style.width.px]="completionOverlayWidth"
+                        aria-hidden="true"
                 >
                 </div>
                 <div class="k-task-content">
@@ -4195,10 +4832,17 @@ GanttTaskComponent = GanttTaskComponent_1 = __decorate([
                         >
                         </ng-template>
                     </div>
-                    <span class="k-task-actions">
+                    <span
+                        class="k-task-actions"
+                        aria-hidden="true"
+                    >
                         <span
-                            (click)="onTaskDelete()"
-                            class="k-link k-task-delete">
+                            class="k-link k-task-delete"
+                            [kendoEventsOutsideAngular]="{
+                                click: onTaskDelete
+                            }"
+                            [scope]="this"
+                        >
                             <span class="k-icon k-i-close"></span>
                         </span>
                     </span>
@@ -4226,14 +4870,24 @@ GanttTaskComponent = GanttTaskComponent_1 = __decorate([
             >
             </div>
         </ng-container>
-    `
+    `,
+        styles: [`
+        .k-task.k-focus {
+            box-shadow: 0 0 4px 3px grey;
+            outline: none;
+        }
+        .k-task.k-focus.k-state-selected {
+            box-shadow: 0 0 4px 3px #ffaea8;
+        }
+    `]
     }),
     __param(1, Inject(TOUCH_ENABLED)),
     __metadata("design:paramtypes", [EditService, Boolean, MappingService,
         TimelineViewService,
         DependencyDomService,
         OptionChangesService,
-        ChangeDetectorRef])
+        ChangeDetectorRef,
+        NavigationService])
 ], GanttTaskComponent);
 
 var GanttSummaryTaskComponent_1;
@@ -4241,11 +4895,17 @@ var GanttSummaryTaskComponent_1;
  * @hidden
  */
 let GanttSummaryTaskComponent = GanttSummaryTaskComponent_1 = class GanttSummaryTaskComponent extends GanttTaskBase {
-    constructor(touchEnabled$$1, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
-        super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr);
+    constructor(touchEnabled$$1, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
+        super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService);
         this.touchEnabled = touchEnabled$$1;
         this.summaryWrapperClass = true;
     }
+    get ariaExpanded() {
+        // if no callback is provided, all child items are displayed and the item is regarded as expanded
+        // replicates the TreeList aria-expanded behavior
+        const isExpanded = !isPresent(this.isExpanded) || this.isExpanded(this.dataItem);
+        return String(isExpanded);
+    }
 };
 __decorate([
     HostBinding('class.k-summary-wrap'),
@@ -4255,6 +4915,10 @@ __decorate([
     Input(),
     __metadata("design:type", TemplateRef)
 ], GanttSummaryTaskComponent.prototype, "template", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], GanttSummaryTaskComponent.prototype, "isExpanded", void 0);
 GanttSummaryTaskComponent = GanttSummaryTaskComponent_1 = __decorate([
     Component({
         selector: 'kendo-gantt-summary-task',
@@ -4267,11 +4931,15 @@ GanttSummaryTaskComponent = GanttSummaryTaskComponent_1 = __decorate([
         template: `
         <div
             #task
+            role="treeitem"
             class="k-task k-task-summary"
             [ngClass]="taskClass(dataItem)"
             [style.width.px]="taskWidth"
             [attr.title]="mapper.extractFromTask(dataItem, 'title')"
             [class.k-state-selected]="isSelected(dataItem)"
+            [attr.aria-selected]="ariaSelected"
+            [attr.aria-expanded]="ariaExpanded"
+            [attr.aria-level]="level + 1"
         >
             <div *ngIf="!template; else summaryTemplate"
                 class="k-task-summary-progress"
@@ -4304,14 +4972,24 @@ GanttSummaryTaskComponent = GanttSummaryTaskComponent_1 = __decorate([
             >
             </div>
         </ng-container>
-    `
+    `,
+        styles: [`
+        .k-task.k-focus {
+            box-shadow: 0 0 4px 3px grey;
+            outline: none;
+        }
+        .k-task.k-focus.k-state-selected {
+            box-shadow: 0 0 4px 3px #ffaea8;
+        }
+    `]
     }),
     __param(0, Inject(TOUCH_ENABLED)),
     __metadata("design:paramtypes", [Boolean, MappingService,
         TimelineViewService,
         DependencyDomService,
         OptionChangesService,
-        ChangeDetectorRef])
+        ChangeDetectorRef,
+        NavigationService])
 ], GanttSummaryTaskComponent);
 
 var GanttMilestoneTaskComponent_1;
@@ -4319,8 +4997,8 @@ var GanttMilestoneTaskComponent_1;
  * @hidden
  */
 let GanttMilestoneTaskComponent = GanttMilestoneTaskComponent_1 = class GanttMilestoneTaskComponent extends GanttTaskBase {
-    constructor(touchEnabled$$1, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
-        super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr);
+    constructor(touchEnabled$$1, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
+        super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService);
         this.touchEnabled = touchEnabled$$1;
         this.milestoneWrapperClass = true;
     }
@@ -4341,10 +5019,13 @@ GanttMilestoneTaskComponent = GanttMilestoneTaskComponent_1 = __decorate([
         template: `
         <div
             #task
+            role="treeitem"
             class="k-task k-task-milestone"
             [ngClass]="taskClass(dataItem)"
             [attr.title]="mapper.extractFromTask(dataItem, 'title')"
             [class.k-state-selected]="isSelected(dataItem)"
+            [attr.aria-selected]="ariaSelected"
+            [attr.aria-level]="level + 1"
         >
         </div>
         <ng-container *ngIf="renderDependencyDragClues">
@@ -4359,14 +5040,24 @@ GanttMilestoneTaskComponent = GanttMilestoneTaskComponent_1 = __decorate([
             >
             </div>
         </ng-container>
-    `
+    `,
+        styles: [`
+        .k-task.k-focus {
+            box-shadow: 0 0 4px 3px grey;
+            outline: none;
+        }
+        .k-task.k-focus.k-state-selected {
+            box-shadow: 0 0 4px 3px #ffaea8;
+        }
+    `]
     }),
     __param(0, Inject(TOUCH_ENABLED)),
     __metadata("design:paramtypes", [Boolean, MappingService,
         TimelineViewService,
         DependencyDomService,
         OptionChangesService,
-        ChangeDetectorRef])
+        ChangeDetectorRef,
+        NavigationService])
 ], GanttMilestoneTaskComponent);
 
 /**
@@ -4562,10 +5253,10 @@ SelectableDirective = __decorate([
  * @hidden
  */
 let ToolbarComponent = class ToolbarComponent {
-    constructor(gantt, scrollSyncService) {
+    constructor(gantt) {
         this.gantt = gantt;
-        this.scrollSyncService = scrollSyncService;
         this.context = {};
+        this.role = 'toolbar';
     }
     set position(value) {
         this.context.position = this._position = value;
@@ -4581,13 +5272,14 @@ let ToolbarComponent = class ToolbarComponent {
         const templatePosition = ganttToolbarTemplate ? ganttToolbarTemplate.position : null;
         return ganttToolbarTemplate && (templatePosition === 'both' || templatePosition === this.position);
     }
-    onViewChange(e) {
-        this.gantt.activeView = e; // TODO: may be load the timeline data directly in an activeView setter?
-        this.gantt.loadTimelineData();
-        this.gantt.activeViewChange.emit(e);
-        this.scrollSyncService.resetTimelineScrollLeft();
+    handleViewChange(view) {
+        this.gantt.changeActiveView(view);
     }
 };
+__decorate([
+    HostBinding('attr.role'),
+    __metadata("design:type", String)
+], ToolbarComponent.prototype, "role", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Boolean)
@@ -4612,7 +5304,7 @@ ToolbarComponent = __decorate([
                 *ngIf="showViewSelector"
                 [views]="gantt.viewTypes"
                 [activeView]="gantt.activeView"
-                (activeViewChange)="onViewChange($event)"></kendo-gantt-view-selector>
+                (activeViewChange)="handleViewChange($event)"></kendo-gantt-view-selector>
         </ng-container>
         <ng-template
             *ngIf="renderTemplate"
@@ -4622,8 +5314,7 @@ ToolbarComponent = __decorate([
         </ng-template>
     `
     }),
-    __metadata("design:paramtypes", [GanttComponent,
-        ScrollSyncService])
+    __metadata("design:paramtypes", [GanttComponent])
 ], ToolbarComponent);
 
 /**
@@ -4678,7 +5369,9 @@ ViewSelectorComponent = __decorate([
     Component({
         selector: 'kendo-gantt-view-selector',
         template: `
-        <select class="k-dropdown k-views-dropdown"
+        <select
+            class="k-dropdown k-views-dropdown"
+            aria-label="View Selector"
             [value]="activeView"
             (change)="activeViewChange.emit($event.target.value)">
             <option *ngFor="let view of views" [value]="view">{{getViewTypeText(view)}}</option>
@@ -5602,8 +6295,8 @@ let EditDialogComponent = class EditDialogComponent {
     handleEditingResult(editResultType) {
         this.editService.triggerEditEvent(editResultType);
     }
-    onTaskDelete() {
-        this.editService.showConfirmationDialog.next();
+    handleTaskDelete() {
+        this.editService.taskDelete.next(this.editService.dataItem);
     }
 };
 __decorate([
@@ -5650,7 +6343,15 @@ EditDialogComponent = __decorate([
             </kendo-tabstrip>
 
             <kendo-dialog-actions layout="normal">
-                <button kendoButton (click)="onTaskDelete()">{{ getText('deleteButtonText') }}</button>
+                <button
+                    kendoButton
+                    [kendoEventsOutsideAngular]="{
+                        click: handleTaskDelete
+                    }"
+                    [scope]="this"
+                >
+                    {{ getText('deleteButtonText') }}
+                </button>
                 <kendo-treelist-spacer></kendo-treelist-spacer>
                 <button kendoButton [primary]="true" (click)="handleEditingResult('save')">{{ getText('saveButtonText') }}</button>
                 <button kendoButton (click)="handleEditingResult('cancel')">{{ getText('cancelButtonText') }}</button>
@@ -6408,4 +7109,4 @@ GanttModule = __decorate([
  * 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 };