@progress/kendo-angular-gantt 0.2.0-dev.202111231320 → 0.2.0-dev.202111241002

package/dist/es/common/default-callbacks.js

@@ -19,3 +19,7 @@ export var rowClassCallback = function () { return null; };
  * @hidden
  */
 export var taskClassCallback = function () { return null; };
+/**
+ * @hidden
+ */
+export var isSelected = function () { return false; };

package/dist/es/gantt.component.js

@@ -4,14 +4,14 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 import { Component, forwardRef, HostBinding, Input, Output, EventEmitter, ViewChild, ContentChildren, ContentChild, QueryList, isDevMode, Renderer2, ElementRef, NgZone } from '@angular/core';
-import { DataBoundTreeComponent, ExpandableTreeComponent } from '@progress/kendo-angular-treelist';
-import { TreeListComponent } from '@progress/kendo-angular-treelist';
+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 { GanttColumnBase } from './columns/columns';
-import { fetchChildren, hasChildren, rowClassCallback, taskClassCallback } from './common/default-callbacks';
+import { fetchChildren, hasChildren, isSelected, rowClassCallback, taskClassCallback } from './common/default-callbacks';
 import { TimelineViewService } from './timeline/timeline-view.service';
 import { TimelineDayViewService } from './timeline/timeline-day-view.service';
 import { TimelineWeekViewService } from './timeline/timeline-week-view.service';
@@ -29,7 +29,6 @@ import { GanttSummaryTaskTemplateDirective } from './template-directives/summary
 import { GanttTaskContentTemplateDirective } from './template-directives/task-content-template.directive';
 import { ToolbarTemplateDirective } from './toolbar/toolbar-template.directive';
 import { ViewBase } from './timeline/view-base';
-import { Day } from '@progress/kendo-date-math';
 import { getEditItem } from './editing/util';
 var TREELIST_GROUP_COLUMNS_CLASS = 'k-gantt-treelist-nested-columns';
 var DEFAULT_VIEW = 'week';
