@progress/kendo-angular-gantt 0.1.5 → 0.2.0

package/dist/fesm5/index.js

@@ -5,17 +5,23 @@
 import { __extends, __decorate, __metadata, __param, __assign } from 'tslib';
 import { Input, Injectable, EventEmitter, Directive, Optional, TemplateRef, QueryList, ContentChildren, ContentChild, Component, forwardRef, SkipSelf, Host, Injector, NgZone, isDevMode, ViewChild, HostBinding, Output, Renderer2, ElementRef, ChangeDetectorRef, NgModule } from '@angular/core';
 import { ColumnBase, ColumnComponent, ColumnGroupComponent, SpanColumnComponent, TreeListComponent, DataBoundTreeComponent, ExpandableTreeComponent, FlatBindingDirective, HierarchyBindingDirective, ExpandableDirective, TreeListModule } from '@progress/kendo-angular-treelist';
+import { cloneDate, addWeeks, firstDayInWeek, addDays, getDate, lastDayOfMonth, firstDayOfMonth, addMonths, isEqualDate, MS_PER_HOUR, MS_PER_DAY } from '@progress/kendo-date-math';
 import { of, fromEvent, Subject, Subscription } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
-import { isDocumentAvailable, anyChanged } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, closestInScope, matchesClasses, anyChanged, hasObservers, EventsModule } from '@progress/kendo-angular-common';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { orderBy } from '@progress/kendo-data-query';
-import { cloneDate, addWeeks, firstDayInWeek, addDays, getDate, lastDayOfMonth, firstDayOfMonth, addMonths, isEqualDate, MS_PER_HOUR, MS_PER_DAY } from '@progress/kendo-date-math';
 import { getter } from '@progress/kendo-common';
 import { map, distinctUntilChanged, take, filter, switchMap } from 'rxjs/operators';
