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

package/dist/es2015/gantt.component.d.ts

@@ -8,8 +8,9 @@ import { TreeListComponent, DataBoundTreeComponent, ExpandableTreeComponent, Sel
 import { CompositeFilterDescriptor, SortDescriptor } from '@progress/kendo-data-query';
 import { Day } from '@progress/kendo-date-math';
 import { Observable } from 'rxjs';
+import { GanttTimelineComponent } from './timeline/gantt-timeline.component';
 import { GanttColumnBase } from './columns/columns';
-import { DataStateChangeEvent, ColumnMenuSettings, RowClassFn, TaskClassFn, ColumnVisibilityChangeEvent, ColumnResizeEvent, ColumnLockedChangeEvent, ColumnReorderEvent, ColumnReorderConfig, GanttTaskModelFields, GanttDependencyModelFields, SortSettings, CellClickEvent, TaskClickEvent, DependencyAddEvent } from './models/models';
+import { DataStateChangeEvent, ColumnMenuSettings, RowClassFn, TaskClassFn, ColumnVisibilityChangeEvent, ColumnResizeEvent, ColumnLockedChangeEvent, ColumnReorderEvent, ColumnReorderConfig, GanttTaskModelFields, GanttDependencyModelFields, SortSettings, CellClickEvent, TaskClickEvent, DependencyAddEvent, TaskDeleteEvent } from './models/models';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { TimelineViewService } from './timeline/timeline-view.service';
 import { TimelineViewType } from './models/timeline-view';
@@ -19,12 +20,12 @@ import { DependencyDomService } from './dependencies/dependency-dom.service';
 import { MappingService } from './common/mapping.service';
 import { OptionChangesService } from './common/option-changes.service';
 import { EditService } from './editing/edit.service';
+import { NavigationService } from './navigation/navigation.service';
 import { TimelinePaneOptions, TreeListPaneOptions } from './models/splitter-pane-options.interface';
 import { GanttTaskTemplateDirective } from './template-directives/task-template.directive';
 import { GanttSummaryTaskTemplateDirective } from './template-directives/summary-task-template.directive';
 import { GanttTaskContentTemplateDirective } from './template-directives/task-content-template.directive';
 import { ToolbarTemplateDirective } from './toolbar/toolbar-template.directive';
-import { GanttTimelineComponent } from './timeline/gantt-timeline.component';
 import { ToolbarSettings } from './models/toolbar-settings';
 import { ExpandEvent } from './expanded-state/expand-event';
 import { ViewBase } from './timeline/view-base';
@@ -32,6 +33,7 @@ import { SelectionChangeEvent } from './selection/selection-change-event';
 import { TaskEditEvent } from './models/events/task-edit-event.interface';
 import { CellCloseEvent } from './models/events/cell-close-event.interface';
 import { TaskAddEvent } from './models/events/task-add-event.interface';
+import { ViewItem } from './models/view-item.interface';
 import { DragScrollSettings } from './scrolling/drag-scroll-settings';
 /**
  * Represents the Kendo UI Gantt component for Angular.
@@ -115,22 +117,24 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
     private localizationService;
     private hostElement;
     private zone;
+    private navigationService;
     treeList: TreeListComponent;
     timeline: GanttTimelineComponent;
-    /**
-     * @hidden
-     */
     taskContentTemplate: GanttTaskContentTemplateDirective;
+    taskTemplate: GanttTaskTemplateDirective;
+    summaryTaskTemplate: GanttSummaryTaskTemplateDirective;
+    toolbarTemplateChildren: QueryList<ToolbarTemplateDirective>;
+    toolbarTemplate: ToolbarTemplateDirective;
     /**
      * @hidden
      */
-    taskTemplate: GanttTaskTemplateDirective;
+    roleDescription: string;
+    readonly hostRoleDescriptionAttr: string;
     /**
      * @hidden
      */
-    summaryTaskTemplate: GanttSummaryTaskTemplateDirective;
-    toolbarTemplateChildren: QueryList<ToolbarTemplateDirective>;
-    toolbarTemplate: ToolbarTemplateDirective;
+    role: string;
+    readonly hostRoleAttr: string;
     hostClasses: boolean;
     readonly dir: string;
     /**
@@ -261,6 +265,12 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
      * The end of the work week (index based).
      */
     workWeekEnd: Day;
+    /**
+     * 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 %})).
+     */
+    navigable: boolean;
     /**
      * The options of the timeline splitter pane. By default the pane is `collapsible`,
      * `resizable`, not `collapsed`, and its `size` is `'50%'`.
@@ -339,10 +349,11 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
      */
     cellClose: EventEmitter<CellCloseEvent>;
     /**
-     * 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.
      */
-    taskDelete: EventEmitter<any>;
+    taskDelete: EventEmitter<TaskDeleteEvent>;
     /**
      * Fires when an item is collapsed.
      */
@@ -428,6 +439,10 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
      * @hidden
      */
     readonly renderedTreeListItems: any[];
+    /**
+     * @hidden
+     */
+    readonly viewItems: ViewItem[];
     /**
      * @hidden
      */
@@ -490,6 +505,10 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
      * @hidden
      */
     showConfirmationDialog: boolean;
+    /**
+     * @hidden
+     */
+    readonly isInEditMode: boolean;
     private _columns;
     private _data;
     private _dragScrollSettings;
@@ -509,11 +528,27 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
     private optionChangesSubscriptions;
     private editServiceSubscription;
     private localizationSubscription;
-    constructor(timelineViewService: TimelineViewService, scrollSyncService: ScrollSyncService, renderer: Renderer2, mapper: MappingService, optionChangesService: OptionChangesService, dependencyDomService: DependencyDomService, editService: EditService, localizationService: LocalizationService, hostElement: ElementRef<HTMLElement>, zone: NgZone);
+    constructor(timelineViewService: TimelineViewService, scrollSyncService: ScrollSyncService, renderer: Renderer2, mapper: MappingService, optionChangesService: OptionChangesService, dependencyDomService: DependencyDomService, editService: EditService, localizationService: LocalizationService, hostElement: ElementRef<HTMLElement>, zone: NgZone, navigationService: NavigationService);
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
+    /**
+     * 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(): void;
+    /**
+     * Focuses the targeted cell in the TreeList part of the component,
+     * ([see example]({% slug keyboard_navigation_gantt %}#toc-controlling-the-focus)).
+     */
+    focusCell(rowIndex: number, colIndex: number): void;
+    /**
+     * Focuses the targeted task in the Timeline part of the component,
+     * ([see example]({% slug keyboard_navigation_gantt %}#toc-controlling-the-focus)).
+     */
+    focusTask(taskIndex: number): void;
     /**
      * Applies the minimum possible width for the specified column,
      * so that the whole text fits without wrapping. This method expects the Gantt
@@ -563,6 +598,10 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
      * Opens the delete task confirmation dialog.
      */
     openConfirmationDialog(): void;
+    /**
+     * @hidden
+     */
+    handleConfirmationDialogClose(): void;
     /**
      * Opens a cell for editing.
      */
@@ -635,16 +674,36 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
      * @hidden
      */
     getText(token: string): string;
-    private emitTaskClick;
-    private emitSelectionChange;
+    /**
+     * @hidden
+     */
+    changeActiveView(view: TimelineViewType): void;
+    /**
+     * @hidden
+     */
+    notifyTaskClick(event: PointerEvent | KeyboardEvent, dataItem: any, itemIndex: number): void;
+    /**
+     * @hidden
+     */
+    notifySelectionChange(dataItem: any, action: 'select' | 'remove'): void;
+    /**
+     * @hidden
+     */
+    notifyTaskDelete(task: any): void;
+    /**
+     * @hidden
+     */
+    isSameSelection(action: 'select' | 'remove', dataItem: any): boolean;
+    /**
+     * @hidden
+     */
+    getSelectionAction({ ctrlKey, metaKey }: PointerEvent | KeyboardEvent, dataItem: any): 'select' | 'remove';
     private updateTreeListGroupClass;
     /**
      * Used to hide the vertical scrollbar
      */
     private updateTreeListMargin;
     private getActiveViewOptions;
-    private isSameSelection;
-    private getSelectionAction;
     private getFirstSelectedItem;
     private defaultValidateNewDependencyCallback;
 }

