@progress/kendo-angular-gantt 0.2.1-dev.202112091741 → 0.3.0-dev.202201131518

package/dist/es2015/gantt.component.js

@@ -13,6 +13,8 @@ import { packageMetadata } from './package-metadata';
 import { anyChanged, hasObservers } from '@progress/kendo-angular-common';
 import { GanttColumnBase } from './columns/columns';
 import { fetchChildren, hasChildren, isSelected, rowClassCallback, taskClassCallback } from './common/default-callbacks';
+import { DependencyType } from './models/models';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { TimelineViewService } from './timeline/timeline-view.service';
 import { TimelineDayViewService } from './timeline/timeline-day-view.service';
 import { TimelineWeekViewService } from './timeline/timeline-week-view.service';
@@ -22,17 +24,25 @@ import { DependencyDomService } from './dependencies/dependency-dom.service';
 import { MappingService } from './common/mapping.service';
 import { OptionChangesService } from './common/option-changes.service';
 import { EditService } from './editing/edit.service';
-import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { getClosestTaskIndex, isClearButton, isColumnGroup, isPresent, isTask, normalizeGanttData, scrollbarWidth } from './utils';
+import { TimelineScrollService } from './scrolling/timeline-scroll.service';
+import { GanttLocalizationService } from './localization/gantt-localization.service';
+import { areParentChild, getClosestTaskIndex, isClearButton, isColumnGroup, isPresent, isTask, normalizeGanttData, scrollbarWidth } from './utils';
 import { DEFAULT_TIMELINE_PANE_SETTINGS, DEFAULT_TREELIST_PANE_SETTINGS } from './models/splitter-pane-options.interface';
 import { GanttTaskTemplateDirective } from './template-directives/task-template.directive';
 import { GanttSummaryTaskTemplateDirective } from './template-directives/summary-task-template.directive';
 import { GanttTaskContentTemplateDirective } from './template-directives/task-content-template.directive';
 import { ToolbarTemplateDirective } from './toolbar/toolbar-template.directive';
+import { GanttTimelineComponent } from './timeline/gantt-timeline.component';
 import { ViewBase } from './timeline/view-base';
-import { getEditItem } from './editing/util';
+import { getEditItem } from './editing/utils';
 const TREELIST_GROUP_COLUMNS_CLASS = 'k-gantt-treelist-nested-columns';
 const DEFAULT_VIEW = 'week';
+const DEFAULT_DRAG_SCROLL_SETTINGS = {
+    enabled: true,
+    step: 3,
+    interval: 1,
+    threshold: 10
+};
 /**
  * Represents the Kendo UI Gantt component for Angular.
  *
@@ -118,11 +128,22 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         this.zone = zone;
         this.hostClasses = true;
         /**
-         * Provides a callback that determines if the given task is selected ([see example]({% slug selection_gantt %}#toc-custom-selection))
+         * Specifies a callback that determines if the given task is selected ([see example]({% slug selection_gantt %}#toc-custom-selection)).
          *
          * > 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;
+        /**
+         * Specifies a callback that determines if a new dependency is valid.
+         * Used when evaluating if an attempt to create a new dependency will result in a valid link between the two tasks
+         * [see example]({% slug editing_drag_create_dependencies_gantt %}#toc-validation).
+         *
+         * By defalut, dependencies are deemed invalid when:
+         *  - The two tasks are in a parent-child relationship.
+         *  - The two tasks are already dependent on one another. Only one dependency is allowed per pair.
+         *  - The start or end times of the two tasks are incompatible with the attempted dependency type.
+         */
+        this.validateNewDependency = this.defaultValidateNewDependencyCallback.bind(this);
         /**
          * Fires when the Gantt selection is changed through user interaction.
          *
@@ -138,25 +159,6 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
          * > 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.
          *
@@ -258,6 +260,15 @@ 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 user adds a dependency via dragging
+         * [see example]({% slug editing_drag_create_dependencies_gantt %}#toc-basic-concepts).
+         */
+        this.dependencyAdd = new EventEmitter();
         /**
          * Fires when the sorting of the Gantt is changed.
          * You have to handle the event yourself and sort the data.
@@ -314,6 +325,15 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
          * Fires when a task is clicked.
          */
         this.taskClick = new EventEmitter();
