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

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

@@ -51,23 +51,6 @@ var GanttTaskBase = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    GanttTaskBase.prototype.ngOnChanges = function (changes) {
-        if (isPresent(changes.dataItem)) {
-            if (isPresent(changes.dataItem.previousValue)) {
-                this.dependencyDomService.unregisterTask(changes.dataItem.previousValue);
-            }
-            this.dependencyDomService.registerTask(this.dataItem, this.taskElement.nativeElement);
-        }
-        else if (isPresent(changes.activeView)) {
-            this.dependencyDomService.notifyChanges();
-        }
-    };
-    GanttTaskBase.prototype.ngOnDestroy = function () {
-        if (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');
@@ -79,6 +62,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;
@@ -97,6 +86,23 @@ var GanttTaskBase = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    GanttTaskBase.prototype.ngOnChanges = function (changes) {
+        if (isPresent(changes.dataItem)) {
+            if (isPresent(changes.dataItem.previousValue)) {
+                this.dependencyDomService.unregisterTask(changes.dataItem.previousValue);
+            }
+            this.dependencyDomService.registerTask(this.dataItem, this.taskElement.nativeElement);
+        }
+        else if (isPresent(changes.activeView)) {
+            this.dependencyDomService.notifyChanges();
+        }
+    };
+    GanttTaskBase.prototype.ngOnDestroy = function () {
+        if (isPresent(this.dataItem)) {
+            this.dependencyDomService.unregisterTask(this.dataItem);
+        }
+        this.viewChangesSubscription.unsubscribe();
+    };
     tslib_1.__decorate([
         HostBinding('class.k-task-wrap'),
         tslib_1.__metadata("design:type", Boolean)
@@ -111,8 +117,8 @@ var GanttTaskBase = /** @class */ (function () {
     ], GanttTaskBase.prototype, "dataItem", void 0);
     tslib_1.__decorate([
         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([
         Input(),
         tslib_1.__metadata("design:type", Function)
@@ -125,6 +131,11 @@ var GanttTaskBase = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", Function)
     ], GanttTaskBase.prototype, "taskClass", void 0);
+    tslib_1.__decorate([
+        HostBinding('style.left.px'),
+        tslib_1.__metadata("design:type", Number),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], GanttTaskBase.prototype, "taskOffset", null);
     return GanttTaskBase;
 }());
 export { GanttTaskBase };

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

@@ -3,8 +3,9 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { ChangeDetectorRef, Component, forwardRef, Input, TemplateRef } from '@angular/core';
+import { ChangeDetectorRef, Component, forwardRef, Inject, Input, TemplateRef } from '@angular/core';
 import { MappingService } from '../common/mapping.service';
+import { TOUCH_ENABLED } from '../common/touch-enabled';
 import { DependencyDomService } from '../dependencies/dependency-dom.service';
 import { OptionChangesService } from '../common/option-changes.service';
 import { TimelineViewService } from './../timeline/timeline-view.service';
@@ -15,9 +16,10 @@ import { EditService } from '../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;
@@ -43,14 +45,14 @@ var GanttTaskComponent = /** @class */ (function (_super) {
                     useExisting: 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", [MappingService,
+        tslib_1.__param(1, Inject(TOUCH_ENABLED)),
+        tslib_1.__metadata("design:paramtypes", [EditService, Boolean, MappingService,
             TimelineViewService,
             DependencyDomService,
             OptionChangesService,
-            ChangeDetectorRef,
-            EditService])
+            ChangeDetectorRef])
     ], GanttTaskComponent);
     return GanttTaskComponent;
 }(GanttTaskBase));

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

@@ -67,10 +67,14 @@ var GanttTasksTableBodyComponent = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", Function)
     ], GanttTasksTableBodyComponent.prototype, "isTaskSelected", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], GanttTasksTableBodyComponent.prototype, "renderDependencyDragClues", void 0);
     GanttTasksTableBodyComponent = tslib_1.__decorate([
         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", [DependencyDomService,
             MappingService])

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

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

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