@@ -118,6 +117,27 @@ var GanttComponent = /** @class */ (function () {
         this.hostElement = hostElement;
         this.zone = zone;
         this.hostClasses = true;
+        /**
+         * Provides a callback that determines if the given task is selected ([see example]({% slug selection_gantt %}#toc-custom-selection))
+         *
+         * > The [`selectable`]({% slug gantt_api_ganttcomponent %}#toc-selectable) prop has to be set to `true` in order for this callback to be executed.
+         */
+        this.isSelected = isSelected;
+        /**
+         * Fires when the Gantt selection is changed through user interaction.
+         *
+         * Holds data about the affected [`items`]({% slug api_gantt_selectionchangeevent %}#toc-items) and the attempted [`action`]({% slug api_gantt_selectionchangeevent %}#toc-action):
+         * - `select` - Triggered on `click` or `ctrl + click` on deselected items.
+         * - `remove` - Triggered on `ctrl + click` on selected items.
+         */
+        this.selectionChange = new EventEmitter();
+        /**
+         * Enables or disables the Gantt selection mechanism ([see example]({% slug selection_gantt %}#toc-custom-selection)).
+         *
+         * > When set to `true`, the [`isSelected`]({% slug gantt_api_ganttcomponent %}#toc-isselected) callback has to be provided.
+         * > When applied, the [`SelectableDirective`]({% slug api_gantt_selectabledirective %}) sets `selectable` to `true` internally.
+         */
+        this.selectable = false;
         /**
          * The position of the toolbar.
          *
@@ -286,6 +306,14 @@ var GanttComponent = /** @class */ (function () {
          * Fires when the user changes the locked state of the columns from the column menu or by reordering the columns.
          */
         this.columnLockedChange = new EventEmitter();
+        /**
+         * Fires when a cell is clicked.
+         */
+        this.cellClick = new EventEmitter();
+        /**
+         * Fires when a task is clicked.
+         */
+        this.taskClick = new EventEmitter();
         /**
          * @hidden
          *
@@ -311,9 +339,6 @@ var GanttComponent = /** @class */ (function () {
         this.optionChangesSubscriptions = new Subscription();
         this.editServiceSubscription = new Subscription();
         validatePackage(packageMetadata);
-        this.handleTimelineDblClick = this.handleTimelineDblClick.bind(this);
-        this.handleTimelineMouseDown = this.handleTimelineMouseDown.bind(this);
-        this.handleDoubleClick = this.handleDoubleClick.bind(this);
         this.optionChangesSubscriptions.add(this.optionChangesService.viewChanges.subscribe(function () {
             _this.loadTimelineData();
         }));
@@ -549,6 +574,19 @@ var GanttComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(GanttComponent.prototype, "isTaskSelected", {
+        /**
+         * @hidden
+         *
+         * Retrieves the `isSelected` callback if `selectable` is set to `true`
+         * Otherwise returns the default callback, which always returns `false`.
+         */
+        get: function () {
+            return this.selectable ? this.isSelected : isSelected;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(GanttComponent.prototype, "idGetter", {
         /**
          * @hidden
@@ -657,6 +695,14 @@ var GanttComponent = /** @class */ (function () {
             this.treeList.reorderColumn(source, destIndex, options);
         }
     };
+    /**
+     * Updates the data of the Gantt and forces row-related callbacks to be called anew.
+     */
+    GanttComponent.prototype.updateView = function () {
+        if (isPresent(this.treeList)) {
+            this.treeList.updateView();
+        }
+    };
     /**
      * Opens the task editing dialog.
      */
@@ -717,16 +763,6 @@ var GanttComponent = /** @class */ (function () {
             this.dependencyDomService.notifyChanges();
         }
     };
-    /**
-     * @hidden
-     *
-     * Used by the GanttExpandableDirective.
-     */
-    GanttComponent.prototype.updateView = function () {
-        if (isPresent(this.treeList)) {
-            this.treeList.updateView();
-        }
-    };
     /**
      * @hidden
      */
@@ -764,25 +800,92 @@ var GanttComponent = /** @class */ (function () {
     /**
      * @hidden
      */
-    GanttComponent.prototype.handleCellClick = function (event) {
-        this._cellClickEvent = event;
+    GanttComponent.prototype.handleTimelineRightClick = function (event) {
+        var _this = this;
+        var target = event.target;
+        var gantt = this.hostElement.nativeElement;
+        if (!isTask(target, gantt) || isClearButton(target, gantt)) {
+            return;
+        }
+        if (hasObservers(this.taskClick)) {
+            var taskIndex_1 = getClosestTaskIndex(target, gantt);
+            var task_1 = this.renderedTreeListItems[taskIndex_1];
+            this.zone.run(function () { return _this.emitTaskClick(event, task_1, taskIndex_1); });
+        }
     };
     /**
      * @hidden
      */
-    GanttComponent.prototype.handleDoubleClick = function (event) {
+    GanttComponent.prototype.handleTimelineClick = function (event) {
         var _this = this;
-        var cell = this._cellClickEvent.originalEvent.target;
-        if (event.target !== cell) {
+        var target = event.target;
+        var gantt = this.hostElement.nativeElement;
+        if (!isTask(target, gantt) || isClearButton(target, gantt)) {
             return;
         }
-        this.editItem = getEditItem(this._cellClickEvent.dataItem, this.treeList.view.data, this.mapper);
+        var taskIndex = getClosestTaskIndex(target, gantt);
+        var task = this.renderedTreeListItems[taskIndex];
+        var selectionAction = this.getSelectionAction(event, task);
+        if ((hasObservers(this.selectionChange) && !this.isSameSelection(selectionAction, task)) ||
+            hasObservers(this.taskClick)) {
+            this.zone.run(function () {
+                _this.emitSelectionChange(task, selectionAction);
+                _this.emitTaskClick(event, task, taskIndex);
+            });
+        }
+    };
+    /**
+     * @hidden
+     */
+    GanttComponent.prototype.handleTreeListDoubleClick = function (event) {
+        var _this = this;
+        if (!isPresent(this.lastTreeListCellClick) || event.target !== this.lastTreeListCellClick.originalEvent.target) {
+            return;
+        }
+        this.editItem = getEditItem(this.lastTreeListCellClick.dataItem, this.treeList.view.data, this.mapper);
         if (hasObservers(this.cellDblClick)) {
             this.zone.run(function () {
-                _this.cellDblClick.emit(tslib_1.__assign({}, _this._cellClickEvent, { sender: _this }));
+                _this.cellDblClick.emit({
+                    column: _this.lastTreeListCellClick.column,
+                    columnIndex: _this.lastTreeListCellClick.columnIndex,
+                    dataItem: _this.lastTreeListCellClick.dataItem,
+                    isEdited: _this.lastTreeListCellClick.isEdited,
+                    originalEvent: _this.lastTreeListCellClick.originalEvent,
+                    rowIndex: _this.lastTreeListCellClick.rowIndex,
+                    type: 'dblclick',
+                    sender: _this
+                });
             });
         }
     };
+    /**
+     * @hidden
+     */
+    GanttComponent.prototype.handleTreeListSelectionChange = function (event) {
+        // prevent selection change from right-click
+        if (isPresent(this.lastTreeListCellClick) && this.lastTreeListCellClick.type === 'contextmenu') {
+            return;
+        }
+        var task = event.items.map(function (item) { return item.dataItem; })[0]; // single selection only currently available
+        var action = event.action;
+        this.emitSelectionChange(task, action);
+    };
+    /**
+     * @hidden
+     */
+    GanttComponent.prototype.handleTreeListCellClick = function (event) {
+        this.lastTreeListCellClick = event;
+        this.cellClick.emit({
+            column: event.column,
+            columnIndex: event.columnIndex,
+            dataItem: event.dataItem,
+            isEdited: event.isEdited,
+            originalEvent: event.originalEvent,
+            rowIndex: event.rowIndex,
+            type: event.type,
+            sender: this
+        });
+    };
     /**
      * @hidden
      */
@@ -810,13 +913,17 @@ var GanttComponent = /** @class */ (function () {
         if (!isTask(target, gantt) || isClearButton(target, gantt)) {
             return;
         }
-        var taskIndex = getClosestTaskIndex(target, gantt);
-        var task = this.renderedTreeListItems[taskIndex];
-        this.zone.run(function () { return _this.taskDblClick.emit({
-            dataItem: task,
-            originalEvent: event,
-            sender: _this
-        }); });
+        if (hasObservers(this.taskDblClick)) {
+            var taskIndex_2 = getClosestTaskIndex(target, gantt);
+            var task_2 = this.renderedTreeListItems[taskIndex_2];
+            this.zone.run(function () { return _this.taskDblClick.emit({
+                dataItem: task_2,
+                originalEvent: event,
+                sender: _this,
+                rowIndex: taskIndex_2,
+                type: 'dblclick'
+            }); });
+        }
     };
     /**
      * @hidden
@@ -824,6 +931,26 @@ var GanttComponent = /** @class */ (function () {
     GanttComponent.prototype.getText = function (token) {
         return this.localizationService.get(token);
     };
+    GanttComponent.prototype.emitTaskClick = function (event, dataItem, itemIndex) {
+        this.taskClick.emit({
+            originalEvent: event,
+            dataItem: dataItem,
+            rowIndex: itemIndex,
+            type: event.type,
+            sender: this
+        });
+    };
+    GanttComponent.prototype.emitSelectionChange = function (dataItem, action) {
+        if (this.isSameSelection(action, dataItem)) {
+            return;
+        }
+        this.selectionChange.emit({
+            action: action,
+            items: [dataItem],
+            sender: this
+        });
+        this.updateView();
+    };
     GanttComponent.prototype.updateTreeListGroupClass = function (columns) {
         if (columns === void 0) { columns = this.columns; }
         if (!isPresent(this.treeList)) {
@@ -854,6 +981,14 @@ var GanttComponent = /** @class */ (function () {
         }
         return this.views.find(function (view) { return view.type === _this.activeView; });
     };
+    GanttComponent.prototype.isSameSelection = function (action, dataItem) {
+        return action === 'select' && this.isSelected(dataItem);
+    };
+    GanttComponent.prototype.getSelectionAction = function (_a, dataItem) {
+        var ctrlKey = _a.ctrlKey, metaKey = _a.metaKey;
+        var shouldToggleSelection = ctrlKey || metaKey;
+        return (shouldToggleSelection && this.isSelected(dataItem)) ? 'remove' : 'select';
+    };
     var GanttComponent_1;
     tslib_1.__decorate([
         ViewChild(TreeListComponent, { static: true }),
@@ -913,6 +1048,18 @@ var GanttComponent = /** @class */ (function () {
         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([
+        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", String)
@@ -1081,6 +1228,14 @@ var GanttComponent = /** @class */ (function () {
         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',
@@ -1105,7 +1260,7 @@ var GanttComponent = /** @class */ (function () {
                 OptionChangesService,
                 EditService
             ],
-            template: "\n        <ng-container kendoGanttLocalizedMessages\n            i18n-taskDeleteLabel=\"kendo.gantt.taskDeleteLabel|The label of the task delete icon\"\n            taskDeleteLabel=\"Delete\"\n\n            i18n-taskEditingDialogTitle=\"kendo.gantt.taskEditingDialogTitle|The title of the task editing dialog\"\n            taskEditingDialogTitle=\"Editing Task\"\n\n            i18n-taskEditingDialogCloseTitle=\"kendo.gantt.taskEditingDialogCloseTitle|The title of the task editing dialog close button\"\n            taskEditingDialogCloseTitle=\"Close\"\n\n            i18n-confirmationDialogCloseTitle=\"kendo.gantt.confirmationDialogCloseTitle|The title of the confirmation dialog close button\"\n            confirmationDialogCloseTitle=\"Close\"\n\n            i18n-confirmationDialogTitle=\"kendo.gantt.confirmationDialogTitle|The title of the delete task confirmation dialog\"\n            confirmationDialogTitle=\"Delete Task\"\n\n            i18n-confirmationDialogContent=\"kendo.gantt.confirmationDialogContent|The content of the delete task confirmation dialog\"\n            confirmationDialogContent=\"Are you sure you want to delete this task?\"\n\n            i18n-deleteButtonText=\"kendo.gantt.deleteButtonText|The text of the task editing dialog 'Delete' button\"\n            deleteButtonText=\"Delete\"\n\n            i18n-cancelButtonText=\"kendo.gantt.cancelButtonText|The text of the task editing dialog 'Cancel' button\"\n            cancelButtonText=\"Cancel\"\n\n            i18n-saveButtonText=\"kendo.gantt.saveButtonText|The text of the task editing dialog 'Save' button\"\n            saveButtonText=\"Save\"\n\n            i18n-titleFieldInputLabel=\"kendo.gantt.titleFieldInputLabel|The label of the 'title' field input in editing mode\"\n            titleFieldInputLabel=\"Title\"\n\n            i18n-startFieldInputLabel=\"kendo.gantt.startFieldInputLabel|The label of the 'start' field input in editing mode\"\n            startFieldInputLabel=\"Start\"\n\n            i18n-endFieldInputLabel=\"kendo.gantt.endFieldInputLabel|The label of the 'end' field input in editing mode\"\n            endFieldInputLabel=\"End\"\n\n            i18n-completionRatioFieldInputLabel=\"kendo.gantt.completionRatioFieldInputLabel|The label of the 'completionRatio' field input in editing mode\"\n            completionRatioFieldInputLabel=\"Progress\"\n\n            i18n-dayViewText=\"kendo.gantt.dayViewText|The text of the day view in the ViewSelector component\"\n            dayViewText=\"Day\"\n\n            i18n-weekViewText=\"kendo.gantt.weekViewText|The text of the week view in the ViewSelector component\"\n            weekViewText=\"Week\"\n\n            i18n-monthViewText=\"kendo.gantt.monthViewText|The text of the month view in the ViewSelector component\"\n            monthViewText=\"Month\"\n\n            i18n-yearViewText-disabled=\"kendo.gantt.yearViewText|The text of the year view in the ViewSelector component\"\n            yearViewText=\"Year\"\n\n            i18n-noRecords=\"kendo.gantt.noRecords|The label visible in the TreeList when there are no records\"\n            noRecords=\"No records available.\"\n\n            i18n-filter=\"kendo.gantt.filter|The label of the filter cell or icon\"\n            filter=\"Filter\"\n\n            i18n-filterEqOperator=\"kendo.gantt.filterEqOperator|The text of the equal filter operator\"\n            filterEqOperator=\"Is equal to\"\n\n            i18n-filterNotEqOperator=\"kendo.gantt.filterNotEqOperator|The text of the not equal filter operator\"\n            filterNotEqOperator=\"Is not equal to\"\n\n            i18n-filterIsNullOperator=\"kendo.gantt.filterIsNullOperator|The text of the is null filter operator\"\n            filterIsNullOperator=\"Is null\"\n\n            i18n-filterIsNotNullOperator=\"kendo.gantt.filterIsNotNullOperator|The text of the is not null filter operator\"\n            filterIsNotNullOperator=\"Is not null\"\n\n            i18n-filterIsEmptyOperator=\"kendo.gantt.filterIsEmptyOperator|The text of the is empty filter operator\"\n            filterIsEmptyOperator=\"Is empty\"\n\n            i18n-filterIsNotEmptyOperator=\"kendo.gantt.filterIsNotEmptyOperator|The text of the is not empty filter operator\"\n            filterIsNotEmptyOperator=\"Is not empty\"\n\n            i18n-filterStartsWithOperator=\"kendo.gantt.filterStartsWithOperator|The text of the starts with filter operator\"\n            filterStartsWithOperator=\"Starts with\"\n\n            i18n-filterContainsOperator=\"kendo.gantt.filterContainsOperator|The text of the contains filter operator\"\n            filterContainsOperator=\"Contains\"\n\n            i18n-filterNotContainsOperator=\"kendo.gantt.filterNotContainsOperator|The text of the does not contain filter operator\"\n            filterNotContainsOperator=\"Does not contain\"\n\n            i18n-filterEndsWithOperator=\"kendo.gantt.filterEndsWithOperator|The text of the ends with filter operator\"\n            filterEndsWithOperator=\"Ends with\"\n\n            i18n-filterGteOperator=\"kendo.gantt.filterGteOperator|The text of the greater than or equal filter operator\"\n            filterGteOperator=\"Is greater than or equal to\"\n\n            i18n-filterGtOperator=\"kendo.gantt.filterGtOperator|The text of the greater than filter operator\"\n            filterGtOperator=\"Is greater than\"\n\n            i18n-filterLteOperator=\"kendo.gantt.filterLteOperator|The text of the less than or equal filter operator\"\n            filterLteOperator=\"Is less than or equal to\"\n\n            i18n-filterLtOperator=\"kendo.gantt.filterLtOperator|The text of the less than filter operator\"\n            filterLtOperator=\"Is less than\"\n\n            i18n-filterIsTrue=\"kendo.gantt.filterIsTrue|The text of the IsTrue boolean filter option\"\n            filterIsTrue=\"Is True\"\n\n            i18n-filterIsFalse=\"kendo.gantt.filterIsFalse|The text of the IsFalse boolean filter option\"\n            filterIsFalse=\"Is False\"\n\n            i18n-filterBooleanAll=\"kendo.gantt.filterBooleanAll|The text of the (All) boolean filter option\"\n            filterBooleanAll=\"(All)\"\n\n            i18n-filterAfterOrEqualOperator=\"kendo.gantt.filterAfterOrEqualOperator|The text of the after or equal date filter operator\"\n            filterAfterOrEqualOperator=\"Is after or equal to\"\n\n            i18n-filterAfterOperator=\"kendo.gantt.filterAfterOperator|The text of the after date filter operator\"\n            filterAfterOperator=\"Is after\"\n\n            i18n-filterBeforeOperator=\"kendo.gantt.filterBeforeOperator|The text of the before date filter operator\"\n            filterBeforeOperator=\"Is before\"\n\n            i18n-filterBeforeOrEqualOperator=\"kendo.gantt.filterBeforeOrEqualOperator|The text of the before or equal date filter operator\"\n            filterBeforeOrEqualOperator=\"Is before or equal to\"\n\n            i18n-filterFilterButton=\"kendo.gantt.filterFilterButton|The text of the filter button\"\n            filterFilterButton=\"Filter\"\n\n            i18n-filterClearButton=\"kendo.gantt.filterClearButton|The text of the clear filter button\"\n            filterClearButton=\"Clear\"\n\n            i18n-filterAndLogic=\"kendo.gantt.filterAndLogic|The text of the And filter logic\"\n            filterAndLogic=\"And\"\n\n            i18n-filterOrLogic=\"kendo.gantt.filterOrLogic|The text of the Or filter logic\"\n            filterOrLogic=\"Or\"\n\n            i18n-loading=\"kendo.gantt.loading|The loading text\"\n            loading=\"Loading\"\n\n            i18n-columnMenu=\"kendo.gantt.columnMenu|The title of the column menu icon\"\n            columnMenu=\"Column Menu\"\n\n            i18n-columns=\"kendo.gantt.columns|The text shown in the column menu for the columns item\"\n            columns=\"Columns\"\n\n            i18n-lock-disabled=\"kendo.gantt.lock|The text shown in the column menu for the lock item\"\n            lock-disabled=\"Lock\"\n\n            i18n-unlock-disabled=\"kendo.gantt.unlock|The text shown in the column menu for the unlock item\"\n            unlock-disabled=\"Unlock\"\n\n            i18n-sortable=\"kendo.gantt.sortable|The label of the sort icon\"\n            sortable=\"Sortable\"\n\n            i18n-sortAscending=\"kendo.gantt.sortAscending|The text shown in the column menu for the sort ascending item\"\n            sortAscending=\"Sort Ascending\"\n\n            i18n-sortDescending=\"kendo.gantt.sortDescending|The text shown in the column menu for the sort descending item\"\n            sortDescending=\"Sort Descending\"\n\n            i18n-sortedAscending=\"kendo.gantt.sortedAscending|The status announcement when a column is sorted ascending\"\n            sortedAscending=\"Sorted Ascending\"\n\n            i18n-sortedDescending=\"kendo.gantt.sortedDescending|The status announcement when a column is sorted descending\"\n            sortedDescending=\"Sorted Descending\"\n\n            i18n-sortedDefault=\"kendo.gantt.sortedDefault|The status announcement when a column is no longer sorted\"\n            sortedDefault=\"Not Sorted\"\n\n            i18n-columnsApply=\"kendo.gantt.columnsApply|The text shown in the column menu or column chooser for the columns apply button\"\n            columnsApply=\"Apply\"\n\n            i18n-columnsReset=\"kendo.gantt.columnsReset|The text shown in the column menu or column chooser for the columns reset button\"\n            columnsReset=\"Reset\"></ng-container>\n        <kendo-gantt-toolbar\n            *ngIf=\"showToolbar('top')\"\n            class=\"k-gantt-header k-toolbar k-gantt-toolbar\"\n            position=\"top\"></kendo-gantt-toolbar>\n        <div class=\"k-gantt-content\">\n            <kendo-splitter [style.border]=\"0\">\n                <kendo-splitter-pane\n                    class=\"k-gantt-treelist k-gantt-treelist-scrollable\"\n                    [collapsible]=\"treeListPaneOptions?.collapsible\"\n                    [collapsed]=\"treeListPaneOptions?.collapsed\"\n                    (collapsedChange)=\"onTreeListCollapsedChange($event)\"\n                    [scrollable]=\"false\">\n                    <kendo-treelist\n                        [idField]=\"taskIdField\"\n                        [columns]=\"columns\"\n                        [data]=\"data\"\n                        [hasChildren]=\"hasChildren\"\n                        [fetchChildren]=\"fetchChildren\"\n                        [isExpanded]=\"isExpanded\"\n                        [autoSize]=\"columnsAutoSize\"\n                        [columnMenu]=\"columnMenu\"\n                        [reorderable]=\"columnsReorderable\"\n                        [resizable]=\"columnsResizable\"\n                        [rowClass]=\"rowClass\"\n                        [sortable]=\"sortable\"\n                        [sort]=\"sort\"\n                        [filterable]=\"filterMenu\"\n                        [filter]=\"filter\"\n                        (filterChange)=\"filterChange.emit($event)\"\n                        (sortChange)=\"sortChange.emit($event)\"\n                        (dataStateChange)=\"dataStateChange.emit({\n                            filter: $event.filter,\n                            sort: $event.sort\n                        })\"\n                        (expandStateChange)=\"expandStateChange.emit($event)\"\n                        (expand)=\"rowExpand.emit({ dataItem: $event.dataItem })\"\n                        (collapse)=\"rowCollapse.emit({ dataItem: $event.dataItem })\"\n                        (columnReorder)=\"columnReorder.emit($event)\"\n                        (columnResize)=\"columnResize.emit($event)\"\n                        (columnVisibilityChange)=\"handleColumnVisibilityChange($event)\"\n                        (columnLockedChange)=\"columnLockedChange.emit($event)\"\n                        (cellClick)=\"handleCellClick($event)\"\n                        (cellClose)=\"handleCellClose($event)\"\n                        [kendoEventsOutsideAngular]=\"{\n                            dblclick: handleDoubleClick\n                        }\">\n                        <kendo-treelist-messages [kendoGanttTreeListMessages]=\"localizationService\"></kendo-treelist-messages>\n                    </kendo-treelist>\n                </kendo-splitter-pane>\n                <kendo-splitter-pane\n                    [collapsible]=\"timelinePaneOptions?.collapsible\"\n                    [resizable]=\"timelinePaneOptions?.resizable\"\n                    [collapsed]=\"timelinePaneOptions?.collapsed\"\n                    [min]=\"timelinePaneOptions?.min\"\n                    [max]=\"timelinePaneOptions?.max\"\n                    [size]=\"timelinePaneOptions?.size\"\n                    (collapsedChange)=\"onTimelineCollapsedChange($event)\"\n                    (sizeChange)=\"onTimelinePaneSizeChange($event)\"\n                    [scrollable]=\"false\">\n                    <kendo-gantt-timeline\n                        *ngIf=\"views && views.length\"\n                        [rows]=\"renderedTreeListItems\"\n                        [slots]=\"timelineSlots\"\n                        [groupSlots]=\"timelineGroupSlots\"\n                        [tableWidth]=\"tableWidth\"\n                        [activeView]=\"activeView\"\n                        [taskContentTemplate]=\"taskContentTemplate?.templateRef\"\n                        [taskTemplate]=\"taskTemplate?.templateRef\"\n                        [summaryTaskTemplate]=\"summaryTaskTemplate?.templateRef\"\n                        [taskClass]=\"taskClass\"\n                        [dependencies]=\"dependencies\"\n                        [hasChildren]=\"hasChildren\"\n                        [kendoEventsOutsideAngular]=\"{\n                            dblclick: handleTimelineDblClick,\n                            mousedown: handleTimelineMouseDown\n                        }\"\n                    ></kendo-gantt-timeline>\n                </kendo-splitter-pane>\n            </kendo-splitter>\n        </div>\n        <kendo-gantt-toolbar\n            *ngIf=\"showToolbar('bottom')\"\n            class=\"k-gantt-footer k-toolbar k-gantt-toolbar\"\n            position=\"bottom\"></kendo-gantt-toolbar>\n        <kendo-gantt-edit-dialog *ngIf=\"showEditingDialog\" [formGroup]=\"editDialogFormGroup\"></kendo-gantt-edit-dialog>\n        <kendo-dialog\n            *ngIf=\"showConfirmationDialog\"\n            [width]=\"575\"\n            [height]=\"170\"\n            [title]=\"getText('confirmationDialogTitle')\"\n            (close)=\"showConfirmationDialog = false;\">\n            <span>{{getText('confirmationDialogContent')}}</span>\n            <kendo-dialog-actions layout=\"normal\">\n                <kendo-treelist-spacer></kendo-treelist-spacer>\n                <button kendoButton [primary]=\"true\" (click)=\"handleDeleteConfirmation()\">{{ getText('deleteButtonText') }}</button>\n                <button kendoButton (click)=\"showConfirmationDialog = false;\">{{ getText('cancelButtonText') }}</button>\n            </kendo-dialog-actions>\n        </kendo-dialog>\n   "
+            template: "\n        <ng-container kendoGanttLocalizedMessages\n            i18n-taskDeleteLabel=\"kendo.gantt.taskDeleteLabel|The label of the task delete icon\"\n            taskDeleteLabel=\"Delete\"\n\n            i18n-taskEditingDialogTitle=\"kendo.gantt.taskEditingDialogTitle|The title of the task editing dialog\"\n            taskEditingDialogTitle=\"Editing Task\"\n\n            i18n-taskEditingDialogCloseTitle=\"kendo.gantt.taskEditingDialogCloseTitle|The title of the task editing dialog close button\"\n            taskEditingDialogCloseTitle=\"Close\"\n\n            i18n-confirmationDialogCloseTitle=\"kendo.gantt.confirmationDialogCloseTitle|The title of the confirmation dialog close button\"\n            confirmationDialogCloseTitle=\"Close\"\n\n            i18n-confirmationDialogTitle=\"kendo.gantt.confirmationDialogTitle|The title of the delete task confirmation dialog\"\n            confirmationDialogTitle=\"Delete Task\"\n\n            i18n-confirmationDialogContent=\"kendo.gantt.confirmationDialogContent|The content of the delete task confirmation dialog\"\n            confirmationDialogContent=\"Are you sure you want to delete this task?\"\n\n            i18n-deleteButtonText=\"kendo.gantt.deleteButtonText|The text of the task editing dialog 'Delete' button\"\n            deleteButtonText=\"Delete\"\n\n            i18n-cancelButtonText=\"kendo.gantt.cancelButtonText|The text of the task editing dialog 'Cancel' button\"\n            cancelButtonText=\"Cancel\"\n\n            i18n-saveButtonText=\"kendo.gantt.saveButtonText|The text of the task editing dialog 'Save' button\"\n            saveButtonText=\"Save\"\n\n            i18n-titleFieldInputLabel=\"kendo.gantt.titleFieldInputLabel|The label of the 'title' field input in editing mode\"\n            titleFieldInputLabel=\"Title\"\n\n            i18n-startFieldInputLabel=\"kendo.gantt.startFieldInputLabel|The label of the 'start' field input in editing mode\"\n            startFieldInputLabel=\"Start\"\n\n            i18n-endFieldInputLabel=\"kendo.gantt.endFieldInputLabel|The label of the 'end' field input in editing mode\"\n            endFieldInputLabel=\"End\"\n\n            i18n-completionRatioFieldInputLabel=\"kendo.gantt.completionRatioFieldInputLabel|The label of the 'completionRatio' field input in editing mode\"\n            completionRatioFieldInputLabel=\"Progress\"\n\n            i18n-dayViewText=\"kendo.gantt.dayViewText|The text of the day view in the ViewSelector component\"\n            dayViewText=\"Day\"\n\n            i18n-weekViewText=\"kendo.gantt.weekViewText|The text of the week view in the ViewSelector component\"\n            weekViewText=\"Week\"\n\n            i18n-monthViewText=\"kendo.gantt.monthViewText|The text of the month view in the ViewSelector component\"\n            monthViewText=\"Month\"\n\n            i18n-yearViewText-disabled=\"kendo.gantt.yearViewText|The text of the year view in the ViewSelector component\"\n            yearViewText=\"Year\"\n\n            i18n-noRecords=\"kendo.gantt.noRecords|The label visible in the TreeList when there are no records\"\n            noRecords=\"No records available.\"\n\n            i18n-filter=\"kendo.gantt.filter|The label of the filter cell or icon\"\n            filter=\"Filter\"\n\n            i18n-filterEqOperator=\"kendo.gantt.filterEqOperator|The text of the equal filter operator\"\n            filterEqOperator=\"Is equal to\"\n\n            i18n-filterNotEqOperator=\"kendo.gantt.filterNotEqOperator|The text of the not equal filter operator\"\n            filterNotEqOperator=\"Is not equal to\"\n\n            i18n-filterIsNullOperator=\"kendo.gantt.filterIsNullOperator|The text of the is null filter operator\"\n            filterIsNullOperator=\"Is null\"\n\n            i18n-filterIsNotNullOperator=\"kendo.gantt.filterIsNotNullOperator|The text of the is not null filter operator\"\n            filterIsNotNullOperator=\"Is not null\"\n\n            i18n-filterIsEmptyOperator=\"kendo.gantt.filterIsEmptyOperator|The text of the is empty filter operator\"\n            filterIsEmptyOperator=\"Is empty\"\n\n            i18n-filterIsNotEmptyOperator=\"kendo.gantt.filterIsNotEmptyOperator|The text of the is not empty filter operator\"\n            filterIsNotEmptyOperator=\"Is not empty\"\n\n            i18n-filterStartsWithOperator=\"kendo.gantt.filterStartsWithOperator|The text of the starts with filter operator\"\n            filterStartsWithOperator=\"Starts with\"\n\n            i18n-filterContainsOperator=\"kendo.gantt.filterContainsOperator|The text of the contains filter operator\"\n            filterContainsOperator=\"Contains\"\n\n            i18n-filterNotContainsOperator=\"kendo.gantt.filterNotContainsOperator|The text of the does not contain filter operator\"\n            filterNotContainsOperator=\"Does not contain\"\n\n            i18n-filterEndsWithOperator=\"kendo.gantt.filterEndsWithOperator|The text of the ends with filter operator\"\n            filterEndsWithOperator=\"Ends with\"\n\n            i18n-filterGteOperator=\"kendo.gantt.filterGteOperator|The text of the greater than or equal filter operator\"\n            filterGteOperator=\"Is greater than or equal to\"\n\n            i18n-filterGtOperator=\"kendo.gantt.filterGtOperator|The text of the greater than filter operator\"\n            filterGtOperator=\"Is greater than\"\n\n            i18n-filterLteOperator=\"kendo.gantt.filterLteOperator|The text of the less than or equal filter operator\"\n            filterLteOperator=\"Is less than or equal to\"\n\n            i18n-filterLtOperator=\"kendo.gantt.filterLtOperator|The text of the less than filter operator\"\n            filterLtOperator=\"Is less than\"\n\n            i18n-filterIsTrue=\"kendo.gantt.filterIsTrue|The text of the IsTrue boolean filter option\"\n            filterIsTrue=\"Is True\"\n\n            i18n-filterIsFalse=\"kendo.gantt.filterIsFalse|The text of the IsFalse boolean filter option\"\n            filterIsFalse=\"Is False\"\n\n            i18n-filterBooleanAll=\"kendo.gantt.filterBooleanAll|The text of the (All) boolean filter option\"\n            filterBooleanAll=\"(All)\"\n\n            i18n-filterAfterOrEqualOperator=\"kendo.gantt.filterAfterOrEqualOperator|The text of the after or equal date filter operator\"\n            filterAfterOrEqualOperator=\"Is after or equal to\"\n\n            i18n-filterAfterOperator=\"kendo.gantt.filterAfterOperator|The text of the after date filter operator\"\n            filterAfterOperator=\"Is after\"\n\n            i18n-filterBeforeOperator=\"kendo.gantt.filterBeforeOperator|The text of the before date filter operator\"\n            filterBeforeOperator=\"Is before\"\n\n            i18n-filterBeforeOrEqualOperator=\"kendo.gantt.filterBeforeOrEqualOperator|The text of the before or equal date filter operator\"\n            filterBeforeOrEqualOperator=\"Is before or equal to\"\n\n            i18n-filterFilterButton=\"kendo.gantt.filterFilterButton|The text of the filter button\"\n            filterFilterButton=\"Filter\"\n\n            i18n-filterClearButton=\"kendo.gantt.filterClearButton|The text of the clear filter button\"\n            filterClearButton=\"Clear\"\n\n            i18n-filterAndLogic=\"kendo.gantt.filterAndLogic|The text of the And filter logic\"\n            filterAndLogic=\"And\"\n\n            i18n-filterOrLogic=\"kendo.gantt.filterOrLogic|The text of the Or filter logic\"\n            filterOrLogic=\"Or\"\n\n            i18n-loading=\"kendo.gantt.loading|The loading text\"\n            loading=\"Loading\"\n\n            i18n-columnMenu=\"kendo.gantt.columnMenu|The title of the column menu icon\"\n            columnMenu=\"Column Menu\"\n\n            i18n-columns=\"kendo.gantt.columns|The text shown in the column menu for the columns item\"\n            columns=\"Columns\"\n\n            i18n-lock-disabled=\"kendo.gantt.lock|The text shown in the column menu for the lock item\"\n            lock-disabled=\"Lock\"\n\n            i18n-unlock-disabled=\"kendo.gantt.unlock|The text shown in the column menu for the unlock item\"\n            unlock-disabled=\"Unlock\"\n\n            i18n-sortable=\"kendo.gantt.sortable|The label of the sort icon\"\n            sortable=\"Sortable\"\n\n            i18n-sortAscending=\"kendo.gantt.sortAscending|The text shown in the column menu for the sort ascending item\"\n            sortAscending=\"Sort Ascending\"\n\n            i18n-sortDescending=\"kendo.gantt.sortDescending|The text shown in the column menu for the sort descending item\"\n            sortDescending=\"Sort Descending\"\n\n            i18n-sortedAscending=\"kendo.gantt.sortedAscending|The status announcement when a column is sorted ascending\"\n            sortedAscending=\"Sorted Ascending\"\n\n            i18n-sortedDescending=\"kendo.gantt.sortedDescending|The status announcement when a column is sorted descending\"\n            sortedDescending=\"Sorted Descending\"\n\n            i18n-sortedDefault=\"kendo.gantt.sortedDefault|The status announcement when a column is no longer sorted\"\n            sortedDefault=\"Not Sorted\"\n\n            i18n-columnsApply=\"kendo.gantt.columnsApply|The text shown in the column menu or column chooser for the columns apply button\"\n            columnsApply=\"Apply\"\n\n            i18n-columnsReset=\"kendo.gantt.columnsReset|The text shown in the column menu or column chooser for the columns reset button\"\n            columnsReset=\"Reset\"></ng-container>\n        <kendo-gantt-toolbar\n            *ngIf=\"showToolbar('top')\"\n            class=\"k-gantt-header k-toolbar k-gantt-toolbar\"\n            position=\"top\"></kendo-gantt-toolbar>\n        <div class=\"k-gantt-content\">\n            <kendo-splitter [style.border]=\"0\">\n                <kendo-splitter-pane\n                    class=\"k-gantt-treelist k-gantt-treelist-scrollable\"\n                    [collapsible]=\"treeListPaneOptions?.collapsible\"\n                    [collapsed]=\"treeListPaneOptions?.collapsed\"\n                    (collapsedChange)=\"onTreeListCollapsedChange($event)\"\n                    [scrollable]=\"false\">\n                    <kendo-treelist\n                        [idField]=\"taskIdField\"\n                        [columns]=\"columns\"\n                        [data]=\"data\"\n                        [hasChildren]=\"hasChildren\"\n                        [fetchChildren]=\"fetchChildren\"\n                        [isExpanded]=\"isExpanded\"\n                        [autoSize]=\"columnsAutoSize\"\n                        [columnMenu]=\"columnMenu\"\n                        [reorderable]=\"columnsReorderable\"\n                        [resizable]=\"columnsResizable\"\n                        [rowClass]=\"rowClass\"\n                        [isSelected]=\"isSelected\"\n                        [selectable]=\"selectable\"\n                        [sortable]=\"sortable\"\n                        [sort]=\"sort\"\n                        [filterable]=\"filterMenu\"\n                        [filter]=\"filter\"\n                        (filterChange)=\"filterChange.emit($event)\"\n                        (sortChange)=\"sortChange.emit($event)\"\n                        (dataStateChange)=\"dataStateChange.emit({\n                            filter: $event.filter,\n                            sort: $event.sort\n                        })\"\n                        (expandStateChange)=\"expandStateChange.emit($event)\"\n                        (expand)=\"rowExpand.emit({ dataItem: $event.dataItem })\"\n                        (collapse)=\"rowCollapse.emit({ dataItem: $event.dataItem })\"\n                        (columnReorder)=\"columnReorder.emit($event)\"\n                        (columnResize)=\"columnResize.emit($event)\"\n                        (columnVisibilityChange)=\"handleColumnVisibilityChange($event)\"\n                        (columnLockedChange)=\"columnLockedChange.emit($event)\"\n                        (selectionChange)=\"handleTreeListSelectionChange($event)\"\n                        (cellClick)=\"handleTreeListCellClick($event)\"\n                        (cellClose)=\"handleCellClose($event)\"\n                        [kendoEventsOutsideAngular]=\"{\n                            dblclick: handleTreeListDoubleClick\n                        }\"\n                        [scope]=\"this\"\n                    >\n                        <kendo-treelist-messages [kendoGanttTreeListMessages]=\"localizationService\"></kendo-treelist-messages>\n                    </kendo-treelist>\n                </kendo-splitter-pane>\n                <kendo-splitter-pane\n                    [collapsible]=\"timelinePaneOptions?.collapsible\"\n                    [resizable]=\"timelinePaneOptions?.resizable\"\n                    [collapsed]=\"timelinePaneOptions?.collapsed\"\n                    [min]=\"timelinePaneOptions?.min\"\n                    [max]=\"timelinePaneOptions?.max\"\n                    [size]=\"timelinePaneOptions?.size\"\n                    (collapsedChange)=\"onTimelineCollapsedChange($event)\"\n                    (sizeChange)=\"onTimelinePaneSizeChange($event)\"\n                    [scrollable]=\"false\">\n                    <kendo-gantt-timeline\n                        *ngIf=\"views && views.length\"\n                        [rows]=\"renderedTreeListItems\"\n                        [slots]=\"timelineSlots\"\n                        [groupSlots]=\"timelineGroupSlots\"\n                        [tableWidth]=\"tableWidth\"\n                        [activeView]=\"activeView\"\n                        [taskContentTemplate]=\"taskContentTemplate?.templateRef\"\n                        [taskTemplate]=\"taskTemplate?.templateRef\"\n                        [summaryTaskTemplate]=\"summaryTaskTemplate?.templateRef\"\n                        [taskClass]=\"taskClass\"\n                        [dependencies]=\"dependencies\"\n                        [hasChildren]=\"hasChildren\"\n                        [isTaskSelected]=\"isTaskSelected\"\n                        [kendoEventsOutsideAngular]=\"{\n                            click: handleTimelineClick,\n                            contextmenu: handleTimelineRightClick,\n                            dblclick: handleTimelineDblClick,\n                            mousedown: handleTimelineMouseDown\n                        }\"\n                        [scope]=\"this\"\n                    ></kendo-gantt-timeline>\n                </kendo-splitter-pane>\n            </kendo-splitter>\n        </div>\n        <kendo-gantt-toolbar\n            *ngIf=\"showToolbar('bottom')\"\n            class=\"k-gantt-footer k-toolbar k-gantt-toolbar\"\n            position=\"bottom\"></kendo-gantt-toolbar>\n        <kendo-gantt-edit-dialog *ngIf=\"showEditingDialog\" [formGroup]=\"editDialogFormGroup\"></kendo-gantt-edit-dialog>\n        <kendo-dialog\n            *ngIf=\"showConfirmationDialog\"\n            [width]=\"575\"\n            [height]=\"170\"\n            [title]=\"getText('confirmationDialogTitle')\"\n            (close)=\"showConfirmationDialog = false;\">\n            <span>{{getText('confirmationDialogContent')}}</span>\n            <kendo-dialog-actions layout=\"normal\">\n                <kendo-treelist-spacer></kendo-treelist-spacer>\n                <button kendoButton [primary]=\"true\" (click)=\"handleDeleteConfirmation()\">{{ getText('deleteButtonText') }}</button>\n                <button kendoButton (click)=\"showConfirmationDialog = false;\">{{ getText('cancelButtonText') }}</button>\n            </kendo-dialog-actions>\n        </kendo-dialog>\n   "
         }),
         tslib_1.__metadata("design:paramtypes", [TimelineViewService,
             ScrollSyncService,

package/dist/es/gantt.module.js

@@ -8,6 +8,7 @@ import { CommonModule } from '@angular/common';
 import { SplitterModule } from '@progress/kendo-angular-layout';
 import { TreeListModule } from '@progress/kendo-angular-treelist';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { EventsModule } from '@progress/kendo-angular-common';
 import { DialogModule } from '@progress/kendo-angular-dialog';
 import { GanttComponent } from './gantt.component';
 import { GanttTimelineComponent } from './timeline/gantt-timeline.component';
@@ -22,6 +23,7 @@ import { GanttMilestoneTaskComponent } from './rendering/gantt-milestone-task.co
 import { GanttFlatBindingDirective } from './binding-directives/flat-binding.directive';
 import { GanttHierarchyBindingDirective } from './binding-directives/hierarchy-binding.directive';
 import { GanttExpandableDirective } from './expanded-state/expandable.directive';
+import { SelectableDirective } from './selection/selectable.directive';
 import { ToolbarComponent } from './toolbar/toolbar.component';
 import { ToolbarTemplateDirective } from './toolbar/toolbar-template.directive';
 import { ViewSelectorComponent } from './toolbar/view-selector.component';
@@ -39,7 +41,6 @@ import { CustomMessagesComponent } from './localization/custom-messages.componen
 import { L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
 import { GanttTreeListMessagesDirective } from './localization/treelist-messages.directive';
-import { EventsModule } from '@progress/kendo-angular-common';
 var IMPORTED_MODULES = [
     CommonModule,
     ReactiveFormsModule,
@@ -84,6 +85,7 @@ var DECLARATIONS = [
     TimelineDayViewComponent,
     TimelineWeekViewComponent,
     TimelineMonthViewComponent,
+    SelectableDirective,
     EditDialogComponent,
     CustomMessagesComponent,
     LocalizedMessagesDirective,

package/dist/es/main.js

@@ -11,5 +11,6 @@ export { GanttTaskTemplateDirective } from './template-directives/task-template.
 export { GanttTaskContentTemplateDirective } from './template-directives/task-content-template.directive';
 export { GanttSummaryTaskTemplateDirective } from './template-directives/summary-task-template.directive';
 export { ToolbarTemplateDirective } from './toolbar/toolbar-template.directive';
+export { SelectableDirective } from './selection/selectable.directive';
 export * from './models/models';
 export * from './columns/columns';

package/dist/es/package-metadata.js

@@ -9,7 +9,7 @@ export var packageMetadata = {
     name: '@progress/kendo-angular-gantt',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1637673280,
+    publishDate: 1637747718,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/dist/es/rendering/gantt-milestone-task.component.js

@@ -34,7 +34,7 @@ var GanttMilestoneTaskComponent = /** @class */ (function (_super) {
                     useExisting: forwardRef(function () { return GanttMilestoneTaskComponent_1; })
                 }
             ],
-            template: "\n        <div\n            #task\n            class=\"k-task k-task-milestone\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [style.left.px]=\"taskOffset\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [attr.data-task-index]=\"index\"\n        >\n        </div>\n    "
+            template: "\n        <div\n            #task\n            class=\"k-task k-task-milestone\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [style.left.px]=\"taskOffset\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [class.k-state-selected]=\"isSelected(dataItem)\"\n            [attr.data-task-index]=\"index\"\n        >\n        </div>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [MappingService,
             TimelineViewService,

package/dist/es/rendering/gantt-summary-task.component.js

@@ -38,7 +38,7 @@ var GanttSummaryTaskComponent = /** @class */ (function (_super) {
                     useExisting: forwardRef(function () { return GanttSummaryTaskComponent_1; })
                 }
             ],
-            template: "\n        <div\n            #task\n            class=\"k-task k-task-summary\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [style.width.px]=\"taskWidth\"\n            [style.left.px]=\"taskOffset\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [attr.data-task-index]=\"index\"\n        >\n            <div *ngIf=\"!template; else summaryTemplate\"\n                class=\"k-task-summary-progress\"\n                [style.width.px]=\"taskWidth\">\n                <div\n                    class=\"k-task-summary-complete\"\n                    [style.width.px]=\"completionOverlayWidth\"\n                >\n                </div>\n            </div>\n            <ng-template\n                #summaryTemplate\n                [ngTemplateOutlet]=\"template\"\n                [ngTemplateOutletContext]=\"{\n                    $implicit: dataItem,\n                    elementWidth: taskWidth\n                }\"\n            >\n            </ng-template>\n        </div>\n    "
+            template: "\n        <div\n            #task\n            class=\"k-task k-task-summary\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [style.width.px]=\"taskWidth\"\n            [style.left.px]=\"taskOffset\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [attr.data-task-index]=\"index\"\n            [class.k-state-selected]=\"isSelected(dataItem)\"\n        >\n            <div *ngIf=\"!template; else summaryTemplate\"\n                class=\"k-task-summary-progress\"\n                [style.width.px]=\"taskWidth\">\n                <div\n                    class=\"k-task-summary-complete\"\n                    [style.width.px]=\"completionOverlayWidth\"\n                >\n                </div>\n            </div>\n            <ng-template\n                #summaryTemplate\n                [ngTemplateOutlet]=\"template\"\n                [ngTemplateOutletContext]=\"{\n                    $implicit: dataItem,\n                    elementWidth: taskWidth\n                }\"\n            >\n            </ng-template>\n        </div>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [MappingService,
             TimelineViewService,

package/dist/es/rendering/gantt-task-base.js

@@ -109,6 +109,14 @@ var GanttTaskBase = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", Object)
     ], GanttTaskBase.prototype, "dataItem", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Number)
+    ], GanttTaskBase.prototype, "index", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Function)
+    ], GanttTaskBase.prototype, "isSelected", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", String)
@@ -117,10 +125,6 @@ var GanttTaskBase = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", Function)
     ], GanttTaskBase.prototype, "taskClass", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], GanttTaskBase.prototype, "index", void 0);
     return GanttTaskBase;
 }());
 export { GanttTaskBase };

package/dist/es/rendering/gantt-task.component.js

@@ -43,7 +43,7 @@ var GanttTaskComponent = /** @class */ (function (_super) {
                     useExisting: forwardRef(function () { return GanttTaskComponent_1; })
                 }
             ],
-            template: "\n        <div\n            #task\n            class=\"k-task k-task-single\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [style.width.px]=\"taskWidth\"\n            [style.left.px]=\"taskOffset\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [attr.data-task-index]=\"index\"\n        >\n            <ng-container *ngIf=\"!taskTemplate\">\n                <div\n                    class=\"k-task-complete\"\n                    [style.width.px]=\"completionOverlayWidth\"\n                >\n                </div>\n                <div class=\"k-task-content\">\n                    <div class=\"k-task-template\">\n                        <ng-container *ngIf=\"!taskContentTemplate; else taskContent\">\n                            {{ mapper.extractFromTask(dataItem, 'title') }}\n                        </ng-container>\n                        <ng-template\n                            #taskContent\n                            [ngTemplateOutlet]=\"taskContentTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"\n                        >\n                        </ng-template>\n                    </div>\n                    <span class=\"k-task-actions\">\n                        <span\n                            (click)=\"onTaskDelete()\"\n                            class=\"k-link k-task-delete\">\n                            <span class=\"k-icon k-i-close\"></span>\n                        </span>\n                    </span>\n                </div>\n            </ng-container>\n            <ng-template\n                *ngIf=\"taskTemplate\"\n                [ngTemplateOutlet]=\"taskTemplate\"\n                [ngTemplateOutletContext]=\"{\n                    $implicit: dataItem,\n                    elementWidth: taskWidth\n                }\"\n            >\n            </ng-template>\n        </div>\n    "
+            template: "\n        <div\n            #task\n            class=\"k-task k-task-single\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [style.width.px]=\"taskWidth\"\n            [style.left.px]=\"taskOffset\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [attr.data-task-index]=\"index\"\n            [class.k-state-selected]=\"isSelected(dataItem)\"\n        >\n            <ng-container *ngIf=\"!taskTemplate\">\n                <div\n                    class=\"k-task-complete\"\n                    [style.width.px]=\"completionOverlayWidth\"\n                >\n                </div>\n                <div class=\"k-task-content\">\n                    <div class=\"k-task-template\">\n                        <ng-container *ngIf=\"!taskContentTemplate; else taskContent\">\n                            {{ mapper.extractFromTask(dataItem, 'title') }}\n                        </ng-container>\n                        <ng-template\n                            #taskContent\n                            [ngTemplateOutlet]=\"taskContentTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"\n                        >\n                        </ng-template>\n                    </div>\n                    <span class=\"k-task-actions\">\n                        <span\n                            (click)=\"onTaskDelete()\"\n                            class=\"k-link k-task-delete\">\n                            <span class=\"k-icon k-i-close\"></span>\n                        </span>\n                    </span>\n                </div>\n            </ng-container>\n            <ng-template\n                *ngIf=\"taskTemplate\"\n                [ngTemplateOutlet]=\"taskTemplate\"\n                [ngTemplateOutletContext]=\"{\n                    $implicit: dataItem,\n                    elementWidth: taskWidth\n                }\"\n            >\n            </ng-template>\n        </div>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [MappingService,
             TimelineViewService,

package/dist/es/rendering/gantt-tasks-table-body.component.js

@@ -65,12 +65,12 @@ var GanttTasksTableBodyComponent = /** @class */ (function () {
     ], GanttTasksTableBodyComponent.prototype, "hasChildren", void 0);
     tslib_1.__decorate([
         Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], GanttTasksTableBodyComponent.prototype, "index", void 0);
+        tslib_1.__metadata("design:type", Function)
+    ], GanttTasksTableBodyComponent.prototype, "isTaskSelected", void 0);
     GanttTasksTableBodyComponent = tslib_1.__decorate([
         Component({
             selector: '[kendoGanttTasksTableBody]',
-            template: "\n        <tr #timelineRow *ngFor=\"let item of rows; let index = index\">\n            <td>\n                <kendo-gantt-milestone-task\n                    *ngIf=\"isMileStone(item); else task\"\n                    [dataItem]=\"item\"\n                    [activeView]=\"activeView\"\n                    [taskClass]=\"taskClass\"\n                    [index]=\"index\"\n                >\n                </kendo-gantt-milestone-task>\n                <ng-template #task>\n                    <kendo-gantt-summary-task\n                        *ngIf=\"hasChildren(item)\"\n                        [dataItem]=\"item\"\n                        [template]=\"summaryTaskTemplate\"\n                        [activeView]=\"activeView\"\n                        [taskClass]=\"taskClass\"\n                        [index]=\"index\"\n                    >\n                    </kendo-gantt-summary-task>\n                    <kendo-gantt-task\n                        *ngIf=\"!hasChildren(item)\"\n                        [dataItem]=\"item\"\n                        [taskContentTemplate]=\"taskContentTemplate\"\n                        [taskTemplate]=\"taskTemplate\"\n                        [activeView]=\"activeView\"\n                        [taskClass]=\"taskClass\"\n                        [index]=\"index\"\n                    >\n                    </kendo-gantt-task>\n                </ng-template>\n            </td>\n        </tr>\n    "
+            template: "\n        <tr #timelineRow *ngFor=\"let item of rows; let index = index\">\n            <td>\n                <kendo-gantt-milestone-task\n                    *ngIf=\"isMileStone(item); else task\"\n                    [dataItem]=\"item\"\n                    [activeView]=\"activeView\"\n                    [taskClass]=\"taskClass\"\n                    [isSelected]=\"isTaskSelected\"\n                    [index]=\"index\"\n                >\n                </kendo-gantt-milestone-task>\n                <ng-template #task>\n                    <kendo-gantt-summary-task\n                        *ngIf=\"hasChildren(item)\"\n                        [dataItem]=\"item\"\n                        [template]=\"summaryTaskTemplate\"\n                        [activeView]=\"activeView\"\n                        [taskClass]=\"taskClass\"\n                        [isSelected]=\"isTaskSelected\"\n                        [index]=\"index\"\n                    >\n                    </kendo-gantt-summary-task>\n                    <kendo-gantt-task\n                        *ngIf=\"!hasChildren(item)\"\n                        [dataItem]=\"item\"\n                        [taskContentTemplate]=\"taskContentTemplate\"\n                        [taskTemplate]=\"taskTemplate\"\n                        [activeView]=\"activeView\"\n                        [taskClass]=\"taskClass\"\n                        [isSelected]=\"isTaskSelected\"\n                        [index]=\"index\"\n                    >\n                    </kendo-gantt-task>\n                </ng-template>\n            </td>\n        </tr>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [DependencyDomService,
             MappingService])