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

package/dist/npm/index.js

@@ -13,22 +13,32 @@ var mapping_service_1 = require("./common/mapping.service");
 exports.MappingService = mapping_service_1.MappingService
 var option_changes_service_1 = require("./common/option-changes.service");
 exports.OptionChangesService = option_changes_service_1.OptionChangesService
+var touch_enabled_1 = require("./common/touch-enabled");
+exports.TOUCH_ENABLED = touch_enabled_1.TOUCH_ENABLED
 var dependency_dom_service_1 = require("./dependencies/dependency-dom.service");
 exports.DependencyDomService = dependency_dom_service_1.DependencyDomService
 var gantt_dependency_directive_1 = require("./dependencies/gantt-dependency.directive");
 exports.GanttDependencyDirective = gantt_dependency_directive_1.GanttDependencyDirective
+var drag_validation_tooltip_component_1 = require("./dragging/drag-validation-tooltip.component");
+exports.DragValidationTooltipComponent = drag_validation_tooltip_component_1.DragValidationTooltipComponent
+var add_task_component_1 = require("./editing/add-task.component");
+exports.GanttAddTaskComponent = add_task_component_1.GanttAddTaskComponent
+var dependencies_table_component_1 = require("./editing/dependencies-table.component");
+exports.DependenciesTableComponent = dependencies_table_component_1.DependenciesTableComponent
 var edit_dialog_component_1 = require("./editing/edit-dialog.component");
 exports.EditDialogComponent = edit_dialog_component_1.EditDialogComponent
 var edit_service_1 = require("./editing/edit.service");
 exports.EditService = edit_service_1.EditService
+var task_fields_component_1 = require("./editing/task-fields.component");
+exports.TaskFieldsComponent = task_fields_component_1.TaskFieldsComponent
 var custom_messages_component_1 = require("./localization/custom-messages.component");
 exports.CustomMessagesComponent = custom_messages_component_1.CustomMessagesComponent
+var gantt_localization_service_1 = require("./localization/gantt-localization.service");
+exports.GanttLocalizationService = gantt_localization_service_1.GanttLocalizationService
 var localized_messages_directive_1 = require("./localization/localized-messages.directive");
 exports.LocalizedMessagesDirective = localized_messages_directive_1.LocalizedMessagesDirective
 var messages_1 = require("./localization/messages");
 exports.Messages = messages_1.Messages
-var treelist_messages_directive_1 = require("./localization/treelist-messages.directive");
-exports.GanttTreeListMessagesDirective = treelist_messages_directive_1.GanttTreeListMessagesDirective
 var preventable_event_1 = require("./models/events/preventable-event");
 exports.PreventableEvent = preventable_event_1.PreventableEvent
 var gantt_header_table_body_component_1 = require("./rendering/gantt-header-table-body.component");
@@ -45,6 +55,10 @@ var gantt_tasks_table_body_component_1 = require("./rendering/gantt-tasks-table-
 exports.GanttTasksTableBodyComponent = gantt_tasks_table_body_component_1.GanttTasksTableBodyComponent
 var scroll_sync_service_1 = require("./scrolling/scroll-sync.service");
 exports.ScrollSyncService = scroll_sync_service_1.ScrollSyncService
+var timeline_scroll_directive_1 = require("./scrolling/timeline-scroll.directive");
+exports.TimelineScrollableDirective = timeline_scroll_directive_1.TimelineScrollableDirective
+var timeline_scroll_service_1 = require("./scrolling/timeline-scroll.service");
+exports.TimelineScrollService = timeline_scroll_service_1.TimelineScrollService
 var gantt_timeline_component_1 = require("./timeline/gantt-timeline.component");
 exports.GanttTimelineComponent = gantt_timeline_component_1.GanttTimelineComponent
 var timeline_base_view_service_1 = require("./timeline/timeline-base-view.service");

package/dist/npm/localization/gantt-localization.service.js

@@ -0,0 +1,28 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var core_1 = require("@angular/core");
+var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
+/**
+ * @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 = tslib_1.__decorate([
+        core_1.Injectable(),
+        tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService])
+    ], GanttLocalizationService);
+    return GanttLocalizationService;
+}());
+exports.GanttLocalizationService = GanttLocalizationService;

package/dist/npm/localization/messages.js

@@ -15,6 +15,38 @@ var Messages = /** @class */ (function (_super) {
     function Messages() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], Messages.prototype, "taskEditingGeneralTabTitle", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], Messages.prototype, "taskEditingPredecessorsTabTitle", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], Messages.prototype, "taskEditingSuccessorsTabTitle", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], Messages.prototype, "taskEditingDependenciesAddButtonText", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], Messages.prototype, "taskEditingDependenciesRemoveButtonText", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], Messages.prototype, "taskEditingDependenciesGridNameColumnTitle", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], Messages.prototype, "taskEditingDependenciesGridTypeColumnTitle", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], Messages.prototype, "deleteButtonText", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