@@ -0,0 +1,89 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, ElementRef, Input, NgZone } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { isPresent } from '../utils';
+import { ScrollAxis, ScrollDirection } from './drag-scroll-settings';
+import { TimelineScrollService } from './timeline-scroll.service';
+import { getViewportBoundaries, scrollElement } from './utils';
+/**
+ * @hidden
+ */
+var TimelineScrollableDirective = /** @class */ (function () {
+    function TimelineScrollableDirective(timelineScrollableContainer, scrollService, zone) {
+        this.timelineScrollableContainer = timelineScrollableContainer;
+        this.scrollService = scrollService;
+        this.zone = zone;
+        this.subscriptions = new 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 = getViewportBoundaries(container);
+            if (left < visibleBoundaries.left + _this.scrollSettings.threshold) {
+                _this.horizontalScrollInterval = setInterval(function () {
+                    return scrollElement(container, _this.scrollSettings.step, ScrollDirection.Backwards, ScrollAxis.Horizontal);
+                }, _this.scrollSettings.interval);
+            }
+            else if (left > visibleBoundaries.right - _this.scrollSettings.threshold) {
+                _this.horizontalScrollInterval = setInterval(function () {
+                    return scrollElement(container, _this.scrollSettings.step, ScrollDirection.Forward, ScrollAxis.Horizontal);
+                }, _this.scrollSettings.interval);
+            }
+        });
+    };
+    TimelineScrollableDirective.prototype.scrollVerticallyTo = function (top) {
+        var _this = this;
+        this.zone.runOutsideAngular(function () {
+            var container = _this.timelineScrollableContainer.nativeElement;
+            var visibleBoundaries = getViewportBoundaries(container);
+            if (top < visibleBoundaries.top + _this.scrollSettings.threshold) {
+                _this.verticalScrollInterval = setInterval(function () {
+                    return scrollElement(container, _this.scrollSettings.step, ScrollDirection.Backwards, ScrollAxis.Vertical);
+                }, _this.scrollSettings.interval);
+            }
+            else if (top > visibleBoundaries.bottom - _this.scrollSettings.threshold) {
+                _this.verticalScrollInterval = setInterval(function () {
+                    return scrollElement(container, _this.scrollSettings.step, ScrollDirection.Forward, ScrollAxis.Vertical);
+                }, _this.scrollSettings.interval);
+            }
+        });
+    };
+    TimelineScrollableDirective.prototype.cancelScroll = function () {
+        if (isPresent(this.verticalScrollInterval)) {
+            clearInterval(this.verticalScrollInterval);
+            this.verticalScrollInterval = null;
+        }
+        if (isPresent(this.horizontalScrollInterval)) {
+            clearInterval(this.horizontalScrollInterval);
+            this.horizontalScrollInterval = null;
+        }
+    };
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], TimelineScrollableDirective.prototype, "scrollSettings", void 0);
+    TimelineScrollableDirective = tslib_1.__decorate([
+        Directive({
+            selector: '[kendoGanttTimelineScrollable]'
+        }),
+        tslib_1.__metadata("design:paramtypes", [ElementRef,
+            TimelineScrollService,
+            NgZone])
+    ], TimelineScrollableDirective);
+    return TimelineScrollableDirective;
+}());
+export { TimelineScrollableDirective };

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

@@ -0,0 +1,39 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Injectable } from '@angular/core';
+import { Subject } from '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 Subject();
+        this.verticalScroll = new Subject();
+        this.scrollCancel = new 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([
+        Injectable()
+    ], TimelineScrollService);
+    return TimelineScrollService;
+}());
+export { TimelineScrollService };

package/dist/es/scrolling/utils.js