package/dist/es2015/gantt.component.js

@@ -11,6 +11,7 @@ import { Subscription } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
 import { anyChanged, hasObservers } from '@progress/kendo-angular-common';
+import { GanttTimelineComponent } from './timeline/gantt-timeline.component';
 import { GanttColumnBase } from './columns/columns';
 import { fetchChildren, hasChildren, isSelected, rowClassCallback, taskClassCallback } from './common/default-callbacks';
 import { DependencyType } from './models/models';
@@ -26,13 +27,13 @@ import { OptionChangesService } from './common/option-changes.service';
 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 { 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';
 import { GanttTaskContentTemplateDirective } from './template-directives/task-content-template.directive';
 import { ToolbarTemplateDirective } from './toolbar/toolbar-template.directive';
-import { GanttTimelineComponent } from './timeline/gantt-timeline.component';
 import { ViewBase } from './timeline/view-base';
 import { getEditItem } from './editing/utils';
 const TREELIST_GROUP_COLUMNS_CLASS = 'k-gantt-treelist-nested-columns';
@@ -115,7 +116,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;
@@ -126,6 +127,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)).
@@ -197,6 +207,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.
@@ -240,7 +256,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();
@@ -375,7 +392,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,
@@ -386,6 +407,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();
@@ -409,6 +433,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;
     }