@@ -38,7 +70,19 @@ var Messages = /** @class */ (function (_super) {
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
-    ], Messages.prototype, "deleteButtonText", void 0);
+    ], Messages.prototype, "addTaskText", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], Messages.prototype, "addChildText", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], Messages.prototype, "addAboveText", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], Messages.prototype, "addBelowText", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", String)

package/dist/npm/main.js

@@ -15,6 +15,8 @@ var flat_binding_directive_1 = require("./binding-directives/flat-binding.direct
 exports.GanttFlatBindingDirective = flat_binding_directive_1.GanttFlatBindingDirective;
 var expandable_directive_1 = require("./expanded-state/expandable.directive");
 exports.GanttExpandableDirective = expandable_directive_1.GanttExpandableDirective;
+var dependency_drag_create_directive_1 = require("./dragging/dependency-drag-create.directive");
+exports.DependencyDragCreateDirective = dependency_drag_create_directive_1.DependencyDragCreateDirective;
 var task_template_directive_1 = require("./template-directives/task-template.directive");
 exports.GanttTaskTemplateDirective = task_template_directive_1.GanttTaskTemplateDirective;
 var task_content_template_directive_1 = require("./template-directives/task-content-template.directive");

package/dist/npm/models/dependency-type.enum.js

@@ -4,3 +4,19 @@
 *-------------------------------------------------------------------------------------------*/
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * The dependency type when two tasks are connected.
+ *
+ * The supported values are:
+ * * `FF`—from 'finish' to 'finish'
+ * * `FS`—from 'finish' to 'start'
+ * * `SS`—from 'start' to 'start'
+ * * `SF`—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 = exports.DependencyType || (exports.DependencyType = {}));

package/dist/npm/models/models.js

@@ -4,5 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var dependency_type_enum_1 = require("./dependency-type.enum");
+exports.DependencyType = dependency_type_enum_1.DependencyType;
 var cell_close_event_interface_1 = require("./events/cell-close-event.interface");
 exports.CellCloseEvent = cell_close_event_interface_1.CellCloseEvent;

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-gantt',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1639071314,
+    publishDate: 1642086647,
     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'
 };

package/dist/npm/rendering/gantt-milestone-task.component.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var core_1 = require("@angular/core");
 var mapping_service_1 = require("../common/mapping.service");
+var touch_enabled_1 = require("../common/touch-enabled");
 var dependency_dom_service_1 = require("../dependencies/dependency-dom.service");
 var option_changes_service_1 = require("../common/option-changes.service");
 var timeline_view_service_1 = require("./../timeline/timeline-view.service");