+        /**
+         * @hidden
+         *
+         * Specifies whether the dependency drag clues will be rendered.
+         * Set internally by the dependency-drag-create directive.
+         *
+         * @default false
+         */
+        this.renderDependencyDragClues = false;
         /**
          * @hidden
          *
@@ -330,11 +350,19 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         this.showConfirmationDialog = false;
         this._columns = new QueryList();
         this._data = [];
+        this._dragScrollSettings = Object.assign({}, DEFAULT_DRAG_SCROLL_SETTINGS);
         this._timelinePaneOptions = Object.assign({}, DEFAULT_TIMELINE_PANE_SETTINGS);
         this._treeListPaneOptions = Object.assign({}, DEFAULT_TREELIST_PANE_SETTINGS);
         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();
@@ -345,16 +373,26 @@ 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.localizationSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
@@ -430,6 +468,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%'`.
@@ -485,6 +566,17 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
     get taskIdField() {
         return this.mapper.taskFields.id;
     }
+    /**
+     * Specifies the settings for auto-scrolling during dragging
+     * when the pointer moves outside of the container bounderies
+     * [see example]({% slug editing_drag_create_dependencies_gantt %}#toc-auto-scrolling).
+     */
+    set dragScrollSettings(settings) {
+        this._dragScrollSettings = Object.assign({}, DEFAULT_DRAG_SCROLL_SETTINGS, settings);
+    }
+    get dragScrollSettings() {
+        return this._dragScrollSettings;
+    }
     /**
      * @hidden
      */
