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

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)
@@ -103,6 +125,18 @@ var GanttTimelineComponent = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", Function)
     ], GanttTimelineComponent.prototype, "taskClass", 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", Boolean)
+    ], GanttTimelineComponent.prototype, "selectable", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Function)
@@ -110,15 +144,27 @@ var GanttTimelineComponent = /** @class */ (function () {
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Function)
-    ], GanttTimelineComponent.prototype, "hasChildren", void 0);
+    ], GanttTimelineComponent.prototype, "isExpanded", void 0);
     tslib_1.__decorate([
         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            <!-- tabindex=\"-1\" required for https://bugzilla.mozilla.org/show_bug.cgi?id=1069739 -->\n            <div\n                #timelineContent\n                class=\"k-grid-content\"\n                tabindex=\"-1\"\n                role=\"tree\"\n                aria-roledescription=\"Timeline\"\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                            [isExpanded]=\"isExpanded\"\n                            [selectable]=\"selectable\"\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,

package/dist/es/toolbar/toolbar.component.js

@@ -3,17 +3,16 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Component, Input } from '@angular/core';
-import { GanttComponent } from "../gantt.component";
-import { ScrollSyncService } from '../scrolling/scroll-sync.service';
+import { Component, Input, HostBinding } from '@angular/core';
+import { GanttComponent } from '../gantt.component';
 /**
  * @hidden
  */
 var ToolbarComponent = /** @class */ (function () {
-    function ToolbarComponent(gantt, scrollSyncService) {
+    function ToolbarComponent(gantt) {
         this.gantt = gantt;
-        this.scrollSyncService = scrollSyncService;
         this.context = {};
+        this.role = 'toolbar';
     }
     Object.defineProperty(ToolbarComponent.prototype, "position", {
         get: function () {
@@ -41,12 +40,13 @@ var ToolbarComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    ToolbarComponent.prototype.onViewChange = function (e) {
-        this.gantt.activeView = e; // TODO: may be load the timeline data directly in an activeView setter?
-        this.gantt.loadTimelineData();
-        this.gantt.activeViewChange.emit(e);
-        this.scrollSyncService.resetTimelineScrollLeft();
+    ToolbarComponent.prototype.handleViewChange = function (view) {
+        this.gantt.changeActiveView(view);
     };
+    tslib_1.__decorate([
+        HostBinding('attr.role'),
+        tslib_1.__metadata("design:type", String)
+    ], ToolbarComponent.prototype, "role", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Boolean)
@@ -63,10 +63,9 @@ var ToolbarComponent = /** @class */ (function () {
     ToolbarComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-gantt-toolbar',
-            template: "\n        <ng-container *ngIf=\"!renderTemplate\">\n            <kendo-gantt-add-task *ngIf=\"showAddTask\"></kendo-gantt-add-task>\n            <span class=\"k-spacer k-toolbar-spacer\"></span>\n            <kendo-gantt-view-selector\n                *ngIf=\"showViewSelector\"\n                [views]=\"gantt.viewTypes\"\n                [activeView]=\"gantt.activeView\"\n                (activeViewChange)=\"onViewChange($event)\"></kendo-gantt-view-selector>\n        </ng-container>\n        <ng-template\n            *ngIf=\"renderTemplate\"\n            [ngTemplateOutlet]=\"toolbarTemplateRef\"\n            [ngTemplateOutletContext]=\"context\"\n            >\n        </ng-template>\n    "
+            template: "\n        <ng-container *ngIf=\"!renderTemplate\">\n            <kendo-gantt-add-task *ngIf=\"showAddTask\"></kendo-gantt-add-task>\n            <span class=\"k-spacer k-toolbar-spacer\"></span>\n            <kendo-gantt-view-selector\n                *ngIf=\"showViewSelector\"\n                [views]=\"gantt.viewTypes\"\n                [activeView]=\"gantt.activeView\"\n                (activeViewChange)=\"handleViewChange($event)\"></kendo-gantt-view-selector>\n        </ng-container>\n        <ng-template\n            *ngIf=\"renderTemplate\"\n            [ngTemplateOutlet]=\"toolbarTemplateRef\"\n            [ngTemplateOutletContext]=\"context\"\n            >\n        </ng-template>\n    "
         }),
-        tslib_1.__metadata("design:paramtypes", [GanttComponent,
-            ScrollSyncService])
+        tslib_1.__metadata("design:paramtypes", [GanttComponent])
     ], ToolbarComponent);
     return ToolbarComponent;
 }());

package/dist/es/toolbar/view-selector.component.js

@@ -55,7 +55,7 @@ var ViewSelectorComponent = /** @class */ (function () {
     ViewSelectorComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-gantt-view-selector',
-            template: "\n        <select class=\"k-dropdown k-views-dropdown\"\n            [value]=\"activeView\"\n            (change)=\"activeViewChange.emit($event.target.value)\">\n            <option *ngFor=\"let view of views\" [value]=\"view\">{{getViewTypeText(view)}}</option>\n        </select>\n        <kendo-buttongroup class=\"k-gantt-views\" selection=\"single\">\n            <button *ngFor=\"let view of views\"\n                kendoButton\n                type=\"button\"\n                [selected]=\"view === activeView\"\n                (click)=\"onClick(view)\">{{getViewTypeText(view)}}</button>\n        </kendo-buttongroup>\n    "
+            template: "\n        <select\n            class=\"k-dropdownlist k-picker k-rounded-md k-views-dropdown\"\n            aria-label=\"View Selector\"\n            [value]=\"activeView\"\n            (change)=\"activeViewChange.emit($event.target.value)\">\n            <option *ngFor=\"let view of views\" [value]=\"view\">{{getViewTypeText(view)}}</option>\n        </select>\n        <kendo-buttongroup class=\"k-gantt-views\" selection=\"single\">\n            <button *ngFor=\"let view of views\"\n                kendoButton\n                type=\"button\"\n                [selected]=\"view === activeView\"\n                (click)=\"onClick(view)\">{{getViewTypeText(view)}}</button>\n        </kendo-buttongroup>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService])
     ], ViewSelectorComponent);

package/dist/es/utils.js

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { isDocumentAvailable, closestInScope, matchesClasses } from '@progress/kendo-angular-common';
 import { addDays, addWeeks, cloneDate, firstDayInWeek } from '@progress/kendo-date-math';
+import { DependencyType } from './models/dependency-type.enum';
 /**
  * @hidden
  */
@@ -110,24 +111,43 @@ export var isNumber = function (contender) { return typeof contender === 'number
  * @hidden
  */
 export var isString = function (contender) { return typeof contender === 'string'; };
+/**
+ * @hidden
+ *
+ * Gets the closest timeline task wrapper element from an event target.
+ * Restricts the search up to the provided parent element from the second param.
+ */
+export var getClosestTaskWrapper = function (element, parentScope) {
+    return closestInScope(element, matchesClasses('k-task-wrap'), parentScope);
+};
+/**
+ * @hidden
+ *
+ * Checks whether the queried item or its parent items has a `k-task-wrap` selector.
+ * Restricts the search up to the provided parent element from the second param.
+ */
+export var isTaskWrapper = function (contender, parentScope) {
+    var taskWrapper = closestInScope(contender, matchesClasses('k-task-wrap'), parentScope);
+    return isPresent(taskWrapper);
+};
 /**
  * @hidden
  *
  * Gets the closest timeline task element from an event target.
- * Restricts the search up to the provided gantt element from the second param.
+ * Restricts the search up to the provided parent element from the second param.
  */
-export var getClosestTask = function (element, gantt) {
-    return closestInScope(element, matchesClasses('k-task'), gantt);
+export var getClosestTask = function (element, parentScope) {
+    return closestInScope(element, matchesClasses('k-task'), parentScope);
 };
 /**
  * @hidden
  *
  * Gets the closest timeline task element index from an event target.
  * Uses the `data-task-index` attribute assigned to each task.
- * Restricts the search up to the provided gantt element from the second param.
+ * Restricts the search up to the provided parent element from the second param.
  */
-export var getClosestTaskIndex = function (element, gantt) {
-    var task = closestInScope(element, matchesClasses('k-task'), gantt);
+export var getClosestTaskIndex = function (element, parentScope) {
+    var task = closestInScope(element, matchesClasses('k-task-wrap'), parentScope);
     if (!isPresent(task)) {
         return null;
     }
@@ -137,19 +157,140 @@ export var getClosestTaskIndex = function (element, gantt) {
  * @hidden
  *
  * Checks whether the queried item or its parent items has a `k-task` selector.
- * Restricts the search up to the provided gantt element from the second param.
+ * Restricts the search up to the provided parent element from the second param.
  */
-export var isTask = function (contender, gantt) {
-    var task = closestInScope(contender, matchesClasses('k-task'), gantt);
+export var isTask = function (contender, parentScope) {
+    var task = closestInScope(contender, matchesClasses('k-task'), parentScope);
     return isPresent(task);
 };
+/**
+ * @hidden
+ *
+ * Checks whether the queried item or its parent items has a `k-toolbar` selector.
+ * Restricts the search up to the provided parent element from the second param.
+ */
+export var isToolbar = function (contender, parentScope) {
+    var toolbar = closestInScope(contender, matchesClasses('k-gantt-toolbar'), parentScope);
+    return isPresent(toolbar);
+};
 /**
  * @hidden
  *
  * Checks whether the queried item or its parent items has a `k-task-actions` selector - used for the clear button.
- * Restricts the search up to the provided gantt element from the second param.
+ * Restricts the search up to the provided parent element from the second param.
  */
-export var isClearButton = function (contender, gantt) {
-    var clearButtonContainer = closestInScope(contender, matchesClasses('k-task-actions'), gantt);
+export var isClearButton = function (contender, parentScope) {
+    var clearButtonContainer = closestInScope(contender, matchesClasses('k-task-actions'), parentScope);
     return isPresent(clearButtonContainer);
 };
+/**
+ * @hidden
+ *
+ * Checks whether the queried item has a `k-task-dot` selector - used for the dependency drag clues.
+ */
+export var isDependencyDragClue = function (element) {
+    if (!isPresent(element)) {
+        return false;
+    }
+    return element.classList.contains('k-task-dot');
+};
+/**
+ * @hidden
+ *
+ * Checks whether the queried item has a `k-task-dot` & `k-task-start` selector - used for the dependency drag start clues.
+ */
+export var isDependencyDragStartClue = function (element) {
+    if (!isPresent(element)) {
+        return false;
+    }
+    return element.classList.contains('k-task-dot') && element.classList.contains('k-task-start');
+};
+/**
+ * @hidden
+ *
+ * Gets the `DependencyType` for an attempted dependency create from the provided two elements.
+ * The two linked drag clue HTML elements are used to extract this data (via their CSS classes).
+ */
+export var getDependencyTypeFromTargetTasks = function (fromTaskClue, toTaskClue) {
+    if (!isDependencyDragClue(fromTaskClue) || !isDependencyDragClue(toTaskClue)) {
+        return null;
+    }
+    var fromTaskType = isDependencyDragStartClue(fromTaskClue) ? 'S' : 'F';
+    var toTaskType = isDependencyDragStartClue(toTaskClue) ? 'S' : 'F';
+    var dependencyTypeName = "" + fromTaskType + toTaskType;
+    switch (dependencyTypeName) {
+        case 'FF': return DependencyType.FF;
+        case 'FS': return DependencyType.FS;
+        case 'SF': return DependencyType.SF;
+        case 'SS': return DependencyType.SS;
+        default: return null;
+    }
+};
+/**
+ * @hidden
+ *
+ * Checks whether the two provided drag clues belong to the same task element.
+ */
+export var sameTaskClues = function (fromTaskClue, toTaskClue, parentScope) {
+    if (!isPresent(fromTaskClue) || !isPresent(toTaskClue)) {
+        return false;
+    }
+    var fromTaskWrapper = getClosestTaskWrapper(fromTaskClue, parentScope);
+    var toTaskWrapper = getClosestTaskWrapper(toTaskClue, parentScope);
+    return fromTaskWrapper === toTaskWrapper;
+};
+/**
+ * @hidden
+ *
+ * Fits a contender number between a min and max range.
+ * If the contender is below the min value, the min value is returned.
+ * If the contender is above the max value, the max value is returned.
+ */
+export var fitToRange = function (contender, min, max) {
+    if (!isPresent(contender) || contender < min) {
+        return min;
+    }
+    else if (contender > max) {
+        return max;
+    }
+    else {
+        return contender;
+    }
+};
+/**
+ * @hidden
+ *
+ * Checks whether either of the two provided tasks is a parent of the other.
+ */
+export var areParentChild = function (taskA, taskB) {
+    var parentChildRelationship = false;
+    var taskAParent = taskA;
+    while (isPresent(taskAParent) && isPresent(taskAParent.data)) {
+        if (taskAParent.data === taskB.data) {
+            parentChildRelationship = true;
+            break;
+        }
+        taskAParent = taskAParent.parent;
+    }
+    var taskBParent = taskB;
+    while (!parentChildRelationship && isPresent(taskBParent) && isPresent(taskBParent.data)) {
+        if (taskBParent.data === taskA.data) {
+            parentChildRelationship = true;
+            break;
+        }
+        taskBParent = taskBParent.parent;
+    }
+    return parentChildRelationship;
+};
+/**
+ * @hidden
+ *
+ * Extracts an element from the provided client coords.
+ * Using the `event.target` is not reliable under mobile devices with the current implementation of the draggable, so use this instead.
+ */
+export var elementFromPoint = function (clientX, clientY) {
+    if (!isDocumentAvailable()) {
+        return null;
+    }
+    return document.elementFromPoint(clientX, clientY);
+};

package/dist/es2015/common/touch-enabled.d.ts

@@ -0,0 +1,9 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { InjectionToken } from '@angular/core';
+/**
+ * @hidden
+ */
+export declare const TOUCH_ENABLED: InjectionToken<boolean>;

package/dist/es2015/common/touch-enabled.js

@@ -0,0 +1,9 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { InjectionToken } from '@angular/core';
+/**
+ * @hidden
+ */
+export const TOUCH_ENABLED = new InjectionToken('gantt-touch-enabled');

package/dist/es2015/dependencies/utils.d.ts

@@ -36,3 +36,18 @@ export declare const getElementRect: (element: HTMLElement, relativeContainer: H
  * @hidden
  */
 export declare const dependencyCoordinates: (from: Rectangle, to: Rectangle, rowHeight: number, type: DependencyType, minDistanceBeforeTurn: number, arrowSize: number) => Position[];
+/**
+ * @hidden
+ *
+ * Translates the provided client `left` and `top` coords to coords relative to the provided container.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_View/Coordinate_systems#standard_cssom_coordinate_systems
+ */
+export declare const clientToOffsetCoords: (clientLeft: number, clientTop: number, offsetContainer: Element) => Position;
+/**
+ * @hidden
+ *
+ * Retrieves the `left` and `top` values of the center of the provided element.
+ * The retrieved values are relative to the current viewport (client values).
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_View/Coordinate_systems#standard_cssom_coordinate_systems
+ */
+export declare const getElementClientCenterCoords: (element: Element) => Position;

package/dist/es2015/dependencies/utils.js

@@ -13,6 +13,9 @@ export const getOffsetRelativeToParent = (element, targetParent) => {
         top: 0,
         left: 0
     };
+    if (!targetParent.contains(element)) {
+        return offset;
+    }
     let offsetParent = element;
     while (offsetParent && offsetParent !== targetParent) {
         offset.top += offsetParent.offsetTop;
@@ -162,4 +165,35 @@ const getArrowEast = (top, left, arrowSize) => {
     return points;
 };
 const ɵ2 = getArrowEast;
+/**
+ * @hidden
+ *
+ * Translates the provided client `left` and `top` coords to coords relative to the provided container.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_View/Coordinate_systems#standard_cssom_coordinate_systems
+ */
+export const clientToOffsetCoords = (clientLeft, clientTop, offsetContainer) => {
+    // client (viewport) coordinates of the target container
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#value
+    const offsetContainerClientRect = offsetContainer.getBoundingClientRect();
+    return {
+        left: clientLeft - offsetContainerClientRect.left + offsetContainer.scrollLeft,
+        top: clientTop - offsetContainerClientRect.top + offsetContainer.scrollTop
+    };
+};
+/**
+ * @hidden
+ *
+ * Retrieves the `left` and `top` values of the center of the provided element.
+ * The retrieved values are relative to the current viewport (client values).
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_View/Coordinate_systems#standard_cssom_coordinate_systems
+ */
+export const getElementClientCenterCoords = (element) => {
+    // client (viewport) coordinates of the targeted element
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#value
+    const { left, top, width, height } = element.getBoundingClientRect();
+    return {
+        left: left + (width / 2),
+        top: top + (height / 2)
+    };
+};
 export { ɵ0, ɵ1, ɵ2 };

package/dist/es2015/dragging/dependency-drag-create.directive.d.ts

@@ -0,0 +1,72 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { AfterViewInit, NgZone, OnDestroy, Renderer2 } from '@angular/core';
+import { PopupService } from '@progress/kendo-angular-popup';
+import { GanttComponent } from '../gantt.component';
+import { MappingService } from '../common/mapping.service';
+import { TimelineScrollService } from '../scrolling/timeline-scroll.service';
+/**
+ * A directive which enables the creation of new dependencies via dragging.
+ */
+export declare class DependencyDragCreateDirective implements AfterViewInit, OnDestroy {
+    private gantt;
+    private zone;
+    private renderer;
+    private mapper;
+    private popupService;
+    private timelineScrollService;
+    /**
+     * Specifies whether the validation tooltip will be displayed during drag operations.
+     *
+     * @default true
+     */
+    displayValidationTooltip: boolean;
+    private readonly container;
+    private readonly polyline;
+    private readonly popupContainer;
+    /**
+     * Points to the drag clue where the dragging started (the FROM task).
+     * Used to attach/detach classes to the target element and its task wrapper parent element.
+     */
+    private fromTaskClue;
+    /**
+     * The drag start element coords will be the same through the enitre dragging session, so compute them on press and cache them.
+     */
+    private polylineStartCoords;
+    /**
+     * Stored during dragging to be consumed by the container scroll subscription.
+     * The scroll event doesn't expose the current pointer position, so it has to be stored separately.
+     */
+    private currentPointerClientCoords;
+    private scrollListenerDisposer;
+    private dragPopup;
+    private dragSubscriptions;
+    constructor(gantt: GanttComponent, zone: NgZone, renderer: Renderer2, mapper: MappingService, popupService: PopupService, timelineScrollService: TimelineScrollService);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private subscribeDraggable;
+    private unsubscribeDraggable;
+    private handlePress;
+    private handleDrag;
+    private handleRelease;
+    private updatePolyline;
+    private clearPolyline;
+    private assignDragStartClasses;
+    private removeDragStartClasses;
+    private scrollPointIntoView;
+    private cancelScroll;
+    private addScrollListener;
+    private removeScrollListener;
+    private openDragPopup;
+    private updateDragPopup;
+    private closeDragPopup;
+    private extractTaskName;
+    private getTooltipContext;
+    /**
+     * Restricts the popup position to not go below the scroll height or width of the container.
+     * Flips the position of the popup when there's not enough vertical space in the visible part of the container to render the popup.
+     */
+    private normalizePopupPosition;
+}