+import { LocalizationService, ComponentMessages, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { CommonModule } from '@angular/common';
 import { SplitterModule } from '@progress/kendo-angular-layout';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { DialogModule } from '@progress/kendo-angular-dialog';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { LabelModule } from '@progress/kendo-angular-label';
+import { InputsModule } from '@progress/kendo-angular-inputs';
+import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
 
 /**
  * @hidden
@@ -24,7 +30,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-gantt',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635941338,
+    publishDate: 1638864709,
     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'
 };
@@ -257,6 +263,34 @@ var HeaderTemplateDirective = /** @class */ (function () {
     return HeaderTemplateDirective;
 }());
 
+/**
+ * Represents the column edit-cell template of the Gantt.
+ * Helps to customize the content of the edited cells. To define the cell template, nest an `<ng-template>`
+ * tag with the `kendoGanttEditTemplate` directive inside a `<kendo-gantt-column>` tag.
+ *
+ * The template context contains the following fields:
+ * - `column`&mdash;The current column instance.
+ * - `dataItem`&mdash;The current data item.
+ * - `cellContext`&mdash;An object used to pass context information to built-in directives.
+ * - `formGroup`&mdash;The current [`FormGroup`]({{ site.data.urls.angular['formgroupapi'] }}).
+ * If you use the Gantt inside [Template-Driven Forms]({{ site.data.urls.angular['forms'] }}), it will be `undefined`.
+ * - `isNew`&mdash;The state of the current item.
+ * - `rowIndex`&mdash;The current row index. If inside a new item row, `rowIndex` is `-1`.
+ */
+var EditTemplateDirective = /** @class */ (function () {
+    function EditTemplateDirective(templateRef) {
+        this.templateRef = templateRef;
+    }
+    EditTemplateDirective = __decorate([
+        Directive({
+            selector: '[kendoGanttEditTemplate]'
+        }),
+        __param(0, Optional()),
+        __metadata("design:paramtypes", [TemplateRef])
+    ], EditTemplateDirective);
+    return EditTemplateDirective;
+}());
+
 var GanttColumnComponent = /** @class */ (function (_super) {
     __extends(GanttColumnComponent, _super);
     function GanttColumnComponent(options, parent) {
@@ -314,6 +348,10 @@ var GanttColumnComponent = /** @class */ (function (_super) {
         ContentChild(CellTemplateDirective, { static: false }),
         __metadata("design:type", CellTemplateDirective)
     ], GanttColumnComponent.prototype, "template", void 0);
+    __decorate([
+        ContentChild(EditTemplateDirective, { static: false }),
+        __metadata("design:type", EditTemplateDirective)
+    ], GanttColumnComponent.prototype, "editTemplate", void 0);
     __decorate([
         ContentChild(FilterCellTemplateDirective, { static: false }),
         __metadata("design:type", FilterCellTemplateDirective)
@@ -511,6 +549,7 @@ var GanttSpanColumnComponent = /** @class */ (function (_super) {
          */
         _this.childColumns = new QueryList();
         _this.template = new QueryList();
+        _this.editTemplate = new QueryList();
         return _this;
     }
     GanttSpanColumnComponent_1 = GanttSpanColumnComponent;
@@ -526,6 +565,10 @@ var GanttSpanColumnComponent = /** @class */ (function (_super) {
         ContentChildren(CellTemplateDirective, { descendants: false }),
         __metadata("design:type", QueryList)
     ], GanttSpanColumnComponent.prototype, "template", void 0);
+    __decorate([
+        ContentChildren(EditTemplateDirective, { descendants: false }),
+        __metadata("design:type", QueryList)
+    ], GanttSpanColumnComponent.prototype, "editTemplate", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Boolean)
@@ -604,6 +647,10 @@ var rowClassCallback = function () { return null; };
  * @hidden
  */
 var taskClassCallback = function () { return null; };
+/**
+ * @hidden
+ */
+var isSelected = function () { return false; };
 
 /**
  * @hidden
@@ -703,6 +750,44 @@ var isColumnGroup = function (column) { return column.isColumnGroup; };
  * @hidden
  */
 var isNumber = function (contender) { return typeof contender === 'number' && !isNaN(contender); };
+/**
+ * @hidden
+ */
+var isString = function (contender) { return typeof contender === 'string'; };
+/**
+ * @hidden
+ *
+ * Gets the closest timeline task element index from an event target.
+ * Uses the `data-task-index` attribute assigned to each task.
+ * Restricts the search up to the provided gantt element from the second param.
+ */
+var getClosestTaskIndex = function (element, gantt) {
+    var task = closestInScope(element, matchesClasses('k-task'), gantt);
+    if (!isPresent(task)) {
+        return null;
+    }
+    return Number(task.getAttribute('data-task-index'));
+};
+/**
+ * @hidden
+ *
+ * Checks whether the queried item or its parent items has a `k-task` selector.
+ * Restricts the search up to the provided gantt element from the second param.
+ */
+var isTask = function (contender, gantt) {
+    var task = closestInScope(contender, matchesClasses('k-task'), gantt);
+    return isPresent(task);
+};
+/**
+ * @hidden
+ *
+ * Checks whether the queried item or its parent items has a `k-task-actions` selector - used for the clear button.
+ * Restricts the search up to the provided gantt element from the second param.
+ */
+var isClearButton = function (contender, gantt) {
+    var clearButtonContainer = closestInScope(contender, matchesClasses('k-task-actions'), gantt);
+    return isPresent(clearButtonContainer);
+};
 
 var DAY_FORMAT = 'E d/MM';
 var HOUR_FORMAT = 'HH:mm aa';
@@ -872,7 +957,8 @@ var DEFAULT_TASK_MODEL_FIELDS = Object.freeze({
     start: 'start',
     end: 'end',
     title: 'title',
-    completionRatio: 'completionRatio'
+    completionRatio: 'completionRatio',
+    children: 'children'
 });
 
 /**
@@ -1281,6 +1367,38 @@ var DependencyDomService = /** @class */ (function () {
     return DependencyDomService;
 }());
 
+/**
+ * @hidden
+ */
+var EditService = /** @class */ (function () {
+    function EditService() {
+        this.showEditingDialog = new Subject();
+        this.showConfirmationDialog = new Subject();
+        this.editEvent = new Subject();
+    }
+    EditService.prototype.createEditDialog = function (dataItem, formGroup) {
+        this.dataItem = dataItem;
+        this.formGroup = formGroup;
+        this.showEditingDialog.next(true);
+    };
+    EditService.prototype.closeEditDialog = function () {
+        this.showEditingDialog.next(false);
+        this.dataItem = undefined;
+        this.formGroup = undefined;
+    };
+    EditService.prototype.triggerEditEvent = function (editResultType) {
+        this.editEvent.next({
+            formGroup: this.formGroup,
+            dataItem: this.dataItem,
+            editResultType: editResultType
+        });
+    };
+    EditService = __decorate([
+        Injectable()
+    ], EditService);
+    return EditService;
+}());
+
 /**
  * @hidden
  */
@@ -1577,13 +1695,93 @@ var ViewBase = /** @class */ (function () {
     return ViewBase;
 }());
 
+/**
+ * @hidden
+ */
+var getEditItem = function (dataItem, data, mapper) {
+    var treeListDataItem = data.find(function (item) { return mapper.extractFromTask(item.data, 'id') === mapper.extractFromTask(dataItem, 'id'); });
+    return mapPath(treeListDataItem);
+};
+var mapPath = function (item) { return ({
+    dataItem: item.data,
+    parent: item.parent.data ? mapPath(item.parent) : null
+}); };
+
 var TREELIST_GROUP_COLUMNS_CLASS = 'k-gantt-treelist-nested-columns';
 var DEFAULT_VIEW = 'week';
 /**
- * The GiGantt
+ * Represents the Kendo UI Gantt component for Angular.
+ *
+ * @example
+ * ```ts-preview
+ * _@Component({
+ *    selector: 'my-app',
+ *    template: `
+ *        <kendo-gantt
+ *            [style.height.px]="500"
+ *            [kendoGanttHierarchyBinding]="data"
+ *            childrenField="subtasks"
+ *            [dependencies]="dependencies">
+ *            <kendo-gantt-column
+ *                field="title"
+ *                title="Task"
+ *                [width]="200"
+ *                [expandable]="true"></kendo-gantt-column>
+ *            <kendo-gantt-column
+ *                field="start"
+ *                title="Start"
+ *                format="dd-MMM-yyyy"
+ *                [width]="120"></kendo-gantt-column>
+ *            <kendo-gantt-column
+ *                field="end"
+ *                title="End"
+ *                format="dd-MMM-yyyy"
+ *                [width]="120"></kendo-gantt-column>
+ *            <kendo-gantt-timeline-day-view></kendo-gantt-timeline-day-view>
+ *            <kendo-gantt-timeline-week-view></kendo-gantt-timeline-week-view>
+ *            <kendo-gantt-timeline-month-view></kendo-gantt-timeline-month-view>
+ *        </kendo-gantt>
+ *    `
+ * })
+ * class AppComponent {
+ *     public data: Task[] = [{
+ *         id: 7, title: 'Validation and R&D', start: new Date('2014-06-02T00:00:00.000Z'),
+ *         end: new Date('2014-06-19T00:00:00.000Z'), completionRatio: 0.45708333333333334,
+ *         subtasks: [
+ *             { id: 18, title: 'Project Kickoff', start: new Date('2014-06-02T00:00:00.000Z'),
+ *                 end: new Date('2014-06-02T00:00:00.000Z'), completionRatio: 0.23 },
+ *             { id: 11, title: 'Research', start: new Date('2014-06-02T00:00:00.000Z'),
+ *                 end: new Date('2014-06-07T00:00:00.000Z'), completionRatio: 0.5766666666666667,
+ *                 subtasks: [
+ *                     { id: 19, title: 'Validation', start: new Date('2014-06-02T00:00:00.000Z'),
+ *                         end: new Date('2014-06-04T00:00:00.000Z'), completionRatio: 0.25 },
+ *                     { id: 39, title: 'Specification', start: new Date('2014-06-04T00:00:00.000Z'),
+ *                         end: new Date('2014-06-07T00:00:00.000Z'), completionRatio: 0.66 }]
+ *             }, { id: 13, title: 'Implementation', start: new Date('2014-06-08T00:00:00.000Z'),
+ *                 end: new Date('2014-06-19T00:00:00.000Z'), completionRatio: 0.77,
+ *                 subtasks: [
+ *                     { id: 24, title: 'Prototype', start: new Date('2014-06-08T00:00:00.000Z'),
+ *                         end: new Date('2014-06-14T00:00:00.000Z'), completionRatio: 0.77 },
+ *                     { id: 29, title: 'UI and Interaction', start: new Date('2014-06-14T00:00:00.000Z'),
+ *                         end: new Date('2014-06-19T00:00:00.000Z'), completionRatio: 0.6 }]
+ *             }, { id: 17, title: 'Release', start: new Date('2014-06-19T00:00:00.000Z'),
+ *                 end: new Date('2014-06-19T00:00:00.000Z'), completionRatio: 0 }]
+ *     }];
+ *
+ *     public dependencies: GanttDependency[] = [
+ *         { id: 528, fromId: 18, toId: 19, type: DependencyType.FS },
+ *         { id: 529, fromId: 19, toId: 39, type: DependencyType.FS },
+ *         { id: 535, fromId: 24, toId: 29, type: DependencyType.FS },
+ *         { id: 551, fromId: 13, toId: 29, type: DependencyType.FF },
+ *         { id: 777, fromId: 7, toId: 11, type: DependencyType.SF },
+ *         { id: 556, fromId: 39, toId: 24, type: DependencyType.FS },
+ *         { id: 546, fromId: 29, toId: 17, type: DependencyType.FS },
+ *     ];
+ * }
+ * ```
  */
 var GanttComponent = /** @class */ (function () {
-    function GanttComponent(timelineViewService, scrollSyncService, renderer, mapper, optionChangesService, dependencyDomService) {
+    function GanttComponent(timelineViewService, scrollSyncService, renderer, mapper, optionChangesService, dependencyDomService, editService, localizationService, hostElement, zone) {
         var _this = this;
         this.timelineViewService = timelineViewService;
         this.scrollSyncService = scrollSyncService;
@@ -1591,7 +1789,32 @@ var GanttComponent = /** @class */ (function () {
         this.mapper = mapper;
         this.optionChangesService = optionChangesService;
         this.dependencyDomService = dependencyDomService;
+        this.editService = editService;
+        this.localizationService = localizationService;
+        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.
          *
@@ -1678,10 +1901,40 @@ var GanttComponent = /** @class */ (function () {
          * Fires when an item is expanded.
          */
         this.rowExpand = new EventEmitter();
+        /**
+         * Fires when a Gantt task in the timeline pane is double-clicked. The data item, associated with the clicked task,
+         * is available in the event data. Use the event handler to open a task editing dialog as necessary.
+         */
+        this.taskDblClick = new EventEmitter();
+        /**
+         * Fires when the user double clicks a cell.
+         */
+        this.cellDblClick = new EventEmitter();
+        /**
+         * Fires when the user leaves an edited cell.
+         */
+        this.cellClose = new EventEmitter();
+        /**
+         * Fires when the end user clicks the `Delete` button in the task editing dialog or the task delete icon.
+         * Use the event handler to open a confirmation dialog when necessary.
+         */
+        this.taskDelete = new EventEmitter();
         /**
          * Fires when an item is collapsed.
          */
         this.rowCollapse = new EventEmitter();
+        /**
+         * Fires when the user confirms deleting a task.
+         */
+        this.remove = new EventEmitter();
+        /**
+         * Fires when the user cancels editing a task.
+         */
+        this.cancel = new EventEmitter();
+        /**
+         * Fires when the user saves an edited task.
+         */
+        this.save = new EventEmitter();
         /**
          * Fires when the sorting of the Gantt is changed.
          * You have to handle the event yourself and sort the data.
@@ -1730,12 +1983,28 @@ 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
          *
          * Used by the GanttExpandableDirective.
          */
         this.expandStateChange = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.showEditingDialog = false;
+        /**
+         * @hidden
+         */
+        this.showConfirmationDialog = false;
         this._columns = new QueryList();
         this._data = [];
         this._timelinePaneOptions = __assign({}, DEFAULT_TIMELINE_PANE_SETTINGS);
@@ -1743,7 +2012,9 @@ var GanttComponent = /** @class */ (function () {
         this._rowClass = rowClassCallback;
         this._taskClass = taskClassCallback;
         this._activeView = DEFAULT_VIEW;
+        this.rtl = false;
         this.optionChangesSubscriptions = new Subscription();
+        this.editServiceSubscription = new Subscription();
         validatePackage(packageMetadata);
         this.optionChangesSubscriptions.add(this.optionChangesService.viewChanges.subscribe(function () {
             _this.loadTimelineData();
@@ -1751,6 +2022,24 @@ var GanttComponent = /** @class */ (function () {
         this.optionChangesSubscriptions.add(this.optionChangesService.columnChanges.subscribe(function () {
             _this.treeList.columns.notifyOnChanges();
         }));
+        this.editServiceSubscription.add(this.editService.showEditingDialog.subscribe(function (show) { return _this.showEditingDialog = show; }));
+        this.editServiceSubscription.add(this.editService.showConfirmationDialog.subscribe(function () { return _this.taskDelete.emit(); }));
+        this.editServiceSubscription.add(this.editService.editEvent.subscribe(function (args) {
+            _this[args.editResultType].emit({
+                formGroup: args.formGroup,
+                item: getEditItem(args.dataItem, _this.treeList.view.data, _this.mapper),
+                sender: _this
+            });
+            _this.showConfirmationDialog = _this.showEditingDialog = false;
+            _this.editService.dataItem = _this.editService.formGroup = null;
+            _this.updateView();
+            _this.dependencyDomService.notifyChanges();
+        }));
+        this.localizationSubscription = this.localizationService.changes.subscribe(function (_a) {
+            var rtl = _a.rtl;
+            _this.rtl = rtl;
+            _this.direction = _this.rtl ? 'rtl' : 'ltr';
+        });
     }
     GanttComponent_1 = GanttComponent;
     Object.defineProperty(GanttComponent.prototype, "toolbarTemplate", {
@@ -1766,6 +2055,13 @@ var GanttComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(GanttComponent.prototype, "dir", {
+        get: function () {
+            return this.direction;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(GanttComponent.prototype, "columns", {
         get: function () {
             return this._columns;
@@ -1955,6 +2251,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
@@ -1981,6 +2290,16 @@ var GanttComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(GanttComponent.prototype, "editDialogFormGroup", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this.editService.formGroup;
+        },
+        enumerable: true,
+        configurable: true
+    });
     GanttComponent.prototype.ngOnChanges = function (changes) {
         if (anyChanged(['data', 'activeView', 'workWeekStart', 'workWeekEnd', 'workDayStart', 'workDayEnd'], changes)) {
             this.loadTimelineData();
@@ -2000,6 +2319,10 @@ var GanttComponent = /** @class */ (function () {
     };
     GanttComponent.prototype.ngOnDestroy = function () {
         this.optionChangesSubscriptions.unsubscribe();
+        this.editServiceSubscription.unsubscribe();
+        if (this.localizationSubscription) {
+            this.localizationSubscription.unsubscribe();
+        }
     };
     /**
      * Applies the minimum possible width for the specified column,
@@ -2049,6 +2372,55 @@ 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.
+     */
+    GanttComponent.prototype.editTask = function (dataItem, formGroup) {
+        if (!this.showEditingDialog) {
+            this.editService.createEditDialog(dataItem, formGroup);
+        }
+    };
+    /**
+     * Closes the task editing dialog.
+     */
+    GanttComponent.prototype.closeTaskDialog = function () {
+        if (this.showEditingDialog) {
+            this.editService.closeEditDialog();
+        }
+    };
+    /**
+     * Opens the delete task confirmation dialog.
+     */
+    GanttComponent.prototype.openConfirmationDialog = function () {
+        this.showConfirmationDialog = true;
+    };
+    /**
+     * Opens a cell for editing.
+     */
+    GanttComponent.prototype.editCell = function (dataItem, column, formGroup) {
+        this.treeList.editCell(dataItem, column, formGroup);
+    };
+    /**
+     * Closes an edited cell.
+     */
+    GanttComponent.prototype.closeCell = function () {
+        this.treeList.closeCell();
+    };
+    /**
+     * @hidden
+     */
+    GanttComponent.prototype.handleCellClose = function (e) {
+        this.cellClose.emit(Object.assign(e, { item: this.editItem, sender: this }));
+        this.dependencyDomService.notifyChanges();
+    };
     /**
      * @hidden
      */
@@ -2068,16 +2440,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
      */
@@ -2112,6 +2474,160 @@ var GanttComponent = /** @class */ (function () {
         this._timelinePaneOptions.size = e;
         this.timelinePaneSizeChange.emit(e);
     };
+    /**
+     * @hidden
+     */
+    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.handleTimelineClick = function (event) {
+        var _this = this;
+        var target = event.target;
+        var gantt = this.hostElement.nativeElement;
+        if (!isTask(target, gantt) || isClearButton(target, gantt)) {
+            return;
+        }
+        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({
+                    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
+     */
+    GanttComponent.prototype.handleDeleteConfirmation = function () {
+        this.editService.triggerEditEvent('remove');
+    };
+    /**
+     * @hidden
+     */
+    GanttComponent.prototype.handleTimelineMouseDown = function (event) {
+        var target = event.target;
+        var gantt = this.hostElement.nativeElement;
+        if (!isTask(target, gantt) || isClearButton(target, gantt)) {
+            return;
+        }
+        event.preventDefault();
+    };
+    /**
+     * @hidden
+     */
+    GanttComponent.prototype.handleTimelineDblClick = 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.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
+     */
+    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)) {
@@ -2142,6 +2658,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;
     __decorate([
         ViewChild(TreeListComponent, { static: true }),
@@ -2167,6 +2691,11 @@ var GanttComponent = /** @class */ (function () {
         HostBinding('class.k-gantt'),
         __metadata("design:type", Boolean)
     ], GanttComponent.prototype, "hostClasses", void 0);
+    __decorate([
+        HostBinding('attr.dir'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [])
+    ], GanttComponent.prototype, "dir", null);
     __decorate([
         ContentChildren(GanttColumnBase),
         __metadata("design:type", QueryList),
@@ -2196,6 +2725,18 @@ var GanttComponent = /** @class */ (function () {
         __metadata("design:type", Array),
         __metadata("design:paramtypes", [Array])
     ], GanttComponent.prototype, "data", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", Function)
+    ], GanttComponent.prototype, "isSelected", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], GanttComponent.prototype, "selectionChange", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], GanttComponent.prototype, "selectable", void 0);
     __decorate([
         Input(),
         __metadata("design:type", String)
@@ -2291,39 +2832,67 @@ var GanttComponent = /** @class */ (function () {
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
-    ], GanttComponent.prototype, "rowCollapse", void 0);
+    ], GanttComponent.prototype, "taskDblClick", void 0);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
-    ], GanttComponent.prototype, "sortChange", void 0);
+    ], GanttComponent.prototype, "cellDblClick", void 0);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
-    ], GanttComponent.prototype, "filterChange", void 0);
+    ], GanttComponent.prototype, "cellClose", void 0);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
-    ], GanttComponent.prototype, "dataStateChange", void 0);
+    ], GanttComponent.prototype, "taskDelete", void 0);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
-    ], GanttComponent.prototype, "treeListPaneCollapsedChange", void 0);
+    ], GanttComponent.prototype, "rowCollapse", void 0);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
-    ], GanttComponent.prototype, "timelinePaneCollapsedChange", void 0);
+    ], GanttComponent.prototype, "remove", void 0);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
-    ], GanttComponent.prototype, "timelinePaneSizeChange", void 0);
+    ], GanttComponent.prototype, "cancel", void 0);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
-    ], GanttComponent.prototype, "activeViewChange", void 0);
+    ], GanttComponent.prototype, "save", void 0);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
-    ], GanttComponent.prototype, "columnResize", void 0);
+    ], GanttComponent.prototype, "sortChange", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], GanttComponent.prototype, "filterChange", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], GanttComponent.prototype, "dataStateChange", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], GanttComponent.prototype, "treeListPaneCollapsedChange", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], GanttComponent.prototype, "timelinePaneCollapsedChange", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], GanttComponent.prototype, "timelinePaneSizeChange", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], GanttComponent.prototype, "activeViewChange", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], GanttComponent.prototype, "columnResize", void 0);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
@@ -2336,10 +2905,20 @@ var GanttComponent = /** @class */ (function () {
         Output(),
         __metadata("design:type", EventEmitter)
     ], GanttComponent.prototype, "columnLockedChange", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], GanttComponent.prototype, "cellClick", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], GanttComponent.prototype, "taskClick", void 0);
     GanttComponent = GanttComponent_1 = __decorate([
         Component({
             selector: 'kendo-gantt',
+            exportAs: 'kendoGantt',
             providers: [
+                LocalizationService,
                 {
                     provide: DataBoundTreeComponent,
                     useExisting: forwardRef(function () { return GanttComponent_1; })
@@ -2355,16 +2934,21 @@ var GanttComponent = /** @class */ (function () {
                 ScrollSyncService,
                 DependencyDomService,
                 MappingService,
-                OptionChangesService
+                OptionChangesService,
+                EditService
             ],
-            template: "\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                    >\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                    ></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   "
+            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   "
         }),
         __metadata("design:paramtypes", [TimelineViewService,
             ScrollSyncService,
             Renderer2,
             MappingService,
             OptionChangesService,
-            DependencyDomService])
+            DependencyDomService,
+            EditService,
+            LocalizationService,
+            ElementRef,
+            NgZone])
     ], GanttComponent);
     return GanttComponent;
 }());
