@progress/kendo-angular-gantt 0.2.1-dev.202112101349 → 0.3.0-dev.202201190830

package/dist/es/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 var TOUCH_ENABLED = new InjectionToken('gantt-touch-enabled');

package/dist/es/dependencies/utils.js

@@ -2,6 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { DependencyType } from '../models/dependency-type.enum';
 /**
  * @hidden
  *
@@ -12,6 +13,9 @@ export var getOffsetRelativeToParent = function (element, targetParent) {
         top: 0,
         left: 0
     };
+    if (!targetParent.contains(element)) {
+        return offset;
+    }
     var offsetParent = element;
     while (offsetParent && offsetParent !== targetParent) {
         offset.top += offsetParent.offsetTop;
@@ -45,9 +49,9 @@ export var dependencyCoordinates = function (from, to, rowHeight, type, minDista
               |       |
         [[[]]]-       -[[[]]]
      */
-    if (type === 0 /* FF */ || type === 3 /* SS */) {
+    if (type === DependencyType.FF || type === DependencyType.SS) {
         // polyline start from first task
-        var dir = type === 3 /* SS */ ? 'left' : 'right';
+        var dir = type === DependencyType.SS ? 'left' : 'right';
         top = from.top;
         left = from[dir];
         points.push({ top: top, left: left });
@@ -73,9 +77,9 @@ export var dependencyCoordinates = function (from, to, rowHeight, type, minDista
                                     |
                                     -[[[]]]
         */
-        var startDir = type === 2 /* SF */ ? 'left' : 'right';
-        var endDir = type === 2 /* SF */ ? 'right' : 'left';
-        var additionalTurn = type === 2 /* SF */
+        var startDir = type === DependencyType.SF ? 'left' : 'right';
+        var endDir = type === DependencyType.SF ? 'right' : 'left';
+        var additionalTurn = type === DependencyType.SF
             ? from[startDir] - minDistanceBeforeTurn * 2 < to[endDir]
             : from[startDir] + minDistanceBeforeTurn * 2 > to[endDir];
         // polyline start from first task
@@ -161,4 +165,35 @@ var getArrowEast = function (top, left, arrowSize) {
     return points;
 };
 var ɵ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 var clientToOffsetCoords = function (clientLeft, clientTop, offsetContainer) {
+    // client (viewport) coordinates of the target container
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#value
+    var 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 var getElementClientCenterCoords = function (element) {
+    // client (viewport) coordinates of the targeted element
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#value
+    var _a = element.getBoundingClientRect(), left = _a.left, top = _a.top, width = _a.width, height = _a.height;
+    return {
+        left: left + (width / 2),
+        top: top + (height / 2)
+    };
+};
 export { ɵ0, ɵ1, ɵ2 };

package/dist/es/dragging/dependency-drag-create.directive.js

@@ -0,0 +1,347 @@
+/**-----------------------------------------------------------------------------------------
+* 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, Input, NgZone, Renderer2 } from '@angular/core';
+import { isDocumentAvailable } from '@progress/kendo-angular-common';
+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';
+import { DragValidationTooltipComponent } from './drag-validation-tooltip.component';
+import { clientToOffsetCoords, getElementClientCenterCoords } from '../dependencies/utils';
+import { isPresent, isDependencyDragClue, getClosestTaskWrapper, getDependencyTypeFromTargetTasks, getClosestTaskIndex, sameTaskClues, isTaskWrapper, fitToRange } from '../utils';
+import { elementFromPoint } from '../utils';
+/**
+ * When added to the .k-task-dot, the element will be kept with hover styles.
+ * Used for the drag clue from which the dragging has started.
+ */
+var DRAG_CLUE_HOVER_CLASS = 'k-state-hover';
+/**
+ * Add the selection disabling class to the enitre container.
+ * Otherwise existing selection on a given task text prevents dragging the clue even if the clue has `user-select: none` styles.
+ */
+var USER_SELECT_NONE_CLASS = 'k-user-select-none';
+/**
+ * When added to the .k-task-wrap, the containing .k-task-dot elements will be kept visible even when not hovered.
+ * Used for the drag clue from which the dragging has started.
+ */
+var TASK_WRAPPER_DRAG_CLASS = 'k-origin';
+/**
+ * Use 20px margin between the pointer and the popup.
+ * Could be made user-configurable if there's demand.
+ */
+var DEFAULT_POPUP_VERTICAL_MARGIN = 20;
+/**
+ * A directive which enables the creation of new dependencies via dragging.
+ */
+var DependencyDragCreateDirective = /** @class */ (function () {
+    function DependencyDragCreateDirective(gantt, zone, renderer, mapper, popupService, timelineScrollService) {
+        this.gantt = gantt;
+        this.zone = zone;
+        this.renderer = renderer;
+        this.mapper = mapper;
+        this.popupService = popupService;
+        this.timelineScrollService = timelineScrollService;
+        /**
+         * Specifies whether the validation tooltip will be displayed during drag operations.
+         *
+         * @default true
+         */
+        this.displayValidationTooltip = true;
+        this.gantt.renderDependencyDragClues = true;
+    }
+    Object.defineProperty(DependencyDragCreateDirective.prototype, "container", {
+        get: function () {
+            if (!isPresent(this.gantt.timeline) || !isPresent(this.gantt.timeline.timelineContent)) {
+                return null;
+            }
+            return this.gantt.timeline.timelineContent.nativeElement;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DependencyDragCreateDirective.prototype, "polyline", {
+        get: function () {
+            if (!isPresent(this.gantt.timeline) || !isPresent(this.gantt.timeline.dependencyDragCreatePolyline)) {
+                return null;
+            }
+            return this.gantt.timeline.dependencyDragCreatePolyline.nativeElement;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DependencyDragCreateDirective.prototype, "popupContainer", {
+        get: function () {
+            if (!isPresent(this.gantt.timeline) || !isPresent(this.gantt.timeline.dragPopupContainer)) {
+                return null;
+            }
+            return this.gantt.timeline.dragPopupContainer;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    DependencyDragCreateDirective.prototype.ngAfterViewInit = function () {
+        this.subscribeDraggable();
+        this.addScrollListener();
+    };
+    DependencyDragCreateDirective.prototype.ngOnDestroy = function () {
+        this.unsubscribeDraggable();
+        this.removeScrollListener();
+        this.fromTaskClue = null;
+        this.cancelScroll();
+        this.closeDragPopup();
+    };
+    DependencyDragCreateDirective.prototype.subscribeDraggable = function () {
+        this.dragSubscriptions = this.gantt.timeline.timelineContainerPress
+            .subscribe(this.handlePress.bind(this));
+        this.dragSubscriptions.add(this.gantt.timeline.timelineContainerDrag
+            .subscribe(this.handleDrag.bind(this)));
+        this.dragSubscriptions.add(this.gantt.timeline.timelineContainerRelease
+            .subscribe(this.handleRelease.bind(this)));
+    };
+    DependencyDragCreateDirective.prototype.unsubscribeDraggable = function () {
+        if (isPresent(this.dragSubscriptions)) {
+            this.dragSubscriptions.unsubscribe();
+            this.dragSubscriptions = null;
+        }
+    };
+    DependencyDragCreateDirective.prototype.handlePress = function (_a) {
+        var clientX = _a.clientX, clientY = _a.clientY;
+        // using `originalEvent.target` is not reliable under mobile devices with the current implementation of the draggable, so use this instead
+        var target = elementFromPoint(clientX, clientY);
+        if (isDependencyDragClue(target)) {
+            this.fromTaskClue = target;
+            this.assignDragStartClasses(this.fromTaskClue);
+            // use the center of the target clue as polyline starting point
+            var dragClueCenterCoords = getElementClientCenterCoords(this.fromTaskClue);
+            // the polyline uses `position: aboslute`, so translate the client coordinates to offset coordinates (`left` and `top` relative to the timeline container)
+            this.polylineStartCoords = clientToOffsetCoords(dragClueCenterCoords.left, dragClueCenterCoords.top, this.container);
+        }
+    };
+    DependencyDragCreateDirective.prototype.handleDrag = function (_a) {
+        var clientX = _a.clientX, clientY = _a.clientY;
+        if (isPresent(this.fromTaskClue)) {
+            // the polyline uses `position: aboslute`, so translate the client coordinates to offset coordinates (`left` and `top` relative to the timeline container)
+            var pointerOffsetCoords = clientToOffsetCoords(clientX, clientY, this.container);
+            // the start coords are calculated just once per drag session in handlePress
+            // use the current drag coords as polyline end coords
+            this.updatePolyline(this.polylineStartCoords, pointerOffsetCoords);
+            this.currentPointerClientCoords = { left: clientX, top: clientY };
+            if (this.gantt.dragScrollSettings.enabled) {
+                // use client coordinates for scroll trigger
+                this.scrollPointIntoView(this.currentPointerClientCoords);
+            }
+            if (this.displayValidationTooltip) {
+                this.updateDragPopup(pointerOffsetCoords);
+            }
+        }
+    };
+    DependencyDragCreateDirective.prototype.handleRelease = function (_a) {
+        var _this = this;
+        var clientX = _a.clientX, clientY = _a.clientY;
+        if (!isPresent(this.fromTaskClue)) {
+            return;
+        }
+        // using `originalEvent.target` is not reliable under mobile devices with the current implementation of the draggable, so use this instead
+        var target = elementFromPoint(clientX, clientY);
+        if (isDependencyDragClue(target) && !sameTaskClues(this.fromTaskClue, target, this.container)) {
+            this.zone.run(function () {
+                var _a;
+                var fromTaskClue = _this.fromTaskClue;
+                var toTaskClue = target;
+                var fromTask = _this.gantt.renderedTreeListItems[getClosestTaskIndex(fromTaskClue, _this.container)];
+                var toTask = _this.gantt.renderedTreeListItems[getClosestTaskIndex(toTaskClue, _this.container)];
+                var dependencyType = getDependencyTypeFromTargetTasks(fromTaskClue, toTaskClue);
+                var _b = _this.mapper.dependencyFields, fromId = _b.fromId, toId = _b.toId, type = _b.type;
+                _this.gantt.dependencyAdd.emit({
+                    fromTask: fromTask,
+                    toTask: toTask,
+                    type: dependencyType,
+                    isValid: _this.gantt.validateNewDependency((_a = {},
+                        _a[fromId] = _this.mapper.extractFromTask(fromTask, 'id'),
+                        _a[toId] = _this.mapper.extractFromTask(toTask, 'id'),
+                        _a[type] = dependencyType,
+                        _a))
+                });
+            });
+        }
+        this.clearPolyline();
+        this.removeDragStartClasses(this.fromTaskClue);
+        this.fromTaskClue = null;
+        this.cancelScroll();
+        this.closeDragPopup();
+    };
+    DependencyDragCreateDirective.prototype.updatePolyline = function (start, end) {
+        var points = start.left + "," + start.top + " " + end.left + "," + end.top;
+        this.renderer.setAttribute(this.polyline, 'points', points);
+    };
+    DependencyDragCreateDirective.prototype.clearPolyline = function () {
+        this.renderer.removeAttribute(this.polyline, 'points');
+    };
+    DependencyDragCreateDirective.prototype.assignDragStartClasses = function (dragClue) {
+        if (!isPresent(dragClue)) {
+            return;
+        }
+        this.renderer.addClass(this.container, USER_SELECT_NONE_CLASS);
+        this.renderer.addClass(dragClue, DRAG_CLUE_HOVER_CLASS);
+        var taskWrapper = getClosestTaskWrapper(dragClue, this.container);
+        if (isPresent(taskWrapper)) {
+            this.renderer.addClass(taskWrapper, TASK_WRAPPER_DRAG_CLASS);
+        }
+    };
+    DependencyDragCreateDirective.prototype.removeDragStartClasses = function (dragClue) {
+        if (!isPresent(dragClue)) {
+            return;
+        }
+        this.renderer.removeClass(this.container, USER_SELECT_NONE_CLASS);
+        this.renderer.removeClass(dragClue, DRAG_CLUE_HOVER_CLASS);
+        var taskWrapper = getClosestTaskWrapper(dragClue, this.container);
+        if (isPresent(taskWrapper)) {
+            this.renderer.removeClass(taskWrapper, TASK_WRAPPER_DRAG_CLASS);
+        }
+    };
+    DependencyDragCreateDirective.prototype.scrollPointIntoView = function (_a) {
+        var left = _a.left, top = _a.top;
+        this.timelineScrollService.requestScrollCancel();
+        this.timelineScrollService.requestHorizontalScroll(left);
+        this.timelineScrollService.requestVerticalScroll(top);
+    };
+    DependencyDragCreateDirective.prototype.cancelScroll = function () {
+        this.timelineScrollService.requestScrollCancel();
+    };
+    DependencyDragCreateDirective.prototype.addScrollListener = function () {
+        var _this = this;
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        this.zone.runOutsideAngular(function () {
+            return _this.scrollListenerDisposer = _this.renderer.listen(_this.container, 'scroll', function () {
+                // update the polyline only if we're currently dragging
+                if (isPresent(_this.fromTaskClue) && isPresent(_this.currentPointerClientCoords)) {
+                    var _a = _this.currentPointerClientCoords, left = _a.left, top_1 = _a.top;
+                    var pointerOffsetCoords = clientToOffsetCoords(left, top_1, _this.container);
+                    _this.updatePolyline(_this.polylineStartCoords, pointerOffsetCoords);
+                    if (_this.displayValidationTooltip) {
+                        _this.updateDragPopup(pointerOffsetCoords);
+                    }
+                }
+            });
+        });
+    };
+    DependencyDragCreateDirective.prototype.removeScrollListener = function () {
+        if (isPresent(this.scrollListenerDisposer)) {
+            this.scrollListenerDisposer();
+            this.scrollListenerDisposer = null;
+        }
+    };
+    DependencyDragCreateDirective.prototype.openDragPopup = function () {
+        if (isPresent(this.dragPopup)) {
+            this.closeDragPopup();
+        }
+        this.dragPopup = this.popupService.open({
+            animate: false,
+            content: DragValidationTooltipComponent,
+            appendTo: this.popupContainer,
+            positionMode: 'absolute',
+            popupClass: 'k-popup-transparent'
+        });
+    };
+    DependencyDragCreateDirective.prototype.updateDragPopup = function (pointerOffsetPosition) {
+        if (!isPresent(this.dragPopup)) {
+            this.openDragPopup();
+        }
+        var tooltip = this.dragPopup.content.instance;
+        var _a = this.getTooltipContext(), fromTaskName = _a.fromTaskName, toTaskName = _a.toTaskName, isValid = _a.isValid, showValidityStatus = _a.showValidityStatus;
+        if (tooltip.fromTaskName !== fromTaskName ||
+            tooltip.toTaskName !== toTaskName ||
+            tooltip.isValid !== isValid ||
+            tooltip.showValidityStatus !== showValidityStatus) {
+            tooltip.fromTaskName = fromTaskName;
+            tooltip.toTaskName = toTaskName;
+            tooltip.isValid = isValid;
+            tooltip.showValidityStatus = showValidityStatus;
+            this.dragPopup.content.changeDetectorRef.detectChanges();
+        }
+        this.dragPopup.popup.instance.offset = this.normalizePopupPosition(pointerOffsetPosition);
+        this.dragPopup.popup.changeDetectorRef.detectChanges();
+    };
+    DependencyDragCreateDirective.prototype.closeDragPopup = function () {
+        if (isPresent(this.dragPopup)) {
+            this.dragPopup.close();
+            this.dragPopup = null;
+        }
+    };
+    DependencyDragCreateDirective.prototype.extractTaskName = function (target) {
+        if (!isTaskWrapper(target, this.container)) {
+            return null;
+        }
+        var taskIndex = getClosestTaskIndex(target, this.container);
+        var task = this.gantt.renderedTreeListItems[taskIndex];
+        var taskName = this.mapper.extractFromTask(task, 'title');
+        return taskName;
+    };
+    DependencyDragCreateDirective.prototype.getTooltipContext = function () {
+        var _a;
+        var fromTaskName = this.extractTaskName(this.fromTaskClue);
+        var currentPointerTarget = elementFromPoint(this.currentPointerClientCoords.left, this.currentPointerClientCoords.top);
+        var toTaskName = isTaskWrapper(currentPointerTarget, this.container) && !sameTaskClues(this.fromTaskClue, currentPointerTarget, this.container) ?
+            this.extractTaskName(currentPointerTarget) :
+            '';
+        var showValidityStatus = isDependencyDragClue(currentPointerTarget) && !sameTaskClues(this.fromTaskClue, currentPointerTarget, this.container);
+        var _b = this.mapper.dependencyFields, fromId = _b.fromId, toId = _b.toId, type = _b.type;
+        return {
+            fromTaskName: fromTaskName,
+            toTaskName: toTaskName,
+            showValidityStatus: showValidityStatus,
+            isValid: showValidityStatus && this.gantt.validateNewDependency((_a = {},
+                _a[fromId] = this.mapper.extractFromTask(this.gantt.renderedTreeListItems[getClosestTaskIndex(this.fromTaskClue, this.container)], 'id'),
+                _a[toId] = this.mapper.extractFromTask(this.gantt.renderedTreeListItems[getClosestTaskIndex(currentPointerTarget, this.container)], 'id'),
+                _a[type] = getDependencyTypeFromTargetTasks(this.fromTaskClue, currentPointerTarget),
+                _a))
+        };
+    };
+    /**
+     * 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.
+     */
+    DependencyDragCreateDirective.prototype.normalizePopupPosition = function (pointerOffsetPosition) {
+        var top = pointerOffsetPosition.top + DEFAULT_POPUP_VERTICAL_MARGIN;
+        var containerClientBottom = this.container.clientHeight + this.container.scrollTop;
+        var popupHeight = this.dragPopup.popupElement.querySelector('.k-tooltip').clientHeight;
+        var enoughSpaceToRender = top < containerClientBottom - popupHeight;
+        // flip the popup above the pointer if there's not enough space in the bottom of the container
+        if (!enoughSpaceToRender) {
+            // margin * 2 to account for the already applied margin
+            top -= popupHeight + (DEFAULT_POPUP_VERTICAL_MARGIN * 2);
+        }
+        // center the popup horizontally according to the pointer position
+        var popupWidth = this.dragPopup.popupElement.querySelector('.k-tooltip').clientWidth;
+        var left = pointerOffsetPosition.left - popupWidth / 2;
+        // don't allow the popup to be cut out of the viewport
+        var minLeftTop = 0;
+        // restrict the popup from being positioned beyond or before the available scrollable space
+        return {
+            left: fitToRange(left, minLeftTop, this.container.scrollWidth - popupWidth),
+            top: fitToRange(top, minLeftTop, this.container.scrollHeight - popupHeight)
+        };
+    };
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], DependencyDragCreateDirective.prototype, "displayValidationTooltip", void 0);
+    DependencyDragCreateDirective = tslib_1.__decorate([
+        Directive({
+            selector: '[kendoGanttDependencyDragCreate]'
+        }),
+        tslib_1.__metadata("design:paramtypes", [GanttComponent,
+            NgZone,
+            Renderer2,
+            MappingService,
+            PopupService,
+            TimelineScrollService])
+    ], DependencyDragCreateDirective);
+    return DependencyDragCreateDirective;
+}());
+export { DependencyDragCreateDirective };

package/dist/es/dragging/drag-validation-tooltip.component.js

@@ -0,0 +1,27 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { Component } from '@angular/core';
+/**
+ * @hidden
+ */
+var DragValidationTooltipComponent = /** @class */ (function () {
+    function DragValidationTooltipComponent() {
+        /**
+         * Sets the status class of the attempted operation.
+         * Note that the status will be ignored and the `neutral` status class will be rendered,
+         * if the any of the fromTaskName or toTaskName are not populated.
+         */
+        this.isValid = false;
+    }
+    DragValidationTooltipComponent = tslib_1.__decorate([
+        Component({
+            template: "\n        <div\n            class=\"k-tooltip k-gantt-tooltip-validation\"\n            [class.k-gantt-tooltip-valid]=\"showValidityStatus && isValid\"\n            [class.k-gantt-tooltip-invalid]=\"showValidityStatus && !isValid\"\n        >\n            <div class=\"k-gantt-tooltip-validation-row\">\n                <span class=\"k-gantt-tooltip-validation-label\">From:</span>\n                <span class=\"k-gantt-tooltip-validation-value\">{{ fromTaskName }}</span>\n            </div>\n            <div class=\"k-gantt-tooltip-validation-row\">\n                <span class=\"k-gantt-tooltip-validation-label\">To:</span>\n                <span class=\"k-gantt-tooltip-validation-value\">{{ toTaskName }}</span>\n            </div>\n        </div>\n    ",
+            styles: ["\n        .k-gantt-tooltip-validation {\n            max-width: 200px;\n            display: block;\n        }\n        .k-gantt-tooltip-validation::before {\n            content: '';\n            position: absolute;\n            left: 0;\n            top: 0;\n            width: 4px;\n            height: 100%;\n            background: #656565;\n        }\n        .k-gantt-tooltip-validation.k-gantt-tooltip-valid::before {\n            background: #37B400;\n        }\n        .k-gantt-tooltip-validation.k-gantt-tooltip-invalid::before {\n            background: #F31700;\n        }\n        .k-gantt-tooltip-validation-row {\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n        .k-gantt-tooltip-validation-label {\n            display: inline-flex;\n            width: 50px;\n        }\n        .k-gantt-tooltip-validation-value {\n            font-weight: bold;\n        }\n    "]
+        })
+    ], DragValidationTooltipComponent);
+    return DragValidationTooltipComponent;
+}());
+export { DragValidationTooltipComponent };

package/dist/es/editing/add-task.component.js

@@ -0,0 +1,94 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { Component, Input, NgZone } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { EditService } from './edit.service';
+/**
+ * The UI for adding new items to the Gantt.
+ * Use it within a toolbar template to provide a custom icon or list of options.
+ */
+var GanttAddTaskComponent = /** @class */ (function () {
+    function GanttAddTaskComponent(localizationService, editService, ngZone) {
+        this.localizationService = localizationService;
+        this.editService = editService;
+        this.ngZone = ngZone;
+        /**
+         * Sets the data of the DropDownButton.
+         * > The data has to be provided in an array-like list.
+         */
+        this.data = [{
+                text: this.getText('addChildText'),
+                type: 'addChild'
+            }, {
+                text: this.getText('addAboveText'),
+                type: 'addAbove'
+            }, {
+                text: this.getText('addBelowText'),
+                type: 'addBelow'
+            }];
+        /**
+         * Defines the name of an existing icon in a Kendo UI theme.
+         * @default 'plus'
+         */
+        this.icon = 'plus';
+    }
+    /**
+     * @hidden
+     */
+    GanttAddTaskComponent.prototype.getText = function (message) {
+        return this.localizationService.get(message);
+    };
+    /**
+     * @hidden
+     */
+    GanttAddTaskComponent.prototype.handleOpen = function (e) {
+        if (!this.editService.getSelectedItem()) {
+            e.preventDefault();
+        }
+    };
+    /**
+     * @hidden
+     */
+    GanttAddTaskComponent.prototype.handleMouseClick = function () {
+        var _this = this;
+        if (!this.editService.getSelectedItem()) {
+            this.ngZone.run(function () {
+                _this.editService.addEvent.next({
+                    selectedItem: null,
+                    actionType: 'addTask'
+                });
+            });
+        }
+    };
+    /**
+     * @hidden
+     */
+    GanttAddTaskComponent.prototype.handleItemClick = function (e) {
+        this.editService.addEvent.next({
+            actionType: e.type,
+            selectedItem: null
+        });
+    };
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Array)
+    ], GanttAddTaskComponent.prototype, "data", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], GanttAddTaskComponent.prototype, "icon", void 0);
+    GanttAddTaskComponent = tslib_1.__decorate([
+        Component({
+            selector: 'kendo-gantt-add-task',
+            template: "\n        <kendo-dropdownbutton\n            [data]=\"data\"\n            [icon]=\"icon\"\n            [kendoEventsOutsideAngular]=\"{ click: handleMouseClick }\"\n            [scope]=\"this\"\n            (itemClick)=\"handleItemClick($event)\"\n            (open)=\"handleOpen($event)\">\n            {{ getText('addTaskText') }}\n        </kendo-dropdownbutton>\n    "
+        }),
+        tslib_1.__metadata("design:paramtypes", [LocalizationService,
+            EditService,
+            NgZone])
+    ], GanttAddTaskComponent);
+    return GanttAddTaskComponent;
+}());
+export { GanttAddTaskComponent };