@progress/kendo-angular-gantt 1.0.1 → 2.0.0-dev.202204150748

package/{dist/es2015 → esm2015}/gantt.component.js

@@ -2,15 +2,13 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
-var GanttComponent_1;
-import { Component, forwardRef, HostBinding, Input, Output, EventEmitter, ViewChild, ContentChildren, ContentChild, QueryList, isDevMode, Renderer2, ElementRef, NgZone } from '@angular/core';
+import { Component, forwardRef, HostBinding, Input, Output, EventEmitter, ViewChild, ContentChildren, ContentChild, QueryList, isDevMode } from '@angular/core';
 import { TreeListComponent, DataBoundTreeComponent, ExpandableTreeComponent } from '@progress/kendo-angular-treelist';
-import { Day } from '@progress/kendo-date-math';
 import { Subscription } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
-import { anyChanged, hasObservers } from '@progress/kendo-angular-common';
+import { anyChanged, hasObservers, Keys } from '@progress/kendo-angular-common';
+import { getIndexFromViewDigitKeyCode, isArrowUpDownKey, isExpandCollapseKey, isNavigationKey, isViewDigitKey } from './navigation/utils';
 import { GanttTimelineComponent } from './timeline/gantt-timeline.component';
 import { GanttColumnBase } from './columns/columns';
 import { fetchChildren, hasChildren, isSelected, rowClassCallback, taskClassCallback } from './common/default-callbacks';
@@ -28,7 +26,7 @@ import { EditService } from './editing/edit.service';
 import { TimelineScrollService } from './scrolling/timeline-scroll.service';
 import { GanttLocalizationService } from './localization/gantt-localization.service';
 import { NavigationService } from './navigation/navigation.service';
-import { areParentChild, getClosestTaskIndex, isClearButton, isColumnGroup, isPresent, isTask, normalizeGanttData, scrollbarWidth } from './utils';
+import { areParentChild, getClosestTaskIndex, isClearButton, isColumnGroup, isPresent, isTask, isToolbar, normalizeGanttData, scrollbarWidth } from './utils';
 import { DEFAULT_TIMELINE_PANE_SETTINGS, DEFAULT_TREELIST_PANE_SETTINGS } from './models/splitter-pane-options.interface';
 import { GanttTaskTemplateDirective } from './template-directives/task-template.directive';
 import { GanttSummaryTaskTemplateDirective } from './template-directives/summary-task-template.directive';
@@ -36,6 +34,26 @@ import { GanttTaskContentTemplateDirective } from './template-directives/task-co
 import { ToolbarTemplateDirective } from './toolbar/toolbar-template.directive';
 import { ViewBase } from './timeline/view-base';
 import { getEditItem } from './editing/utils';