@@ -16,8 +17,9 @@ var gantt_task_base_1 = require("./gantt-task-base");
  */
 var GanttMilestoneTaskComponent = /** @class */ (function (_super) {
     tslib_1.__extends(GanttMilestoneTaskComponent, _super);
-    function GanttMilestoneTaskComponent(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
+    function GanttMilestoneTaskComponent(touchEnabled, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
         var _this = _super.call(this, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) || this;
+        _this.touchEnabled = touchEnabled;
         _this.milestoneWrapperClass = true;
         return _this;
     }
@@ -36,9 +38,10 @@ var GanttMilestoneTaskComponent = /** @class */ (function (_super) {
                     useExisting: core_1.forwardRef(function () { return GanttMilestoneTaskComponent_1; })
                 }
             ],
-            template: "\n        <div\n            #task\n            class=\"k-task k-task-milestone\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [style.left.px]=\"taskOffset\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [class.k-state-selected]=\"isSelected(dataItem)\"\n            [attr.data-task-index]=\"index\"\n        >\n        </div>\n    "
+            template: "\n        <div\n            #task\n            class=\"k-task k-task-milestone\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [class.k-state-selected]=\"isSelected(dataItem)\"\n        >\n        </div>\n        <ng-container *ngIf=\"renderDependencyDragClues\">\n            <div\n                class=\"k-task-dot k-task-start k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n            <div\n                class=\"k-task-dot k-task-end k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n        </ng-container>\n    "
         }),
-        tslib_1.__metadata("design:paramtypes", [mapping_service_1.MappingService,
+        tslib_1.__param(0, core_1.Inject(touch_enabled_1.TOUCH_ENABLED)),
+        tslib_1.__metadata("design:paramtypes", [Boolean, mapping_service_1.MappingService,
             timeline_view_service_1.TimelineViewService,
             dependency_dom_service_1.DependencyDomService,
             option_changes_service_1.OptionChangesService,

package/dist/npm/rendering/gantt-summary-task.component.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var core_1 = require("@angular/core");
 var mapping_service_1 = require("../common/mapping.service");
+var touch_enabled_1 = require("../common/touch-enabled");
 var dependency_dom_service_1 = require("../dependencies/dependency-dom.service");
 var option_changes_service_1 = require("../common/option-changes.service");
 var timeline_view_service_1 = require("./../timeline/timeline-view.service");
@@ -16,8 +17,9 @@ var gantt_task_base_1 = require("./gantt-task-base");
  */
 var GanttSummaryTaskComponent = /** @class */ (function (_super) {
     tslib_1.__extends(GanttSummaryTaskComponent, _super);
-    function GanttSummaryTaskComponent(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
+    function GanttSummaryTaskComponent(touchEnabled, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
         var _this = _super.call(this, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) || this;
+        _this.touchEnabled = touchEnabled;
         _this.summaryWrapperClass = true;
         return _this;
     }
@@ -40,9 +42,10 @@ var GanttSummaryTaskComponent = /** @class */ (function (_super) {
                     useExisting: core_1.forwardRef(function () { return GanttSummaryTaskComponent_1; })
                 }
             ],
-            template: "\n        <div\n            #task\n            class=\"k-task k-task-summary\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [style.width.px]=\"taskWidth\"\n            [style.left.px]=\"taskOffset\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [attr.data-task-index]=\"index\"\n            [class.k-state-selected]=\"isSelected(dataItem)\"\n        >\n            <div *ngIf=\"!template; else summaryTemplate\"\n                class=\"k-task-summary-progress\"\n                [style.width.px]=\"taskWidth\">\n                <div\n                    class=\"k-task-summary-complete\"\n                    [style.width.px]=\"completionOverlayWidth\"\n                >\n                </div>\n            </div>\n            <ng-template\n                #summaryTemplate\n                [ngTemplateOutlet]=\"template\"\n                [ngTemplateOutletContext]=\"{\n                    $implicit: dataItem,\n                    elementWidth: taskWidth\n                }\"\n            >\n            </ng-template>\n        </div>\n    "
+            template: "\n        <div\n            #task\n            class=\"k-task k-task-summary\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [style.width.px]=\"taskWidth\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [class.k-state-selected]=\"isSelected(dataItem)\"\n        >\n            <div *ngIf=\"!template; else summaryTemplate\"\n                class=\"k-task-summary-progress\"\n                [style.width.px]=\"taskWidth\">\n                <div\n                    class=\"k-task-summary-complete\"\n                    [style.width.px]=\"completionOverlayWidth\"\n                >\n                </div>\n            </div>\n            <ng-template\n                #summaryTemplate\n                [ngTemplateOutlet]=\"template\"\n                [ngTemplateOutletContext]=\"{\n                    $implicit: dataItem,\n                    elementWidth: taskWidth\n                }\"\n            >\n            </ng-template>\n        </div>\n        <ng-container *ngIf=\"renderDependencyDragClues\">\n            <div\n                class=\"k-task-dot k-task-start k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n            <div\n                class=\"k-task-dot k-task-end k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n        </ng-container>\n    "
         }),
-        tslib_1.__metadata("design:paramtypes", [mapping_service_1.MappingService,
+        tslib_1.__param(0, core_1.Inject(touch_enabled_1.TOUCH_ENABLED)),
+        tslib_1.__metadata("design:paramtypes", [Boolean, mapping_service_1.MappingService,
             timeline_view_service_1.TimelineViewService,
             dependency_dom_service_1.DependencyDomService,
             option_changes_service_1.OptionChangesService,

package/dist/npm/rendering/gantt-task-base.js

@@ -53,23 +53,6 @@ var GanttTaskBase = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    GanttTaskBase.prototype.ngOnChanges = function (changes) {
-        if (utils_1.isPresent(changes.dataItem)) {
-            if (utils_1.isPresent(changes.dataItem.previousValue)) {
-                this.dependencyDomService.unregisterTask(changes.dataItem.previousValue);
-            }
-            this.dependencyDomService.registerTask(this.dataItem, this.taskElement.nativeElement);
-        }
-        else if (utils_1.isPresent(changes.activeView)) {
-            this.dependencyDomService.notifyChanges();
-        }
-    };
-    GanttTaskBase.prototype.ngOnDestroy = function () {
-        if (utils_1.isPresent(this.dataItem)) {
-            this.dependencyDomService.unregisterTask(this.dataItem);
-        }
-        this.viewChangesSubscription.unsubscribe();
-    };
     Object.defineProperty(GanttTaskBase.prototype, "taskWidth", {
         get: function () {
             var itemDuration = this.mapper.extractFromTask(this.dataItem, 'end') - this.mapper.extractFromTask(this.dataItem, 'start');
@@ -81,6 +64,12 @@ var GanttTaskBase = /** @class */ (function () {
         configurable: true
     });
     Object.defineProperty(GanttTaskBase.prototype, "taskOffset", {
+        /**
+         * The `left` style prop has to be applied to the host element (.k-task-wrap), as the drag clue elements are displayed on .k-task-wrap hover.
+         * Applying the `left` offset to the inner .k-task element leaves the .k-task-wrap element rendered with an offset of 0 somewhere on the left
+         * and hovering just the .k-task element doesn't expose the drag clues.
+         * Additionally, positioning the entire container takes care of positioning the hints as well.
+         */
         get: function () {
             var timeAfterViewStart = this.mapper.extractFromTask(this.dataItem, 'start') - this.viewService.viewStart;
             var offsetInSlotUnits = timeAfterViewStart / this.slotUnitDuration;
@@ -99,6 +88,23 @@ var GanttTaskBase = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    GanttTaskBase.prototype.ngOnChanges = function (changes) {
+        if (utils_1.isPresent(changes.dataItem)) {
+            if (utils_1.isPresent(changes.dataItem.previousValue)) {
+                this.dependencyDomService.unregisterTask(changes.dataItem.previousValue);
+            }
+            this.dependencyDomService.registerTask(this.dataItem, this.taskElement.nativeElement);
+        }
+        else if (utils_1.isPresent(changes.activeView)) {
+            this.dependencyDomService.notifyChanges();
+        }
+    };
+    GanttTaskBase.prototype.ngOnDestroy = function () {
+        if (utils_1.isPresent(this.dataItem)) {
+            this.dependencyDomService.unregisterTask(this.dataItem);
+        }
+        this.viewChangesSubscription.unsubscribe();
+    };
     tslib_1.__decorate([
         core_1.HostBinding('class.k-task-wrap'),
         tslib_1.__metadata("design:type", Boolean)
@@ -113,8 +119,8 @@ var GanttTaskBase = /** @class */ (function () {
     ], GanttTaskBase.prototype, "dataItem", void 0);
     tslib_1.__decorate([
         core_1.Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], GanttTaskBase.prototype, "index", void 0);
+        tslib_1.__metadata("design:type", Boolean)
+    ], GanttTaskBase.prototype, "renderDependencyDragClues", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Function)
@@ -127,6 +133,11 @@ var GanttTaskBase = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", Function)
     ], GanttTaskBase.prototype, "taskClass", void 0);
+    tslib_1.__decorate([
+        core_1.HostBinding('style.left.px'),
+        tslib_1.__metadata("design:type", Number),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], GanttTaskBase.prototype, "taskOffset", null);
     return GanttTaskBase;
 }());
 exports.GanttTaskBase = GanttTaskBase;

package/dist/npm/rendering/gantt-task.component.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var core_1 = require("@angular/core");
 var mapping_service_1 = require("../common/mapping.service");
+var touch_enabled_1 = require("../common/touch-enabled");
 var dependency_dom_service_1 = require("../dependencies/dependency-dom.service");
 var option_changes_service_1 = require("../common/option-changes.service");
 var timeline_view_service_1 = require("./../timeline/timeline-view.service");
@@ -17,9 +18,10 @@ var edit_service_1 = require("../editing/edit.service");
  */
 var GanttTaskComponent = /** @class */ (function (_super) {
     tslib_1.__extends(GanttTaskComponent, _super);
-    function GanttTaskComponent(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, editService) {
+    function GanttTaskComponent(editService, touchEnabled, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
         var _this = _super.call(this, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) || this;
         _this.editService = editService;
+        _this.touchEnabled = touchEnabled;
         return _this;
     }
     GanttTaskComponent_1 = GanttTaskComponent;
@@ -45,14 +47,14 @@ var GanttTaskComponent = /** @class */ (function (_super) {
                     useExisting: core_1.forwardRef(function () { return GanttTaskComponent_1; })
                 }
             ],
-            template: "\n        <div\n            #task\n            class=\"k-task k-task-single\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [style.width.px]=\"taskWidth\"\n            [style.left.px]=\"taskOffset\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [attr.data-task-index]=\"index\"\n            [class.k-state-selected]=\"isSelected(dataItem)\"\n        >\n            <ng-container *ngIf=\"!taskTemplate\">\n                <div\n                    class=\"k-task-complete\"\n                    [style.width.px]=\"completionOverlayWidth\"\n                >\n                </div>\n                <div class=\"k-task-content\">\n                    <div class=\"k-task-template\">\n                        <ng-container *ngIf=\"!taskContentTemplate; else taskContent\">\n                            {{ mapper.extractFromTask(dataItem, 'title') }}\n                        </ng-container>\n                        <ng-template\n                            #taskContent\n                            [ngTemplateOutlet]=\"taskContentTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"\n                        >\n                        </ng-template>\n                    </div>\n                    <span class=\"k-task-actions\">\n                        <span\n                            (click)=\"onTaskDelete()\"\n                            class=\"k-link k-task-delete\">\n                            <span class=\"k-icon k-i-close\"></span>\n                        </span>\n                    </span>\n                </div>\n            </ng-container>\n            <ng-template\n                *ngIf=\"taskTemplate\"\n                [ngTemplateOutlet]=\"taskTemplate\"\n                [ngTemplateOutletContext]=\"{\n                    $implicit: dataItem,\n                    elementWidth: taskWidth\n                }\"\n            >\n            </ng-template>\n        </div>\n    "
+            template: "\n        <div\n            #task\n            class=\"k-task k-task-single\"\n            [ngClass]=\"taskClass(dataItem)\"\n            [style.width.px]=\"taskWidth\"\n            [attr.title]=\"mapper.extractFromTask(dataItem, 'title')\"\n            [class.k-state-selected]=\"isSelected(dataItem)\"\n        >\n            <ng-container *ngIf=\"!taskTemplate\">\n                <div\n                    class=\"k-task-complete\"\n                    [style.width.px]=\"completionOverlayWidth\"\n                >\n                </div>\n                <div class=\"k-task-content\">\n                    <div class=\"k-task-template\">\n                        <ng-container *ngIf=\"!taskContentTemplate; else taskContent\">\n                            {{ mapper.extractFromTask(dataItem, 'title') }}\n                        </ng-container>\n                        <ng-template\n                            #taskContent\n                            [ngTemplateOutlet]=\"taskContentTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"\n                        >\n                        </ng-template>\n                    </div>\n                    <span class=\"k-task-actions\">\n                        <span\n                            (click)=\"onTaskDelete()\"\n                            class=\"k-link k-task-delete\">\n                            <span class=\"k-icon k-i-close\"></span>\n                        </span>\n                    </span>\n                </div>\n            </ng-container>\n            <ng-template\n                *ngIf=\"taskTemplate\"\n                [ngTemplateOutlet]=\"taskTemplate\"\n                [ngTemplateOutletContext]=\"{\n                    $implicit: dataItem,\n                    elementWidth: taskWidth\n                }\"\n            >\n            </ng-template>\n        </div>\n        <ng-container *ngIf=\"renderDependencyDragClues\">\n            <div\n                class=\"k-task-dot k-task-start k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n            <div\n                class=\"k-task-dot k-task-end k-touch-action-none\"\n                [class.k-display-block]=\"touchEnabled\"\n            >\n            </div>\n        </ng-container>\n    "
         }),
-        tslib_1.__metadata("design:paramtypes", [mapping_service_1.MappingService,
+        tslib_1.__param(1, core_1.Inject(touch_enabled_1.TOUCH_ENABLED)),
+        tslib_1.__metadata("design:paramtypes", [edit_service_1.EditService, Boolean, mapping_service_1.MappingService,
             timeline_view_service_1.TimelineViewService,
             dependency_dom_service_1.DependencyDomService,
             option_changes_service_1.OptionChangesService,
-            core_1.ChangeDetectorRef,
-            edit_service_1.EditService])
+            core_1.ChangeDetectorRef])
     ], GanttTaskComponent);
     return GanttTaskComponent;
 }(gantt_task_base_1.GanttTaskBase));

package/dist/npm/rendering/gantt-tasks-table-body.component.js

@@ -69,10 +69,14 @@ var GanttTasksTableBodyComponent = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", Function)
     ], GanttTasksTableBodyComponent.prototype, "isTaskSelected", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], GanttTasksTableBodyComponent.prototype, "renderDependencyDragClues", void 0);
     GanttTasksTableBodyComponent = tslib_1.__decorate([
         core_1.Component({
             selector: '[kendoGanttTasksTableBody]',
-            template: "\n        <tr #timelineRow *ngFor=\"let item of rows; let index = index\">\n            <td>\n                <kendo-gantt-milestone-task\n                    *ngIf=\"isMileStone(item); else task\"\n                    [dataItem]=\"item\"\n                    [activeView]=\"activeView\"\n                    [taskClass]=\"taskClass\"\n                    [isSelected]=\"isTaskSelected\"\n                    [index]=\"index\"\n                >\n                </kendo-gantt-milestone-task>\n                <ng-template #task>\n                    <kendo-gantt-summary-task\n                        *ngIf=\"hasChildren(item)\"\n                        [dataItem]=\"item\"\n                        [template]=\"summaryTaskTemplate\"\n                        [activeView]=\"activeView\"\n                        [taskClass]=\"taskClass\"\n                        [isSelected]=\"isTaskSelected\"\n                        [index]=\"index\"\n                    >\n                    </kendo-gantt-summary-task>\n                    <kendo-gantt-task\n                        *ngIf=\"!hasChildren(item)\"\n                        [dataItem]=\"item\"\n                        [taskContentTemplate]=\"taskContentTemplate\"\n                        [taskTemplate]=\"taskTemplate\"\n                        [activeView]=\"activeView\"\n                        [taskClass]=\"taskClass\"\n                        [isSelected]=\"isTaskSelected\"\n                        [index]=\"index\"\n                    >\n                    </kendo-gantt-task>\n                </ng-template>\n            </td>\n        </tr>\n    "
+            template: "\n        <tr #timelineRow *ngFor=\"let item of rows; let index = index\">\n            <td>\n                <kendo-gantt-milestone-task\n                    *ngIf=\"isMileStone(item); else task\"\n                    [dataItem]=\"item\"\n                    [activeView]=\"activeView\"\n                    [taskClass]=\"taskClass\"\n                    [isSelected]=\"isTaskSelected\"\n                    [attr.data-task-index]=\"index\"\n                    [renderDependencyDragClues]=\"renderDependencyDragClues\"\n                >\n                </kendo-gantt-milestone-task>\n                <ng-template #task>\n                    <kendo-gantt-summary-task\n                        *ngIf=\"hasChildren(item)\"\n                        [dataItem]=\"item\"\n                        [template]=\"summaryTaskTemplate\"\n                        [activeView]=\"activeView\"\n                        [taskClass]=\"taskClass\"\n                        [isSelected]=\"isTaskSelected\"\n                        [attr.data-task-index]=\"index\"\n                        [renderDependencyDragClues]=\"renderDependencyDragClues\"\n                    >\n                    </kendo-gantt-summary-task>\n                    <kendo-gantt-task\n                        *ngIf=\"!hasChildren(item)\"\n                        [dataItem]=\"item\"\n                        [taskContentTemplate]=\"taskContentTemplate\"\n                        [taskTemplate]=\"taskTemplate\"\n                        [activeView]=\"activeView\"\n                        [taskClass]=\"taskClass\"\n                        [isSelected]=\"isTaskSelected\"\n                        [attr.data-task-index]=\"index\"\n                        [renderDependencyDragClues]=\"renderDependencyDragClues\"\n                    >\n                    </kendo-gantt-task>\n                </ng-template>\n            </td>\n        </tr>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [dependency_dom_service_1.DependencyDomService,
             mapping_service_1.MappingService])

package/dist/npm/scrolling/drag-scroll-settings.js

@@ -0,0 +1,22 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * @hidden
+ */
+var ScrollDirection;
+(function (ScrollDirection) {
+    ScrollDirection[ScrollDirection["Backwards"] = -1] = "Backwards";
+    ScrollDirection[ScrollDirection["Forward"] = 1] = "Forward";
+})(ScrollDirection = exports.ScrollDirection || (exports.ScrollDirection = {}));
+/**
+ * @hidden
+ */
+var ScrollAxis;
+(function (ScrollAxis) {
+    ScrollAxis["Vertical"] = "scrollTop";
+    ScrollAxis["Horizontal"] = "scrollLeft";
+})(ScrollAxis = exports.ScrollAxis || (exports.ScrollAxis = {}));

package/dist/npm/scrolling/timeline-scroll.directive.js

@@ -0,0 +1,91 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var core_1 = require("@angular/core");
+var rxjs_1 = require("rxjs");
+var utils_1 = require("../utils");
+var drag_scroll_settings_1 = require("./drag-scroll-settings");
+var timeline_scroll_service_1 = require("./timeline-scroll.service");
+var utils_2 = require("./utils");
+/**
+ * @hidden
+ */
+var TimelineScrollableDirective = /** @class */ (function () {
+    function TimelineScrollableDirective(timelineScrollableContainer, scrollService, zone) {
+        this.timelineScrollableContainer = timelineScrollableContainer;
+        this.scrollService = scrollService;
+        this.zone = zone;
+        this.subscriptions = new rxjs_1.Subscription();
+        this.subscriptions.add(this.scrollService.horizontalScroll
+            .subscribe(this.scrollHorizontallyTo.bind(this)));
+        this.subscriptions.add(this.scrollService.verticalScroll
+            .subscribe(this.scrollVerticallyTo.bind(this)));
+        this.subscriptions.add(this.scrollService.scrollCancel
+            .subscribe(this.cancelScroll.bind(this)));
+    }
+    TimelineScrollableDirective.prototype.ngOnDestroy = function () {
+        this.subscriptions.unsubscribe();
+    };
+    TimelineScrollableDirective.prototype.scrollHorizontallyTo = function (left) {
+        var _this = this;
+        this.zone.runOutsideAngular(function () {
+            var container = _this.timelineScrollableContainer.nativeElement;
+            var visibleBoundaries = utils_2.getViewportBoundaries(container);
+            if (left < visibleBoundaries.left + _this.scrollSettings.threshold) {
+                _this.horizontalScrollInterval = setInterval(function () {
+                    return utils_2.scrollElement(container, _this.scrollSettings.step, drag_scroll_settings_1.ScrollDirection.Backwards, drag_scroll_settings_1.ScrollAxis.Horizontal);
+                }, _this.scrollSettings.interval);
+            }
+            else if (left > visibleBoundaries.right - _this.scrollSettings.threshold) {
+                _this.horizontalScrollInterval = setInterval(function () {
+                    return utils_2.scrollElement(container, _this.scrollSettings.step, drag_scroll_settings_1.ScrollDirection.Forward, drag_scroll_settings_1.ScrollAxis.Horizontal);
+                }, _this.scrollSettings.interval);
+            }
+        });
+    };
+    TimelineScrollableDirective.prototype.scrollVerticallyTo = function (top) {
+        var _this = this;
+        this.zone.runOutsideAngular(function () {
+            var container = _this.timelineScrollableContainer.nativeElement;
+            var visibleBoundaries = utils_2.getViewportBoundaries(container);
+            if (top < visibleBoundaries.top + _this.scrollSettings.threshold) {
+                _this.verticalScrollInterval = setInterval(function () {
+                    return utils_2.scrollElement(container, _this.scrollSettings.step, drag_scroll_settings_1.ScrollDirection.Backwards, drag_scroll_settings_1.ScrollAxis.Vertical);
+                }, _this.scrollSettings.interval);
+            }
+            else if (top > visibleBoundaries.bottom - _this.scrollSettings.threshold) {
+                _this.verticalScrollInterval = setInterval(function () {
+                    return utils_2.scrollElement(container, _this.scrollSettings.step, drag_scroll_settings_1.ScrollDirection.Forward, drag_scroll_settings_1.ScrollAxis.Vertical);
+                }, _this.scrollSettings.interval);
+            }
+        });
+    };
+    TimelineScrollableDirective.prototype.cancelScroll = function () {
+        if (utils_1.isPresent(this.verticalScrollInterval)) {
+            clearInterval(this.verticalScrollInterval);
+            this.verticalScrollInterval = null;
+        }
+        if (utils_1.isPresent(this.horizontalScrollInterval)) {
+            clearInterval(this.horizontalScrollInterval);
+            this.horizontalScrollInterval = null;
+        }
+    };
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], TimelineScrollableDirective.prototype, "scrollSettings", void 0);
+    TimelineScrollableDirective = tslib_1.__decorate([
+        core_1.Directive({
+            selector: '[kendoGanttTimelineScrollable]'
+        }),
+        tslib_1.__metadata("design:paramtypes", [core_1.ElementRef,
+            timeline_scroll_service_1.TimelineScrollService,
+            core_1.NgZone])
+    ], TimelineScrollableDirective);
+    return TimelineScrollableDirective;
+}());
+exports.TimelineScrollableDirective = TimelineScrollableDirective;

package/dist/npm/scrolling/timeline-scroll.service.js

@@ -0,0 +1,41 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var core_1 = require("@angular/core");
+var rxjs_1 = require("rxjs");
+/**
+ * @hidden
+ *
+ * Notifies the timeline-scroll.directive to scroll into view to requested coordinates.
+ * The scrolling is performed based on client (viewport) coordinates.
+ */
+var TimelineScrollService = /** @class */ (function () {
+    function TimelineScrollService() {
+        this.horizontalScroll = new rxjs_1.Subject();
+        this.verticalScroll = new rxjs_1.Subject();
+        this.scrollCancel = new rxjs_1.Subject();
+    }
+    TimelineScrollService.prototype.ngOnDestroy = function () {
+        this.horizontalScroll.complete();
+        this.verticalScroll.complete();
+        this.scrollCancel.complete();
+    };
+    TimelineScrollService.prototype.requestHorizontalScroll = function (clientTop) {
+        this.horizontalScroll.next(clientTop);
+    };
+    TimelineScrollService.prototype.requestVerticalScroll = function (clientLeft) {
+        this.verticalScroll.next(clientLeft);
+    };
+    TimelineScrollService.prototype.requestScrollCancel = function () {
+        this.scrollCancel.next();
+    };
+    TimelineScrollService = tslib_1.__decorate([
+        core_1.Injectable()
+    ], TimelineScrollService);
+    return TimelineScrollService;
+}());
+exports.TimelineScrollService = TimelineScrollService;