@@ -0,0 +1,80 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import { ScrollAxis, ScrollDirection } from './drag-scroll-settings';
+import { isPresent } from '../utils';
+/**
+ * @hidden
+ *
+ * Checks if the beginning of the scrollable element is reached (top/left).
+ * Floors the top value.
+ */
+var isUpperLimitReached = function (element, axis) { return Math.floor(element[axis]) <= 0; };
+var ɵ0 = isUpperLimitReached;
+/**
+ * @hidden
+ *
+ * Checks if the end of the scrollable element is reached (bottom/right).
+ * Ceils the top value.
+ */
+var isBottomLimitReached = function (element, axis) {
+    var elementSize = axis === ScrollAxis.Horizontal ?
+        element.scrollWidth - element.clientWidth :
+        element.scrollHeight - element.clientHeight;
+    return Math.ceil(element[axis]) >= elementSize;
+};
+var ɵ1 = isBottomLimitReached;
+/**
+ * @hidden
+ *
+ * Scrolls the element in the given direction by the provided step in the provided scroll axis.
+ *
+ * If the targeted scroll incrementation doesn't yield any result due to device pixel ratio issues (https://github.com/dimitar-pechev/RenderingIndependentScrollOffsets#readme),
+ * increments the step with 1px and again attempts to change the scrollTop of the element, until the content is actually scrolled.
+ *
+ * Cuts the operation short after 20 unsuccessful attempts to prevent infinite loops in possible corner-case scenarios.
+ */
+export var scrollElement = function (element, step, direction, scrollAxis) {
+    if (!(isPresent(element) && isDocumentAvailable())) {
+        return;
+    }
+    var initialScrollPosition = element[scrollAxis];
+    var currentStep = step;
+    var iterations = 0;
+    while (initialScrollPosition === element[scrollAxis] &&
+        !(direction === ScrollDirection.Backwards && isUpperLimitReached(element, scrollAxis)) &&
+        !(direction === ScrollDirection.Forward && isBottomLimitReached(element, scrollAxis)) &&
+        iterations < 20 // cut the operation short in 20 attempts - in case of a wild corner case
+    ) {
+        element[scrollAxis] += (currentStep * direction);
+        // try with a larger step if the current one doesn't update the scroll position successfully
+        currentStep += 1;
+        iterations += 1;
+    }
+};
+/**
+ * @hidden
+ *
+ * As client coordinates are not restricted to the range 0px - {viewportSize}px, but can have negative starting values or ending values greater than the viewport size,
+ * this function extracts the visible boundaries of the provided element - fall-backing to 0 when the top/left are below 0,
+ * and fall-backing to the actual visible size of the container for bottom/right.
+ */
+export var getViewportBoundaries = function (element) {
+    var elementRect = element.getBoundingClientRect();
+    // if the beginning of the scrollable container is above/before the current viewport, fall-back to 0
+    var topLimit = Math.max(elementRect.top, 0);
+    var leftLimit = Math.max(elementRect.left, 0);
+    // if the end of the scrollable container is beneath/after the current viewport, fall-back to its client height
+    // add the distance from the start of the viewport to the beginning of the container to ensure scrolling bottom begins when the actual end of the container is reached
+    var bottomLimit = topLimit + Math.min(elementRect.bottom, element.clientHeight);
+    var rightLimit = leftLimit + Math.min(elementRect.right, element.clientWidth);
+    return {
+        top: topLimit,
+        bottom: bottomLimit,
+        left: leftLimit,
+        right: rightLimit
+    };
+};
+export { ɵ0, ɵ1 };

package/dist/es/timeline/gantt-timeline.component.js

@@ -3,13 +3,13 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Component, ElementRef, HostBinding, Input, NgZone, Renderer2, TemplateRef, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { filter, map, switchMap, take } from 'rxjs/operators';
+import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { ScrollSyncService } from '../scrolling/scroll-sync.service';
 import { DependencyDomService } from '../dependencies/dependency-dom.service';
 import { isPresent } from '../utils';
-import { isDocumentAvailable } from '@progress/kendo-angular-common';
 /**
  * @hidden
  */