+import { CellCloseEvent } from './models/events/cell-close-event.interface';
+import * as i0 from "@angular/core";
+import * as i1 from "./timeline/timeline-view.service";
+import * as i2 from "./scrolling/scroll-sync.service";
+import * as i3 from "./common/mapping.service";
+import * as i4 from "./common/option-changes.service";
+import * as i5 from "./dependencies/dependency-dom.service";
+import * as i6 from "./editing/edit.service";
+import * as i7 from "@progress/kendo-angular-l10n";
+import * as i8 from "./navigation/navigation.service";
+import * as i9 from "./toolbar/toolbar.component";
+import * as i10 from "@progress/kendo-angular-layout";
+import * as i11 from "@progress/kendo-angular-treelist";
+import * as i12 from "./timeline/gantt-timeline.component";
+import * as i13 from "./editing/edit-dialog.component";
+import * as i14 from "@progress/kendo-angular-dialog";
+import * as i15 from "./localization/localized-messages.directive";
+import * as i16 from "@angular/common";
+import * as i17 from "@progress/kendo-angular-common";
+import * as i18 from "@progress/kendo-angular-buttons";
 const TREELIST_GROUP_COLUMNS_CLASS = 'k-gantt-treelist-nested-columns';
 const DEFAULT_VIEW = 'week';
 const DEFAULT_DRAG_SCROLL_SETTINGS = {
@@ -115,8 +133,8 @@ const DEFAULT_DRAG_SCROLL_SETTINGS = {
  * }
  * ```
  */
-let GanttComponent = GanttComponent_1 = class GanttComponent {
-    constructor(timelineViewService, scrollSyncService, renderer, mapper, optionChangesService, dependencyDomService, editService, localizationService, hostElement, zone, navigationService) {
+export class GanttComponent {
+    constructor(timelineViewService, scrollSyncService, renderer, mapper, optionChangesService, dependencyDomService, editService, localizationService, hostElement, zone, navigation) {
         this.timelineViewService = timelineViewService;
         this.scrollSyncService = scrollSyncService;
         this.renderer = renderer;
@@ -127,7 +145,7 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         this.localizationService = localizationService;
         this.hostElement = hostElement;
         this.zone = zone;
-        this.navigationService = navigationService;
+        this.navigation = navigation;
         /**
          * @hidden
          */
@@ -549,17 +567,17 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         if (this._timelinePaneOptions.collapsed && !value.collapsed) {
             this.dependencyDomService.notifyChanges();
         }
-        this._timelinePaneOptions = Object.assign({}, DEFAULT_TIMELINE_PANE_SETTINGS, value);
+        this._timelinePaneOptions = Object.assign(Object.assign({}, DEFAULT_TIMELINE_PANE_SETTINGS), value);
     }
     get timelinePaneOptions() {
-        return Object.assign({}, this._timelinePaneOptions, { size: this.treeListPaneOptions.collapsed ? '100%' : this._timelinePaneOptions.size });
+        return Object.assign(Object.assign({}, this._timelinePaneOptions), { size: this.treeListPaneOptions.collapsed ? '100%' : this._timelinePaneOptions.size });
     }
     /**
      * The options of the treelist splitter pane.
      * By default the pane is `collapsible` and not `collapsed`.
      */
     set treeListPaneOptions(value) {
-        this._treeListPaneOptions = Object.assign({}, DEFAULT_TREELIST_PANE_SETTINGS, value);
+        this._treeListPaneOptions = Object.assign(Object.assign({}, DEFAULT_TREELIST_PANE_SETTINGS), value);
     }
     get treeListPaneOptions() {
         return this._treeListPaneOptions;
@@ -602,7 +620,7 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
      * [see example]({% slug editing_drag_create_dependencies_gantt %}#toc-auto-scrolling).
      */
     set dragScrollSettings(settings) {
-        this._dragScrollSettings = Object.assign({}, DEFAULT_DRAG_SCROLL_SETTINGS, settings);
+        this._dragScrollSettings = Object.assign(Object.assign({}, DEFAULT_DRAG_SCROLL_SETTINGS), settings);
     }
     get dragScrollSettings() {
         return this._dragScrollSettings;
@@ -681,12 +699,17 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
     }
     ngAfterViewInit() {
         this.updateTreeListMargin();
+        this.zone.runOutsideAngular(() => {
+            this.keydownListenerDisposers = this.renderer.listen(this.hostElement.nativeElement, 'keydown', this.handleKeydown.bind(this));
+        });
         if (this.navigable) {
-            this.navigationService.initialize({
-                gantt: this,
+            this.navigation.initialize({
+                treeList: this.treeList,
                 host: this.hostElement.nativeElement,
                 treeListElement: this.treeList.wrapper.nativeElement,
-                timelineElement: this.timeline.timelineContent.nativeElement
+                timelineElement: this.timeline.timelineContent.nativeElement,
+                columns: this.columns,
+                data: this.data
             });
         }
         const leftContainer = this.treeList.wrapper.nativeElement.querySelector('kendo-treelist-list > div');
@@ -705,6 +728,10 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         if (this.localizationSubscription) {
             this.localizationSubscription.unsubscribe();
         }
+        if (isPresent(this.keydownListenerDisposers)) {
+            this.keydownListenerDisposers();
+            this.keydownListenerDisposers = null;
+        }
     }
     /**
      * Focuses the last active cell or task in the Gantt.
@@ -713,7 +740,7 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
      */
     focus() {
         if (this.navigable) {
-            this.navigationService.focusLastActiveItem();
+            this.navigation.focusLastActiveItem();
         }
     }
     /**
@@ -722,7 +749,7 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
      */
     focusCell(rowIndex, colIndex) {
         if (this.navigable) {
-            this.navigationService.focusCell(rowIndex, colIndex);
+            this.navigation.focusCell(rowIndex, colIndex);
         }
     }
     /**
@@ -731,7 +758,7 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
      */
     focusTask(taskIndex) {
         if (this.navigable) {
-            this.navigationService.focusTask(taskIndex);
+            this.navigation.focusTask(taskIndex);
         }
     }
     /**
@@ -843,7 +870,7 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
      * @hidden
      */
     handleCellClose(e) {
-        this.cellClose.emit(Object.assign(e, { item: this.editItem, sender: this }));
+        this.cellClose.emit(new CellCloseEvent(Object.assign(Object.assign({}, e), { item: this.editItem, sender: this })));
         this.dependencyDomService.notifyChanges();
     }
     /**
@@ -1111,6 +1138,9 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         const treeListContentEl = this.treeList.wrapper.nativeElement.querySelector('.k-treelist .k-grid-content');
         this.renderer.setStyle(treeListContentEl, 'margin-right', `${-Math.abs(scrollbarWidth() - 1)}px`);
     }
+    get activeTimelineIndex() {
+        return this.navigation.activeTimelineIndex;
+    }
     getActiveViewOptions() {
         if (!this.views) {
             return;
@@ -1167,327 +1197,510 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
             default: return false;
         }
     }
-};
-tslib_1.__decorate([
-    ViewChild(TreeListComponent, { static: true }),
-    tslib_1.__metadata("design:type", TreeListComponent)
-], GanttComponent.prototype, "treeList", void 0);
-tslib_1.__decorate([
-    ViewChild(GanttTimelineComponent, { static: false }),
-    tslib_1.__metadata("design:type", GanttTimelineComponent)
-], GanttComponent.prototype, "timeline", void 0);
-tslib_1.__decorate([
-    ContentChild(GanttTaskContentTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", GanttTaskContentTemplateDirective)
-], GanttComponent.prototype, "taskContentTemplate", void 0);
-tslib_1.__decorate([
-    ContentChild(GanttTaskTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", GanttTaskTemplateDirective)
-], GanttComponent.prototype, "taskTemplate", void 0);
-tslib_1.__decorate([
-    ContentChild(GanttSummaryTaskTemplateDirective, { static: false }),
-    tslib_1.__metadata("design:type", GanttSummaryTaskTemplateDirective)
-], GanttComponent.prototype, "summaryTaskTemplate", void 0);
-tslib_1.__decorate([
-    ContentChildren(ToolbarTemplateDirective),
-    tslib_1.__metadata("design:type", QueryList)
-], GanttComponent.prototype, "toolbarTemplateChildren", void 0);
-tslib_1.__decorate([
-    Input('aria-roledescription'),
-    tslib_1.__metadata("design:type", String)
-], GanttComponent.prototype, "roleDescription", void 0);
-tslib_1.__decorate([
-    HostBinding('attr.aria-roledescription'),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [])
-], GanttComponent.prototype, "hostRoleDescriptionAttr", null);
-tslib_1.__decorate([
-    Input('role'),
-    tslib_1.__metadata("design:type", String)
-], GanttComponent.prototype, "role", void 0);
-tslib_1.__decorate([
-    HostBinding('attr.role'),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [])
-], GanttComponent.prototype, "hostRoleAttr", null);
-tslib_1.__decorate([
-    HostBinding('class.k-gantt'),
-    tslib_1.__metadata("design:type", Boolean)
-], GanttComponent.prototype, "hostClasses", void 0);
-tslib_1.__decorate([
-    HostBinding('attr.dir'),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [])
-], GanttComponent.prototype, "dir", null);
-tslib_1.__decorate([
-    ContentChildren(GanttColumnBase),
-    tslib_1.__metadata("design:type", QueryList),
-    tslib_1.__metadata("design:paramtypes", [QueryList])
-], GanttComponent.prototype, "columns", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], GanttComponent.prototype, "taskModelFields", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], GanttComponent.prototype, "dependencyModelFields", null);
-tslib_1.__decorate([
-    ContentChildren(ViewBase),
-    tslib_1.__metadata("design:type", QueryList)
-], GanttComponent.prototype, "views", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], GanttComponent.prototype, "activeView", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Array),
-    tslib_1.__metadata("design:paramtypes", [Array])
-], GanttComponent.prototype, "data", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Function)
-], GanttComponent.prototype, "isSelected", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Function)
-], GanttComponent.prototype, "validateNewDependency", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "selectionChange", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], GanttComponent.prototype, "selectable", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], GanttComponent.prototype, "toolbarSettings", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Function),
-    tslib_1.__metadata("design:paramtypes", [Function])
-], GanttComponent.prototype, "fetchChildren", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Function),
-    tslib_1.__metadata("design:paramtypes", [Function])
-], GanttComponent.prototype, "hasChildren", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Array)
-], GanttComponent.prototype, "dependencies", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], GanttComponent.prototype, "sortable", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Array)
-], GanttComponent.prototype, "sort", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], GanttComponent.prototype, "filterable", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], GanttComponent.prototype, "filter", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], GanttComponent.prototype, "workDayStart", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], GanttComponent.prototype, "workDayEnd", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number)
-], GanttComponent.prototype, "workWeekStart", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number)
-], GanttComponent.prototype, "workWeekEnd", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], GanttComponent.prototype, "navigable", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], GanttComponent.prototype, "timelinePaneOptions", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], GanttComponent.prototype, "treeListPaneOptions", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Function),
-    tslib_1.__metadata("design:paramtypes", [Function])
-], GanttComponent.prototype, "taskClass", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Function),
-    tslib_1.__metadata("design:paramtypes", [Function])
-], GanttComponent.prototype, "rowClass", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Function)
-], GanttComponent.prototype, "isExpanded", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], GanttComponent.prototype, "columnsAutoSize", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], GanttComponent.prototype, "columnMenu", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], GanttComponent.prototype, "columnsReorderable", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], GanttComponent.prototype, "columnsResizable", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], GanttComponent.prototype, "dragScrollSettings", null);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "rowExpand", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "taskDblClick", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "cellDblClick", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "cellClose", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "taskDelete", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "rowCollapse", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "remove", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "cancel", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "save", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "taskAdd", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "dependencyAdd", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "sortChange", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "filterChange", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "dataStateChange", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "treeListPaneCollapsedChange", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "timelinePaneCollapsedChange", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "timelinePaneSizeChange", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "activeViewChange", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "columnResize", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "columnReorder", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "columnVisibilityChange", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "columnLockedChange", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "cellClick", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], GanttComponent.prototype, "taskClick", void 0);
-GanttComponent = GanttComponent_1 = tslib_1.__decorate([
-    Component({
-        selector: 'kendo-gantt',
-        exportAs: 'kendoGantt',
-        providers: [
-            GanttLocalizationService,
-            LocalizationService,
-            {
-                provide: DataBoundTreeComponent,
-                useExisting: forwardRef(() => GanttComponent_1)
-            },
-            {
-                provide: ExpandableTreeComponent,
-                useExisting: forwardRef(() => GanttComponent_1)
-            },
-            TimelineViewService,
-            TimelineDayViewService,
-            TimelineWeekViewService,
-            TimelineMonthViewService,
-            ScrollSyncService,
-            DependencyDomService,
-            MappingService,
-            OptionChangesService,
-            EditService,
-            TimelineScrollService,
-            NavigationService
-        ],
-        template: `
+    handleKeydown(event) {
+        const { keyCode, target, altKey } = event;
+        const isTimelineActive = this.timeline.timelineContent.nativeElement.contains(target);
+        if (isTimelineActive) {
+            if (isArrowUpDownKey(keyCode)) {
+                const direction = keyCode === Keys.ArrowUp ? -1 : 1;
+                this.navigation.activeTimelineIndex = this.activeTimelineIndex + direction;
+                this.navigation.updateActiveTreeListCell();
+            }
+            else if (keyCode === Keys.Home) {
+                this.navigation.activeTimelineIndex = 0;
+                this.navigation.updateActiveTreeListCell();
+            }
+            else if (keyCode === Keys.End) {
+                const lastAvailableIndex = this.treeList.view.data.length - 1;
+                this.navigation.activeTimelineIndex = lastAvailableIndex;
+                this.navigation.updateActiveTreeListCell();
+            }
+            if (isNavigationKey(keyCode)) {
+                this.navigation.scrollHorizontallyToTask();
+                this.scrollSyncService.syncScrollTop('timeline', 'treelist');
+                this.navigation.notifyTaskStatusChange();
+                event.preventDefault();
+            }
+            if (keyCode === Keys.Space && hasObservers(this.selectionChange)) {
+                const task = this.renderedTreeListItems[this.activeTimelineIndex];
+                const selectionAction = this.getSelectionAction(event, task);
+                if (isPresent(task) && !this.isSameSelection(selectionAction, task)) {
+                    this.zone.run(() => this.notifySelectionChange(task, selectionAction));
+                }
+                event.preventDefault();
+            }
+            if (keyCode === Keys.Enter && hasObservers(this.taskClick)) {
+                const task = this.renderedTreeListItems[this.activeTimelineIndex];
+                if (isPresent(task)) {
+                    this.zone.run(() => this.notifyTaskClick(event, task, this.activeTimelineIndex));
+                }
+                event.preventDefault();
+            }
+            if (isExpandCollapseKey(keyCode, altKey)) {
+                const task = this.renderedTreeListItems[this.activeTimelineIndex];
+                if (isPresent(task) && this.hasChildren(task)) {
+                    const shouldExpand = keyCode === Keys.ArrowRight;
+                    const isExpanded = this.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.rowExpand : this.rowCollapse;
+                            individualEmitter.emit(expandEvent);
+                            this.expandStateChange.emit(Object.assign(Object.assign({}, expandEvent), { expand: shouldExpand }));
+                            this.updateView();
+                            this.navigation.scrollHorizontallyToTask();
+                        });
+                    }
+                }
+                event.preventDefault();
+            }
+        }
+        const isTreeListActive = this.treeList.wrapper.nativeElement.contains(target);
+        if (keyCode === Keys.Delete && (isTimelineActive || isTreeListActive) && hasObservers(this.taskDelete)) {
+            const taskIndex = isTreeListActive ?
+                this.treeList.activeCell.dataRowIndex :
+                this.activeTimelineIndex;
+            const task = this.renderedTreeListItems[taskIndex];
+            if (isPresent(task)) {
+                this.zone.run(() => this.notifyTaskDelete(task));
+            }
+        }
+        if (isViewDigitKey(keyCode) && !isToolbar(target, this.hostElement.nativeElement) && !this.isInEditMode) {
+            const targetViewIndex = getIndexFromViewDigitKeyCode(keyCode);
+            const availableViews = this.views.toArray();
+            const targetView = availableViews[targetViewIndex];
+            if (isPresent(targetView) && targetView.type !== this.activeView) {
+                this.zone.run(() => this.changeActiveView(targetView.type));
+            }
+        }
+    }
+}
+GanttComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttComponent, deps: [{ token: i1.TimelineViewService }, { token: i2.ScrollSyncService }, { token: i0.Renderer2 }, { token: i3.MappingService }, { token: i4.OptionChangesService }, { token: i5.DependencyDomService }, { token: i6.EditService }, { token: i7.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i8.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: GanttComponent, selector: "kendo-gantt", inputs: { roleDescription: ["aria-roledescription", "roleDescription"], role: "role", taskModelFields: "taskModelFields", dependencyModelFields: "dependencyModelFields", activeView: "activeView", data: "data", isSelected: "isSelected", validateNewDependency: "validateNewDependency", selectable: "selectable", toolbarSettings: "toolbarSettings", fetchChildren: "fetchChildren", hasChildren: "hasChildren", dependencies: "dependencies", sortable: "sortable", sort: "sort", filterable: "filterable", filter: "filter", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", navigable: "navigable", timelinePaneOptions: "timelinePaneOptions", treeListPaneOptions: "treeListPaneOptions", taskClass: "taskClass", rowClass: "rowClass", isExpanded: "isExpanded", columnsAutoSize: "columnsAutoSize", columnMenu: "columnMenu", columnsReorderable: "columnsReorderable", columnsResizable: "columnsResizable", dragScrollSettings: "dragScrollSettings" }, outputs: { selectionChange: "selectionChange", rowExpand: "rowExpand", taskDblClick: "taskDblClick", cellDblClick: "cellDblClick", cellClose: "cellClose", taskDelete: "taskDelete", rowCollapse: "rowCollapse", remove: "remove", cancel: "cancel", save: "save", taskAdd: "taskAdd", dependencyAdd: "dependencyAdd", sortChange: "sortChange", filterChange: "filterChange", dataStateChange: "dataStateChange", treeListPaneCollapsedChange: "treeListPaneCollapsedChange", timelinePaneCollapsedChange: "timelinePaneCollapsedChange", timelinePaneSizeChange: "timelinePaneSizeChange", activeViewChange: "activeViewChange", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", cellClick: "cellClick", taskClick: "taskClick" }, host: { properties: { "attr.aria-roledescription": "this.hostRoleDescriptionAttr", "attr.role": "this.hostRoleAttr", "class.k-gantt": "this.hostClasses", "attr.dir": "this.dir" } }, providers: [
+        GanttLocalizationService,
+        LocalizationService,
+        {
+            provide: DataBoundTreeComponent,
+            useExisting: forwardRef(() => GanttComponent)
+        },
+        {
+            provide: ExpandableTreeComponent,
+            useExisting: forwardRef(() => GanttComponent)
+        },
+        TimelineViewService,
+        TimelineDayViewService,
+        TimelineWeekViewService,
+        TimelineMonthViewService,
+        ScrollSyncService,
+        DependencyDomService,
+        MappingService,
+        OptionChangesService,
+        EditService,
+        TimelineScrollService,
+        NavigationService
+    ], queries: [{ propertyName: "taskContentTemplate", first: true, predicate: GanttTaskContentTemplateDirective, descendants: true }, { propertyName: "taskTemplate", first: true, predicate: GanttTaskTemplateDirective, descendants: true }, { propertyName: "summaryTaskTemplate", first: true, predicate: GanttSummaryTaskTemplateDirective, descendants: true }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columns", predicate: GanttColumnBase }, { propertyName: "views", predicate: ViewBase }], viewQueries: [{ propertyName: "treeList", first: true, predicate: TreeListComponent, descendants: true, static: true }, { propertyName: "timeline", first: true, predicate: GanttTimelineComponent, descendants: true }], exportAs: ["kendoGantt"], usesOnChanges: true, ngImport: i0, template: `
+        <ng-container kendoGanttLocalizedMessages
+            i18n-taskEditingGeneralTabTitle="kendo.gantt.taskEditingGeneralTabTitle|The title of the 'General' tab of the editing dialog TabStrip"
+            taskEditingGeneralTabTitle="General"
+
+            i18n-taskEditingPredecessorsTabTitle="kendo.gantt.taskEditingPredecessorsTabTitle|The title of the 'Predecessors' dependencies tab of the editing dialog TabStrip"
+            taskEditingPredecessorsTabTitle="Predecessors"
+
+            i18n-taskEditingSuccessorsTabTitle="kendo.gantt.taskEditingSuccessorsTabTitle|The title of the 'Successors' dependencies tab of the editing dialog TabStrip"
+            taskEditingSuccessorsTabTitle="Successors"
+
+            i18n-taskEditingDependenciesAddButtonText="kendo.gantt.taskEditingDependenciesAddButtonText|The text of the 'Add' button in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesAddButtonText="Add"
+
+            i18n-taskEditingDependenciesRemoveButtonText="kendo.gantt.taskEditingDependenciesRemoveButtonText|The text of the 'Remove' button in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesRemoveButtonText="Remove"
+
+            i18n-taskEditingDependenciesGridNameColumnTitle="kendo.gantt.taskEditingDependenciesGridNameColumnTitle|The title of the 'Task Title' Grid column in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesGridNameColumnTitle="Task Title"
+
+            i18n-taskEditingDependenciesGridTypeColumnTitle="kendo.gantt.taskEditingDependenciesGridTypeColumnTitle|The title of the 'Type' Grid column in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesGridTypeColumnTitle="Type"
+
+            i18n-taskDeleteLabel="kendo.gantt.taskDeleteLabel|The label of the task delete icon"
+            taskDeleteLabel="Delete"
+
+            i18n-taskEditingDialogTitle="kendo.gantt.taskEditingDialogTitle|The title of the task editing dialog"
+            taskEditingDialogTitle="Editing Task"
+
+            i18n-taskEditingDialogCloseTitle="kendo.gantt.taskEditingDialogCloseTitle|The title of the task editing dialog close button"
+            taskEditingDialogCloseTitle="Close"
+
+            i18n-confirmationDialogCloseTitle="kendo.gantt.confirmationDialogCloseTitle|The title of the confirmation dialog close button"
+            confirmationDialogCloseTitle="Close"
+
+            i18n-confirmationDialogTitle="kendo.gantt.confirmationDialogTitle|The title of the delete task confirmation dialog"
+            confirmationDialogTitle="Delete Task"
+
+            i18n-confirmationDialogContent="kendo.gantt.confirmationDialogContent|The content of the delete task confirmation dialog"
+            confirmationDialogContent="Are you sure you want to delete this task?"
+
+            i18n-deleteButtonText="kendo.gantt.deleteButtonText|The text of the task editing dialog 'Delete' button"
+            deleteButtonText="Delete"
+
+            i18n-cancelButtonText="kendo.gantt.cancelButtonText|The text of the task editing dialog 'Cancel' button"
+            cancelButtonText="Cancel"
+
+            i18n-saveButtonText="kendo.gantt.saveButtonText|The text of the task editing dialog 'Save' button"
+            saveButtonText="Save"
+
+            i18n-titleFieldInputLabel="kendo.gantt.titleFieldInputLabel|The label of the 'title' field input in editing mode"
+            titleFieldInputLabel="Title"
+
+            i18n-startFieldInputLabel="kendo.gantt.startFieldInputLabel|The label of the 'start' field input in editing mode"
+            startFieldInputLabel="Start"
+
+            i18n-endFieldInputLabel="kendo.gantt.endFieldInputLabel|The label of the 'end' field input in editing mode"
+            endFieldInputLabel="End"
+
+            i18n-completionRatioFieldInputLabel="kendo.gantt.completionRatioFieldInputLabel|The label of the 'completionRatio' field input in editing mode"
+            completionRatioFieldInputLabel="Progress"
+
+            i18n-dayViewText="kendo.gantt.dayViewText|The text of the day view in the ViewSelector component"
+            dayViewText="Day"
+
+            i18n-weekViewText="kendo.gantt.weekViewText|The text of the week view in the ViewSelector component"
+            weekViewText="Week"
+
+            i18n-monthViewText="kendo.gantt.monthViewText|The text of the month view in the ViewSelector component"
+            monthViewText="Month"
+
+            i18n-yearViewText-disabled="kendo.gantt.yearViewText|The text of the year view in the ViewSelector component"
+            yearViewText="Year"
+
+            i18n-addTaskText="kendo.gantt.addTaskText|The text of the DropDownButton in the AddTask component"
+            addTaskText="Add Task"
+
+            i18n-addChildText="kendo.gantt.addChildText|The text of the 'Add Child' option in the AddTask component"
+            addChildText="Add Child"
+
+            i18n-addAboveText="kendo.gantt.addAboveText|The text of the 'Add Above' option in the AddTask component"
+            addAboveText="Add Above"
+
+            i18n-addBelowText="kendo.gantt.addBelowText|The text of the 'Add Below' option in the AddTask component"
+            addBelowText="Add Below"
+
+            i18n-noRecords="kendo.gantt.noRecords|The label visible in the TreeList when there are no records"
+            noRecords="No records available."
+
+            i18n-filter="kendo.gantt.filter|The label of the filter cell or icon"
+            filter="Filter"
+
+            i18n-filterEqOperator="kendo.gantt.filterEqOperator|The text of the equal filter operator"
+            filterEqOperator="Is equal to"
+
+            i18n-filterNotEqOperator="kendo.gantt.filterNotEqOperator|The text of the not equal filter operator"
+            filterNotEqOperator="Is not equal to"
+
+            i18n-filterIsNullOperator="kendo.gantt.filterIsNullOperator|The text of the is null filter operator"
+            filterIsNullOperator="Is null"
+
+            i18n-filterIsNotNullOperator="kendo.gantt.filterIsNotNullOperator|The text of the is not null filter operator"
+            filterIsNotNullOperator="Is not null"
+
+            i18n-filterIsEmptyOperator="kendo.gantt.filterIsEmptyOperator|The text of the is empty filter operator"
+            filterIsEmptyOperator="Is empty"
+
+            i18n-filterIsNotEmptyOperator="kendo.gantt.filterIsNotEmptyOperator|The text of the is not empty filter operator"
+            filterIsNotEmptyOperator="Is not empty"
+
+            i18n-filterStartsWithOperator="kendo.gantt.filterStartsWithOperator|The text of the starts with filter operator"
+            filterStartsWithOperator="Starts with"
+
+            i18n-filterContainsOperator="kendo.gantt.filterContainsOperator|The text of the contains filter operator"
+            filterContainsOperator="Contains"
+
+            i18n-filterNotContainsOperator="kendo.gantt.filterNotContainsOperator|The text of the does not contain filter operator"
+            filterNotContainsOperator="Does not contain"
+
+            i18n-filterEndsWithOperator="kendo.gantt.filterEndsWithOperator|The text of the ends with filter operator"
+            filterEndsWithOperator="Ends with"
+
+            i18n-filterGteOperator="kendo.gantt.filterGteOperator|The text of the greater than or equal filter operator"
+            filterGteOperator="Is greater than or equal to"
+
+            i18n-filterGtOperator="kendo.gantt.filterGtOperator|The text of the greater than filter operator"
+            filterGtOperator="Is greater than"
+
+            i18n-filterLteOperator="kendo.gantt.filterLteOperator|The text of the less than or equal filter operator"
+            filterLteOperator="Is less than or equal to"
+
+            i18n-filterLtOperator="kendo.gantt.filterLtOperator|The text of the less than filter operator"
+            filterLtOperator="Is less than"
+
+            i18n-filterIsTrue="kendo.gantt.filterIsTrue|The text of the IsTrue boolean filter option"
+            filterIsTrue="Is True"
+
+            i18n-filterIsFalse="kendo.gantt.filterIsFalse|The text of the IsFalse boolean filter option"
+            filterIsFalse="Is False"
+
+            i18n-filterBooleanAll="kendo.gantt.filterBooleanAll|The text of the (All) boolean filter option"
+            filterBooleanAll="(All)"
+
+            i18n-filterAfterOrEqualOperator="kendo.gantt.filterAfterOrEqualOperator|The text of the after or equal date filter operator"
+            filterAfterOrEqualOperator="Is after or equal to"
+
+            i18n-filterAfterOperator="kendo.gantt.filterAfterOperator|The text of the after date filter operator"
+            filterAfterOperator="Is after"
+
+            i18n-filterBeforeOperator="kendo.gantt.filterBeforeOperator|The text of the before date filter operator"
+            filterBeforeOperator="Is before"
+
+            i18n-filterBeforeOrEqualOperator="kendo.gantt.filterBeforeOrEqualOperator|The text of the before or equal date filter operator"
+            filterBeforeOrEqualOperator="Is before or equal to"
+
+            i18n-filterFilterButton="kendo.gantt.filterFilterButton|The text of the filter button"
+            filterFilterButton="Filter"
+
+            i18n-filterClearButton="kendo.gantt.filterClearButton|The text of the clear filter button"
+            filterClearButton="Clear"
+
+            i18n-filterAndLogic="kendo.gantt.filterAndLogic|The text of the And filter logic"
+            filterAndLogic="And"
+
+            i18n-filterOrLogic="kendo.gantt.filterOrLogic|The text of the Or filter logic"
+            filterOrLogic="Or"
+
+            i18n-loading="kendo.gantt.loading|The loading text"
+            loading="Loading"
+
+            i18n-columnMenu="kendo.gantt.columnMenu|The title of the column menu icon"
+            columnMenu="Column Menu"
+
+            i18n-columns="kendo.gantt.columns|The text shown in the column menu for the columns item"
+            columns="Columns"
+
+            i18n-lock-disabled="kendo.gantt.lock|The text shown in the column menu for the lock item"
+            lock-disabled="Lock"
+
+            i18n-unlock-disabled="kendo.gantt.unlock|The text shown in the column menu for the unlock item"
+            unlock-disabled="Unlock"
+
+            i18n-sortable="kendo.gantt.sortable|The label of the sort icon"
+            sortable="Sortable"
+
+            i18n-sortAscending="kendo.gantt.sortAscending|The text shown in the column menu for the sort ascending item"
+            sortAscending="Sort Ascending"
+
+            i18n-sortDescending="kendo.gantt.sortDescending|The text shown in the column menu for the sort descending item"
+            sortDescending="Sort Descending"
+
+            i18n-sortedAscending="kendo.gantt.sortedAscending|The status announcement when a column is sorted ascending"
+            sortedAscending="Sorted Ascending"
+
+            i18n-sortedDescending="kendo.gantt.sortedDescending|The status announcement when a column is sorted descending"
+            sortedDescending="Sorted Descending"
+
+            i18n-sortedDefault="kendo.gantt.sortedDefault|The status announcement when a column is no longer sorted"
+            sortedDefault="Not Sorted"
+
+            i18n-columnsApply="kendo.gantt.columnsApply|The text shown in the column menu or column chooser for the columns apply button"
+            columnsApply="Apply"
+
+            i18n-columnsReset="kendo.gantt.columnsReset|The text shown in the column menu or column chooser for the columns reset button"
+            columnsReset="Reset"></ng-container>
+        <kendo-gantt-toolbar
+            *ngIf="showToolbar('top')"
+            [showAddTask]="toolbarSettings.addTaskTool === 'top' || toolbarSettings.addTaskTool === 'both'"
+            [showViewSelector]="toolbarSettings.viewSelectorTool === 'top' || toolbarSettings.viewSelectorTool === 'both'"
+            [toolbarTemplate]="toolbarTemplate"
+            [views]="viewTypes"
+            [activeView]="activeView"
+            class="k-gantt-header k-toolbar k-gantt-toolbar"
+            position="top"
+            (activeViewChange)="changeActiveView($event)"></kendo-gantt-toolbar>
+        <div class="k-gantt-content">
+            <kendo-splitter [style.border]="0">
+                <kendo-splitter-pane
+                    class="k-gantt-treelist k-gantt-treelist-scrollable"
+                    [collapsible]="treeListPaneOptions?.collapsible"
+                    [collapsed]="treeListPaneOptions?.collapsed"
+                    (collapsedChange)="onTreeListCollapsedChange($event)"
+                    [scrollable]="false">
+                    <kendo-treelist
+                        [idField]="taskIdField"
+                        [columns]="columns"
+                        [data]="data"
+                        [hasChildren]="hasChildren"
+                        [fetchChildren]="fetchChildren"
+                        [navigable]="navigable"
+                        [isExpanded]="isExpanded"
+                        [autoSize]="columnsAutoSize"
+                        [columnMenu]="columnMenu"
+                        [reorderable]="columnsReorderable"
+                        [resizable]="columnsResizable"
+                        [rowClass]="rowClass"
+                        [isSelected]="isSelected"
+                        [selectable]="selectable"
+                        [sortable]="sortable"
+                        [sort]="sort"
+                        [filterable]="filterMenu"
+                        [filter]="filter"
+                        (filterChange)="filterChange.emit($event)"
+                        (sortChange)="sortChange.emit($event)"
+                        (dataStateChange)="dataStateChange.emit({
+                            filter: $event.filter,
+                            sort: $event.sort
+                        })"
+                        (expandStateChange)="expandStateChange.emit($event)"
+                        (expand)="rowExpand.emit({ dataItem: $event.dataItem })"
+                        (collapse)="rowCollapse.emit({ dataItem: $event.dataItem })"
+                        (columnReorder)="columnReorder.emit($event)"
+                        (columnResize)="columnResize.emit($event)"
+                        (columnVisibilityChange)="handleColumnVisibilityChange($event)"
+                        (columnLockedChange)="columnLockedChange.emit($event)"
+                        (selectionChange)="handleTreeListSelectionChange($event)"
+                        (cellClick)="handleTreeListCellClick($event)"
+                        (cellClose)="handleCellClose($event)"
+                        [kendoEventsOutsideAngular]="{
+                            dblclick: handleTreeListDoubleClick
+                        }"
+                        [scope]="this"
+                    >
+                        <kendo-treelist-messages
+                            [noRecords]="getText('noRecords')"
+                            [filter]="getText('filter')"
+                            [filterEqOperator]="getText('filterEqOperator')"
+                            [filterNotEqOperator]="getText('filterNotEqOperator')"
+                            [filterIsNullOperator]="getText('filterIsNullOperator')"
+                            [filterIsNotNullOperator]="getText('filterIsNotNullOperator')"
+                            [filterIsEmptyOperator]="getText('filterIsEmptyOperator')"
+                            [filterIsNotEmptyOperator]="getText('filterIsNotEmptyOperator')"
+                            [filterStartsWithOperator]="getText('filterStartsWithOperator')"
+                            [filterContainsOperator]="getText('filterContainsOperator')"
+                            [filterNotContainsOperator]="getText('filterNotContainsOperator')"
+                            [filterEndsWithOperator]="getText('filterEndsWithOperator')"
+                            [filterGteOperator]="getText('filterGteOperator')"
+                            [filterGtOperator]="getText('filterGtOperator')"
+                            [filterLteOperator]="getText('filterLteOperator')"
+                            [filterLtOperator]="getText('filterLtOperator')"
+                            [filterIsTrue]="getText('filterIsTrue')"
+                            [filterIsFalse]="getText('filterIsFalse')"
+                            [filterBooleanAll]="getText('filterBooleanAll')"
+                            [filterAfterOrEqualOperator]="getText('filterAfterOrEqualOperator')"
+                            [filterAfterOperator]="getText('filterAfterOperator')"
+                            [filterBeforeOperator]="getText('filterBeforeOperator')"
+                            [filterBeforeOrEqualOperator]="getText('filterBeforeOrEqualOperator')"
+                            [filterFilterButton]="getText('filterFilterButton')"
+                            [filterClearButton]="getText('filterClearButton')"
+                            [filterAndLogic]="getText('filterAndLogic')"
+                            [filterOrLogic]="getText('filterOrLogic')"
+                            [loading]="getText('loading')"
+                            [columnMenu]="getText('columnMenu')"
+                            [columns]="getText('columns')"
+                            [sortable]="getText('sortable')"
+                            [sortAscending]="getText('sortAscending')"
+                            [sortDescending]="getText('sortDescending')"
+                            [sortedAscending]="getText('sortedAscending')"
+                            [sortedDescending]="getText('sortedDescending')"
+                            [sortedDefault]="getText('sortedDefault')"
+                            [columnsApply]="getText('columnsApply')"
+                            [columnsReset]="getText('columnsReset')"
+                        >
+                        </kendo-treelist-messages>
+                    </kendo-treelist>
+                </kendo-splitter-pane>
+                <kendo-splitter-pane
+                    [collapsible]="timelinePaneOptions?.collapsible"
+                    [resizable]="timelinePaneOptions?.resizable"
+                    [collapsed]="timelinePaneOptions?.collapsed"
+                    [min]="timelinePaneOptions?.min"
+                    [max]="timelinePaneOptions?.max"
+                    [size]="timelinePaneOptions?.size"
+                    (collapsedChange)="onTimelineCollapsedChange($event)"
+                    (sizeChange)="onTimelinePaneSizeChange($event)"
+                    [scrollable]="false">
+                    <kendo-gantt-timeline
+                        *ngIf="views && views.length"
+                        [renderDependencyDragClues]="renderDependencyDragClues"
+                        [dragScrollSettings]="dragScrollSettings"
+                        [rows]="viewItems"
+                        [slots]="timelineSlots"
+                        [groupSlots]="timelineGroupSlots"
+                        [tableWidth]="tableWidth"
+                        [activeView]="activeView"
+                        [taskContentTemplate]="taskContentTemplate?.templateRef"
+                        [taskTemplate]="taskTemplate?.templateRef"
+                        [summaryTaskTemplate]="summaryTaskTemplate?.templateRef"
+                        [taskClass]="taskClass"
+                        [dependencies]="dependencies"
+                        [isExpanded]="isExpanded"
+                        [selectable]="selectable"
+                        [isTaskSelected]="isTaskSelected"
+                        [kendoEventsOutsideAngular]="{
+                            click: handleTimelineClick,
+                            contextmenu: handleTimelineRightClick,
+                            dblclick: handleTimelineDblClick,
+                            mousedown: handleTimelineMouseDown
+                        }"
+                        [scope]="this"
+                    ></kendo-gantt-timeline>
+                </kendo-splitter-pane>
+            </kendo-splitter>
+        </div>
+        <kendo-gantt-toolbar
+            *ngIf="showToolbar('bottom')"
+            [showAddTask]="toolbarSettings.addTaskTool === 'bottom' || toolbarSettings.addTaskTool === 'both'"
+            [showViewSelector]="toolbarSettings.viewSelectorTool === 'bottom' || toolbarSettings.viewSelectorTool === 'both'"
+            [toolbarTemplate]="toolbarTemplate"
+            [views]="viewTypes"
+            [activeView]="activeView"
+            class="k-gantt-footer k-toolbar k-gantt-toolbar"
+            position="bottom"></kendo-gantt-toolbar>
+        <kendo-gantt-edit-dialog
+            *ngIf="showEditingDialog"
+            [data]="data">
+        </kendo-gantt-edit-dialog>
+        <kendo-dialog
+            *ngIf="showConfirmationDialog"
+            [width]="575"
+            [height]="170"
+            [title]="getText('confirmationDialogTitle')"
+            (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)="handleConfirmationDialogClose()">{{ getText('cancelButtonText') }}</button>
+            </kendo-dialog-actions>
+        </kendo-dialog>
+   `, isInline: true, components: [{ type: i9.ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: ["showAddTask", "showViewSelector", "views", "activeView", "toolbarTemplate", "position"], outputs: ["activeViewChange"] }, { type: i10.SplitterComponent, selector: "kendo-splitter", inputs: ["orientation"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { type: i10.SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { type: i11.TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "navigatable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange"], exportAs: ["kendoTreeList"] }, { type: i11.CustomMessagesComponent, selector: "kendo-treelist-messages" }, { type: i12.GanttTimelineComponent, selector: "kendo-gantt-timeline", inputs: ["rows", "slots", "groupSlots", "tableWidth", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "renderDependencyDragClues", "dragScrollSettings", "selectable", "isTaskSelected", "isExpanded", "dependencies"], outputs: ["timelineContainerPress", "timelineContainerDrag", "timelineContainerRelease"] }, { type: i13.EditDialogComponent, selector: "kendo-gantt-edit-dialog", inputs: ["data"] }, { type: i14.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: i14.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i11.TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }], directives: [{ type: i15.LocalizedMessagesDirective, selector: "[kendoGanttLocalizedMessages]" }, { type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i17.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i18.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-gantt',
+                    exportAs: 'kendoGantt',
+                    providers: [
+                        GanttLocalizationService,
+                        LocalizationService,
+                        {
+                            provide: DataBoundTreeComponent,
+                            useExisting: forwardRef(() => GanttComponent)
+                        },
+                        {
+                            provide: ExpandableTreeComponent,
+                            useExisting: forwardRef(() => GanttComponent)
+                        },
+                        TimelineViewService,
+                        TimelineDayViewService,
+                        TimelineWeekViewService,
+                        TimelineMonthViewService,
+                        ScrollSyncService,
+                        DependencyDomService,
+                        MappingService,
+                        OptionChangesService,
+                        EditService,
+                        TimelineScrollService,
+                        NavigationService
+                    ],
+                    template: `
         <ng-container kendoGanttLocalizedMessages
             i18n-taskEditingGeneralTabTitle="kendo.gantt.taskEditingGeneralTabTitle|The title of the 'General' tab of the editing dialog TabStrip"
             taskEditingGeneralTabTitle="General"