@@ -586,6 +616,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
      */
@@ -629,6 +668,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();
@@ -636,6 +681,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');
     }
@@ -653,6 +706,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
@@ -737,6 +818,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.
      */
@@ -821,7 +911,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));
         }
     }
     /**
@@ -839,8 +929,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);
             });
         }
     }
@@ -877,7 +967,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
@@ -928,7 +1018,7 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
                 dataItem: task,
                 originalEvent: event,
                 sender: this,
-                rowIndex: taskIndex,
+                index: taskIndex,
                 type: 'dblclick'
             }));
         }
@@ -939,16 +1029,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;
         }
@@ -959,6 +1068,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;
@@ -985,13 +1117,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 || [];
@@ -1067,6 +1192,24 @@ 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)
@@ -1172,6 +1315,10 @@ 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),
@@ -1337,7 +1484,8 @@ GanttComponent = GanttComponent_1 = tslib_1.__decorate([
             MappingService,
             OptionChangesService,
             EditService,
-            TimelineScrollService
+            TimelineScrollService,
+            NavigationService
         ],
         template: `
         <ng-container kendoGanttLocalizedMessages
@@ -1564,6 +1712,7 @@ GanttComponent = GanttComponent_1 = tslib_1.__decorate([
                         [data]="data"
                         [hasChildren]="hasChildren"
                         [fetchChildren]="fetchChildren"
+                        [navigable]="navigable"
                         [isExpanded]="isExpanded"
                         [autoSize]="columnsAutoSize"
                         [columnMenu]="columnMenu"
@@ -1654,7 +1803,7 @@ GanttComponent = GanttComponent_1 = tslib_1.__decorate([
                         *ngIf="views && views.length"
                         [renderDependencyDragClues]="renderDependencyDragClues"
                         [dragScrollSettings]="dragScrollSettings"
-                        [rows]="renderedTreeListItems"
+                        [rows]="viewItems"
                         [slots]="timelineSlots"
                         [groupSlots]="timelineGroupSlots"
                         [tableWidth]="tableWidth"
@@ -1664,7 +1813,8 @@ GanttComponent = GanttComponent_1 = tslib_1.__decorate([
                         [summaryTaskTemplate]="summaryTaskTemplate?.templateRef"
                         [taskClass]="taskClass"
                         [dependencies]="dependencies"
-                        [hasChildren]="hasChildren"
+                        [isExpanded]="isExpanded"
+                        [selectable]="selectable"
                         [isTaskSelected]="isTaskSelected"
                         [kendoEventsOutsideAngular]="{
                             click: handleTimelineClick,
@@ -1692,12 +1842,12 @@ GanttComponent = GanttComponent_1 = tslib_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>
    `
@@ -1711,6 +1861,7 @@ GanttComponent = GanttComponent_1 = tslib_1.__decorate([
         EditService,
         LocalizationService,
         ElementRef,
-        NgZone])
+        NgZone,
+        NavigationService])
 ], GanttComponent);
 export { GanttComponent };

package/dist/es2015/index.d.ts

@@ -22,6 +22,7 @@ export { GanttLocalizationService } from './localization/gantt-localization.serv
 export { LocalizedMessagesDirective } from './localization/localized-messages.directive';
 export { Messages } from './localization/messages';
 export { PreventableEvent } from './models/events/preventable-event';
+export { NavigationService } from './navigation/navigation.service';
 export { GanttHeaderTableBodyComponent } from './rendering/gantt-header-table-body.component';
 export { GanttMilestoneTaskComponent } from './rendering/gantt-milestone-task.component';
 export { GanttSummaryTaskComponent } from './rendering/gantt-summary-task.component';

package/dist/es2015/index.js

@@ -22,6 +22,7 @@ export { GanttLocalizationService } from './localization/gantt-localization.serv
 export { LocalizedMessagesDirective } from './localization/localized-messages.directive';
 export { Messages } from './localization/messages';
 export { PreventableEvent } from './models/events/preventable-event';
+export { NavigationService } from './navigation/navigation.service';
 export { GanttHeaderTableBodyComponent } from './rendering/gantt-header-table-body.component';
 export { GanttMilestoneTaskComponent } from './rendering/gantt-milestone-task.component';
 export { GanttSummaryTaskComponent } from './rendering/gantt-summary-task.component';