@@ -537,12 +629,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();
@@ -631,7 +717,10 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
      */
     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);
         }
     }
     /**
@@ -704,7 +793,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
@@ -903,11 +992,65 @@ 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);
+    }
+    defaultValidateNewDependencyCallback(dependency) {
+        const fromTaskId = this.mapper.extractFromDependency(dependency, 'fromId');
+        const toTaskId = this.mapper.extractFromDependency(dependency, 'toId');
+        const fromTask = this.treeList.view.data.find(task => this.mapper.extractFromTask(task.data, 'id') === fromTaskId);
+        const toTask = this.treeList.view.data.find(task => this.mapper.extractFromTask(task.data, 'id') === toTaskId);
+        // mark as invalid if the attempted dependency is lacking valid from- and to-tasks
+        // or when the from- and to-tasks are actually the same task
+        if (!isPresent(fromTask) || !isPresent(fromTask.data) ||
+            !isPresent(toTask) || !isPresent(toTask.data) ||
+            fromTask.data === toTask.data) {
+            return false;
+        }
+        const tasksDependentOnOneAnother = this.dependencies.some(current => {
+            const currentFromId = this.mapper.extractFromDependency(current, 'fromId');
+            const currentToId = this.mapper.extractFromDependency(current, 'toId');
+            return (fromTaskId === currentFromId && toTaskId === currentToId) ||
+                (toTaskId === currentFromId && fromTaskId === currentToId);
+        });
+        // mark as invalid if the attempted dependency is trying to connect already dependent tasks
+        // mark as invalid if the two tasks are in parent-child relationship
+        if (tasksDependentOnOneAnother || areParentChild(fromTask, toTask)) {
+            return false;
+        }
+        const fromTaskStart = this.mapper.extractFromTask(fromTask.data, 'start');
+        const fromTaskEnd = this.mapper.extractFromTask(fromTask.data, 'end');
+        const toTaskStart = this.mapper.extractFromTask(toTask.data, 'start');
+        const toTaskEnd = this.mapper.extractFromTask(toTask.data, 'end');
+        // if the two tasks are available to be connected via a dependency,
+        // check if their start and end time allow for the attempted dependency type
+        switch (this.mapper.extractFromDependency(dependency, 'type')) {
+            // finish to finish (FF) — the from-task ends before the to-task can end
+            case DependencyType.FF:
+                return fromTaskEnd <= toTaskEnd;
+            // finish to start (FS) — the from-task ends before the to-task can begin
+            case DependencyType.FS:
+                return fromTaskEnd <= toTaskStart;
+            // start to finish (SF) — the from-task begins before the to-task can end
+            case DependencyType.SF:
+                return fromTaskStart <= toTaskEnd;
+            // start to start (SS) — the from-task begins before the to-task can begin
+            case DependencyType.SS:
+                return fromTaskStart <= toTaskStart;
+            default: return false;
+        }
+    }
 };
 tslib_1.__decorate([
     ViewChild(TreeListComponent, { static: true }),
     tslib_1.__metadata("design:type", TreeListComponent)
 ], GanttComponent.prototype, "treeList", void 0);
+tslib_1.__decorate([
+    ViewChild(GanttTimelineComponent, { static: false }),
+    tslib_1.__metadata("design:type", GanttTimelineComponent)
+], GanttComponent.prototype, "timeline", void 0);
 tslib_1.__decorate([
     ContentChild(GanttTaskContentTemplateDirective, { static: true }),
     tslib_1.__metadata("design:type", GanttTaskContentTemplateDirective)
@@ -966,6 +1109,10 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Function)
 ], GanttComponent.prototype, "isSelected", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Function)
+], GanttComponent.prototype, "validateNewDependency", void 0);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -976,16 +1123,19 @@ tslib_1.__decorate([
 ], GanttComponent.prototype, "selectable", void 0);
 tslib_1.__decorate([
     Input(),
-    tslib_1.__metadata("design:type", String)
-], GanttComponent.prototype, "toolbarPosition", void 0);
+    tslib_1.__metadata("design:type", Object),
+    tslib_1.__metadata("design:paramtypes", [Object])
+], GanttComponent.prototype, "toolbarSettings", null);
 tslib_1.__decorate([
     Input(),
-    tslib_1.__metadata("design:type", Function)
-], GanttComponent.prototype, "fetchChildren", void 0);
+    tslib_1.__metadata("design:type", Function),
+    tslib_1.__metadata("design:paramtypes", [Function])
+], GanttComponent.prototype, "fetchChildren", null);
 tslib_1.__decorate([
     Input(),
-    tslib_1.__metadata("design:type", Function)
-], GanttComponent.prototype, "hasChildren", void 0);
+    tslib_1.__metadata("design:type", Function),
+    tslib_1.__metadata("design:paramtypes", [Function])
+], GanttComponent.prototype, "hasChildren", null);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Array)
@@ -1062,6 +1212,11 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Boolean)
 ], GanttComponent.prototype, "columnsResizable", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object),
+    tslib_1.__metadata("design:paramtypes", [Object])
+], GanttComponent.prototype, "dragScrollSettings", null);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -1098,6 +1253,14 @@ tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
 ], GanttComponent.prototype, "save", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], GanttComponent.prototype, "taskAdd", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], GanttComponent.prototype, "dependencyAdd", void 0);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -1155,6 +1318,7 @@ GanttComponent = GanttComponent_1 = tslib_1.__decorate([
         selector: 'kendo-gantt',
         exportAs: 'kendoGantt',
         providers: [
+            GanttLocalizationService,
             LocalizationService,
             {
                 provide: DataBoundTreeComponent,
@@ -1172,10 +1336,32 @@ GanttComponent = GanttComponent_1 = tslib_1.__decorate([
             DependencyDomService,
             MappingService,
             OptionChangesService,
-            EditService
+            EditService,
+            TimelineScrollService
         ],
         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"
 
@@ -1227,6 +1413,18 @@ GanttComponent = GanttComponent_1 = tslib_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."
 
@@ -1348,6 +1546,8 @@ GanttComponent = GanttComponent_1 = tslib_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">
@@ -1397,7 +1597,47 @@ GanttComponent = GanttComponent_1 = tslib_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
@@ -1412,6 +1652,8 @@ GanttComponent = GanttComponent_1 = tslib_1.__decorate([
                     [scrollable]="false">
                     <kendo-gantt-timeline
                         *ngIf="views && views.length"
+                        [renderDependencyDragClues]="renderDependencyDragClues"
+                        [dragScrollSettings]="dragScrollSettings"
                         [rows]="renderedTreeListItems"
                         [slots]="timelineSlots"
                         [groupSlots]="timelineGroupSlots"
@@ -1437,16 +1679,21 @@ GanttComponent = GanttComponent_1 = tslib_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>

package/dist/es2015/gantt.module.js

@@ -5,11 +5,19 @@
 import * as tslib_1 from "tslib";
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { SplitterModule } from '@progress/kendo-angular-layout';
+import { ReactiveFormsModule } from '@angular/forms';
+import { SplitterModule, TabStripModule } from '@progress/kendo-angular-layout';
 import { TreeListModule } from '@progress/kendo-angular-treelist';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
-import { EventsModule } from '@progress/kendo-angular-common';
+import { DraggableModule, EventsModule } from '@progress/kendo-angular-common';
 import { DialogModule } from '@progress/kendo-angular-dialog';
+import { LabelModule } from '@progress/kendo-angular-label';
+import { InputsModule } from '@progress/kendo-angular-inputs';
+import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
+import { L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { PopupModule } from '@progress/kendo-angular-popup';
+import { touchEnabled } from '@progress/kendo-common';
+import { TOUCH_ENABLED } from './common/touch-enabled';
 import { GanttComponent } from './gantt.component';
 import { GanttTimelineComponent } from './timeline/gantt-timeline.component';
 import { GanttTasksTableBodyComponent } from './rendering/gantt-tasks-table-body.component';
@@ -28,19 +36,21 @@ import { ToolbarComponent } from './toolbar/toolbar.component';
 import { ToolbarTemplateDirective } from './toolbar/toolbar-template.directive';
 import { ViewSelectorComponent } from './toolbar/view-selector.component';
 import { GanttDependencyDirective } from './dependencies/gantt-dependency.directive';
+import { DependencyDragCreateDirective } from './dragging/dependency-drag-create.directive';
+import { DragValidationTooltipComponent } from './dragging/drag-validation-tooltip.component';
+import { TimelineScrollableDirective } from './scrolling/timeline-scroll.directive';
 import { GanttColumnComponent, GanttColumnGroupComponent, GanttSpanColumnComponent, FilterMenuTemplateDirective, FilterCellTemplateDirective, CellTemplateDirective, ColumnMenuTemplateDirective, FooterTemplateDirective, HeaderTemplateDirective, EditTemplateDirective } from './columns/columns';
 import { TimelineDayViewComponent } from './timeline/timeline-day-view.component';
 import { TimelineWeekViewComponent } from './timeline/timeline-week-view.component';
 import { TimelineMonthViewComponent } from './timeline/timeline-month-view.component';
 import { EditDialogComponent } from './editing/edit-dialog.component';
-import { 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 { CustomMessagesComponent } from './localization/custom-messages.component';
-import { L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
-import { GanttTreeListMessagesDirective } from './localization/treelist-messages.directive';
+import { GanttAddTaskComponent } from './editing/add-task.component';
+import { GridModule } from '@progress/kendo-angular-grid';
+import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
+import { DependenciesTableComponent } from './editing/dependencies-table.component';
+import { TaskFieldsComponent } from './editing/task-fields.component';
 const IMPORTED_MODULES = [
     CommonModule,
     ReactiveFormsModule,
@@ -52,7 +62,12 @@ const IMPORTED_MODULES = [
     TreeListModule,
     ButtonsModule,
     DialogModule,
-    EventsModule
+    EventsModule,
+    PopupModule,
+    DraggableModule,
+    TabStripModule,
+    GridModule,
+    DropDownsModule
 ];
 const DECLARATIONS = [
     GanttComponent,
@@ -82,6 +97,7 @@ const DECLARATIONS = [
     FooterTemplateDirective,
     GanttExpandableDirective,
     GanttDependencyDirective,
+    DependencyDragCreateDirective,
     TimelineDayViewComponent,
     TimelineWeekViewComponent,
     TimelineMonthViewComponent,
@@ -89,8 +105,13 @@ const DECLARATIONS = [
     EditDialogComponent,
     CustomMessagesComponent,
     LocalizedMessagesDirective,
-    GanttTreeListMessagesDirective
+    GanttAddTaskComponent,
+    DragValidationTooltipComponent,
+    TimelineScrollableDirective,
+    DependenciesTableComponent,
+    TaskFieldsComponent
 ];
+const ɵ0 = touchEnabled;
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
  * definition for the Gantt component.
@@ -129,10 +150,15 @@ GanttModule = tslib_1.__decorate([
         imports: [...IMPORTED_MODULES],
         declarations: [...DECLARATIONS],
         exports: [...DECLARATIONS],
+        entryComponents: [DragValidationTooltipComponent],
         providers: [{
                 provide: L10N_PREFIX,
                 useValue: 'kendo.gantt'
+            }, {
+                provide: TOUCH_ENABLED,
+                useValue: ɵ0
             }]
     })
 ], GanttModule);
 export { GanttModule };
+export { ɵ0 };