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

package/dist/fesm2015/index.js

@@ -7,15 +7,21 @@ import { Input, EventEmitter, Injectable, Directive, Optional, TemplateRef, Quer
 import { ColumnBase, ColumnComponent, ColumnGroupComponent, SpanColumnComponent, TreeListComponent, DataBoundTreeComponent, ExpandableTreeComponent, FlatBindingDirective, HierarchyBindingDirective, ExpandableDirective, TreeListModule } from '@progress/kendo-angular-treelist';
 import { of, Subject, Subscription, fromEvent } 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 @@ const packageMetadata = {
     name: '@progress/kendo-angular-gantt',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635941338,
+    publishDate: 1637673280,
     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'
 };
@@ -250,6 +256,33 @@ HeaderTemplateDirective = __decorate([
     __metadata("design:paramtypes", [TemplateRef])
 ], HeaderTemplateDirective);
 
+/**
+ * Represents the column edit-cell template of the Gantt.
+ * Helps to customize the content of the edited cells. To define the cell template, nest an `<ng-template>`
+ * tag with the `kendoGanttEditTemplate` directive inside a `<kendo-gantt-column>` tag.
+ *
+ * The template context contains the following fields:
+ * - `column`&mdash;The current column instance.
+ * - `dataItem`&mdash;The current data item.
+ * - `cellContext`&mdash;An object used to pass context information to built-in directives.
+ * - `formGroup`&mdash;The current [`FormGroup`]({{ site.data.urls.angular['formgroupapi'] }}).
+ * If you use the Gantt inside [Template-Driven Forms]({{ site.data.urls.angular['forms'] }}), it will be `undefined`.
+ * - `isNew`&mdash;The state of the current item.
+ * - `rowIndex`&mdash;The current row index. If inside a new item row, `rowIndex` is `-1`.
+ */
+let EditTemplateDirective = class EditTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+};
+EditTemplateDirective = __decorate([
+    Directive({
+        selector: '[kendoGanttEditTemplate]'
+    }),
+    __param(0, Optional()),
+    __metadata("design:paramtypes", [TemplateRef])
+], EditTemplateDirective);
+
 var GanttColumnComponent_1;
 let GanttColumnComponent = GanttColumnComponent_1 = class GanttColumnComponent extends ColumnComponent {
     constructor(options, parent) {
@@ -305,6 +338,10 @@ __decorate([
     ContentChild(CellTemplateDirective, { static: false }),
     __metadata("design:type", CellTemplateDirective)
 ], GanttColumnComponent.prototype, "template", void 0);
+__decorate([
+    ContentChild(EditTemplateDirective, { static: false }),
+    __metadata("design:type", EditTemplateDirective)
+], GanttColumnComponent.prototype, "editTemplate", void 0);
 __decorate([
     ContentChild(FilterCellTemplateDirective, { static: false }),
     __metadata("design:type", FilterCellTemplateDirective)
@@ -496,6 +533,7 @@ let GanttSpanColumnComponent = GanttSpanColumnComponent_1 = class GanttSpanColum
          */
         this.childColumns = new QueryList();
         this.template = new QueryList();
+        this.editTemplate = new QueryList();
     }
     ngOnChanges() {
         this.options.notifyColumnChanges();
@@ -509,6 +547,10 @@ __decorate([
     ContentChildren(CellTemplateDirective, { descendants: false }),
     __metadata("design:type", QueryList)
 ], GanttSpanColumnComponent.prototype, "template", void 0);
+__decorate([
+    ContentChildren(EditTemplateDirective, { descendants: false }),
+    __metadata("design:type", QueryList)
+], GanttSpanColumnComponent.prototype, "editTemplate", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Boolean)
@@ -681,6 +723,40 @@ const isColumnGroup = (column) => column.isColumnGroup;
  * @hidden
  */
 const isNumber = (contender) => typeof contender === 'number' && !isNaN(contender);
+/**
+ * @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.
+ */
+const getClosestTaskIndex = (element, gantt) => {
+    const 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.
+ */
+const isTask = (contender, gantt) => {
+    const 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.
+ */
+const isClearButton = (contender, gantt) => {
+    const clearButtonContainer = closestInScope(contender, matchesClasses('k-task-actions'), gantt);
+    return isPresent(clearButtonContainer);
+};
 
 const DAY_FORMAT = 'E d/MM';
 const HOUR_FORMAT = 'HH:mm aa';
@@ -845,7 +921,8 @@ const DEFAULT_TASK_MODEL_FIELDS = Object.freeze({
     start: 'start',
     end: 'end',
     title: 'title',
-    completionRatio: 'completionRatio'
+    completionRatio: 'completionRatio',
+    children: 'children'
 });
 
 /**
@@ -1224,6 +1301,40 @@ DependencyDomService = __decorate([
     __metadata("design:paramtypes", [MappingService])
 ], DependencyDomService);
 
+/**
+ * @hidden
+ */
+let EditService = class EditService {
+    /**
+     * @hidden
+     */
+    constructor() {
+        this.showEditingDialog = new Subject();
+        this.showConfirmationDialog = new Subject();
+        this.editEvent = new Subject();
+    }
+    createEditDialog(dataItem, formGroup) {
+        this.dataItem = dataItem;
+        this.formGroup = formGroup;
+        this.showEditingDialog.next(true);
+    }
+    closeEditDialog() {
+        this.showEditingDialog.next(false);
+        this.dataItem = undefined;
+        this.formGroup = undefined;
+    }
+    triggerEditEvent(editResultType) {
+        this.editEvent.next({
+            formGroup: this.formGroup,
+            dataItem: this.dataItem,
+            editResultType
+        });
+    }
+};
+EditService = __decorate([
+    Injectable()
+], EditService);
+
 /**
  * @hidden
  */
@@ -1511,20 +1622,104 @@ __decorate([
     __metadata("design:type", Number)
 ], ViewBase.prototype, "slotWidth", void 0);
 
+/**
+ * @hidden
+ */
+const getEditItem = (dataItem, data, mapper) => {
+    const treeListDataItem = data.find(item => mapper.extractFromTask(item.data, 'id') === mapper.extractFromTask(dataItem, 'id'));
+    return mapPath(treeListDataItem);
+};
+const mapPath = (item) => ({
+    dataItem: item.data,
+    parent: item.parent.data ? mapPath(item.parent) : null
+});
+
 var GanttComponent_1;
 const TREELIST_GROUP_COLUMNS_CLASS = 'k-gantt-treelist-nested-columns';
 const 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 },
+ *     ];
+ * }
+ * ```
  */
 let GanttComponent = GanttComponent_1 = class GanttComponent {
-    constructor(timelineViewService, scrollSyncService, renderer, mapper, optionChangesService, dependencyDomService) {
+    constructor(timelineViewService, scrollSyncService, renderer, mapper, optionChangesService, dependencyDomService, editService, localizationService, hostElement, zone) {
         this.timelineViewService = timelineViewService;
         this.scrollSyncService = scrollSyncService;
         this.renderer = renderer;
         this.mapper = mapper;
         this.optionChangesService = optionChangesService;
         this.dependencyDomService = dependencyDomService;
+        this.editService = editService;
+        this.localizationService = localizationService;
+        this.hostElement = hostElement;
+        this.zone = zone;
         this.hostClasses = true;
         /**
          * The position of the toolbar.
@@ -1612,10 +1807,40 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
          * 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.
@@ -1670,6 +1895,14 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
          * Used by the GanttExpandableDirective.
          */
         this.expandStateChange = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.showEditingDialog = false;
+        /**
+         * @hidden
+         */
+        this.showConfirmationDialog = false;
         this._columns = new QueryList();
         this._data = [];
         this._timelinePaneOptions = Object.assign({}, DEFAULT_TIMELINE_PANE_SETTINGS);
@@ -1677,14 +1910,36 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         this._rowClass = rowClassCallback;
         this._taskClass = taskClassCallback;
         this._activeView = DEFAULT_VIEW;
+        this.rtl = false;
         this.optionChangesSubscriptions = new Subscription();
+        this.editServiceSubscription = new Subscription();
         validatePackage(packageMetadata);
+        this.handleTimelineDblClick = this.handleTimelineDblClick.bind(this);
+        this.handleTimelineMouseDown = this.handleTimelineMouseDown.bind(this);
+        this.handleDoubleClick = this.handleDoubleClick.bind(this);
         this.optionChangesSubscriptions.add(this.optionChangesService.viewChanges.subscribe(() => {
             this.loadTimelineData();
         }));
         this.optionChangesSubscriptions.add(this.optionChangesService.columnChanges.subscribe(() => {
             this.treeList.columns.notifyOnChanges();
         }));
+        this.editServiceSubscription.add(this.editService.showEditingDialog.subscribe(show => this.showEditingDialog = show));
+        this.editServiceSubscription.add(this.editService.showConfirmationDialog.subscribe(() => this.taskDelete.emit()));
+        this.editServiceSubscription.add(this.editService.editEvent.subscribe(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(({ rtl }) => {
+            this.rtl = rtl;
+            this.direction = this.rtl ? 'rtl' : 'ltr';
+        });
     }
     get toolbarTemplate() {
         if (this._customToolbarTemplate) {
@@ -1695,6 +1950,9 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
     set toolbarTemplate(customToolbarTemplate) {
         this._customToolbarTemplate = customToolbarTemplate;
     }
+    get dir() {
+        return this.direction;
+    }
     /**
      * A query list of all declared columns.
      */
@@ -1849,6 +2107,12 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
     get viewTypes() {
         return this.views.map(view => view.type);
     }
+    /**
+     * @hidden
+     */
+    get editDialogFormGroup() {
+        return this.editService.formGroup;
+    }
     ngOnChanges(changes) {
         if (anyChanged(['data', 'activeView', 'workWeekStart', 'workWeekEnd', 'workDayStart', 'workDayEnd'], changes)) {
             this.loadTimelineData();
@@ -1868,6 +2132,10 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
     }
     ngOnDestroy() {
         this.optionChangesSubscriptions.unsubscribe();
+        this.editServiceSubscription.unsubscribe();
+        if (this.localizationSubscription) {
+            this.localizationSubscription.unsubscribe();
+        }
     }
     /**
      * Applies the minimum possible width for the specified column,
@@ -1915,6 +2183,47 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
             this.treeList.reorderColumn(source, destIndex, options);
         }
     }
+    /**
+     * Opens the task editing dialog.
+     */
+    editTask(dataItem, formGroup) {
+        if (!this.showEditingDialog) {
+            this.editService.createEditDialog(dataItem, formGroup);
+        }
+    }
+    /**
+     * Closes the task editing dialog.
+     */
+    closeTaskDialog() {
+        if (this.showEditingDialog) {
+            this.editService.closeEditDialog();
+        }
+    }
+    /**
+     * Opens the delete task confirmation dialog.
+     */
+    openConfirmationDialog() {
+        this.showConfirmationDialog = true;
+    }
+    /**
+     * Opens a cell for editing.
+     */
+    editCell(dataItem, column, formGroup) {
+        this.treeList.editCell(dataItem, column, formGroup);
+    }
+    /**
+     * Closes an edited cell.
+     */
+    closeCell() {
+        this.treeList.closeCell();
+    }
+    /**
+     * @hidden
+     */
+    handleCellClose(e) {
+        this.cellClose.emit(Object.assign(e, { item: this.editItem, sender: this }));
+        this.dependencyDomService.notifyChanges();
+    }
     /**
      * @hidden
      */
@@ -1978,6 +2287,67 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         this._timelinePaneOptions.size = e;
         this.timelinePaneSizeChange.emit(e);
     }
+    /**
+     * @hidden
+     */
+    handleCellClick(event) {
+        this._cellClickEvent = event;
+    }
+    /**
+     * @hidden
+     */
+    handleDoubleClick(event) {
+        const cell = this._cellClickEvent.originalEvent.target;
+        if (event.target !== cell) {
+            return;
+        }
+        this.editItem = getEditItem(this._cellClickEvent.dataItem, this.treeList.view.data, this.mapper);
+        if (hasObservers(this.cellDblClick)) {
+            this.zone.run(() => {
+                this.cellDblClick.emit(Object.assign({}, this._cellClickEvent, { sender: this }));
+            });
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleDeleteConfirmation() {
+        this.editService.triggerEditEvent('remove');
+    }
+    /**
+     * @hidden
+     */
+    handleTimelineMouseDown(event) {
+        const target = event.target;
+        const gantt = this.hostElement.nativeElement;
+        if (!isTask(target, gantt) || isClearButton(target, gantt)) {
+            return;
+        }
+        event.preventDefault();
+    }
+    /**
+     * @hidden
+     */
+    handleTimelineDblClick(event) {
+        const target = event.target;
+        const gantt = this.hostElement.nativeElement;
+        if (!isTask(target, gantt) || isClearButton(target, gantt)) {
+            return;
+        }
+        const taskIndex = getClosestTaskIndex(target, gantt);
+        const task = this.renderedTreeListItems[taskIndex];
+        this.zone.run(() => this.taskDblClick.emit({
+            dataItem: task,
+            originalEvent: event,
+            sender: this
+        }));
+    }
+    /**
+     * @hidden
+     */
+    getText(token) {
+        return this.localizationService.get(token);
+    }
     updateTreeListGroupClass(columns = this.columns) {
         if (!isPresent(this.treeList)) {
             return;
@@ -2029,6 +2399,11 @@ __decorate([
     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),
@@ -2150,10 +2525,38 @@ __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
 ], GanttComponent.prototype, "rowExpand", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], GanttComponent.prototype, "taskDblClick", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], GanttComponent.prototype, "cellDblClick", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], GanttComponent.prototype, "cellClose", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], GanttComponent.prototype, "taskDelete", void 0);
 __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
 ], GanttComponent.prototype, "rowCollapse", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], GanttComponent.prototype, "remove", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], GanttComponent.prototype, "cancel", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], GanttComponent.prototype, "save", void 0);
 __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
@@ -2201,7 +2604,9 @@ __decorate([
 GanttComponent = GanttComponent_1 = __decorate([
     Component({
         selector: 'kendo-gantt',
+        exportAs: 'kendoGantt',
         providers: [
+            LocalizationService,
             {
                 provide: DataBoundTreeComponent,
                 useExisting: forwardRef(() => GanttComponent_1)
@@ -2217,9 +2622,181 @@ GanttComponent = GanttComponent_1 = __decorate([
             ScrollSyncService,
             DependencyDomService,
             MappingService,
-            OptionChangesService
+            OptionChangesService,
+            EditService
         ],
         template: `
+        <ng-container kendoGanttLocalizedMessages
+            i18n-taskDeleteLabel="kendo.gantt.taskDeleteLabel|The label of the task delete icon"
+            taskDeleteLabel="Delete"
+
+            i18n-taskEditingDialogTitle="kendo.gantt.taskEditingDialogTitle|The title of the task editing dialog"
+            taskEditingDialogTitle="Editing Task"
+
+            i18n-taskEditingDialogCloseTitle="kendo.gantt.taskEditingDialogCloseTitle|The title of the task editing dialog close button"
+            taskEditingDialogCloseTitle="Close"
+
+            i18n-confirmationDialogCloseTitle="kendo.gantt.confirmationDialogCloseTitle|The title of the confirmation dialog close button"
+            confirmationDialogCloseTitle="Close"
+
+            i18n-confirmationDialogTitle="kendo.gantt.confirmationDialogTitle|The title of the delete task confirmation dialog"
+            confirmationDialogTitle="Delete Task"
+
+            i18n-confirmationDialogContent="kendo.gantt.confirmationDialogContent|The content of the delete task confirmation dialog"
+            confirmationDialogContent="Are you sure you want to delete this task?"
+
+            i18n-deleteButtonText="kendo.gantt.deleteButtonText|The text of the task editing dialog 'Delete' button"
+            deleteButtonText="Delete"
+
+            i18n-cancelButtonText="kendo.gantt.cancelButtonText|The text of the task editing dialog 'Cancel' button"
+            cancelButtonText="Cancel"
+
+            i18n-saveButtonText="kendo.gantt.saveButtonText|The text of the task editing dialog 'Save' button"
+            saveButtonText="Save"
+
+            i18n-titleFieldInputLabel="kendo.gantt.titleFieldInputLabel|The label of the 'title' field input in editing mode"
+            titleFieldInputLabel="Title"
+
+            i18n-startFieldInputLabel="kendo.gantt.startFieldInputLabel|The label of the 'start' field input in editing mode"
+            startFieldInputLabel="Start"
+
+            i18n-endFieldInputLabel="kendo.gantt.endFieldInputLabel|The label of the 'end' field input in editing mode"
+            endFieldInputLabel="End"
+
+            i18n-completionRatioFieldInputLabel="kendo.gantt.completionRatioFieldInputLabel|The label of the 'completionRatio' field input in editing mode"
+            completionRatioFieldInputLabel="Progress"
+
+            i18n-dayViewText="kendo.gantt.dayViewText|The text of the day view in the ViewSelector component"
+            dayViewText="Day"
+
+            i18n-weekViewText="kendo.gantt.weekViewText|The text of the week view in the ViewSelector component"
+            weekViewText="Week"
+
+            i18n-monthViewText="kendo.gantt.monthViewText|The text of the month view in the ViewSelector component"
+            monthViewText="Month"
+
+            i18n-yearViewText-disabled="kendo.gantt.yearViewText|The text of the year view in the ViewSelector component"
+            yearViewText="Year"
+
+            i18n-noRecords="kendo.gantt.noRecords|The label visible in the TreeList when there are no records"
+            noRecords="No records available."
+
+            i18n-filter="kendo.gantt.filter|The label of the filter cell or icon"
+            filter="Filter"
+
+            i18n-filterEqOperator="kendo.gantt.filterEqOperator|The text of the equal filter operator"
+            filterEqOperator="Is equal to"
+
+            i18n-filterNotEqOperator="kendo.gantt.filterNotEqOperator|The text of the not equal filter operator"
+            filterNotEqOperator="Is not equal to"
+
+            i18n-filterIsNullOperator="kendo.gantt.filterIsNullOperator|The text of the is null filter operator"
+            filterIsNullOperator="Is null"
+
+            i18n-filterIsNotNullOperator="kendo.gantt.filterIsNotNullOperator|The text of the is not null filter operator"
+            filterIsNotNullOperator="Is not null"
+
+            i18n-filterIsEmptyOperator="kendo.gantt.filterIsEmptyOperator|The text of the is empty filter operator"
+            filterIsEmptyOperator="Is empty"
+
+            i18n-filterIsNotEmptyOperator="kendo.gantt.filterIsNotEmptyOperator|The text of the is not empty filter operator"
+            filterIsNotEmptyOperator="Is not empty"
+
+            i18n-filterStartsWithOperator="kendo.gantt.filterStartsWithOperator|The text of the starts with filter operator"
+            filterStartsWithOperator="Starts with"
+
+            i18n-filterContainsOperator="kendo.gantt.filterContainsOperator|The text of the contains filter operator"
+            filterContainsOperator="Contains"
+
+            i18n-filterNotContainsOperator="kendo.gantt.filterNotContainsOperator|The text of the does not contain filter operator"
+            filterNotContainsOperator="Does not contain"
+
+            i18n-filterEndsWithOperator="kendo.gantt.filterEndsWithOperator|The text of the ends with filter operator"
+            filterEndsWithOperator="Ends with"
+
+            i18n-filterGteOperator="kendo.gantt.filterGteOperator|The text of the greater than or equal filter operator"
+            filterGteOperator="Is greater than or equal to"
+
+            i18n-filterGtOperator="kendo.gantt.filterGtOperator|The text of the greater than filter operator"
+            filterGtOperator="Is greater than"
+
+            i18n-filterLteOperator="kendo.gantt.filterLteOperator|The text of the less than or equal filter operator"
+            filterLteOperator="Is less than or equal to"
+
+            i18n-filterLtOperator="kendo.gantt.filterLtOperator|The text of the less than filter operator"
+            filterLtOperator="Is less than"
+
+            i18n-filterIsTrue="kendo.gantt.filterIsTrue|The text of the IsTrue boolean filter option"
+            filterIsTrue="Is True"
+
+            i18n-filterIsFalse="kendo.gantt.filterIsFalse|The text of the IsFalse boolean filter option"
+            filterIsFalse="Is False"
+
+            i18n-filterBooleanAll="kendo.gantt.filterBooleanAll|The text of the (All) boolean filter option"
+            filterBooleanAll="(All)"
+
+            i18n-filterAfterOrEqualOperator="kendo.gantt.filterAfterOrEqualOperator|The text of the after or equal date filter operator"
+            filterAfterOrEqualOperator="Is after or equal to"
+
+            i18n-filterAfterOperator="kendo.gantt.filterAfterOperator|The text of the after date filter operator"
+            filterAfterOperator="Is after"
+
+            i18n-filterBeforeOperator="kendo.gantt.filterBeforeOperator|The text of the before date filter operator"
+            filterBeforeOperator="Is before"
+
+            i18n-filterBeforeOrEqualOperator="kendo.gantt.filterBeforeOrEqualOperator|The text of the before or equal date filter operator"
+            filterBeforeOrEqualOperator="Is before or equal to"
+
+            i18n-filterFilterButton="kendo.gantt.filterFilterButton|The text of the filter button"
+            filterFilterButton="Filter"
+
+            i18n-filterClearButton="kendo.gantt.filterClearButton|The text of the clear filter button"
+            filterClearButton="Clear"
+
+            i18n-filterAndLogic="kendo.gantt.filterAndLogic|The text of the And filter logic"
+            filterAndLogic="And"
+
+            i18n-filterOrLogic="kendo.gantt.filterOrLogic|The text of the Or filter logic"
+            filterOrLogic="Or"
+
+            i18n-loading="kendo.gantt.loading|The loading text"
+            loading="Loading"
+
+            i18n-columnMenu="kendo.gantt.columnMenu|The title of the column menu icon"
+            columnMenu="Column Menu"
+
+            i18n-columns="kendo.gantt.columns|The text shown in the column menu for the columns item"
+            columns="Columns"
+
+            i18n-lock-disabled="kendo.gantt.lock|The text shown in the column menu for the lock item"
+            lock-disabled="Lock"
+
+            i18n-unlock-disabled="kendo.gantt.unlock|The text shown in the column menu for the unlock item"
+            unlock-disabled="Unlock"
+
+            i18n-sortable="kendo.gantt.sortable|The label of the sort icon"
+            sortable="Sortable"
+
+            i18n-sortAscending="kendo.gantt.sortAscending|The text shown in the column menu for the sort ascending item"
+            sortAscending="Sort Ascending"
+
+            i18n-sortDescending="kendo.gantt.sortDescending|The text shown in the column menu for the sort descending item"
+            sortDescending="Sort Descending"
+
+            i18n-sortedAscending="kendo.gantt.sortedAscending|The status announcement when a column is sorted ascending"
+            sortedAscending="Sorted Ascending"
+
+            i18n-sortedDescending="kendo.gantt.sortedDescending|The status announcement when a column is sorted descending"
+            sortedDescending="Sorted Descending"
+
+            i18n-sortedDefault="kendo.gantt.sortedDefault|The status announcement when a column is no longer sorted"
+            sortedDefault="Not Sorted"
+
+            i18n-columnsApply="kendo.gantt.columnsApply|The text shown in the column menu or column chooser for the columns apply button"
+            columnsApply="Apply"
+
+            i18n-columnsReset="kendo.gantt.columnsReset|The text shown in the column menu or column chooser for the columns reset button"
+            columnsReset="Reset"></ng-container>
         <kendo-gantt-toolbar
             *ngIf="showToolbar('top')"
             class="k-gantt-header k-toolbar k-gantt-toolbar"
@@ -2261,7 +2838,12 @@ GanttComponent = GanttComponent_1 = __decorate([
                         (columnResize)="columnResize.emit($event)"
                         (columnVisibilityChange)="handleColumnVisibilityChange($event)"
                         (columnLockedChange)="columnLockedChange.emit($event)"
-                    >
+                        (cellClick)="handleCellClick($event)"
+                        (cellClose)="handleCellClose($event)"
+                        [kendoEventsOutsideAngular]="{
+                            dblclick: handleDoubleClick
+                        }">
+                        <kendo-treelist-messages [kendoGanttTreeListMessages]="localizationService"></kendo-treelist-messages>
                     </kendo-treelist>
                 </kendo-splitter-pane>
                 <kendo-splitter-pane
@@ -2287,6 +2869,10 @@ GanttComponent = GanttComponent_1 = __decorate([
                         [taskClass]="taskClass"
                         [dependencies]="dependencies"
                         [hasChildren]="hasChildren"
+                        [kendoEventsOutsideAngular]="{
+                            dblclick: handleTimelineDblClick,
+                            mousedown: handleTimelineMouseDown
+                        }"
                     ></kendo-gantt-timeline>
                 </kendo-splitter-pane>
             </kendo-splitter>
@@ -2295,6 +2881,20 @@ GanttComponent = GanttComponent_1 = __decorate([
             *ngIf="showToolbar('bottom')"
             class="k-gantt-footer k-toolbar k-gantt-toolbar"
             position="bottom"></kendo-gantt-toolbar>
+        <kendo-gantt-edit-dialog *ngIf="showEditingDialog" [formGroup]="editDialogFormGroup"></kendo-gantt-edit-dialog>
+        <kendo-dialog
+            *ngIf="showConfirmationDialog"
+            [width]="575"
+            [height]="170"
+            [title]="getText('confirmationDialogTitle')"
+            (close)="showConfirmationDialog = false;">
+            <span>{{getText('confirmationDialogContent')}}</span>
+            <kendo-dialog-actions layout="normal">
+                <kendo-treelist-spacer></kendo-treelist-spacer>
+                <button kendoButton [primary]="true" (click)="handleDeleteConfirmation()">{{ getText('deleteButtonText') }}</button>
+                <button kendoButton (click)="showConfirmationDialog = false;">{{ getText('cancelButtonText') }}</button>
+            </kendo-dialog-actions>
+        </kendo-dialog>
    `
     }),
     __metadata("design:paramtypes", [TimelineViewService,
@@ -2302,7 +2902,11 @@ GanttComponent = GanttComponent_1 = __decorate([
         Renderer2,
         MappingService,
         OptionChangesService,
-        DependencyDomService])
+        DependencyDomService,
+        EditService,
+        LocalizationService,
+        ElementRef,
+        NgZone])
 ], GanttComponent);
 
 /**
@@ -2549,17 +3153,22 @@ __decorate([
     Input(),
     __metadata("design:type", Function)
 ], GanttTasksTableBodyComponent.prototype, "hasChildren", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Number)
+], GanttTasksTableBodyComponent.prototype, "index", void 0);
 GanttTasksTableBodyComponent = __decorate([
     Component({
         selector: '[kendoGanttTasksTableBody]',
         template: `
-        <tr #timelineRow *ngFor="let item of rows">
+        <tr #timelineRow *ngFor="let item of rows; let index = index">
             <td>
                 <kendo-gantt-milestone-task
                     *ngIf="isMileStone(item); else task"
                     [dataItem]="item"
                     [activeView]="activeView"
                     [taskClass]="taskClass"
+                    [index]="index"
                 >
                 </kendo-gantt-milestone-task>
                 <ng-template #task>
@@ -2569,6 +3178,7 @@ GanttTasksTableBodyComponent = __decorate([
                         [template]="summaryTaskTemplate"
                         [activeView]="activeView"
                         [taskClass]="taskClass"
+                        [index]="index"
                     >
                     </kendo-gantt-summary-task>
                     <kendo-gantt-task
@@ -2578,6 +3188,7 @@ GanttTasksTableBodyComponent = __decorate([
                         [taskTemplate]="taskTemplate"
                         [activeView]="activeView"
                         [taskClass]="taskClass"
+                        [index]="index"
                     >
                     </kendo-gantt-task>
                 </ng-template>
@@ -2703,14 +3314,23 @@ __decorate([
     Input(),
     __metadata("design:type", Function)
 ], GanttTaskBase.prototype, "taskClass", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Number)
+], GanttTaskBase.prototype, "index", void 0);
 
 var GanttTaskComponent_1;
 /**
  * @hidden
  */
 let GanttTaskComponent = GanttTaskComponent_1 = class GanttTaskComponent extends GanttTaskBase {
-    constructor(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
+    constructor(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, editService) {
         super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr);
+        this.editService = editService;
+    }
+    onTaskDelete() {
+        this.editService.dataItem = this.dataItem;
+        this.editService.showConfirmationDialog.next();
     }
 };
 __decorate([
@@ -2738,6 +3358,7 @@ GanttTaskComponent = GanttTaskComponent_1 = __decorate([
             [style.width.px]="taskWidth"
             [style.left.px]="taskOffset"
             [attr.title]="mapper.extractFromTask(dataItem, 'title')"
+            [attr.data-task-index]="index"
         >
             <ng-container *ngIf="!taskTemplate">
                 <div
@@ -2757,6 +3378,13 @@ GanttTaskComponent = GanttTaskComponent_1 = __decorate([
                         >
                         </ng-template>
                     </div>
+                    <span class="k-task-actions">
+                        <span
+                            (click)="onTaskDelete()"
+                            class="k-link k-task-delete">
+                            <span class="k-icon k-i-close"></span>
+                        </span>
+                    </span>
                 </div>
             </ng-container>
             <ng-template
@@ -2775,7 +3403,8 @@ GanttTaskComponent = GanttTaskComponent_1 = __decorate([
         TimelineViewService,
         DependencyDomService,
         OptionChangesService,
-        ChangeDetectorRef])
+        ChangeDetectorRef,
+        EditService])
 ], GanttTaskComponent);
 
 var GanttSummaryTaskComponent_1;
@@ -2813,6 +3442,7 @@ GanttSummaryTaskComponent = GanttSummaryTaskComponent_1 = __decorate([
             [style.width.px]="taskWidth"
             [style.left.px]="taskOffset"
             [attr.title]="mapper.extractFromTask(dataItem, 'title')"
+            [attr.data-task-index]="index"
         >
             <div *ngIf="!template; else summaryTemplate"
                 class="k-task-summary-progress"
@@ -2872,6 +3502,7 @@ GanttMilestoneTaskComponent = GanttMilestoneTaskComponent_1 = __decorate([
             [ngClass]="taskClass(dataItem)"
             [style.left.px]="taskOffset"
             [attr.title]="mapper.extractFromTask(dataItem, 'title')"
+            [attr.data-task-index]="index"
         >
         </div>
     `
@@ -3021,10 +3652,8 @@ ToolbarComponent = __decorate([
  * The Gantt ViewSelector component. Shows the currently active view type, and allows switching to another view type.
  */
 let ViewSelectorComponent = class ViewSelectorComponent {
-    /**
-     * The Gantt ViewSelector component. Shows the currently active view type, and allows switching to another view type.
-     */
-    constructor() {
+    constructor(localizationService) {
+        this.localizationService = localizationService;
         this.hostClass = true;
         /**
          * The currently active view type.
@@ -3048,7 +3677,7 @@ let ViewSelectorComponent = class ViewSelectorComponent {
      * @hidden
      */
     getViewTypeText(viewType) {
-        return `${viewType[0].toLocaleUpperCase()}${viewType.slice(1)}`;
+        return this.localizationService.get(`${viewType}ViewText`);
     }
 };
 __decorate([
@@ -3071,7 +3700,7 @@ ViewSelectorComponent = __decorate([
     Component({
         selector: 'kendo-gantt-view-selector',
         template: `
-        <select class="k-dropdown k-views-dropdown" style="text-transform: capitalize;"
+        <select class="k-dropdown k-views-dropdown"
             [value]="activeView"
             (change)="activeViewChange.emit($event.target.value)">
             <option *ngFor="let view of views" [value]="view">{{getViewTypeText(view)}}</option>
@@ -3083,7 +3712,8 @@ ViewSelectorComponent = __decorate([
                 (click)="onClick(view)">{{getViewTypeText(view)}}</button>
         </kendo-buttongroup>
     `
-    })
+    }),
+    __metadata("design:paramtypes", [LocalizationService])
 ], ViewSelectorComponent);
 
 /**
@@ -3389,11 +4019,401 @@ TimelineMonthViewComponent = TimelineMonthViewComponent_1 = __decorate([
     __metadata("design:paramtypes", [OptionChangesService, DependencyDomService])
 ], TimelineMonthViewComponent);
 
+/**
+ * @hidden
+ */
+let EditDialogComponent = class EditDialogComponent {
+    constructor(mapper, editService, localizationService) {
+        this.mapper = mapper;
+        this.editService = editService;
+        this.localizationService = localizationService;
+    }
+    getText(token) {
+        return this.localizationService.get(token);
+    }
+    handleEditingResult(editResultType) {
+        this.editService.triggerEditEvent(editResultType);
+    }
+    onTaskDelete() {
+        this.editService.showConfirmationDialog.next();
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", FormGroup)
+], EditDialogComponent.prototype, "formGroup", void 0);
+EditDialogComponent = __decorate([
+    Component({
+        selector: 'kendo-gantt-edit-dialog',
+        template: `
+        <kendo-dialog
+            [title]="getText('taskEditingDialogTitle')"
+            [width]="575"
+            [height]="470"
+            (close)="handleEditingResult('cancel')">
+            <kendo-dialog-messages
+                [closeTitle]="getText('taskEditingDialogCloseTitle')"></kendo-dialog-messages>
+            <form class="k-form" [formGroup]="formGroup">
+                <kendo-formfield *ngIf="formGroup.contains(mapper.taskFields.title)">
+                    <kendo-label [for]="mapper.taskFields.title" [text]="getText('titleFieldInputLabel')"></kendo-label>
+                    <input class="k-textbox" [formControlName]="mapper.taskFields.title" />
+                </kendo-formfield>
+                <div class="k-hstack">
+                    <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.start)">
+                        <kendo-label [for]="mapper.taskFields.start" [text]="getText('startFieldInputLabel')"></kendo-label>
+                        <kendo-datetimepicker [formControlName]="mapper.taskFields.start"></kendo-datetimepicker>
+                    </kendo-formfield>
+                    <kendo-treelist-spacer></kendo-treelist-spacer>
+                    <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.end)">
+                        <kendo-label [for]="mapper.taskFields.end" [text]="getText('endFieldInputLabel')"></kendo-label>
+                        <kendo-datetimepicker [formControlName]="mapper.taskFields.end"></kendo-datetimepicker>
+                    </kendo-formfield>
+                </div>
+                <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.completionRatio)">
+                    <kendo-label [for]="mapper.taskFields.completionRatio" [text]="getText('completionRatioFieldInputLabel')"></kendo-label>
+                    <kendo-numerictextbox
+                        [formControlName]="mapper.taskFields.completionRatio"
+                        [min]="0"
+                        [max]="1"
+                        [decimals]="2"
+                        format="p2"
+                        [step]="0.01"
+                    ></kendo-numerictextbox>
+                </kendo-formfield>
+            </form>
+            <kendo-dialog-actions layout="normal">
+                <button kendoButton (click)="onTaskDelete()">{{ getText('deleteButtonText') }}</button>
+                <kendo-treelist-spacer></kendo-treelist-spacer>
+                <button kendoButton [primary]="true" (click)="handleEditingResult('save')">{{ getText('saveButtonText') }}</button>
+                <button kendoButton (click)="handleEditingResult('cancel')">{{ getText('cancelButtonText') }}</button>
+            </kendo-dialog-actions>
+        </kendo-dialog>
+    `
+    }),
+    __metadata("design:paramtypes", [MappingService,
+        EditService,
+        LocalizationService])
+], EditDialogComponent);
+
+/**
+ * @hidden
+ */
+class Messages extends ComponentMessages {
+}
+__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);
+
+var CustomMessagesComponent_1;
+/**
+ * Custom component messages override default component messages
+ * ([see example]({% slug globalization_treelist %}#toc-localization)).
+ */
+let CustomMessagesComponent = CustomMessagesComponent_1 = class CustomMessagesComponent extends Messages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        return true;
+    }
+};
+CustomMessagesComponent = CustomMessagesComponent_1 = __decorate([
+    Component({
+        providers: [
+            {
+                provide: Messages,
+                useExisting: forwardRef(() => CustomMessagesComponent_1)
+            }
+        ],
+        selector: 'kendo-gantt-messages',
+        template: ``
+    }),
+    __metadata("design:paramtypes", [LocalizationService])
+], CustomMessagesComponent);
+
+var LocalizedMessagesDirective_1;
+/**
+ * @hidden
+ */
+let LocalizedMessagesDirective = LocalizedMessagesDirective_1 = class LocalizedMessagesDirective extends Messages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+};
+LocalizedMessagesDirective = LocalizedMessagesDirective_1 = __decorate([
+    Directive({
+        providers: [
+            {
+                provide: Messages,
+                useExisting: forwardRef(() => LocalizedMessagesDirective_1)
+            }
+        ],
+        selector: '[kendoGanttLocalizedMessages]'
+    }),
+    __metadata("design:paramtypes", [LocalizationService])
+], LocalizedMessagesDirective);
+
+/**
+ * @hidden
+ */
+let GanttTreeListMessagesDirective = class GanttTreeListMessagesDirective {
+    constructor(localizationService) {
+        this.localizationService = localizationService;
+    }
+    ngAfterViewInit() {
+        const treeListServiceDictionary = this.localizationService.dictionary;
+        Object.keys(treeListServiceDictionary)
+            .forEach(token => 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);
+
 const IMPORTED_MODULES = [
     CommonModule,
+    ReactiveFormsModule,
+    LabelModule,
+    InputsModule,
+    DateInputsModule,
+    ButtonsModule,
     SplitterModule,
     TreeListModule,
-    ButtonsModule
+    ButtonsModule,
+    DialogModule,
+    EventsModule
 ];
 const DECLARATIONS = [
     GanttComponent,
@@ -3417,6 +4437,7 @@ const DECLARATIONS = [
     FilterMenuTemplateDirective,
     FilterCellTemplateDirective,
     CellTemplateDirective,
+    EditTemplateDirective,
     ColumnMenuTemplateDirective,
     HeaderTemplateDirective,
     FooterTemplateDirective,
@@ -3424,10 +4445,42 @@ const DECLARATIONS = [
     GanttDependencyDirective,
     TimelineDayViewComponent,
     TimelineWeekViewComponent,
-    TimelineMonthViewComponent
+    TimelineMonthViewComponent,
+    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);
+ *
+ * ```
  */
 let GanttModule = class GanttModule {
 };
@@ -3435,7 +4488,11 @@ GanttModule = __decorate([
     NgModule({
         imports: [...IMPORTED_MODULES],
         declarations: [...DECLARATIONS],
-        exports: [...DECLARATIONS]
+        exports: [...DECLARATIONS],
+        providers: [{
+                provide: L10N_PREFIX,
+                useValue: 'kendo.gantt'
+            }]
     })
 ], GanttModule);
 
@@ -3443,4 +4500,4 @@ GanttModule = __decorate([
  * 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, GanttColumnBase, GanttColumnComponent, GanttColumnGroupComponent, GanttSpanColumnComponent, CellTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ColumnMenuTemplateDirective, FilterCellTemplateDirective, FilterMenuTemplateDirective, EditTemplateDirective };