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

package/dist/fesm2015/index.js

@@ -6,22 +6,24 @@ import { __decorate, __metadata, __param } from 'tslib';
 import { Input, EventEmitter, Injectable, 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, Subject, Subscription, fromEvent } from 'rxjs';
+import { of, Subject, Subscription, fromEvent, 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 { FormArray, FormGroup, FormControl, Validators, 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 @@ const 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'
 };
@@ -766,8 +768,17 @@ const isClearButton = (contender, gantt) => {
     return isPresent(clearButtonContainer);
 };
 
+/**
+ * @hidden
+ */
 const DAY_FORMAT = 'E d/MM';
+/**
+ * @hidden
+ */
 const HOUR_FORMAT = 'HH:mm aa';
+/**
+ * @hidden
+ */
 const MONTH_FORMAT = 'MMM';
 /**
  * @hidden
@@ -1313,34 +1324,99 @@ DependencyDomService = __decorate([
  * @hidden
  */
 let EditService = class EditService {
-    /**
-     * @hidden
-     */
-    constructor() {
+    constructor(mapper) {
+        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 = (item, data) => {
+            return data.findIndex(dataItem => this.mapper.extractFromTask(dataItem, 'id') === this.mapper.extractFromTask(item, 'id'));
+        };
+    }
+    set dependencies(items) {
+        // Can this whole thing be moved to edit-dialog? Dependencies might not be needed here
+        const dataItemId = this.mapper.extractFromTask(this.dataItem, 'id');
+        this.predecessors = items.filter(item => this.mapper.extractFromDependency(item, 'toId') === dataItemId);
+        this.successors = items.filter(item => this.mapper.extractFromDependency(item, 'fromId') === dataItemId);
+    }
+    get dependencies() {
+        return [...this.predecessors, ...this.successors];
     }
-    createEditDialog(dataItem, formGroup) {
+    createEditDialog(dataItem, taskFormGroup, dependencies) {
         this.dataItem = dataItem;
-        this.formGroup = formGroup;
+        this.taskFormGroup = taskFormGroup;
+        this.dependencies = dependencies;
         this.showEditingDialog.next(true);
     }
     closeEditDialog() {
         this.showEditingDialog.next(false);
         this.dataItem = undefined;
-        this.formGroup = undefined;
+        this.taskFormGroup = undefined;
+        this.dependencies = [];
+        this.updatedItems = [];
+        this.deletedItems = [];
     }
     triggerEditEvent(editResultType) {
         this.editEvent.next({
-            formGroup: this.formGroup,
+            taskFormGroup: this.taskFormGroup,
             dataItem: this.dataItem,
+            dependencies: {
+                createdItems: this.getCreatedDependencies(),
+                updatedItems: this.updatedItems,
+                deletedItems: this.deletedItems
+            },
             editResultType
         });
     }
+    updateDependencies(item) {
+        if (!this.isNew(item)) {
+            // update
+            const index = this.itemIndex(item, this.updatedItems);
+            if (index !== -1) {
+                this.updatedItems.splice(index, 1, item);
+            }
+            else {
+                this.updatedItems.push(item);
+            }
+        }
+    }
+    getCreatedDependencies() {
+        return this.dependencies.filter(item => this.mapper.extractFromDependency(item, 'id') === null);
+    }
+    deleteDependency(item) {
+        const updatedIndex = this.itemIndex(item, this.updatedItems);
+        if (updatedIndex !== -1) {
+            this.updatedItems.splice(updatedIndex, 1);
+        }
+        if (!this.isNew(item)) {
+            this.deletedItems.push(item);
+        }
+    }
+    loadTasks(initialValues, isInitializer = true) {
+        return forkJoin(initialValues.map(v => this.getElementById(v))).pipe(map((value) => value.reduce((acc, item) => acc = acc.concat(normalizeGanttData(item)), [])), expand(values => {
+            if (values.some(el => this.hasChildren(el))) {
+                return this.loadTasks(values, false);
+            }
+            return EMPTY;
+        }), reduce((acc, values) => acc.concat(values), isInitializer ? [...initialValues] : []));
+    }
+    getElementById(item) {
+        const children = this.fetchChildren(item);
+        if (isObservable(children)) {
+            return children;
+        }
+        return of(children);
+    }
+    isNew(item) {
+        return !isPresent(this.mapper.extractFromDependency(item, 'id'));
+    }
 };
 EditService = __decorate([
-    Injectable()
+    Injectable(),
+    __metadata("design:paramtypes", [MappingService])
 ], EditService);
 
 /**
@@ -1642,6 +1718,24 @@ const mapPath = (item) => ({
     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
+ */
+let GanttLocalizationService = class GanttLocalizationService {
+    constructor(localizationService) {
+        this.localizationService = localizationService;
+    }
+    get(token) {
+        return this.localizationService.get(token);
+    }
+};
+GanttLocalizationService = __decorate([
+    Injectable(),
+    __metadata("design:paramtypes", [LocalizationService])
+], GanttLocalizationService);
+
 var GanttComponent_1;
 const TREELIST_GROUP_COLUMNS_CLASS = 'k-gantt-treelist-nested-columns';
 const DEFAULT_VIEW = 'week';
@@ -1732,7 +1826,7 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         /**
          * 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;
         /**
@@ -1746,29 +1840,10 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         /**
          * 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.
          *
@@ -1870,6 +1945,10 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
          * 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.
@@ -1947,6 +2026,13 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         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();
@@ -1957,18 +2043,27 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         this.optionChangesSubscriptions.add(this.optionChangesService.columnChanges.subscribe(() => {
             this.treeList.columns.notifyOnChanges();
         }));
+        this.editService.getSelectedItem = this.getFirstSelectedItem.bind(this);
         this.editServiceSubscription.add(this.editService.showEditingDialog.subscribe(show => this.showEditingDialog = show));
         this.editServiceSubscription.add(this.editService.showConfirmationDialog.subscribe(() => this.taskDelete.emit()));
         this.editServiceSubscription.add(this.editService.editEvent.subscribe(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(args => {
+            const 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(({ rtl }) => {
             this.rtl = rtl;
@@ -2043,6 +2138,49 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
     get data() {
         return this._data;
     }
+    /**
+     * 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 toolbarSettings(value) {
+        this._toolbarSettings = {
+            position: value.position || 'top',
+            addTaskTool: value.addTaskTool || 'none',
+            viewSelectorTool: value.viewSelectorTool || 'top'
+        };
+    }
+    get toolbarSettings() {
+        return this._toolbarSettings;
+    }
+    /**
+     * Gets or sets the callback function that retrieves the child items for a particular item.
+     */
+    set fetchChildren(fn) {
+        this._fetchChildren = fn;
+        this.editService.fetchChildren = fn;
+    }
+    get fetchChildren() {
+        return this._fetchChildren;
+    }
+    /**
+     * Gets or sets the callback function that indicates if a particular item has child items.
+     */
+    set hasChildren(fn) {
+        this._hasChildren = fn;
+        this.editService.hasChildren = fn;
+    }
+    get hasChildren() {
+        return this._hasChildren;
+    }
     /**
      * The options of the timeline splitter pane. By default the pane is `collapsible`,
      * `resizable`, not `collapsed`, and its `size` is `'50%'`.
@@ -2150,12 +2288,6 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
     get viewTypes() {
         return this.views.map(view => view.type);
     }
-    /**
-     * @hidden
-     */
-    get editDialogFormGroup() {
-        return this.editService.formGroup;
-    }
     ngOnChanges(changes) {
         if (anyChanged(['data', 'activeView', 'workWeekStart', 'workWeekEnd', 'workDayStart', 'workDayEnd'], changes)) {
             this.loadTimelineData();
@@ -2227,19 +2359,27 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         }
     }
     /**
-     * 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.
      */
     updateView() {
         if (isPresent(this.treeList)) {
             this.treeList.updateView();
         }
+        this.loadTimelineData();
+        this.dependencyDomService.notifyChanges();
     }
     /**
      * Opens the task editing dialog.
      */
     editTask(dataItem, formGroup) {
         if (!this.showEditingDialog) {
-            this.editService.createEditDialog(dataItem, formGroup);
+            const taskId = this.mapper.extractFromTask(dataItem, 'id');
+            const dependencies = this.dependencies.filter(item => this.mapper.extractFromDependency(item, 'toId') === taskId
+                || this.mapper.extractFromDependency(item, 'fromId') === taskId);
+            this.editService.createEditDialog(dataItem, formGroup, dependencies);
         }
     }
     /**
@@ -2312,7 +2452,7 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
      * @hidden
      */
     showToolbar(position) {
-        return this.toolbarPosition !== 'none' && ([position, 'both'].indexOf(this.toolbarPosition) > -1);
+        return this.toolbarSettings.position !== 'none' && ([position, 'both'].indexOf(this.toolbarSettings.position) > -1);
     }
     /**
      * @hidden
@@ -2476,7 +2616,7 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
             items: [dataItem],
             sender: this
         });
-        this.updateView();
+        this.treeList.updateView();
     }
     updateTreeListGroupClass(columns = this.columns) {
         if (!isPresent(this.treeList)) {
@@ -2511,6 +2651,11 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         const shouldToggleSelection = ctrlKey || metaKey;
         return (shouldToggleSelection && this.isSelected(dataItem)) ? 'remove' : 'select';
     }
+    getFirstSelectedItem() {
+        const isSelectedCallback = this.isSelected || isSelected;
+        const loadedItems = this.renderedTreeListItems || [];
+        return loadedItems.find(isSelectedCallback);
+    }
 };
 __decorate([
     ViewChild(TreeListComponent, { static: true }),
@@ -2584,16 +2729,19 @@ __decorate([
 ], 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)
@@ -2706,6 +2854,10 @@ __decorate([
     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)
@@ -2763,6 +2915,7 @@ GanttComponent = GanttComponent_1 = __decorate([
         selector: 'kendo-gantt',
         exportAs: 'kendoGantt',
         providers: [
+            GanttLocalizationService,
             LocalizationService,
             {
                 provide: DataBoundTreeComponent,
@@ -2784,6 +2937,27 @@ GanttComponent = GanttComponent_1 = __decorate([
         ],
         template: `
         <ng-container kendoGanttLocalizedMessages
+            i18n-taskEditingGeneralTabTitle="kendo.gantt.taskEditingGeneralTabTitle|The title of the 'General' tab of the editing dialog TabStrip"
+            taskEditingGeneralTabTitle="General"
+
+            i18n-taskEditingPredecessorsTabTitle="kendo.gantt.taskEditingPredecessorsTabTitle|The title of the 'Predecessors' dependencies tab of the editing dialog TabStrip"
+            taskEditingPredecessorsTabTitle="Predecessors"
+
+            i18n-taskEditingSuccessorsTabTitle="kendo.gantt.taskEditingSuccessorsTabTitle|The title of the 'Successors' dependencies tab of the editing dialog TabStrip"
+            taskEditingSuccessorsTabTitle="Successors"
+
+            i18n-taskEditingDependenciesAddButtonText="kendo.gantt.taskEditingDependenciesAddButtonText|The text of the 'Add' button in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesAddButtonText="Add"
+
+            i18n-taskEditingDependenciesRemoveButtonText="kendo.gantt.taskEditingDependenciesRemoveButtonText|The text of the 'Remove' button in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesRemoveButtonText="Remove"
+
+            i18n-taskEditingDependenciesGridNameColumnTitle="kendo.gantt.taskEditingDependenciesGridNameColumnTitle|The title of the 'Task Title' Grid column in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesGridNameColumnTitle="Task Title"
+
+            i18n-taskEditingDependenciesGridTypeColumnTitle="kendo.gantt.taskEditingDependenciesGridTypeColumnTitle|The title of the 'Type' Grid column in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesGridTypeColumnTitle="Type"
+
             i18n-taskDeleteLabel="kendo.gantt.taskDeleteLabel|The label of the task delete icon"
             taskDeleteLabel="Delete"
 
@@ -2835,6 +3009,18 @@ GanttComponent = GanttComponent_1 = __decorate([
             i18n-yearViewText-disabled="kendo.gantt.yearViewText|The text of the year view in the ViewSelector component"
             yearViewText="Year"
 
+            i18n-addTaskText="kendo.gantt.addTaskText|The text of the DropDownButton in the AddTask component"
+            addTaskText="Add Task"
+
+            i18n-addChildText="kendo.gantt.addChildText|The text of the 'Add Child' option in the AddTask component"
+            addChildText="Add Child"
+
+            i18n-addAboveText="kendo.gantt.addAboveText|The text of the 'Add Above' option in the AddTask component"
+            addAboveText="Add Above"
+
+            i18n-addBelowText="kendo.gantt.addBelowText|The text of the 'Add Below' option in the AddTask component"
+            addBelowText="Add Below"
+
             i18n-noRecords="kendo.gantt.noRecords|The label visible in the TreeList when there are no records"
             noRecords="No records available."
 
@@ -2956,6 +3142,8 @@ GanttComponent = GanttComponent_1 = __decorate([
             columnsReset="Reset"></ng-container>
         <kendo-gantt-toolbar
             *ngIf="showToolbar('top')"
+            [showAddTask]="toolbarSettings.addTaskTool === 'top' || toolbarSettings.addTaskTool === 'both'"
+            [showViewSelector]="toolbarSettings.viewSelectorTool === 'top' || toolbarSettings.viewSelectorTool === 'both'"
             class="k-gantt-header k-toolbar k-gantt-toolbar"
             position="top"></kendo-gantt-toolbar>
         <div class="k-gantt-content">
@@ -3005,7 +3193,47 @@ GanttComponent = GanttComponent_1 = __decorate([
                         }"
                         [scope]="this"
                     >
-                        <kendo-treelist-messages [kendoGanttTreeListMessages]="localizationService"></kendo-treelist-messages>
+                        <kendo-treelist-messages
+                            [noRecords]="getText('noRecords')"
+                            [filter]="getText('filter')"
+                            [filterEqOperator]="getText('filterEqOperator')"
+                            [filterNotEqOperator]="getText('filterNotEqOperator')"
+                            [filterIsNullOperator]="getText('filterIsNullOperator')"
+                            [filterIsNotNullOperator]="getText('filterIsNotNullOperator')"
+                            [filterIsEmptyOperator]="getText('filterIsEmptyOperator')"
+                            [filterIsNotEmptyOperator]="getText('filterIsNotEmptyOperator')"
+                            [filterStartsWithOperator]="getText('filterStartsWithOperator')"
+                            [filterContainsOperator]="getText('filterContainsOperator')"
+                            [filterNotContainsOperator]="getText('filterNotContainsOperator')"
+                            [filterEndsWithOperator]="getText('filterEndsWithOperator')"
+                            [filterGteOperator]="getText('filterGteOperator')"
+                            [filterGtOperator]="getText('filterGtOperator')"
+                            [filterLteOperator]="getText('filterLteOperator')"
+                            [filterLtOperator]="getText('filterLtOperator')"
+                            [filterIsTrue]="getText('filterIsTrue')"
+                            [filterIsFalse]="getText('filterIsFalse')"
+                            [filterBooleanAll]="getText('filterBooleanAll')"
+                            [filterAfterOrEqualOperator]="getText('filterAfterOrEqualOperator')"
+                            [filterAfterOperator]="getText('filterAfterOperator')"
+                            [filterBeforeOperator]="getText('filterBeforeOperator')"
+                            [filterBeforeOrEqualOperator]="getText('filterBeforeOrEqualOperator')"
+                            [filterFilterButton]="getText('filterFilterButton')"
+                            [filterClearButton]="getText('filterClearButton')"
+                            [filterAndLogic]="getText('filterAndLogic')"
+                            [filterOrLogic]="getText('filterOrLogic')"
+                            [loading]="getText('loading')"
+                            [columnMenu]="getText('columnMenu')"
+                            [columns]="getText('columns')"
+                            [sortable]="getText('sortable')"
+                            [sortAscending]="getText('sortAscending')"
+                            [sortDescending]="getText('sortDescending')"
+                            [sortedAscending]="getText('sortedAscending')"
+                            [sortedDescending]="getText('sortedDescending')"
+                            [sortedDefault]="getText('sortedDefault')"
+                            [columnsApply]="getText('columnsApply')"
+                            [columnsReset]="getText('columnsReset')"
+                        >
+                        </kendo-treelist-messages>
                     </kendo-treelist>
                 </kendo-splitter-pane>
                 <kendo-splitter-pane
@@ -3045,16 +3273,21 @@ GanttComponent = GanttComponent_1 = __decorate([
         </div>
         <kendo-gantt-toolbar
             *ngIf="showToolbar('bottom')"
+            [showAddTask]="toolbarSettings.addTaskTool === 'bottom' || toolbarSettings.addTaskTool === 'both'"
+            [showViewSelector]="toolbarSettings.viewSelectorTool === 'bottom' || toolbarSettings.viewSelectorTool === 'both'"
             class="k-gantt-footer k-toolbar k-gantt-toolbar"
             position="bottom"></kendo-gantt-toolbar>
-        <kendo-gantt-edit-dialog *ngIf="showEditingDialog" [formGroup]="editDialogFormGroup"></kendo-gantt-edit-dialog>
+        <kendo-gantt-edit-dialog
+            *ngIf="showEditingDialog"
+            [data]="data">
+        </kendo-gantt-edit-dialog>
         <kendo-dialog
             *ngIf="showConfirmationDialog"
             [width]="575"
             [height]="170"
             [title]="getText('confirmationDialogTitle')"
             (close)="showConfirmationDialog = false;">
-            <span>{{getText('confirmationDialogContent')}}</span>
+            <span>{{ getText('confirmationDialogContent') }}</span>
             <kendo-dialog-actions layout="normal">
                 <kendo-treelist-spacer></kendo-treelist-spacer>
                 <button kendoButton [primary]="true" (click)="handleDeleteConfirmation()">{{ getText('deleteButtonText') }}</button>
@@ -3759,10 +3992,6 @@ GanttHierarchyBindingDirective = __decorate([
  * A directive which controls the expanded state of the items.
  */
 let GanttExpandableDirective = class GanttExpandableDirective extends ExpandableDirective {
-    // fixes an injection error in some builds/ng-versions (e.g. StackBlitz)
-    constructor(gantt) {
-        super(gantt);
-    }
 };
 __decorate([
     Input(),
@@ -3772,8 +4001,7 @@ GanttExpandableDirective = __decorate([
     Directive({
         exportAs: 'kendoGanttExpandable',
         selector: '[kendoGanttExpandable]'
-    }),
-    __metadata("design:paramtypes", [ExpandableTreeComponent])
+    })
 ], GanttExpandableDirective);
 
 /**
@@ -3919,6 +4147,14 @@ let ToolbarComponent = class ToolbarComponent {
         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),
@@ -3929,8 +4165,10 @@ ToolbarComponent = __decorate([
         selector: 'kendo-gantt-toolbar',
         template: `
         <ng-container *ngIf="!renderTemplate">
+            <kendo-gantt-add-task *ngIf="showAddTask"></kendo-gantt-add-task>
             <span class="k-spacer k-toolbar-spacer"></span>
             <kendo-gantt-view-selector
+                *ngIf="showViewSelector"
                 [views]="gantt.viewTypes"
                 [activeView]="gantt.activeView"
                 (activeViewChange)="onViewChange($event)"></kendo-gantt-view-selector>
@@ -4016,6 +4254,23 @@ ViewSelectorComponent = __decorate([
     __metadata("design:paramtypes", [LocalizationService])
 ], 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
  *
@@ -4059,9 +4314,9 @@ const dependencyCoordinates = (from, to, rowHeight, type, minDistanceBeforeTurn,
               |       |
         [[[]]]-       -[[[]]]
      */
-    if (type === 0 /* FF */ || type === 3 /* SS */) {
+    if (type === DependencyType.FF || type === DependencyType.SS) {
         // polyline start from first task
-        const dir = type === 3 /* SS */ ? 'left' : 'right';
+        const dir = type === DependencyType.SS ? 'left' : 'right';
         top = from.top;
         left = from[dir];
         points.push({ top, left });
@@ -4087,9 +4342,9 @@ const dependencyCoordinates = (from, to, rowHeight, type, minDistanceBeforeTurn,
                                     |
                                     -[[[]]]
         */
-        const startDir = type === 2 /* SF */ ? 'left' : 'right';
-        const endDir = type === 2 /* SF */ ? 'right' : 'left';
-        const additionalTurn = type === 2 /* SF */
+        const startDir = type === DependencyType.SF ? 'left' : 'right';
+        const endDir = type === DependencyType.SF ? 'right' : 'left';
+        const additionalTurn = type === DependencyType.SF
             ? from[startDir] - minDistanceBeforeTurn * 2 < to[endDir]
             : from[startDir] + minDistanceBeforeTurn * 2 > to[endDir];
         // polyline start from first task
@@ -4323,14 +4578,35 @@ TimelineMonthViewComponent = TimelineMonthViewComponent_1 = __decorate([
  * @hidden
  */
 let EditDialogComponent = class EditDialogComponent {
-    constructor(mapper, editService, localizationService) {
+    constructor(mapper, editService, cdr, localizationService) {
         this.mapper = mapper;
         this.editService = editService;
+        this.cdr = cdr;
         this.localizationService = localizationService;
     }
+    ngOnInit() {
+        this.editService.loadTasks(this.data).subscribe(value => {
+            this.loadedTasks = value;
+        });
+    }
+    get predecessors() {
+        return this.editService.predecessors;
+    }
+    set predecessors(items) {
+        this.editService.predecessors = items;
+    }
+    get successors() {
+        return this.editService.successors;
+    }
+    set successors(items) {
+        this.editService.successors = items;
+    }
     getText(token) {
         return this.localizationService.get(token);
     }
+    getDependencyType(typeId) {
+        return DependencyType[typeId];
+    }
     handleEditingResult(editResultType) {
         this.editService.triggerEditEvent(editResultType);
     }
@@ -4340,8 +4616,8 @@ let EditDialogComponent = class EditDialogComponent {
 };
 __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',
@@ -4353,34 +4629,34 @@ EditDialogComponent = __decorate([
             (close)="handleEditingResult('cancel')">
             <kendo-dialog-messages
                 [closeTitle]="getText('taskEditingDialogCloseTitle')"></kendo-dialog-messages>
-            <form class="k-form" [formGroup]="formGroup">
-                <kendo-formfield *ngIf="formGroup.contains(mapper.taskFields.title)">
-                    <kendo-label [for]="mapper.taskFields.title" [text]="getText('titleFieldInputLabel')"></kendo-label>
-                    <input class="k-textbox" [formControlName]="mapper.taskFields.title" />
-                </kendo-formfield>
-                <div class="k-hstack">
-                    <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.start)">
-                        <kendo-label [for]="mapper.taskFields.start" [text]="getText('startFieldInputLabel')"></kendo-label>
-                        <kendo-datetimepicker [formControlName]="mapper.taskFields.start"></kendo-datetimepicker>
-                    </kendo-formfield>
-                    <kendo-treelist-spacer></kendo-treelist-spacer>
-                    <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.end)">
-                        <kendo-label [for]="mapper.taskFields.end" [text]="getText('endFieldInputLabel')"></kendo-label>
-                        <kendo-datetimepicker [formControlName]="mapper.taskFields.end"></kendo-datetimepicker>
-                    </kendo-formfield>
-                </div>
-                <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.completionRatio)">
-                    <kendo-label [for]="mapper.taskFields.completionRatio" [text]="getText('completionRatioFieldInputLabel')"></kendo-label>
-                    <kendo-numerictextbox
-                        [formControlName]="mapper.taskFields.completionRatio"
-                        [min]="0"
-                        [max]="1"
-                        [decimals]="2"
-                        format="p2"
-                        [step]="0.01"
-                    ></kendo-numerictextbox>
-                </kendo-formfield>
-            </form>
+
+            <kendo-tabstrip [keepTabContent]="true">
+                <kendo-tabstrip-tab [title]="getText('taskEditingGeneralTabTitle')" [selected]="true">
+                    <ng-template kendoTabContent>
+                    <kendo-gantt-task-fields></kendo-gantt-task-fields>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+                <kendo-tabstrip-tab [title]="getText('taskEditingPredecessorsTabTitle')">
+                    <ng-template kendoTabContent>
+                        <kendo-gantt-dependencies-table
+                            [tasks]="loadedTasks"
+                            [(dependencies)]="predecessors"
+                            dependencyType="predecessor"
+                        >
+                        </kendo-gantt-dependencies-table>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+                <kendo-tabstrip-tab [title]="getText('taskEditingSuccessorsTabTitle')">
+                    <ng-template kendoTabContent>
+                        <kendo-gantt-dependencies-table
+                            [tasks]="loadedTasks"
+                            [(dependencies)]="successors"
+                            dependencyType="successor">
+                        </kendo-gantt-dependencies-table>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+            </kendo-tabstrip>
+
             <kendo-dialog-actions layout="normal">
                 <button kendoButton (click)="onTaskDelete()">{{ getText('deleteButtonText') }}</button>
                 <kendo-treelist-spacer></kendo-treelist-spacer>
@@ -4392,6 +4668,7 @@ EditDialogComponent = __decorate([
     }),
     __metadata("design:paramtypes", [MappingService,
         EditService,
+        ChangeDetectorRef,
         LocalizationService])
 ], EditDialogComponent);
 
@@ -4400,6 +4677,38 @@ EditDialogComponent = __decorate([
  */
 class Messages extends ComponentMessages {
 }
+__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)
@@ -4423,7 +4732,19 @@ __decorate([
 __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)
@@ -4680,27 +5001,306 @@ LocalizedMessagesDirective = LocalizedMessagesDirective_1 = __decorate([
     __metadata("design:paramtypes", [LocalizationService])
 ], LocalizedMessagesDirective);
 
+/**
+ * The UI for adding new items to the Gantt.
+ * Use it within a toolbar template to provide a custom icon or list of options.
+ */
+let GanttAddTaskComponent = class GanttAddTaskComponent {
+    constructor(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
+     */
+    getText(message) {
+        return this.localizationService.get(message);
+    }
+    /**
+     * @hidden
+     */
+    handleOpen(e) {
+        if (!this.editService.getSelectedItem()) {
+            e.preventDefault();
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleMouseClick() {
+        if (!this.editService.getSelectedItem()) {
+            this.ngZone.run(() => {
+                this.editService.addEvent.next({
+                    selectedItem: null,
+                    actionType: 'addTask'
+                });
+            });
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleItemClick(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: `
+        <kendo-dropdownbutton
+            [data]="data"
+            [icon]="icon"
+            [kendoEventsOutsideAngular]="{ click: handleMouseClick }"
+            [scope]="this"
+            (itemClick)="handleItemClick($event)"
+            (open)="handleOpen($event)">
+            {{ getText('addTaskText') }}
+        </kendo-dropdownbutton>
+    `
+    }),
+    __metadata("design:paramtypes", [LocalizationService,
+        EditService,
+        NgZone])
+], GanttAddTaskComponent);
+
 /**
  * @hidden
  */
-let GanttTreeListMessagesDirective = class GanttTreeListMessagesDirective {
-    constructor(localizationService) {
+let DependenciesTableComponent = class DependenciesTableComponent {
+    constructor(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();
+    }
+    get taskId() {
+        return this.editService.dataItem.id;
+    }
+    // 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 dependencyIdField() {
+        return this.dependencyType === 'predecessor' ? 'fromId' : 'toId';
+    }
+    ngOnInit() {
+        // generate the FormGroups per each Grid row
+        if (this.formGroups.controls.length === 0) {
+            const fields = this.mapper.dependencyFields;
+            this.dependencies.forEach(item => {
+                const formGroup = new FormGroup({
+                    [fields.id]: new FormControl(this.mapper.extractFromDependency(item, 'id')),
+                    [fields.fromId]: new FormControl(this.mapper.extractFromDependency(item, 'fromId'), Validators.required),
+                    [fields.toId]: new FormControl(this.mapper.extractFromDependency(item, 'toId'), Validators.required),
+                    [fields.type]: new FormControl(this.mapper.extractFromDependency(item, 'type'), Validators.required)
+                });
+                this.formGroups.push(formGroup);
+            });
+        }
+        this.formGroups.valueChanges.subscribe(val => {
+            this.formGroups.controls.forEach(control => {
+                if (control.dirty) {
+                    this.editService.updateDependencies(control.value);
+                }
+            });
+            this.dependenciesChange.emit(val);
+        });
     }
-    ngAfterViewInit() {
-        const treeListServiceDictionary = this.localizationService.dictionary;
-        Object.keys(treeListServiceDictionary)
-            .forEach(token => treeListServiceDictionary[token] = this.kendoGanttTreeListMessages.get(token.replace('kendo.treelist.', '')));
+    getFormControl(dataItemIndex, field) {
+        // return the FormControl for the respective column editor
+        return this.formGroups.controls
+            .find((_control, index) => index === dataItemIndex)
+            .get(this.mapper.dependencyFields[field]);
+    }
+    getText(token) {
+        return this.localizationService.get(token);
+    }
+    getDependencyTypes() {
+        const types = Object.keys(DependencyType)
+            .filter(value => typeof DependencyType[value] === 'number')
+            .map(type => {
+            return {
+                type,
+                id: DependencyType[type]
+            };
+        });
+        return types;
+    }
+    addHandler() {
+        const fields = this.mapper.dependencyFields;
+        const formGroup = new FormGroup({
+            [fields.id]: new FormControl(),
+            [fields.fromId]: new FormControl(this.dependencyIdField === 'toId' ? this.taskId : null, Validators.required),
+            [fields.toId]: new FormControl(this.dependencyIdField === 'fromId' ? this.taskId : null, Validators.required),
+            [fields.type]: new FormControl(null, Validators.required)
+        });
+        this.formGroups.push(formGroup);
+    }
+    removeHandler() {
+        const [selectedIndex] = this.selectedKeys;
+        const 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);
+    __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: `
+        <kendo-grid
+            [data]="dependencies"
+            [selectable]="{ mode: 'single' }"
+            [(selectedKeys)]="selectedKeys"
+            kendoGridSelectBy
+            [height]="295"
+        >
+            <ng-template kendoGridToolbarTemplate>
+                <button kendoButton (click)="addHandler()">
+                    {{ getText('taskEditingDependenciesAddButtonText') }}
+                </button>
+                <button kendoButton (click)="removeHandler()" [disabled]="selectedKeys.length === 0">
+                    {{ getText('taskEditingDependenciesRemoveButtonText') }}
+                </button>
+            </ng-template>
+            <kendo-grid-column [title]="getText('taskEditingDependenciesGridNameColumnTitle')" [field]="dependencyIdField">
+                <ng-template kendoGridCellTemplate let-dataItem="dataItem" let-column="column" let-rowIndex="rowIndex">
+                    <kendo-dropdownlist
+                        [data]="tasks"
+                        textField="title"
+                        valueField="id"
+                        [valuePrimitive]="true"
+                        [formControl]="getFormControl(rowIndex, column.field)"
+                    >
+                    </kendo-dropdownlist>
+                </ng-template>
+            </kendo-grid-column>
+            <kendo-grid-column [title]="getText('taskEditingDependenciesGridTypeColumnTitle')" field="type">
+                <ng-template kendoGridCellTemplate let-dataItem="dataItem" let-column="column" let-rowIndex="rowIndex">
+                    <kendo-dropdownlist
+                        [data]="dependencyTypes"
+                        textField="type"
+                        valueField="id"
+                        [valuePrimitive]="true"
+                        [formControl]="getFormControl(rowIndex, column.field)"
+                    >
+                    </kendo-dropdownlist>
+                </ng-template>
+            </kendo-grid-column>
+        </kendo-grid>
+    `
+    }),
+    __metadata("design:paramtypes", [MappingService,
+        EditService,
+        GanttLocalizationService])
+], DependenciesTableComponent);
+
+/**
+ * @hidden
+ */
+let TaskFieldsComponent = class TaskFieldsComponent {
+    constructor(mapper, editService, localizationService) {
+        this.mapper = mapper;
+        this.editService = editService;
+        this.localizationService = localizationService;
+    }
+    /**
+     * @hidden
+     */
+    get formGroup() {
+        return this.editService.taskFormGroup;
+    }
+    getText(token) {
+        return this.localizationService.get(token);
+    }
+};
+TaskFieldsComponent = __decorate([
+    Component({
+        selector: 'kendo-gantt-task-fields',
+        template: `
+        <form class="k-form" [formGroup]="formGroup">
+            <kendo-formfield *ngIf="formGroup.contains(mapper.taskFields.title)">
+                <kendo-label [for]="mapper.taskFields.title" [text]="getText('titleFieldInputLabel')"></kendo-label>
+                <input class="k-textbox" [formControlName]="mapper.taskFields.title" />
+            </kendo-formfield>
+            <div class="k-hstack">
+                <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.start)">
+                    <kendo-label [for]="mapper.taskFields.start" [text]="getText('startFieldInputLabel')"></kendo-label>
+                    <kendo-datetimepicker [formControlName]="mapper.taskFields.start"></kendo-datetimepicker>
+                </kendo-formfield>
+                <kendo-treelist-spacer></kendo-treelist-spacer>
+                <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.end)">
+                    <kendo-label [for]="mapper.taskFields.end" [text]="getText('endFieldInputLabel')"></kendo-label>
+                    <kendo-datetimepicker [formControlName]="mapper.taskFields.end"></kendo-datetimepicker>
+                </kendo-formfield>
+            </div>
+            <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.completionRatio)">
+                <kendo-label [for]="mapper.taskFields.completionRatio" [text]="getText('completionRatioFieldInputLabel')"></kendo-label>
+                <kendo-numerictextbox
+                    [formControlName]="mapper.taskFields.completionRatio"
+                    [min]="0"
+                    [max]="1"
+                    [decimals]="2"
+                    format="p2"
+                    [step]="0.01"
+                ></kendo-numerictextbox>
+            </kendo-formfield>
+        </form>
+    `
+    }),
+    __metadata("design:paramtypes", [MappingService,
+        EditService,
+        GanttLocalizationService])
+], TaskFieldsComponent);
 
 const IMPORTED_MODULES = [
     CommonModule,
@@ -4713,7 +5313,10 @@ const IMPORTED_MODULES = [
     TreeListModule,
     ButtonsModule,
     DialogModule,
-    EventsModule
+    EventsModule,
+    TabStripModule,
+    GridModule,
+    DropDownsModule
 ];
 const DECLARATIONS = [
     GanttComponent,
@@ -4750,7 +5353,9 @@ const DECLARATIONS = [
     EditDialogComponent,
     CustomMessagesComponent,
     LocalizedMessagesDirective,
-    GanttTreeListMessagesDirective
+    GanttAddTaskComponent,
+    DependenciesTableComponent,
+    TaskFieldsComponent
 ];
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
@@ -4797,8 +5402,45 @@ GanttModule = __decorate([
     })
 ], GanttModule);
 
+/**
+ * @hidden
+ */
+class PreventableEvent {
+    constructor() {
+        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.
+     */
+    preventDefault() {
+        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`.
+     */
+    isDefaultPrevented() {
+        return this.prevented;
+    }
+}
+
+/**
+ * Called every time a user leaves an edited cell.
+ */
+class CellCloseEvent extends PreventableEvent {
+    constructor(options) {
+        super();
+        Object.assign(this, options);
+    }
+}
+
 /**
  * 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 };