@@ -22,6 +22,10 @@ var GanttTimelineComponent = /** @class */ (function () {
         this.zone = zone;
         this.hostClass = true;
         this.dependencies = [];
+        // as all drag-and-drop operations are on the timeline container, use a single draggable instance
+        this.timelineContainerPress = new EventEmitter();
+        this.timelineContainerDrag = new EventEmitter();
+        this.timelineContainerRelease = new EventEmitter();
         this.subscriptions = new Subscription();
         this.subscriptions.add(
         // task changes indicates change in row content, number, height, etc.
@@ -34,6 +38,16 @@ var GanttTimelineComponent = /** @class */ (function () {
             _this.renderer.setStyle(_this.timelineColumns.nativeElement, 'height', (_this.rows || []).length * timelineRowHeight + "px");
         }));
     }
+    Object.defineProperty(GanttTimelineComponent.prototype, "draggableEnabled", {
+        /**
+         * Specifies whether the draggable will attach or detach its pointer event listeners.
+         */
+        get: function () {
+            return this.renderDependencyDragClues;
+        },
+        enumerable: true,
+        configurable: true
+    });
     GanttTimelineComponent.prototype.ngAfterViewInit = function () {
         var timelineHeader = this.timelineHeaderWrap.nativeElement;
         var rightContainer = this.timelineContent.nativeElement;
@@ -63,6 +77,14 @@ var GanttTimelineComponent = /** @class */ (function () {
         ViewChild('tasksContainer', { static: true }),
         tslib_1.__metadata("design:type", ElementRef)
     ], GanttTimelineComponent.prototype, "tasksContainer", void 0);
+    tslib_1.__decorate([
+        ViewChild('dragPopupContainer', { static: false, read: ViewContainerRef }),
+        tslib_1.__metadata("design:type", ViewContainerRef)
+    ], GanttTimelineComponent.prototype, "dragPopupContainer", void 0);
+    tslib_1.__decorate([
+        ViewChild('dependencyDragCreatePolyline', { static: false }),
+        tslib_1.__metadata("design:type", ElementRef)
+    ], GanttTimelineComponent.prototype, "dependencyDragCreatePolyline", void 0);
     tslib_1.__decorate([
         HostBinding('class.k-gantt-timeline'),
         tslib_1.__metadata("design:type", Boolean)
@@ -107,6 +129,14 @@ var GanttTimelineComponent = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", Function)
     ], GanttTimelineComponent.prototype, "isTaskSelected", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], GanttTimelineComponent.prototype, "renderDependencyDragClues", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], GanttTimelineComponent.prototype, "dragScrollSettings", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Function)
@@ -115,10 +145,22 @@ var GanttTimelineComponent = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", Array)
     ], GanttTimelineComponent.prototype, "dependencies", void 0);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], GanttTimelineComponent.prototype, "timelineContainerPress", void 0);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], GanttTimelineComponent.prototype, "timelineContainerDrag", void 0);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], GanttTimelineComponent.prototype, "timelineContainerRelease", void 0);
     GanttTimelineComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-gantt-timeline',
