@progress/kendo-angular-gantt 0.2.1-dev.202112091019 → 0.3.0-dev.202201111723

package/dist/fesm5/index.js

@@ -6,22 +6,24 @@ 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, isEqual, MS_PER_HOUR, MS_PER_DAY } from '@progress/kendo-date-math';
-import { of, fromEvent, Subject, Subscription } from 'rxjs';
+import { of, fromEvent, Subject, Subscription, forkJoin, EMPTY, isObservable } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
 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 { getter } from '@progress/kendo-common';
-import { map, distinctUntilChanged, take, filter, switchMap } from 'rxjs/operators';
+import { map, distinctUntilChanged, take, expand, reduce, 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 { SplitterModule, TabStripModule } 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 { FormGroup, FormControl, Validators, FormArray, 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';
+import { GridModule } from '@progress/kendo-angular-grid';
+import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
 
 /**
  * @hidden
@@ -30,7 +32,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-gantt',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1639044748,
+    publishDate: 1641921322,
     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'
 };
@@ -789,8 +791,17 @@ var isClearButton = function (contender, gantt) {
     return isPresent(clearButtonContainer);
 };
 
+/**
+ * @hidden
+ */
 var DAY_FORMAT = 'E d/MM';
+/**
+ * @hidden
+ */
 var HOUR_FORMAT = 'HH:mm aa';
+/**
+ * @hidden
+ */
 var MONTH_FORMAT = 'MMM';
 /**
  * @hidden
@@ -1371,30 +1382,109 @@ var DependencyDomService = /** @class */ (function () {
  * @hidden
  */
 var EditService = /** @class */ (function () {
-    function EditService() {
+    function EditService(mapper) {
+        var _this = this;
+        this.mapper = mapper;
         this.showEditingDialog = new Subject();
         this.showConfirmationDialog = new Subject();
         this.editEvent = new Subject();
+        this.addEvent = new Subject();
+        this.updatedItems = [];
+        this.deletedItems = [];
+        this.itemIndex = function (item, data) {
+            return data.findIndex(function (dataItem) { return _this.mapper.extractFromTask(dataItem, 'id') === _this.mapper.extractFromTask(item, 'id'); });
+        };
     }
-    EditService.prototype.createEditDialog = function (dataItem, formGroup) {
+    Object.defineProperty(EditService.prototype, "dependencies", {
+        get: function () {
+            return this.predecessors.concat(this.successors);
+        },
+        set: function (items) {
+            var _this = this;
+            // Can this whole thing be moved to edit-dialog? Dependencies might not be needed here
+            var dataItemId = this.mapper.extractFromTask(this.dataItem, 'id');
+            this.predecessors = items.filter(function (item) { return _this.mapper.extractFromDependency(item, 'toId') === dataItemId; });
+            this.successors = items.filter(function (item) { return _this.mapper.extractFromDependency(item, 'fromId') === dataItemId; });
+        },
+        enumerable: true,
+        configurable: true
+    });
+    EditService.prototype.createEditDialog = function (dataItem, taskFormGroup, dependencies) {
         this.dataItem = dataItem;
-        this.formGroup = formGroup;
+        this.taskFormGroup = taskFormGroup;
+        this.dependencies = dependencies;
         this.showEditingDialog.next(true);
     };
     EditService.prototype.closeEditDialog = function () {
         this.showEditingDialog.next(false);
         this.dataItem = undefined;
-        this.formGroup = undefined;
+        this.taskFormGroup = undefined;
+        this.dependencies = [];
+        this.updatedItems = [];
+        this.deletedItems = [];
     };
     EditService.prototype.triggerEditEvent = function (editResultType) {
         this.editEvent.next({
-            formGroup: this.formGroup,
+            taskFormGroup: this.taskFormGroup,
             dataItem: this.dataItem,
+            dependencies: {
+                createdItems: this.getCreatedDependencies(),
+                updatedItems: this.updatedItems,
+                deletedItems: this.deletedItems
+            },
             editResultType: editResultType
         });
     };
+    EditService.prototype.updateDependencies = function (item) {
+        if (!this.isNew(item)) {
+            // update
+            var index = this.itemIndex(item, this.updatedItems);
+            if (index !== -1) {
+                this.updatedItems.splice(index, 1, item);
+            }
+            else {
+                this.updatedItems.push(item);
+            }
+        }
+    };
+    EditService.prototype.getCreatedDependencies = function () {
+        var _this = this;
+        return this.dependencies.filter(function (item) { return _this.mapper.extractFromDependency(item, 'id') === null; });
+    };
+    EditService.prototype.deleteDependency = function (item) {
+        var updatedIndex = this.itemIndex(item, this.updatedItems);
+        if (updatedIndex !== -1) {
+            this.updatedItems.splice(updatedIndex, 1);
+        }
+        if (!this.isNew(item)) {
+            this.deletedItems.push(item);
+        }
+    };
+    EditService.prototype.loadTasks = function (initialValues, isInitializer) {
+        var _this = this;
+        if (isInitializer === void 0) { isInitializer = true; }
+        return forkJoin(initialValues.map(function (v) { return _this.getElementById(v); })).pipe(map(function (value) {
+            return value.reduce(function (acc, item) { return acc = acc.concat(normalizeGanttData(item)); }, []);
+        }), expand(function (values) {
+            if (values.some(function (el) { return _this.hasChildren(el); })) {
+                return _this.loadTasks(values, false);
+            }
+            return EMPTY;
+        }), reduce(function (acc, values) { return acc.concat(values); }, isInitializer ? initialValues.slice() : []));
+    };
+    EditService.prototype.getElementById = function (item) {
+        var children = this.fetchChildren(item);
+        if (isObservable(children)) {
+            return children;
+        }
+        return of(children);
+    };
+    EditService.prototype.isNew = function (item) {
+        return !isPresent(this.mapper.extractFromDependency(item, 'id'));
+    };
     EditService = __decorate([
-        Injectable()
+        Injectable(),
+        __metadata("design:paramtypes", [MappingService])
     ], EditService);
     return EditService;
 }());
@@ -1707,6 +1797,25 @@ var mapPath = function (item) { return ({
     parent: item.parent.data ? mapPath(item.parent) : null
 }); };
 
+/**
+ * @hidden
+ *
+ * Needed to keep the Gantt's LocalizationService reference and be able to use it component's inside the TabStrip
+ */
+var GanttLocalizationService = /** @class */ (function () {
+    function GanttLocalizationService(localizationService) {
+        this.localizationService = localizationService;
+    }
+    GanttLocalizationService.prototype.get = function (token) {
+        return this.localizationService.get(token);
+    };
+    GanttLocalizationService = __decorate([
+        Injectable(),
+        __metadata("design:paramtypes", [LocalizationService])
+    ], GanttLocalizationService);
+    return GanttLocalizationService;
+}());
+
 var TREELIST_GROUP_COLUMNS_CLASS = 'k-gantt-treelist-nested-columns';
 var DEFAULT_VIEW = 'week';
 /**
@@ -1797,7 +1906,7 @@ var GanttComponent = /** @class */ (function () {
         /**
          * 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.
+         * > The [`selectable`]({% slug api_gantt_ganttcomponent %}#toc-selectable) prop has to be set to `true` in order for this callback to be executed.
          */
         this.isSelected = isSelected;
         /**
@@ -1811,29 +1920,10 @@ var GanttComponent = /** @class */ (function () {
         /**
          * 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 set to `true`, the [`isSelected`]({% slug api_gantt_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.
-         *
-         * The possible values are:
-         * - `top`—Positions the toolbar above the Gantt panes.
-         * - `bottom`—Positions the toolbar below the Gantt panes.
-         * - `both`—Displays two toolbar instances. Positions the first one above,
-         * and the second one - below the Gantt panes.
-         * - `none`—No toolbar is rendered.
-         */
-        this.toolbarPosition = 'top';
-        /**
-         * Gets or sets the callback function that retrieves the child items for a particular item.
-         */
-        this.fetchChildren = fetchChildren;
-        /**
-         * Gets or sets the callback function that indicates if a particular item has child items.
-         */
-        this.hasChildren = hasChildren;
         /**
          * Defines the dependencies that will be drawn between the rendered tasks.
          *
@@ -1935,6 +2025,10 @@ var GanttComponent = /** @class */ (function () {
          * Fires when the user saves an edited task.
          */
         this.save = new EventEmitter();
+        /**
+         * Fires when the user adds a task.
+         */
+        this.taskAdd = new EventEmitter();
         /**
          * Fires when the sorting of the Gantt is changed.
          * You have to handle the event yourself and sort the data.
@@ -2012,6 +2106,13 @@ var GanttComponent = /** @class */ (function () {
         this._rowClass = rowClassCallback;
         this._taskClass = taskClassCallback;
         this._activeView = DEFAULT_VIEW;
+        this._toolbarSettings = {
+            position: 'top',
+            addTaskTool: 'none',
+            viewSelectorTool: 'top'
+        };
+        this._fetchChildren = fetchChildren;
+        this._hasChildren = hasChildren;
         this.rtl = false;
         this.optionChangesSubscriptions = new Subscription();
         this.editServiceSubscription = new Subscription();
@@ -2022,18 +2123,27 @@ var GanttComponent = /** @class */ (function () {
         this.optionChangesSubscriptions.add(this.optionChangesService.columnChanges.subscribe(function () {
             _this.treeList.columns.notifyOnChanges();
         }));
+        this.editService.getSelectedItem = this.getFirstSelectedItem.bind(this);
         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,
+                taskFormGroup: args.taskFormGroup,
                 item: getEditItem(args.dataItem, _this.treeList.view.data, _this.mapper),
+                dependencies: args.dependencies,
                 sender: _this
             });
             _this.showConfirmationDialog = _this.showEditingDialog = false;
-            _this.editService.dataItem = _this.editService.formGroup = null;
+            _this.editService.dataItem = _this.editService.taskFormGroup = null;
+            _this.updateView();
+        }));
+        this.editServiceSubscription.add(this.editService.addEvent.subscribe(function (args) {
+            var selectedItem = _this.getFirstSelectedItem();
+            _this.taskAdd.emit({
+                actionType: args.actionType,
+                selectedItem: selectedItem ? getEditItem(selectedItem, _this.treeList.view.data, _this.mapper) : null
+            });
             _this.updateView();
-            _this.dependencyDomService.notifyChanges();
         }));
         this.localizationSubscription = this.localizationService.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
@@ -2139,6 +2249,61 @@ var GanttComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(GanttComponent.prototype, "toolbarSettings", {
+        get: function () {
+            return this._toolbarSettings;
+        },
+        /**
+         * The toolbar configuration. Defines the position and content of the toolbar(s).
+         * The available properties are `position`, `addTaskTool`, and `viewSelectorTool`.
+         * All are optional and default to `top`.
+         *
+         * The possible values for each option are:
+         * - `top`—Positions the toolbar above the Gantt panes. Renders the respective tool in the top toolbar.
+         * - `bottom`—Positions the toolbar below the Gantt panes. Renders the respective tool in the bottom toolbar.
+         * - `both`—Displays two toolbar instances. Positions the first one above,
+         * and the second one - below the Gantt panes. Renders the respective tool in the both toolbars.
+         * - `none`—No toolbar is rendered when used for setting `position`.
+         * No add task or view selector tool is rendered when used for setting `addTaskTool` or `viewSelectorTool`.
+         */
+        set: function (value) {
+            this._toolbarSettings = {
+                position: value.position || 'top',
+                addTaskTool: value.addTaskTool || 'none',
+                viewSelectorTool: value.viewSelectorTool || 'top'
+            };
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(GanttComponent.prototype, "fetchChildren", {
+        get: function () {
+            return this._fetchChildren;
+        },
+        /**
+         * Gets or sets the callback function that retrieves the child items for a particular item.
+         */
+        set: function (fn) {
+            this._fetchChildren = fn;
+            this.editService.fetchChildren = fn;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(GanttComponent.prototype, "hasChildren", {
+        get: function () {
+            return this._hasChildren;
+        },
+        /**
+         * Gets or sets the callback function that indicates if a particular item has child items.
+         */
+        set: function (fn) {
+            this._hasChildren = fn;
+            this.editService.hasChildren = fn;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(GanttComponent.prototype, "timelinePaneOptions", {
         get: function () {
             return __assign({}, this._timelinePaneOptions, { size: this.treeListPaneOptions.collapsed ? '100%' : this._timelinePaneOptions.size });
@@ -2290,16 +2455,6 @@ 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();
@@ -2373,19 +2528,30 @@ var GanttComponent = /** @class */ (function () {
         }
     };
     /**
-     * Updates the data of the Gantt and forces row-related callbacks to be called anew.
+     * Forces the TreeList to evaluate if some data items have changed and re-renders the rows information, if needed.
+     * Recalculates and re-renders the Timeline period, if needed.
+     * Redraws changed dependencies, if needed.
+     * Executes all row-related callbacks anew.
      */
     GanttComponent.prototype.updateView = function () {
         if (isPresent(this.treeList)) {
             this.treeList.updateView();
         }
+        this.loadTimelineData();
+        this.dependencyDomService.notifyChanges();
     };
     /**
      * Opens the task editing dialog.
      */
     GanttComponent.prototype.editTask = function (dataItem, formGroup) {
+        var _this = this;
         if (!this.showEditingDialog) {
-            this.editService.createEditDialog(dataItem, formGroup);
+            var taskId_1 = this.mapper.extractFromTask(dataItem, 'id');
+            var dependencies = this.dependencies.filter(function (item) {
+                return _this.mapper.extractFromDependency(item, 'toId') === taskId_1
+                    || _this.mapper.extractFromDependency(item, 'fromId') === taskId_1;
+            });
+            this.editService.createEditDialog(dataItem, formGroup, dependencies);
         }
     };
     /**
@@ -2458,7 +2624,7 @@ var GanttComponent = /** @class */ (function () {
      * @hidden
      */
     GanttComponent.prototype.showToolbar = function (position) {
-        return this.toolbarPosition !== 'none' && ([position, 'both'].indexOf(this.toolbarPosition) > -1);
+        return this.toolbarSettings.position !== 'none' && ([position, 'both'].indexOf(this.toolbarSettings.position) > -1);
     };
     /**
      * @hidden
@@ -2626,7 +2792,7 @@ var GanttComponent = /** @class */ (function () {
             items: [dataItem],
             sender: this
         });
-        this.updateView();
+        this.treeList.updateView();
     };
     GanttComponent.prototype.updateTreeListGroupClass = function (columns) {
         if (columns === void 0) { columns = this.columns; }
@@ -2666,6 +2832,11 @@ var GanttComponent = /** @class */ (function () {
         var shouldToggleSelection = ctrlKey || metaKey;
         return (shouldToggleSelection && this.isSelected(dataItem)) ? 'remove' : 'select';
     };
+    GanttComponent.prototype.getFirstSelectedItem = function () {
+        var isSelectedCallback = this.isSelected || isSelected;
+        var loadedItems = this.renderedTreeListItems || [];
+        return loadedItems.find(isSelectedCallback);
+    };
     var GanttComponent_1;
     __decorate([
         ViewChild(TreeListComponent, { static: true }),
@@ -2739,16 +2910,19 @@ var GanttComponent = /** @class */ (function () {
     ], GanttComponent.prototype, "selectable", void 0);
     __decorate([
         Input(),
-        __metadata("design:type", String)
-    ], GanttComponent.prototype, "toolbarPosition", void 0);
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], GanttComponent.prototype, "toolbarSettings", null);
     __decorate([
         Input(),
-        __metadata("design:type", Function)
-    ], GanttComponent.prototype, "fetchChildren", void 0);
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Function])
+    ], GanttComponent.prototype, "fetchChildren", null);
     __decorate([
         Input(),
-        __metadata("design:type", Function)
-    ], GanttComponent.prototype, "hasChildren", void 0);
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Function])
+    ], GanttComponent.prototype, "hasChildren", null);
     __decorate([
         Input(),
         __metadata("design:type", Array)
@@ -2861,6 +3035,10 @@ var GanttComponent = /** @class */ (function () {
         Output(),
         __metadata("design:type", EventEmitter)
     ], GanttComponent.prototype, "save", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], GanttComponent.prototype, "taskAdd", void 0);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
@@ -2918,6 +3096,7 @@ var GanttComponent = /** @class */ (function () {
             selector: 'kendo-gantt',
             exportAs: 'kendoGantt',
             providers: [
+                GanttLocalizationService,
                 LocalizationService,
                 {
                     provide: DataBoundTreeComponent,
@@ -2937,7 +3116,7 @@ var GanttComponent = /** @class */ (function () {
                 OptionChangesService,
                 EditService
             ],
-            template: "\n        <ng-container kendoGanttLocalizedMessages\n            i18n-taskDeleteLabel=\"kendo.gantt.taskDeleteLabel|The label of the task delete icon\"\n            taskDeleteLabel=\"Delete\"\n\n            i18n-taskEditingDialogTitle=\"kendo.gantt.taskEditingDialogTitle|The title of the task editing dialog\"\n            taskEditingDialogTitle=\"Editing Task\"\n\n            i18n-taskEditingDialogCloseTitle=\"kendo.gantt.taskEditingDialogCloseTitle|The title of the task editing dialog close button\"\n            taskEditingDialogCloseTitle=\"Close\"\n\n            i18n-confirmationDialogCloseTitle=\"kendo.gantt.confirmationDialogCloseTitle|The title of the confirmation dialog close button\"\n            confirmationDialogCloseTitle=\"Close\"\n\n            i18n-confirmationDialogTitle=\"kendo.gantt.confirmationDialogTitle|The title of the delete task confirmation dialog\"\n            confirmationDialogTitle=\"Delete Task\"\n\n            i18n-confirmationDialogContent=\"kendo.gantt.confirmationDialogContent|The content of the delete task confirmation dialog\"\n            confirmationDialogContent=\"Are you sure you want to delete this task?\"\n\n            i18n-deleteButtonText=\"kendo.gantt.deleteButtonText|The text of the task editing dialog 'Delete' button\"\n            deleteButtonText=\"Delete\"\n\n            i18n-cancelButtonText=\"kendo.gantt.cancelButtonText|The text of the task editing dialog 'Cancel' button\"\n            cancelButtonText=\"Cancel\"\n\n            i18n-saveButtonText=\"kendo.gantt.saveButtonText|The text of the task editing dialog 'Save' button\"\n            saveButtonText=\"Save\"\n\n            i18n-titleFieldInputLabel=\"kendo.gantt.titleFieldInputLabel|The label of the 'title' field input in editing mode\"\n            titleFieldInputLabel=\"Title\"\n\n            i18n-startFieldInputLabel=\"kendo.gantt.startFieldInputLabel|The label of the 'start' field input in editing mode\"\n            startFieldInputLabel=\"Start\"\n\n            i18n-endFieldInputLabel=\"kendo.gantt.endFieldInputLabel|The label of the 'end' field input in editing mode\"\n            endFieldInputLabel=\"End\"\n\n            i18n-completionRatioFieldInputLabel=\"kendo.gantt.completionRatioFieldInputLabel|The label of the 'completionRatio' field input in editing mode\"\n            completionRatioFieldInputLabel=\"Progress\"\n\n            i18n-dayViewText=\"kendo.gantt.dayViewText|The text of the day view in the ViewSelector component\"\n            dayViewText=\"Day\"\n\n            i18n-weekViewText=\"kendo.gantt.weekViewText|The text of the week view in the ViewSelector component\"\n            weekViewText=\"Week\"\n\n            i18n-monthViewText=\"kendo.gantt.monthViewText|The text of the month view in the ViewSelector component\"\n            monthViewText=\"Month\"\n\n            i18n-yearViewText-disabled=\"kendo.gantt.yearViewText|The text of the year view in the ViewSelector component\"\n            yearViewText=\"Year\"\n\n            i18n-noRecords=\"kendo.gantt.noRecords|The label visible in the TreeList when there are no records\"\n            noRecords=\"No records available.\"\n\n            i18n-filter=\"kendo.gantt.filter|The label of the filter cell or icon\"\n            filter=\"Filter\"\n\n            i18n-filterEqOperator=\"kendo.gantt.filterEqOperator|The text of the equal filter operator\"\n            filterEqOperator=\"Is equal to\"\n\n            i18n-filterNotEqOperator=\"kendo.gantt.filterNotEqOperator|The text of the not equal filter operator\"\n            filterNotEqOperator=\"Is not equal to\"\n\n            i18n-filterIsNullOperator=\"kendo.gantt.filterIsNullOperator|The text of the is null filter operator\"\n            filterIsNullOperator=\"Is null\"\n\n            i18n-filterIsNotNullOperator=\"kendo.gantt.filterIsNotNullOperator|The text of the is not null filter operator\"\n            filterIsNotNullOperator=\"Is not null\"\n\n            i18n-filterIsEmptyOperator=\"kendo.gantt.filterIsEmptyOperator|The text of the is empty filter operator\"\n            filterIsEmptyOperator=\"Is empty\"\n\n            i18n-filterIsNotEmptyOperator=\"kendo.gantt.filterIsNotEmptyOperator|The text of the is not empty filter operator\"\n            filterIsNotEmptyOperator=\"Is not empty\"\n\n            i18n-filterStartsWithOperator=\"kendo.gantt.filterStartsWithOperator|The text of the starts with filter operator\"\n            filterStartsWithOperator=\"Starts with\"\n\n            i18n-filterContainsOperator=\"kendo.gantt.filterContainsOperator|The text of the contains filter operator\"\n            filterContainsOperator=\"Contains\"\n\n            i18n-filterNotContainsOperator=\"kendo.gantt.filterNotContainsOperator|The text of the does not contain filter operator\"\n            filterNotContainsOperator=\"Does not contain\"\n\n            i18n-filterEndsWithOperator=\"kendo.gantt.filterEndsWithOperator|The text of the ends with filter operator\"\n            filterEndsWithOperator=\"Ends with\"\n\n            i18n-filterGteOperator=\"kendo.gantt.filterGteOperator|The text of the greater than or equal filter operator\"\n            filterGteOperator=\"Is greater than or equal to\"\n\n            i18n-filterGtOperator=\"kendo.gantt.filterGtOperator|The text of the greater than filter operator\"\n            filterGtOperator=\"Is greater than\"\n\n            i18n-filterLteOperator=\"kendo.gantt.filterLteOperator|The text of the less than or equal filter operator\"\n            filterLteOperator=\"Is less than or equal to\"\n\n            i18n-filterLtOperator=\"kendo.gantt.filterLtOperator|The text of the less than filter operator\"\n            filterLtOperator=\"Is less than\"\n\n            i18n-filterIsTrue=\"kendo.gantt.filterIsTrue|The text of the IsTrue boolean filter option\"\n            filterIsTrue=\"Is True\"\n\n            i18n-filterIsFalse=\"kendo.gantt.filterIsFalse|The text of the IsFalse boolean filter option\"\n            filterIsFalse=\"Is False\"\n\n            i18n-filterBooleanAll=\"kendo.gantt.filterBooleanAll|The text of the (All) boolean filter option\"\n            filterBooleanAll=\"(All)\"\n\n            i18n-filterAfterOrEqualOperator=\"kendo.gantt.filterAfterOrEqualOperator|The text of the after or equal date filter operator\"\n            filterAfterOrEqualOperator=\"Is after or equal to\"\n\n            i18n-filterAfterOperator=\"kendo.gantt.filterAfterOperator|The text of the after date filter operator\"\n            filterAfterOperator=\"Is after\"\n\n            i18n-filterBeforeOperator=\"kendo.gantt.filterBeforeOperator|The text of the before date filter operator\"\n            filterBeforeOperator=\"Is before\"\n\n            i18n-filterBeforeOrEqualOperator=\"kendo.gantt.filterBeforeOrEqualOperator|The text of the before or equal date filter operator\"\n            filterBeforeOrEqualOperator=\"Is before or equal to\"\n\n            i18n-filterFilterButton=\"kendo.gantt.filterFilterButton|The text of the filter button\"\n            filterFilterButton=\"Filter\"\n\n            i18n-filterClearButton=\"kendo.gantt.filterClearButton|The text of the clear filter button\"\n            filterClearButton=\"Clear\"\n\n            i18n-filterAndLogic=\"kendo.gantt.filterAndLogic|The text of the And filter logic\"\n            filterAndLogic=\"And\"\n\n            i18n-filterOrLogic=\"kendo.gantt.filterOrLogic|The text of the Or filter logic\"\n            filterOrLogic=\"Or\"\n\n            i18n-loading=\"kendo.gantt.loading|The loading text\"\n            loading=\"Loading\"\n\n            i18n-columnMenu=\"kendo.gantt.columnMenu|The title of the column menu icon\"\n            columnMenu=\"Column Menu\"\n\n            i18n-columns=\"kendo.gantt.columns|The text shown in the column menu for the columns item\"\n            columns=\"Columns\"\n\n            i18n-lock-disabled=\"kendo.gantt.lock|The text shown in the column menu for the lock item\"\n            lock-disabled=\"Lock\"\n\n            i18n-unlock-disabled=\"kendo.gantt.unlock|The text shown in the column menu for the unlock item\"\n            unlock-disabled=\"Unlock\"\n\n            i18n-sortable=\"kendo.gantt.sortable|The label of the sort icon\"\n            sortable=\"Sortable\"\n\n            i18n-sortAscending=\"kendo.gantt.sortAscending|The text shown in the column menu for the sort ascending item\"\n            sortAscending=\"Sort Ascending\"\n\n            i18n-sortDescending=\"kendo.gantt.sortDescending|The text shown in the column menu for the sort descending item\"\n            sortDescending=\"Sort Descending\"\n\n            i18n-sortedAscending=\"kendo.gantt.sortedAscending|The status announcement when a column is sorted ascending\"\n            sortedAscending=\"Sorted Ascending\"\n\n            i18n-sortedDescending=\"kendo.gantt.sortedDescending|The status announcement when a column is sorted descending\"\n            sortedDescending=\"Sorted Descending\"\n\n            i18n-sortedDefault=\"kendo.gantt.sortedDefault|The status announcement when a column is no longer sorted\"\n            sortedDefault=\"Not Sorted\"\n\n            i18n-columnsApply=\"kendo.gantt.columnsApply|The text shown in the column menu or column chooser for the columns apply button\"\n            columnsApply=\"Apply\"\n\n            i18n-columnsReset=\"kendo.gantt.columnsReset|The text shown in the column menu or column chooser for the columns reset button\"\n            columnsReset=\"Reset\"></ng-container>\n        <kendo-gantt-toolbar\n            *ngIf=\"showToolbar('top')\"\n            class=\"k-gantt-header k-toolbar k-gantt-toolbar\"\n            position=\"top\"></kendo-gantt-toolbar>\n        <div class=\"k-gantt-content\">\n            <kendo-splitter [style.border]=\"0\">\n                <kendo-splitter-pane\n                    class=\"k-gantt-treelist k-gantt-treelist-scrollable\"\n                    [collapsible]=\"treeListPaneOptions?.collapsible\"\n                    [collapsed]=\"treeListPaneOptions?.collapsed\"\n                    (collapsedChange)=\"onTreeListCollapsedChange($event)\"\n                    [scrollable]=\"false\">\n                    <kendo-treelist\n                        [idField]=\"taskIdField\"\n                        [columns]=\"columns\"\n                        [data]=\"data\"\n                        [hasChildren]=\"hasChildren\"\n                        [fetchChildren]=\"fetchChildren\"\n                        [isExpanded]=\"isExpanded\"\n                        [autoSize]=\"columnsAutoSize\"\n                        [columnMenu]=\"columnMenu\"\n                        [reorderable]=\"columnsReorderable\"\n                        [resizable]=\"columnsResizable\"\n                        [rowClass]=\"rowClass\"\n                        [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   "
+            template: "\n        <ng-container kendoGanttLocalizedMessages\n            i18n-taskEditingGeneralTabTitle=\"kendo.gantt.taskEditingGeneralTabTitle|The title of the 'General' tab of the editing dialog TabStrip\"\n            taskEditingGeneralTabTitle=\"General\"\n\n            i18n-taskEditingPredecessorsTabTitle=\"kendo.gantt.taskEditingPredecessorsTabTitle|The title of the 'Predecessors' dependencies tab of the editing dialog TabStrip\"\n            taskEditingPredecessorsTabTitle=\"Predecessors\"\n\n            i18n-taskEditingSuccessorsTabTitle=\"kendo.gantt.taskEditingSuccessorsTabTitle|The title of the 'Successors' dependencies tab of the editing dialog TabStrip\"\n            taskEditingSuccessorsTabTitle=\"Successors\"\n\n            i18n-taskEditingDependenciesAddButtonText=\"kendo.gantt.taskEditingDependenciesAddButtonText|The text of the 'Add' button in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesAddButtonText=\"Add\"\n\n            i18n-taskEditingDependenciesRemoveButtonText=\"kendo.gantt.taskEditingDependenciesRemoveButtonText|The text of the 'Remove' button in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesRemoveButtonText=\"Remove\"\n\n            i18n-taskEditingDependenciesGridNameColumnTitle=\"kendo.gantt.taskEditingDependenciesGridNameColumnTitle|The title of the 'Task Title' Grid column in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesGridNameColumnTitle=\"Task Title\"\n\n            i18n-taskEditingDependenciesGridTypeColumnTitle=\"kendo.gantt.taskEditingDependenciesGridTypeColumnTitle|The title of the 'Type' Grid column in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesGridTypeColumnTitle=\"Type\"\n\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-addTaskText=\"kendo.gantt.addTaskText|The text of the DropDownButton in the AddTask component\"\n            addTaskText=\"Add Task\"\n\n            i18n-addChildText=\"kendo.gantt.addChildText|The text of the 'Add Child' option in the AddTask component\"\n            addChildText=\"Add Child\"\n\n            i18n-addAboveText=\"kendo.gantt.addAboveText|The text of the 'Add Above' option in the AddTask component\"\n            addAboveText=\"Add Above\"\n\n            i18n-addBelowText=\"kendo.gantt.addBelowText|The text of the 'Add Below' option in the AddTask component\"\n            addBelowText=\"Add Below\"\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            [showAddTask]=\"toolbarSettings.addTaskTool === 'top' || toolbarSettings.addTaskTool === 'both'\"\n            [showViewSelector]=\"toolbarSettings.viewSelectorTool === 'top' || toolbarSettings.viewSelectorTool === 'both'\"\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\n                            [noRecords]=\"getText('noRecords')\"\n                            [filter]=\"getText('filter')\"\n                            [filterEqOperator]=\"getText('filterEqOperator')\"\n                            [filterNotEqOperator]=\"getText('filterNotEqOperator')\"\n                            [filterIsNullOperator]=\"getText('filterIsNullOperator')\"\n                            [filterIsNotNullOperator]=\"getText('filterIsNotNullOperator')\"\n                            [filterIsEmptyOperator]=\"getText('filterIsEmptyOperator')\"\n                            [filterIsNotEmptyOperator]=\"getText('filterIsNotEmptyOperator')\"\n                            [filterStartsWithOperator]=\"getText('filterStartsWithOperator')\"\n                            [filterContainsOperator]=\"getText('filterContainsOperator')\"\n                            [filterNotContainsOperator]=\"getText('filterNotContainsOperator')\"\n                            [filterEndsWithOperator]=\"getText('filterEndsWithOperator')\"\n                            [filterGteOperator]=\"getText('filterGteOperator')\"\n                            [filterGtOperator]=\"getText('filterGtOperator')\"\n                            [filterLteOperator]=\"getText('filterLteOperator')\"\n                            [filterLtOperator]=\"getText('filterLtOperator')\"\n                            [filterIsTrue]=\"getText('filterIsTrue')\"\n                            [filterIsFalse]=\"getText('filterIsFalse')\"\n                            [filterBooleanAll]=\"getText('filterBooleanAll')\"\n                            [filterAfterOrEqualOperator]=\"getText('filterAfterOrEqualOperator')\"\n                            [filterAfterOperator]=\"getText('filterAfterOperator')\"\n                            [filterBeforeOperator]=\"getText('filterBeforeOperator')\"\n                            [filterBeforeOrEqualOperator]=\"getText('filterBeforeOrEqualOperator')\"\n                            [filterFilterButton]=\"getText('filterFilterButton')\"\n                            [filterClearButton]=\"getText('filterClearButton')\"\n                            [filterAndLogic]=\"getText('filterAndLogic')\"\n                            [filterOrLogic]=\"getText('filterOrLogic')\"\n                            [loading]=\"getText('loading')\"\n                            [columnMenu]=\"getText('columnMenu')\"\n                            [columns]=\"getText('columns')\"\n                            [sortable]=\"getText('sortable')\"\n                            [sortAscending]=\"getText('sortAscending')\"\n                            [sortDescending]=\"getText('sortDescending')\"\n                            [sortedAscending]=\"getText('sortedAscending')\"\n                            [sortedDescending]=\"getText('sortedDescending')\"\n                            [sortedDefault]=\"getText('sortedDefault')\"\n                            [columnsApply]=\"getText('columnsApply')\"\n                            [columnsReset]=\"getText('columnsReset')\"\n                        >\n                        </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            [showAddTask]=\"toolbarSettings.addTaskTool === 'bottom' || toolbarSettings.addTaskTool === 'both'\"\n            [showViewSelector]=\"toolbarSettings.viewSelectorTool === 'bottom' || toolbarSettings.viewSelectorTool === 'both'\"\n            class=\"k-gantt-footer k-toolbar k-gantt-toolbar\"\n            position=\"bottom\"></kendo-gantt-toolbar>\n        <kendo-gantt-edit-dialog\n            *ngIf=\"showEditingDialog\"\n            [data]=\"data\">\n        </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,
@@ -3467,9 +3646,8 @@ var GanttHierarchyBindingDirective = /** @class */ (function (_super) {
  */
 var GanttExpandableDirective = /** @class */ (function (_super) {
     __extends(GanttExpandableDirective, _super);
-    // fixes an injection error in some builds/ng-versions (e.g. StackBlitz)
-    function GanttExpandableDirective(gantt) {
-        return _super.call(this, gantt) || this;
+    function GanttExpandableDirective() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
     __decorate([
         Input(),
@@ -3479,8 +3657,7 @@ var GanttExpandableDirective = /** @class */ (function (_super) {
         Directive({
             exportAs: 'kendoGanttExpandable',
             selector: '[kendoGanttExpandable]'
-        }),
-        __metadata("design:paramtypes", [ExpandableTreeComponent])
+        })
     ], GanttExpandableDirective);
     return GanttExpandableDirective;
 }(ExpandableDirective));
@@ -3658,6 +3835,14 @@ var ToolbarComponent = /** @class */ (function () {
         this.gantt.activeViewChange.emit(e);
         this.scrollSyncService.resetTimelineScrollLeft();
     };
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], ToolbarComponent.prototype, "showAddTask", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], ToolbarComponent.prototype, "showViewSelector", void 0);
     __decorate([
         Input(),
         __metadata("design:type", String),
@@ -3666,7 +3851,7 @@ var ToolbarComponent = /** @class */ (function () {
     ToolbarComponent = __decorate([
         Component({
             selector: 'kendo-gantt-toolbar',
-            template: "\n        <ng-container *ngIf=\"!renderTemplate\">\n            <span class=\"k-spacer k-toolbar-spacer\"></span>\n            <kendo-gantt-view-selector\n                [views]=\"gantt.viewTypes\"\n                [activeView]=\"gantt.activeView\"\n                (activeViewChange)=\"onViewChange($event)\"></kendo-gantt-view-selector>\n        </ng-container>\n        <ng-template\n            *ngIf=\"renderTemplate\"\n            [ngTemplateOutlet]=\"toolbarTemplateRef\"\n            [ngTemplateOutletContext]=\"context\"\n            >\n        </ng-template>\n    "
+            template: "\n        <ng-container *ngIf=\"!renderTemplate\">\n            <kendo-gantt-add-task *ngIf=\"showAddTask\"></kendo-gantt-add-task>\n            <span class=\"k-spacer k-toolbar-spacer\"></span>\n            <kendo-gantt-view-selector\n                *ngIf=\"showViewSelector\"\n                [views]=\"gantt.viewTypes\"\n                [activeView]=\"gantt.activeView\"\n                (activeViewChange)=\"onViewChange($event)\"></kendo-gantt-view-selector>\n        </ng-container>\n        <ng-template\n            *ngIf=\"renderTemplate\"\n            [ngTemplateOutlet]=\"toolbarTemplateRef\"\n            [ngTemplateOutletContext]=\"context\"\n            >\n        </ng-template>\n    "
         }),
         __metadata("design:paramtypes", [GanttComponent,
             ScrollSyncService])
@@ -3731,6 +3916,23 @@ var ViewSelectorComponent = /** @class */ (function () {
     return ViewSelectorComponent;
 }());
 
+/**
+ * The dependency type when two tasks are connected.
+ *
+ * The supported values are:
+ * * `FF`&mdash;from 'finish' to 'finish'
+ * * `FS`&mdash;from 'finish' to 'start'
+ * * `SS`&mdash;from 'start' to 'start'
+ * * `SF`&mdash;from 'start' to 'finish'
+ */
+var DependencyType;
+(function (DependencyType) {
+    DependencyType[DependencyType["FF"] = 0] = "FF";
+    DependencyType[DependencyType["FS"] = 1] = "FS";
+    DependencyType[DependencyType["SF"] = 2] = "SF";
+    DependencyType[DependencyType["SS"] = 3] = "SS"; // task B can't start before task A starts
+})(DependencyType || (DependencyType = {}));
+
 /**
  * @hidden
  *
@@ -3774,9 +3976,9 @@ var dependencyCoordinates = function (from, to, rowHeight, type, minDistanceBefo
               |       |
         [[[]]]-       -[[[]]]
      */
-    if (type === 0 /* FF */ || type === 3 /* SS */) {
+    if (type === DependencyType.FF || type === DependencyType.SS) {
         // polyline start from first task
-        var dir = type === 3 /* SS */ ? 'left' : 'right';
+        var dir = type === DependencyType.SS ? 'left' : 'right';
         top = from.top;
         left = from[dir];
         points.push({ top: top, left: left });
@@ -3802,9 +4004,9 @@ var dependencyCoordinates = function (from, to, rowHeight, type, minDistanceBefo
                                     |
                                     -[[[]]]
         */
-        var startDir = type === 2 /* SF */ ? 'left' : 'right';
-        var endDir = type === 2 /* SF */ ? 'right' : 'left';
-        var additionalTurn = type === 2 /* SF */
+        var startDir = type === DependencyType.SF ? 'left' : 'right';
+        var endDir = type === DependencyType.SF ? 'right' : 'left';
+        var additionalTurn = type === DependencyType.SF
             ? from[startDir] - minDistanceBeforeTurn * 2 < to[endDir]
             : from[startDir] + minDistanceBeforeTurn * 2 > to[endDir];
         // polyline start from first task
@@ -4057,14 +4259,44 @@ var TimelineMonthViewComponent = /** @class */ (function (_super) {
  * @hidden
  */
 var EditDialogComponent = /** @class */ (function () {
-    function EditDialogComponent(mapper, editService, localizationService) {
+    function EditDialogComponent(mapper, editService, cdr, localizationService) {
         this.mapper = mapper;
         this.editService = editService;
+        this.cdr = cdr;
         this.localizationService = localizationService;
     }
+    EditDialogComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        this.editService.loadTasks(this.data).subscribe(function (value) {
+            _this.loadedTasks = value;
+        });
+    };
+    Object.defineProperty(EditDialogComponent.prototype, "predecessors", {
+        get: function () {
+            return this.editService.predecessors;
+        },
+        set: function (items) {
+            this.editService.predecessors = items;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(EditDialogComponent.prototype, "successors", {
+        get: function () {
+            return this.editService.successors;
+        },
+        set: function (items) {
+            this.editService.successors = items;
+        },
+        enumerable: true,
+        configurable: true
+    });
     EditDialogComponent.prototype.getText = function (token) {
         return this.localizationService.get(token);
     };
+    EditDialogComponent.prototype.getDependencyType = function (typeId) {
+        return DependencyType[typeId];
+    };
     EditDialogComponent.prototype.handleEditingResult = function (editResultType) {
         this.editService.triggerEditEvent(editResultType);
     };
@@ -4073,15 +4305,16 @@ var EditDialogComponent = /** @class */ (function () {
     };
     __decorate([
         Input(),
-        __metadata("design:type", FormGroup)
-    ], EditDialogComponent.prototype, "formGroup", void 0);
+        __metadata("design:type", Array)
+    ], EditDialogComponent.prototype, "data", 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    "
+            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\n            <kendo-tabstrip [keepTabContent]=\"true\">\n                <kendo-tabstrip-tab [title]=\"getText('taskEditingGeneralTabTitle')\" [selected]=\"true\">\n                    <ng-template kendoTabContent>\n                    <kendo-gantt-task-fields></kendo-gantt-task-fields>\n                    </ng-template>\n                </kendo-tabstrip-tab>\n                <kendo-tabstrip-tab [title]=\"getText('taskEditingPredecessorsTabTitle')\">\n                    <ng-template kendoTabContent>\n                        <kendo-gantt-dependencies-table\n                            [tasks]=\"loadedTasks\"\n                            [(dependencies)]=\"predecessors\"\n                            dependencyType=\"predecessor\"\n                        >\n                        </kendo-gantt-dependencies-table>\n                    </ng-template>\n                </kendo-tabstrip-tab>\n                <kendo-tabstrip-tab [title]=\"getText('taskEditingSuccessorsTabTitle')\">\n                    <ng-template kendoTabContent>\n                        <kendo-gantt-dependencies-table\n                            [tasks]=\"loadedTasks\"\n                            [(dependencies)]=\"successors\"\n                            dependencyType=\"successor\">\n                        </kendo-gantt-dependencies-table>\n                    </ng-template>\n                </kendo-tabstrip-tab>\n            </kendo-tabstrip>\n\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,
+            ChangeDetectorRef,
             LocalizationService])
     ], EditDialogComponent);
     return EditDialogComponent;
@@ -4095,6 +4328,38 @@ var Messages = /** @class */ (function (_super) {
     function Messages() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "taskEditingGeneralTabTitle", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "taskEditingPredecessorsTabTitle", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "taskEditingSuccessorsTabTitle", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "taskEditingDependenciesAddButtonText", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "taskEditingDependenciesRemoveButtonText", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "taskEditingDependenciesGridNameColumnTitle", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "taskEditingDependenciesGridTypeColumnTitle", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "deleteButtonText", void 0);
     __decorate([
         Input(),
         __metadata("design:type", String)
@@ -4118,7 +4383,19 @@ var Messages = /** @class */ (function (_super) {
     __decorate([
         Input(),
         __metadata("design:type", String)
-    ], Messages.prototype, "deleteButtonText", void 0);
+    ], Messages.prototype, "addTaskText", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "addChildText", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "addAboveText", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "addBelowText", void 0);
     __decorate([
         Input(),
         __metadata("design:type", String)
@@ -4389,28 +4666,244 @@ var LocalizedMessagesDirective = /** @class */ (function (_super) {
     return LocalizedMessagesDirective;
 }(Messages));
 
+/**
+ * The UI for adding new items to the Gantt.
+ * Use it within a toolbar template to provide a custom icon or list of options.
+ */
+var GanttAddTaskComponent = /** @class */ (function () {
+    function GanttAddTaskComponent(localizationService, editService, ngZone) {
+        this.localizationService = localizationService;
+        this.editService = editService;
+        this.ngZone = ngZone;
+        /**
+         * Sets the data of the DropDownButton.
+         * > The data has to be provided in an array-like list.
+         */
+        this.data = [{
+                text: this.getText('addChildText'),
+                type: 'addChild'
+            }, {
+                text: this.getText('addAboveText'),
+                type: 'addAbove'
+            }, {
+                text: this.getText('addBelowText'),
+                type: 'addBelow'
+            }];
+        /**
+         * Defines the name of an existing icon in a Kendo UI theme.
+         * @default 'plus'
+         */
+        this.icon = 'plus';
+    }
+    /**
+     * @hidden
+     */
+    GanttAddTaskComponent.prototype.getText = function (message) {
+        return this.localizationService.get(message);
+    };
+    /**
+     * @hidden
+     */
+    GanttAddTaskComponent.prototype.handleOpen = function (e) {
+        if (!this.editService.getSelectedItem()) {
+            e.preventDefault();
+        }
+    };
+    /**
+     * @hidden
+     */
+    GanttAddTaskComponent.prototype.handleMouseClick = function () {
+        var _this = this;
+        if (!this.editService.getSelectedItem()) {
+            this.ngZone.run(function () {
+                _this.editService.addEvent.next({
+                    selectedItem: null,
+                    actionType: 'addTask'
+                });
+            });
+        }
+    };
+    /**
+     * @hidden
+     */
+    GanttAddTaskComponent.prototype.handleItemClick = function (e) {
+        this.editService.addEvent.next({
+            actionType: e.type,
+            selectedItem: null
+        });
+    };
+    __decorate([
+        Input(),
+        __metadata("design:type", Array)
+    ], GanttAddTaskComponent.prototype, "data", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], GanttAddTaskComponent.prototype, "icon", void 0);
+    GanttAddTaskComponent = __decorate([
+        Component({
+            selector: 'kendo-gantt-add-task',
+            template: "\n        <kendo-dropdownbutton\n            [data]=\"data\"\n            [icon]=\"icon\"\n            [kendoEventsOutsideAngular]=\"{ click: handleMouseClick }\"\n            [scope]=\"this\"\n            (itemClick)=\"handleItemClick($event)\"\n            (open)=\"handleOpen($event)\">\n            {{ getText('addTaskText') }}\n        </kendo-dropdownbutton>\n    "
+        }),
+        __metadata("design:paramtypes", [LocalizationService,
+            EditService,
+            NgZone])
+    ], GanttAddTaskComponent);
+    return GanttAddTaskComponent;
+}());
+
 /**
  * @hidden
  */
-var GanttTreeListMessagesDirective = /** @class */ (function () {
-    function GanttTreeListMessagesDirective(localizationService) {
+var DependenciesTableComponent = /** @class */ (function () {
+    function DependenciesTableComponent(mapper, editService, localizationService) {
+        this.mapper = mapper;
+        this.editService = editService;
         this.localizationService = localizationService;
+        this.dependenciesChange = new EventEmitter();
+        this.selectedKeys = [];
+        this.formGroups = new FormArray([]);
+        this.dependencyTypes = this.getDependencyTypes();
     }
-    GanttTreeListMessagesDirective.prototype.ngAfterViewInit = function () {
+    Object.defineProperty(DependenciesTableComponent.prototype, "taskId", {
+        get: function () {
+            return this.editService.dataItem.id;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DependenciesTableComponent.prototype, "dependencyIdField", {
+        // The target dependency id field
+        // e.g. if Predecessors, we have the `fromId` which is the currently edited task,
+        // while the `toId` is missing (needs to be selected by the user)
+        get: function () {
+            return this.dependencyType === 'predecessor' ? 'fromId' : 'toId';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    DependenciesTableComponent.prototype.ngOnInit = 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.', '')); });
+        // generate the FormGroups per each Grid row
+        if (this.formGroups.controls.length === 0) {
+            var fields_1 = this.mapper.dependencyFields;
+            this.dependencies.forEach(function (item) {
+                var _a;
+                var formGroup = new FormGroup((_a = {},
+                    _a[fields_1.id] = new FormControl(_this.mapper.extractFromDependency(item, 'id')),
+                    _a[fields_1.fromId] = new FormControl(_this.mapper.extractFromDependency(item, 'fromId'), Validators.required),
+                    _a[fields_1.toId] = new FormControl(_this.mapper.extractFromDependency(item, 'toId'), Validators.required),
+                    _a[fields_1.type] = new FormControl(_this.mapper.extractFromDependency(item, 'type'), Validators.required),
+                    _a));
+                _this.formGroups.push(formGroup);
+            });
+        }
+        this.formGroups.valueChanges.subscribe(function (val) {
+            _this.formGroups.controls.forEach(function (control) {
+                if (control.dirty) {
+                    _this.editService.updateDependencies(control.value);
+                }
+            });
+            _this.dependenciesChange.emit(val);
+        });
+    };
+    DependenciesTableComponent.prototype.getFormControl = function (dataItemIndex, field) {
+        // return the FormControl for the respective column editor
+        return this.formGroups.controls
+            .find(function (_control, index) { return index === dataItemIndex; })
+            .get(this.mapper.dependencyFields[field]);
+    };
+    DependenciesTableComponent.prototype.getText = function (token) {
+        return this.localizationService.get(token);
+    };
+    DependenciesTableComponent.prototype.getDependencyTypes = function () {
+        var types = Object.keys(DependencyType)
+            .filter(function (value) { return typeof DependencyType[value] === 'number'; })
+            .map(function (type) {
+            return {
+                type: type,
+                id: DependencyType[type]
+            };
+        });
+        return types;
+    };
+    DependenciesTableComponent.prototype.addHandler = function () {
+        var _a;
+        var fields = this.mapper.dependencyFields;
+        var formGroup = new FormGroup((_a = {},
+            _a[fields.id] = new FormControl(),
+            _a[fields.fromId] = new FormControl(this.dependencyIdField === 'toId' ? this.taskId : null, Validators.required),
+            _a[fields.toId] = new FormControl(this.dependencyIdField === 'fromId' ? this.taskId : null, Validators.required),
+            _a[fields.type] = new FormControl(null, Validators.required),
+            _a));
+        this.formGroups.push(formGroup);
+    };
+    DependenciesTableComponent.prototype.removeHandler = function () {
+        var selectedIndex = this.selectedKeys[0];
+        var item = this.formGroups.at(selectedIndex).value;
+        this.editService.deleteDependency(item);
+        this.formGroups.removeAt(selectedIndex);
     };
     __decorate([
         Input(),
-        __metadata("design:type", LocalizationService)
-    ], GanttTreeListMessagesDirective.prototype, "kendoGanttTreeListMessages", void 0);
-    GanttTreeListMessagesDirective = __decorate([
-        Directive({ selector: '[kendoGanttTreeListMessages]' }),
-        __metadata("design:paramtypes", [LocalizationService])
-    ], GanttTreeListMessagesDirective);
-    return GanttTreeListMessagesDirective;
+        __metadata("design:type", Array)
+    ], DependenciesTableComponent.prototype, "tasks", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Array)
+    ], DependenciesTableComponent.prototype, "dependencies", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], DependenciesTableComponent.prototype, "dependencyType", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], DependenciesTableComponent.prototype, "dependenciesChange", void 0);
+    DependenciesTableComponent = __decorate([
+        Component({
+            selector: 'kendo-gantt-dependencies-table',
+            template: "\n        <kendo-grid\n            [data]=\"dependencies\"\n            [selectable]=\"{ mode: 'single' }\"\n            [(selectedKeys)]=\"selectedKeys\"\n            kendoGridSelectBy\n            [height]=\"295\"\n        >\n            <ng-template kendoGridToolbarTemplate>\n                <button kendoButton (click)=\"addHandler()\">\n                    {{ getText('taskEditingDependenciesAddButtonText') }}\n                </button>\n                <button kendoButton (click)=\"removeHandler()\" [disabled]=\"selectedKeys.length === 0\">\n                    {{ getText('taskEditingDependenciesRemoveButtonText') }}\n                </button>\n            </ng-template>\n            <kendo-grid-column [title]=\"getText('taskEditingDependenciesGridNameColumnTitle')\" [field]=\"dependencyIdField\">\n                <ng-template kendoGridCellTemplate let-dataItem=\"dataItem\" let-column=\"column\" let-rowIndex=\"rowIndex\">\n                    <kendo-dropdownlist\n                        [data]=\"tasks\"\n                        textField=\"title\"\n                        valueField=\"id\"\n                        [valuePrimitive]=\"true\"\n                        [formControl]=\"getFormControl(rowIndex, column.field)\"\n                    >\n                    </kendo-dropdownlist>\n                </ng-template>\n            </kendo-grid-column>\n            <kendo-grid-column [title]=\"getText('taskEditingDependenciesGridTypeColumnTitle')\" field=\"type\">\n                <ng-template kendoGridCellTemplate let-dataItem=\"dataItem\" let-column=\"column\" let-rowIndex=\"rowIndex\">\n                    <kendo-dropdownlist\n                        [data]=\"dependencyTypes\"\n                        textField=\"type\"\n                        valueField=\"id\"\n                        [valuePrimitive]=\"true\"\n                        [formControl]=\"getFormControl(rowIndex, column.field)\"\n                    >\n                    </kendo-dropdownlist>\n                </ng-template>\n            </kendo-grid-column>\n        </kendo-grid>\n    "
+        }),
+        __metadata("design:paramtypes", [MappingService,
+            EditService,
+            GanttLocalizationService])
+    ], DependenciesTableComponent);
+    return DependenciesTableComponent;
+}());
+
+/**
+ * @hidden
+ */
+var TaskFieldsComponent = /** @class */ (function () {
+    function TaskFieldsComponent(mapper, editService, localizationService) {
+        this.mapper = mapper;
+        this.editService = editService;
+        this.localizationService = localizationService;
+    }
+    Object.defineProperty(TaskFieldsComponent.prototype, "formGroup", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this.editService.taskFormGroup;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    TaskFieldsComponent.prototype.getText = function (token) {
+        return this.localizationService.get(token);
+    };
+    TaskFieldsComponent = __decorate([
+        Component({
+            selector: 'kendo-gantt-task-fields',
+            template: "\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    "
+        }),
+        __metadata("design:paramtypes", [MappingService,
+            EditService,
+            GanttLocalizationService])
+    ], TaskFieldsComponent);
+    return TaskFieldsComponent;
 }());
 
 var IMPORTED_MODULES = [
@@ -4424,7 +4917,10 @@ var IMPORTED_MODULES = [
     TreeListModule,
     ButtonsModule,
     DialogModule,
-    EventsModule
+    EventsModule,
+    TabStripModule,
+    GridModule,
+    DropDownsModule
 ];
 var DECLARATIONS = [
     GanttComponent,
@@ -4461,7 +4957,9 @@ var DECLARATIONS = [
     EditDialogComponent,
     CustomMessagesComponent,
     LocalizedMessagesDirective,
-    GanttTreeListMessagesDirective
+    GanttAddTaskComponent,
+    DependenciesTableComponent,
+    TaskFieldsComponent
 ];
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
@@ -4511,8 +5009,49 @@ var GanttModule = /** @class */ (function () {
     return GanttModule;
 }());
 
+/**
+ * @hidden
+ */
+var PreventableEvent = /** @class */ (function () {
+    function PreventableEvent() {
+        this.prevented = false;
+    }
+    /**
+     * Prevents the default action for a specified event.
+     * In this way, the source component suppresses
+     * the built-in behavior that follows the event.
+     */
+    PreventableEvent.prototype.preventDefault = function () {
+        this.prevented = true;
+    };
+    /**
+     * Returns `true` if the event was prevented
+     * by any of its subscribers.
+     *
+     * @returns `true` if the default action was prevented.
+     * Otherwise, returns `false`.
+     */
+    PreventableEvent.prototype.isDefaultPrevented = function () {
+        return this.prevented;
+    };
+    return PreventableEvent;
+}());
+
+/**
+ * Called every time a user leaves an edited cell.
+ */
+var CellCloseEvent = /** @class */ (function (_super) {
+    __extends(CellCloseEvent, _super);
+    function CellCloseEvent(options) {
+        var _this = _super.call(this) || this;
+        Object.assign(_this, options);
+        return _this;
+    }
+    return CellCloseEvent;
+}(PreventableEvent));
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { MappingService, OptionChangesService, DependencyDomService, GanttDependencyDirective, GanttAddTaskComponent, DependenciesTableComponent, EditDialogComponent, EditService, TaskFieldsComponent, CustomMessagesComponent, GanttLocalizationService, LocalizedMessagesDirective, Messages, PreventableEvent, 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, DependencyType, CellCloseEvent, GanttColumnBase, GanttColumnComponent, GanttColumnGroupComponent, GanttSpanColumnComponent, CellTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ColumnMenuTemplateDirective, FilterCellTemplateDirective, FilterMenuTemplateDirective, EditTemplateDirective };