@@ -2462,6 +3046,10 @@ var GanttTimelineComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", Function)
     ], GanttTimelineComponent.prototype, "taskClass", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Function)
+    ], GanttTimelineComponent.prototype, "isTaskSelected", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Function)
@@ -2473,7 +3061,7 @@ var GanttTimelineComponent = /** @class */ (function () {
     GanttTimelineComponent = __decorate([
         Component({
             selector: 'kendo-gantt-timeline',
-            template: "\n        <div class=\"k-timeline k-grid k-widget\">\n            <div class=\"k-grid-header\">\n                <div #timelineHeaderWrap class=\"k-grid-header-wrap\">\n                    <table\n                        role=\"presentation\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <tbody\n                            kendoGanttHeaderTableBody\n                            [groupSlots]=\"groupSlots\"\n                            [slots]=\"slots\">\n                        </tbody>\n                    </table>\n                </div>\n            </div>\n            <div #timelineContent class=\"k-grid-content\">\n                <div class=\"k-gantt-tables\">\n                    <table\n                        class=\"k-gantt-rows\"\n                        [style.width.px]=\"tableWidth\"\n                        role=\"presentation\"\n                    >\n                        <tbody>\n                            <tr *ngFor=\"let item of rows; let i = index;\"\n                                [class.k-alt]=\"i % 2\"\n                            >\n                                <td></td>\n                            </tr>\n                        </tbody>\n                    </table>\n\n                    <table\n                        #timelineColumns\n                        class=\"k-gantt-columns\"\n                        role=\"presentation\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <colgroup>\n                            <col *ngFor=\"let item of slots\">\n                        </colgroup>\n\n                        <tbody>\n                            <tr>\n                                <td *ngFor=\"let item of slots\"\n                                    [class.k-nonwork-hour]=\"isNonWorking(item)\"\n                                >\n                                </td>\n                            </tr>\n                        </tbody>\n                    </table>\n\n                    <table\n                        #tasksContainer\n                        class=\"k-gantt-tasks\"\n                        role=\"presentation\"\n                        style=\"border-collapse: collapse;\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <tbody\n                            kendoGanttTasksTableBody\n                            [rows]=\"rows\"\n                            [activeView]=\"activeView\"\n                            [taskContentTemplate]=\"taskContentTemplate\"\n                            [taskTemplate]=\"taskTemplate\"\n                            [summaryTaskTemplate]=\"summaryTaskTemplate\"\n                            [taskClass]=\"taskClass\"\n                            [hasChildren]=\"hasChildren\"\n                        >\n                        </tbody>\n                    </table>\n                </div>\n                <svg class=\"k-gantt-dependencies-svg\">\n                    <polyline\n                        *ngFor=\"let dependency of dependencies\"\n                        kendoGanttDependency\n                        [dependency]=\"dependency\"\n                    />\n                </svg>\n            </div>\n        </div>\n    "
+            template: "\n        <div class=\"k-timeline k-grid k-widget\">\n            <div class=\"k-grid-header\">\n                <div #timelineHeaderWrap class=\"k-grid-header-wrap\">\n                    <table\n                        role=\"presentation\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <tbody\n                            kendoGanttHeaderTableBody\n                            [groupSlots]=\"groupSlots\"\n                            [slots]=\"slots\">\n                        </tbody>\n                    </table>\n                </div>\n            </div>\n            <div #timelineContent class=\"k-grid-content\">\n                <div class=\"k-gantt-tables\">\n                    <table\n                        class=\"k-gantt-rows\"\n                        [style.width.px]=\"tableWidth\"\n                        role=\"presentation\"\n                    >\n                        <tbody>\n                            <tr *ngFor=\"let item of rows; let i = index;\"\n                                [class.k-alt]=\"i % 2\"\n                            >\n                                <td></td>\n                            </tr>\n                        </tbody>\n                    </table>\n\n                    <table\n                        #timelineColumns\n                        class=\"k-gantt-columns\"\n                        role=\"presentation\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <colgroup>\n                            <col *ngFor=\"let item of slots\">\n                        </colgroup>\n\n                        <tbody>\n                            <tr>\n                                <td *ngFor=\"let item of slots\"\n                                    [class.k-nonwork-hour]=\"isNonWorking(item)\"\n                                >\n                                </td>\n                            </tr>\n                        </tbody>\n                    </table>\n\n                    <table\n                        #tasksContainer\n                        class=\"k-gantt-tasks\"\n                        role=\"presentation\"\n                        style=\"border-collapse: collapse;\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <tbody\n                            kendoGanttTasksTableBody\n                            [rows]=\"rows\"\n                            [activeView]=\"activeView\"\n                            [taskContentTemplate]=\"taskContentTemplate\"\n                            [taskTemplate]=\"taskTemplate\"\n                            [summaryTaskTemplate]=\"summaryTaskTemplate\"\n                            [taskClass]=\"taskClass\"\n                            [hasChildren]=\"hasChildren\"\n                            [isTaskSelected]=\"isTaskSelected\"\n                        >\n                        </tbody>\n                    </table>\n                </div>\n                <svg class=\"k-gantt-dependencies-svg\">\n                    <polyline\n                        *ngFor=\"let dependency of dependencies\"\n                        kendoGanttDependency\n                        [dependency]=\"dependency\"\n                    />\n                </svg>\n            </div>\n        </div>\n    "
         }),
         __metadata("design:paramtypes", [ScrollSyncService,
             DependencyDomService,
@@ -2538,10 +3126,14 @@ var GanttTasksTableBodyComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", Function)
     ], GanttTasksTableBodyComponent.prototype, "hasChildren", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Function)
+    ], GanttTasksTableBodyComponent.prototype, "isTaskSelected", void 0);
     GanttTasksTableBodyComponent = __decorate([
         Component({
             selector: '[kendoGanttTasksTableBody]',
-            template: "\n        <tr #timelineRow *ngFor=\"let item of rows\">\n            <td>\n                <kendo-gantt-milestone-task\n                    *ngIf=\"isMileStone(item); else task\"\n                    [dataItem]=\"item\"\n                    [activeView]=\"activeView\"\n                    [taskClass]=\"taskClass\"\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                    >\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                    >\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    "
         }),
         __metadata("design:paramtypes", [DependencyDomService,
             MappingService])
@@ -2674,6 +3266,14 @@ var GanttTaskBase = /** @class */ (function () {
         Input(),
         __metadata("design:type", Object)
     ], GanttTaskBase.prototype, "dataItem", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Number)
+    ], GanttTaskBase.prototype, "index", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Function)
+    ], GanttTaskBase.prototype, "isSelected", void 0);
     __decorate([
         Input(),
         __metadata("design:type", String)
@@ -2690,10 +3290,16 @@ var GanttTaskBase = /** @class */ (function () {
  */
 var GanttTaskComponent = /** @class */ (function (_super) {
     __extends(GanttTaskComponent, _super);
-    function GanttTaskComponent(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
-        return _super.call(this, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) || this;
+    function GanttTaskComponent(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, editService) {
+        var _this = _super.call(this, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) || this;
+        _this.editService = editService;
+        return _this;
     }
     GanttTaskComponent_1 = GanttTaskComponent;
+    GanttTaskComponent.prototype.onTaskDelete = function () {
+        this.editService.dataItem = this.dataItem;
+        this.editService.showConfirmationDialog.next();
+    };
     var GanttTaskComponent_1;
     __decorate([
         Input(),
@@ -2712,13 +3318,14 @@ 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        >\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                </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    "
         }),
         __metadata("design:paramtypes", [MappingService,
             TimelineViewService,
             DependencyDomService,
             OptionChangesService,
-            ChangeDetectorRef])
+            ChangeDetectorRef,
+            EditService])
     ], GanttTaskComponent);
     return GanttTaskComponent;
 }(GanttTaskBase));
@@ -2752,7 +3359,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        >\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    "
         }),
         __metadata("design:paramtypes", [MappingService,
             TimelineViewService,
@@ -2788,7 +3395,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        >\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    "
         }),
         __metadata("design:paramtypes", [MappingService,
             TimelineViewService,
@@ -2876,6 +3483,138 @@ var GanttExpandableDirective = /** @class */ (function (_super) {
     return GanttExpandableDirective;
 }(ExpandableDirective));
 
+/**
+ * A directive which handles the [`selectionChange`]({% slug api_gantt_ganttcomponent %}#toc-selectionchange) event of the Gantt
+ * ([see example]({% slug selection_gantt %}#toc-built-in-directive))
+ */
+var SelectableDirective = /** @class */ (function () {
+    function SelectableDirective(gantt) {
+        this.gantt = gantt;
+        /**
+         * Fires when the selected keys are changed.
+         */
+        this.selectedKeysChange = new EventEmitter();
+        this.state = new Set();
+        this.isSelected = this.isSelected.bind(this);
+        this.selectionChange = this.selectionChange.bind(this);
+        this.selectable = true;
+    }
+    Object.defineProperty(SelectableDirective.prototype, "selectable", {
+        /**
+         * @hidden
+         */
+        set: function (value) {
+            if (value) {
+                this.gantt.isSelected = this.isSelected;
+                this.subscribeSelection();
+            }
+            else {
+                this.gantt.isSelected = function () { return false; };
+                this.unsubscribeSelection();
+            }
+            this.gantt.selectable = value;
+            this.gantt.updateView();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SelectableDirective.prototype, "selectedKeys", {
+        /**
+         * Sets the selected keys.
+         */
+        set: function (value) {
+            if (isPresent(value) && value === this.lastChange) {
+                return;
+            }
+            // prevent multiple items displayed as selected as multiple selection still not supported fully
+            var keys = (value || []).slice(0, 1);
+            this.state = new Set(keys);
+            this.gantt.updateView();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SelectableDirective.prototype, "itemKey", {
+        /**
+         * The field name or a function that specifies the data item unique key identifier.
+         * By default, the string field `id` is used.
+         */
+        set: function (value) {
+            if (isString(value)) {
+                this._keyGetter = getter(value);
+            }
+            else {
+                this._keyGetter = value;
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SelectableDirective.prototype, "keyGetter", {
+        get: function () {
+            return this._keyGetter || this.gantt.idGetter;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    SelectableDirective.prototype.ngOnDestroy = function () {
+        this.unsubscribeSelection();
+    };
+    SelectableDirective.prototype.isSelected = function (dataItem) {
+        return this.state.has(this.keyGetter(dataItem));
+    };
+    SelectableDirective.prototype.selectionChange = function (_a) {
+        var _this = this;
+        var action = _a.action, items = _a.items;
+        this.state.clear();
+        if (action === 'select') {
+            items.forEach(function (item) { return _this.state.add(_this.keyGetter(item)); });
+        }
+        this.emitSelectedItemsChange();
+    };
+    SelectableDirective.prototype.emitSelectedItemsChange = function () {
+        this.lastChange = Array.from(this.state);
+        this.selectedKeysChange.emit(this.lastChange);
+    };
+    SelectableDirective.prototype.subscribeSelection = function () {
+        this.unsubscribeSelection();
+        this.selectionSubscription = this.gantt.selectionChange.subscribe(this.selectionChange);
+    };
+    SelectableDirective.prototype.unsubscribeSelection = function () {
+        if (this.selectionSubscription) {
+            this.selectionSubscription.unsubscribe();
+            this.selectionSubscription = null;
+        }
+    };
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [Boolean])
+    ], SelectableDirective.prototype, "selectable", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", Array),
+        __metadata("design:paramtypes", [Array])
+    ], SelectableDirective.prototype, "selectedKeys", null);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], SelectableDirective.prototype, "selectedKeysChange", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], SelectableDirective.prototype, "itemKey", null);
+    SelectableDirective = __decorate([
+        Directive({
+            exportAs: 'kendoGanttSelectable',
+            selector: '[kendoGanttSelectable]'
+        }),
+        __metadata("design:paramtypes", [GanttComponent])
+    ], SelectableDirective);
+    return SelectableDirective;
+}());
+
 /**
  * @hidden
  */
@@ -2937,7 +3676,8 @@ var ToolbarComponent = /** @class */ (function () {
  * The Gantt ViewSelector component. Shows the currently active view type, and allows switching to another view type.
  */
 var ViewSelectorComponent = /** @class */ (function () {
-    function ViewSelectorComponent() {
+    function ViewSelectorComponent(localizationService) {
+        this.localizationService = localizationService;
         this.hostClass = true;
         /**
          * The currently active view type.
@@ -2961,7 +3701,7 @@ var ViewSelectorComponent = /** @class */ (function () {
      * @hidden
      */
     ViewSelectorComponent.prototype.getViewTypeText = function (viewType) {
-        return "" + viewType[0].toLocaleUpperCase() + viewType.slice(1);
+        return this.localizationService.get(viewType + "ViewText");
     };
     __decorate([
         HostBinding('class.k-gantt-views-wrapper'),
@@ -2982,8 +3722,9 @@ var ViewSelectorComponent = /** @class */ (function () {
     ViewSelectorComponent = __decorate([
         Component({
             selector: 'kendo-gantt-view-selector',
-            template: "\n        <select class=\"k-dropdown k-views-dropdown\" style=\"text-transform: capitalize;\"\n            [value]=\"activeView\"\n            (change)=\"activeViewChange.emit($event.target.value)\">\n            <option *ngFor=\"let view of views\" [value]=\"view\">{{getViewTypeText(view)}}</option>\n        </select>\n        <kendo-buttongroup class=\"k-gantt-views\" selection=\"single\">\n            <button *ngFor=\"let view of views\"\n                kendoButton\n                [selected]=\"view === activeView\"\n                (click)=\"onClick(view)\">{{getViewTypeText(view)}}</button>\n        </kendo-buttongroup>\n    "
-        })
+            template: "\n        <select class=\"k-dropdown k-views-dropdown\"\n            [value]=\"activeView\"\n            (change)=\"activeViewChange.emit($event.target.value)\">\n            <option *ngFor=\"let view of views\" [value]=\"view\">{{getViewTypeText(view)}}</option>\n        </select>\n        <kendo-buttongroup class=\"k-gantt-views\" selection=\"single\">\n            <button *ngFor=\"let view of views\"\n                kendoButton\n                type=\"button\"\n                [selected]=\"view === activeView\"\n                (click)=\"onClick(view)\">{{getViewTypeText(view)}}</button>\n        </kendo-buttongroup>\n    "
+        }),
+        __metadata("design:paramtypes", [LocalizationService])
     ], ViewSelectorComponent);
     return ViewSelectorComponent;
 }());
@@ -3310,11 +4051,378 @@ var TimelineMonthViewComponent = /** @class */ (function (_super) {
     return TimelineMonthViewComponent;
 }(ViewBase));
 
+/**
+ * @hidden
+ */
+var EditDialogComponent = /** @class */ (function () {
+    function EditDialogComponent(mapper, editService, localizationService) {
+        this.mapper = mapper;
+        this.editService = editService;
+        this.localizationService = localizationService;
+    }
+    EditDialogComponent.prototype.getText = function (token) {
+        return this.localizationService.get(token);
+    };
+    EditDialogComponent.prototype.handleEditingResult = function (editResultType) {
+        this.editService.triggerEditEvent(editResultType);
+    };
+    EditDialogComponent.prototype.onTaskDelete = function () {
+        this.editService.showConfirmationDialog.next();
+    };
+    __decorate([
+        Input(),
+        __metadata("design:type", FormGroup)
+    ], EditDialogComponent.prototype, "formGroup", void 0);
+    EditDialogComponent = __decorate([
+        Component({
+            selector: 'kendo-gantt-edit-dialog',
+            template: "\n        <kendo-dialog\n            [title]=\"getText('taskEditingDialogTitle')\"\n            [width]=\"575\"\n            [height]=\"470\"\n            (close)=\"handleEditingResult('cancel')\">\n            <kendo-dialog-messages\n                [closeTitle]=\"getText('taskEditingDialogCloseTitle')\"></kendo-dialog-messages>\n            <form class=\"k-form\" [formGroup]=\"formGroup\">\n                <kendo-formfield *ngIf=\"formGroup.contains(mapper.taskFields.title)\">\n                    <kendo-label [for]=\"mapper.taskFields.title\" [text]=\"getText('titleFieldInputLabel')\"></kendo-label>\n                    <input class=\"k-textbox\" [formControlName]=\"mapper.taskFields.title\" />\n                </kendo-formfield>\n                <div class=\"k-hstack\">\n                    <kendo-formfield [style.width.%]=\"49\" *ngIf=\"formGroup.contains(mapper.taskFields.start)\">\n                        <kendo-label [for]=\"mapper.taskFields.start\" [text]=\"getText('startFieldInputLabel')\"></kendo-label>\n                        <kendo-datetimepicker [formControlName]=\"mapper.taskFields.start\"></kendo-datetimepicker>\n                    </kendo-formfield>\n                    <kendo-treelist-spacer></kendo-treelist-spacer>\n                    <kendo-formfield [style.width.%]=\"49\" *ngIf=\"formGroup.contains(mapper.taskFields.end)\">\n                        <kendo-label [for]=\"mapper.taskFields.end\" [text]=\"getText('endFieldInputLabel')\"></kendo-label>\n                        <kendo-datetimepicker [formControlName]=\"mapper.taskFields.end\"></kendo-datetimepicker>\n                    </kendo-formfield>\n                </div>\n                <kendo-formfield [style.width.%]=\"49\" *ngIf=\"formGroup.contains(mapper.taskFields.completionRatio)\">\n                    <kendo-label [for]=\"mapper.taskFields.completionRatio\" [text]=\"getText('completionRatioFieldInputLabel')\"></kendo-label>\n                    <kendo-numerictextbox\n                        [formControlName]=\"mapper.taskFields.completionRatio\"\n                        [min]=\"0\"\n                        [max]=\"1\"\n                        [decimals]=\"2\"\n                        format=\"p2\"\n                        [step]=\"0.01\"\n                    ></kendo-numerictextbox>\n                </kendo-formfield>\n            </form>\n            <kendo-dialog-actions layout=\"normal\">\n                <button kendoButton (click)=\"onTaskDelete()\">{{ getText('deleteButtonText') }}</button>\n                <kendo-treelist-spacer></kendo-treelist-spacer>\n                <button kendoButton [primary]=\"true\" (click)=\"handleEditingResult('save')\">{{ getText('saveButtonText') }}</button>\n                <button kendoButton (click)=\"handleEditingResult('cancel')\">{{ getText('cancelButtonText') }}</button>\n            </kendo-dialog-actions>\n        </kendo-dialog>\n    "
+        }),
+        __metadata("design:paramtypes", [MappingService,
+            EditService,
+            LocalizationService])
+    ], EditDialogComponent);
+    return EditDialogComponent;
+}());
+
+/**
+ * @hidden
+ */
+var Messages = /** @class */ (function (_super) {
+    __extends(Messages, _super);
+    function Messages() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "taskDeleteLabel", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "taskEditingDialogTitle", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "taskEditingDialogCloseTitle", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "confirmationDialogCloseTitle", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "confirmationDialogTitle", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "deleteButtonText", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "cancelButtonText", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "saveButtonText", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "titleFieldInputLabel", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "startFieldInputLabel", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "endFieldInputLabel", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "completionRatioFieldInputLabel", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "confirmationDialogContent", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "dayViewText", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "weekViewText", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "monthViewText", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "yearViewText", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "noRecords", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filter", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterEqOperator", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterNotEqOperator", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterIsNullOperator", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterIsNotNullOperator", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterIsEmptyOperator", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterIsNotEmptyOperator", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterStartsWithOperator", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterContainsOperator", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterNotContainsOperator", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterEndsWithOperator", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterGteOperator", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterGtOperator", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterLteOperator", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterLtOperator", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterIsTrue", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterIsFalse", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterBooleanAll", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterAfterOrEqualOperator", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterAfterOperator", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterBeforeOperator", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterBeforeOrEqualOperator", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterFilterButton", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterClearButton", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterAndLogic", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "filterOrLogic", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "loading", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "columnMenu", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "columns", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "lock", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "unlock", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "sortable", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "sortAscending", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "sortDescending", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "sortedAscending", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "sortedDescending", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "sortedDefault", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "columnsApply", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "columnsReset", void 0);
+    return Messages;
+}(ComponentMessages));
+
+/**
+ * Custom component messages override default component messages
+ * ([see example]({% slug globalization_treelist %}#toc-localization)).
+ */
+var CustomMessagesComponent = /** @class */ (function (_super) {
+    __extends(CustomMessagesComponent, _super);
+    function CustomMessagesComponent(service) {
+        var _this = _super.call(this) || this;
+        _this.service = service;
+        return _this;
+    }
+    CustomMessagesComponent_1 = CustomMessagesComponent;
+    Object.defineProperty(CustomMessagesComponent.prototype, "override", {
+        get: function () {
+            return true;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    var CustomMessagesComponent_1;
+    CustomMessagesComponent = CustomMessagesComponent_1 = __decorate([
+        Component({
+            providers: [
+                {
+                    provide: Messages,
+                    useExisting: forwardRef(function () { return CustomMessagesComponent_1; })
+                }
+            ],
+            selector: 'kendo-gantt-messages',
+            template: ""
+        }),
+        __metadata("design:paramtypes", [LocalizationService])
+    ], CustomMessagesComponent);
+    return CustomMessagesComponent;
+}(Messages));
+
+/**
+ * @hidden
+ */
+var LocalizedMessagesDirective = /** @class */ (function (_super) {
+    __extends(LocalizedMessagesDirective, _super);
+    function LocalizedMessagesDirective(service) {
+        var _this = _super.call(this) || this;
+        _this.service = service;
+        return _this;
+    }
+    LocalizedMessagesDirective_1 = LocalizedMessagesDirective;
+    var LocalizedMessagesDirective_1;
+    LocalizedMessagesDirective = LocalizedMessagesDirective_1 = __decorate([
+        Directive({
+            providers: [
+                {
+                    provide: Messages,
+                    useExisting: forwardRef(function () { return LocalizedMessagesDirective_1; })
+                }
+            ],
+            selector: '[kendoGanttLocalizedMessages]'
+        }),
+        __metadata("design:paramtypes", [LocalizationService])
+    ], LocalizedMessagesDirective);
+    return LocalizedMessagesDirective;
+}(Messages));
+
+/**
+ * @hidden
+ */
+var GanttTreeListMessagesDirective = /** @class */ (function () {
+    function GanttTreeListMessagesDirective(localizationService) {
+        this.localizationService = localizationService;
+    }
+    GanttTreeListMessagesDirective.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        var treeListServiceDictionary = this.localizationService.dictionary;
+        Object.keys(treeListServiceDictionary)
+            .forEach(function (token) { return treeListServiceDictionary[token] = _this.kendoGanttTreeListMessages.get(token.replace('kendo.treelist.', '')); });
+    };
+    __decorate([
+        Input(),
+        __metadata("design:type", LocalizationService)
+    ], GanttTreeListMessagesDirective.prototype, "kendoGanttTreeListMessages", void 0);
+    GanttTreeListMessagesDirective = __decorate([
+        Directive({ selector: '[kendoGanttTreeListMessages]' }),
+        __metadata("design:paramtypes", [LocalizationService])
+    ], GanttTreeListMessagesDirective);
+    return GanttTreeListMessagesDirective;
+}());
+
 var IMPORTED_MODULES = [
     CommonModule,
+    ReactiveFormsModule,
+    LabelModule,
+    InputsModule,
+    DateInputsModule,
+    ButtonsModule,
     SplitterModule,
     TreeListModule,
-    ButtonsModule
+    ButtonsModule,
+    DialogModule,
+    EventsModule
 ];
 var DECLARATIONS = [
     GanttComponent,
@@ -3338,6 +4446,7 @@ var DECLARATIONS = [
     FilterMenuTemplateDirective,
     FilterCellTemplateDirective,
     CellTemplateDirective,
+    EditTemplateDirective,
     ColumnMenuTemplateDirective,
     HeaderTemplateDirective,
     FooterTemplateDirective,
@@ -3345,10 +4454,43 @@ var DECLARATIONS = [
     GanttDependencyDirective,
     TimelineDayViewComponent,
     TimelineWeekViewComponent,
-    TimelineMonthViewComponent
+    TimelineMonthViewComponent,
+    SelectableDirective,
+    EditDialogComponent,
+    CustomMessagesComponent,
+    LocalizedMessagesDirective,
+    GanttTreeListMessagesDirective
 ];
 /**
- * Sample module
+ * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * definition for the Gantt component.
+ *
+ * @example
+ *
+ * ```ts-no-run
+ * // Import the Gantt module
+ * import { GanttModule } from '@progress/kendo-angular-gantt';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, GanttModule], // import Gantt module
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
  */
 var GanttModule = /** @class */ (function () {
     function GanttModule() {
@@ -3357,7 +4499,11 @@ var GanttModule = /** @class */ (function () {
         NgModule({
             imports: IMPORTED_MODULES.slice(),
             declarations: DECLARATIONS.slice(),
-            exports: DECLARATIONS.slice()
+            exports: DECLARATIONS.slice(),
+            providers: [{
+                    provide: L10N_PREFIX,
+                    useValue: 'kendo.gantt'
+                }]
         })
     ], GanttModule);
     return GanttModule;
@@ -3367,4 +4513,4 @@ var GanttModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { MappingService, OptionChangesService, DependencyDomService, GanttDependencyDirective, GanttHeaderTableBodyComponent, GanttMilestoneTaskComponent, GanttSummaryTaskComponent, GanttTaskBase, GanttTaskComponent, GanttTasksTableBodyComponent, ScrollSyncService, GanttTimelineComponent, TimelineBaseViewService, TimelineDayViewComponent, TimelineDayViewService, TimelineMonthViewComponent, TimelineMonthViewService, TimelineViewService, TimelineWeekViewComponent, TimelineWeekViewService, ViewBase, ToolbarComponent, ViewSelectorComponent, GanttComponent, GanttModule, GanttHierarchyBindingDirective, GanttFlatBindingDirective, GanttExpandableDirective, GanttTaskTemplateDirective, GanttTaskContentTemplateDirective, GanttSummaryTaskTemplateDirective, ToolbarTemplateDirective, GanttColumnBase, GanttColumnComponent, GanttColumnGroupComponent, GanttSpanColumnComponent, CellTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ColumnMenuTemplateDirective, FilterCellTemplateDirective, FilterMenuTemplateDirective };
+export { MappingService, OptionChangesService, DependencyDomService, GanttDependencyDirective, EditDialogComponent, EditService, CustomMessagesComponent, LocalizedMessagesDirective, Messages, GanttTreeListMessagesDirective, GanttHeaderTableBodyComponent, GanttMilestoneTaskComponent, GanttSummaryTaskComponent, GanttTaskBase, GanttTaskComponent, GanttTasksTableBodyComponent, ScrollSyncService, GanttTimelineComponent, TimelineBaseViewService, TimelineDayViewComponent, TimelineDayViewService, TimelineMonthViewComponent, TimelineMonthViewService, TimelineViewService, TimelineWeekViewComponent, TimelineWeekViewService, ViewBase, ToolbarComponent, ViewSelectorComponent, GanttComponent, GanttModule, GanttHierarchyBindingDirective, GanttFlatBindingDirective, GanttExpandableDirective, GanttTaskTemplateDirective, GanttTaskContentTemplateDirective, GanttSummaryTaskTemplateDirective, ToolbarTemplateDirective, SelectableDirective, GanttColumnBase, GanttColumnComponent, GanttColumnGroupComponent, GanttSpanColumnComponent, CellTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ColumnMenuTemplateDirective, FilterCellTemplateDirective, FilterMenuTemplateDirective, EditTemplateDirective };