@@ -1696,8 +1909,12 @@ GanttComponent = GanttComponent_1 = tslib_1.__decorate([
             *ngIf="showToolbar('top')"
             [showAddTask]="toolbarSettings.addTaskTool === 'top' || toolbarSettings.addTaskTool === 'both'"
             [showViewSelector]="toolbarSettings.viewSelectorTool === 'top' || toolbarSettings.viewSelectorTool === 'both'"
+            [toolbarTemplate]="toolbarTemplate"
+            [views]="viewTypes"
+            [activeView]="activeView"
             class="k-gantt-header k-toolbar k-gantt-toolbar"
-            position="top"></kendo-gantt-toolbar>
+            position="top"
+            (activeViewChange)="changeActiveView($event)"></kendo-gantt-toolbar>
         <div class="k-gantt-content">
             <kendo-splitter [style.border]="0">
                 <kendo-splitter-pane
@@ -1831,6 +2048,9 @@ GanttComponent = GanttComponent_1 = tslib_1.__decorate([
             *ngIf="showToolbar('bottom')"
             [showAddTask]="toolbarSettings.addTaskTool === 'bottom' || toolbarSettings.addTaskTool === 'both'"
             [showViewSelector]="toolbarSettings.viewSelectorTool === 'bottom' || toolbarSettings.viewSelectorTool === 'both'"
+            [toolbarTemplate]="toolbarTemplate"
+            [views]="viewTypes"
+            [activeView]="activeView"
             class="k-gantt-footer k-toolbar k-gantt-toolbar"
             position="bottom"></kendo-gantt-toolbar>
         <kendo-gantt-edit-dialog
@@ -1851,17 +2071,157 @@ GanttComponent = GanttComponent_1 = tslib_1.__decorate([
             </kendo-dialog-actions>
         </kendo-dialog>
    `
-    }),
-    tslib_1.__metadata("design:paramtypes", [TimelineViewService,
-        ScrollSyncService,
-        Renderer2,
-        MappingService,
-        OptionChangesService,
-        DependencyDomService,
-        EditService,
-        LocalizationService,
-        ElementRef,
-        NgZone,
-        NavigationService])
-], GanttComponent);
-export { GanttComponent };
+                }]
+        }], ctorParameters: function () { return [{ type: i1.TimelineViewService }, { type: i2.ScrollSyncService }, { type: i0.Renderer2 }, { type: i3.MappingService }, { type: i4.OptionChangesService }, { type: i5.DependencyDomService }, { type: i6.EditService }, { type: i7.LocalizationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i8.NavigationService }]; }, propDecorators: { treeList: [{
+                type: ViewChild,
+                args: [TreeListComponent, { static: true }]
+            }], timeline: [{
+                type: ViewChild,
+                args: [GanttTimelineComponent, { static: false }]
+            }], taskContentTemplate: [{
+                type: ContentChild,
+                args: [GanttTaskContentTemplateDirective, { static: false }]
+            }], taskTemplate: [{
+                type: ContentChild,
+                args: [GanttTaskTemplateDirective, { static: false }]
+            }], summaryTaskTemplate: [{
+                type: ContentChild,
+                args: [GanttSummaryTaskTemplateDirective, { static: false }]
+            }], toolbarTemplateChildren: [{
+                type: ContentChildren,
+                args: [ToolbarTemplateDirective]
+            }], roleDescription: [{
+                type: Input,
+                args: ['aria-roledescription']
+            }], hostRoleDescriptionAttr: [{
+                type: HostBinding,
+                args: ['attr.aria-roledescription']
+            }], role: [{
+                type: Input,
+                args: ['role']
+            }], hostRoleAttr: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-gantt']
+            }], dir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], columns: [{
+                type: ContentChildren,
+                args: [GanttColumnBase]
+            }], taskModelFields: [{
+                type: Input
+            }], dependencyModelFields: [{
+                type: Input
+            }], views: [{
+                type: ContentChildren,
+                args: [ViewBase]
+            }], activeView: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], isSelected: [{
+                type: Input
+            }], validateNewDependency: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], selectable: [{
+                type: Input
+            }], toolbarSettings: [{
+                type: Input
+            }], fetchChildren: [{
+                type: Input
+            }], hasChildren: [{
+                type: Input
+            }], dependencies: [{
+                type: Input
+            }], sortable: [{
+                type: Input
+            }], sort: [{
+                type: Input
+            }], filterable: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], workDayStart: [{
+                type: Input
+            }], workDayEnd: [{
+                type: Input
+            }], workWeekStart: [{
+                type: Input
+            }], workWeekEnd: [{
+                type: Input
+            }], navigable: [{
+                type: Input
+            }], timelinePaneOptions: [{
+                type: Input
+            }], treeListPaneOptions: [{
+                type: Input
+            }], taskClass: [{
+                type: Input
+            }], rowClass: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], columnsAutoSize: [{
+                type: Input
+            }], columnMenu: [{
+                type: Input
+            }], columnsReorderable: [{
+                type: Input
+            }], columnsResizable: [{
+                type: Input
+            }], dragScrollSettings: [{
+                type: Input
+            }], rowExpand: [{
+                type: Output
+            }], taskDblClick: [{
+                type: Output
+            }], cellDblClick: [{
+                type: Output
+            }], cellClose: [{
+                type: Output
+            }], taskDelete: [{
+                type: Output
+            }], rowCollapse: [{
+                type: Output
+            }], remove: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }], save: [{
+                type: Output
+            }], taskAdd: [{
+                type: Output
+            }], dependencyAdd: [{
+                type: Output
+            }], sortChange: [{
+                type: Output
+            }], filterChange: [{
+                type: Output
+            }], dataStateChange: [{
+                type: Output
+            }], treeListPaneCollapsedChange: [{
+                type: Output
+            }], timelinePaneCollapsedChange: [{
+                type: Output
+            }], timelinePaneSizeChange: [{
+                type: Output
+            }], activeViewChange: [{
+                type: Output
+            }], columnResize: [{
+                type: Output
+            }], columnReorder: [{
+                type: Output
+            }], columnVisibilityChange: [{
+                type: Output
+            }], columnLockedChange: [{
+                type: Output
+            }], cellClick: [{
+                type: Output
+            }], taskClick: [{
+                type: Output
+            }] } });