-            template: "\n        <div class=\"k-timeline k-grid k-widget\">\n            <div class=\"k-grid-header\">\n                <div #timelineHeaderWrap class=\"k-grid-header-wrap\">\n                    <table\n                        role=\"presentation\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <tbody\n                            kendoGanttHeaderTableBody\n                            [groupSlots]=\"groupSlots\"\n                            [slots]=\"slots\">\n                        </tbody>\n                    </table>\n                </div>\n            </div>\n            <div #timelineContent class=\"k-grid-content\">\n                <div class=\"k-gantt-tables\">\n                    <table\n                        class=\"k-gantt-rows\"\n                        [style.width.px]=\"tableWidth\"\n                        role=\"presentation\"\n                    >\n                        <tbody>\n                            <tr *ngFor=\"let item of rows; let i = index;\"\n                                [class.k-alt]=\"i % 2\"\n                            >\n                                <td></td>\n                            </tr>\n                        </tbody>\n                    </table>\n\n                    <table\n                        #timelineColumns\n                        class=\"k-gantt-columns\"\n                        role=\"presentation\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <colgroup>\n                            <col *ngFor=\"let item of slots\">\n                        </colgroup>\n\n                        <tbody>\n                            <tr>\n                                <td *ngFor=\"let item of slots\"\n                                    [class.k-nonwork-hour]=\"isNonWorking(item)\"\n                                >\n                                </td>\n                            </tr>\n                        </tbody>\n                    </table>\n\n                    <table\n                        #tasksContainer\n                        class=\"k-gantt-tasks\"\n                        role=\"presentation\"\n                        style=\"border-collapse: collapse;\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <tbody\n                            kendoGanttTasksTableBody\n                            [rows]=\"rows\"\n                            [activeView]=\"activeView\"\n                            [taskContentTemplate]=\"taskContentTemplate\"\n                            [taskTemplate]=\"taskTemplate\"\n                            [summaryTaskTemplate]=\"summaryTaskTemplate\"\n                            [taskClass]=\"taskClass\"\n                            [hasChildren]=\"hasChildren\"\n                            [isTaskSelected]=\"isTaskSelected\"\n                        >\n                        </tbody>\n                    </table>\n                </div>\n                <svg class=\"k-gantt-dependencies-svg\">\n                    <polyline\n                        *ngFor=\"let dependency of dependencies\"\n                        kendoGanttDependency\n                        [dependency]=\"dependency\"\n                    />\n                </svg>\n            </div>\n        </div>\n    "
+            template: "\n        <div class=\"k-timeline k-grid k-widget\">\n            <div class=\"k-grid-header\">\n                <div #timelineHeaderWrap class=\"k-grid-header-wrap\">\n                    <table\n                        role=\"presentation\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <tbody\n                            kendoGanttHeaderTableBody\n                            [groupSlots]=\"groupSlots\"\n                            [slots]=\"slots\">\n                        </tbody>\n                    </table>\n                </div>\n            </div>\n            <div\n                #timelineContent\n                class=\"k-grid-content\"\n                kendoGanttTimelineScrollable\n                [scrollSettings]=\"dragScrollSettings\"\n                kendoDraggable\n                [enableDrag]=\"draggableEnabled\"\n                (kendoPress)=\"timelineContainerPress.emit($event)\"\n                (kendoDrag)=\"timelineContainerDrag.emit($event)\"\n                (kendoRelease)=\"timelineContainerRelease.emit($event)\"\n            >\n                <div class=\"k-gantt-tables\">\n                    <table\n                        class=\"k-gantt-rows\"\n                        [style.width.px]=\"tableWidth\"\n                        role=\"presentation\"\n                    >\n                        <tbody>\n                            <tr *ngFor=\"let item of rows; let i = index;\"\n                                [class.k-alt]=\"i % 2\"\n                            >\n                                <td></td>\n                            </tr>\n                        </tbody>\n                    </table>\n\n                    <table\n                        #timelineColumns\n                        class=\"k-gantt-columns\"\n                        role=\"presentation\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <colgroup>\n                            <col *ngFor=\"let item of slots\">\n                        </colgroup>\n\n                        <tbody>\n                            <tr>\n                                <td *ngFor=\"let item of slots\"\n                                    [class.k-nonwork-hour]=\"isNonWorking(item)\"\n                                >\n                                </td>\n                            </tr>\n                        </tbody>\n                    </table>\n\n                    <table\n                        #tasksContainer\n                        class=\"k-gantt-tasks\"\n                        role=\"presentation\"\n                        style=\"border-collapse: collapse;\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <tbody\n                            kendoGanttTasksTableBody\n                            [rows]=\"rows\"\n                            [activeView]=\"activeView\"\n                            [taskContentTemplate]=\"taskContentTemplate\"\n                            [taskTemplate]=\"taskTemplate\"\n                            [summaryTaskTemplate]=\"summaryTaskTemplate\"\n                            [taskClass]=\"taskClass\"\n                            [hasChildren]=\"hasChildren\"\n                            [isTaskSelected]=\"isTaskSelected\"\n                            [renderDependencyDragClues]=\"renderDependencyDragClues\"\n                        >\n                        </tbody>\n                    </table>\n                </div>\n                <svg class=\"k-gantt-dependencies-svg\">\n                    <polyline\n                        *ngFor=\"let dependency of dependencies\"\n                        kendoGanttDependency\n                        [dependency]=\"dependency\"\n                    />\n                    <polyline #dependencyDragCreatePolyline />\n                </svg>\n\n                <!-- placeholder for the dependency drag popup; its position is not arbitrary - the popup is intended to be absolutely positioned inside the .k-grid-content element -->\n                <ng-container #dragPopupContainer></ng-container>\n            </div>\n        </div>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [ScrollSyncService,
             DependencyDomService,