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

package/dist/npm/gantt.component.js

@@ -14,6 +14,8 @@ var package_metadata_1 = require("./package-metadata");
 var kendo_angular_common_1 = require("@progress/kendo-angular-common");
 var columns_1 = require("./columns/columns");
 var default_callbacks_1 = require("./common/default-callbacks");
+var models_1 = require("./models/models");
+var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
 var timeline_view_service_1 = require("./timeline/timeline-view.service");
 var timeline_day_view_service_1 = require("./timeline/timeline-day-view.service");
 var timeline_week_view_service_1 = require("./timeline/timeline-week-view.service");
@@ -23,18 +25,25 @@ var dependency_dom_service_1 = require("./dependencies/dependency-dom.service");
 var mapping_service_1 = require("./common/mapping.service");
 var option_changes_service_1 = require("./common/option-changes.service");
 var edit_service_1 = require("./editing/edit.service");
-var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
+var timeline_scroll_service_1 = require("./scrolling/timeline-scroll.service");
+var gantt_localization_service_1 = require("./localization/gantt-localization.service");
 var utils_1 = require("./utils");
 var splitter_pane_options_interface_1 = require("./models/splitter-pane-options.interface");
 var task_template_directive_1 = require("./template-directives/task-template.directive");
 var summary_task_template_directive_1 = require("./template-directives/summary-task-template.directive");
 var task_content_template_directive_1 = require("./template-directives/task-content-template.directive");
 var toolbar_template_directive_1 = require("./toolbar/toolbar-template.directive");
+var gantt_timeline_component_1 = require("./timeline/gantt-timeline.component");
 var view_base_1 = require("./timeline/view-base");
-var util_1 = require("./editing/util");
-var gantt_localization_service_1 = require("./localization/gantt-localization.service");
+var utils_2 = require("./editing/utils");
 var TREELIST_GROUP_COLUMNS_CLASS = 'k-gantt-treelist-nested-columns';
 var DEFAULT_VIEW = 'week';
+var DEFAULT_DRAG_SCROLL_SETTINGS = {
+    enabled: true,
+    step: 3,
+    interval: 1,
+    threshold: 10
+};
 /**
  * Represents the Kendo UI Gantt component for Angular.
  *
@@ -121,11 +130,22 @@ var GanttComponent = /** @class */ (function () {
         this.zone = zone;
         this.hostClasses = true;
         /**
-         * Provides a callback that determines if the given task is selected ([see example]({% slug selection_gantt %}#toc-custom-selection))
+         * Specifies a callback that determines if the given task is selected ([see example]({% slug selection_gantt %}#toc-custom-selection)).
          *
          * > The [`selectable`]({% slug api_gantt_ganttcomponent %}#toc-selectable) prop has to be set to `true` in order for this callback to be executed.
          */
         this.isSelected = default_callbacks_1.isSelected;
+        /**
+         * Specifies a callback that determines if a new dependency is valid.
+         * Used when evaluating if an attempt to create a new dependency will result in a valid link between the two tasks
+         * [see example]({% slug editing_drag_create_dependencies_gantt %}#toc-validation).
+         *
+         * By defalut, dependencies are deemed invalid when:
+         *  - The two tasks are in a parent-child relationship.
+         *  - The two tasks are already dependent on one another. Only one dependency is allowed per pair.
+         *  - The start or end times of the two tasks are incompatible with the attempted dependency type.
+         */
+        this.validateNewDependency = this.defaultValidateNewDependencyCallback.bind(this);
         /**
          * Fires when the Gantt selection is changed through user interaction.
          *
@@ -246,6 +266,11 @@ var GanttComponent = /** @class */ (function () {
          * Fires when the user adds a task.
          */
         this.taskAdd = new core_1.EventEmitter();
+        /**
+         * Fires when the user adds a dependency via dragging
+         * [see example]({% slug editing_drag_create_dependencies_gantt %}#toc-basic-concepts).
+         */
+        this.dependencyAdd = new core_1.EventEmitter();
         /**
          * Fires when the sorting of the Gantt is changed.
          * You have to handle the event yourself and sort the data.
@@ -302,6 +327,15 @@ var GanttComponent = /** @class */ (function () {
          * Fires when a task is clicked.
          */
         this.taskClick = new core_1.EventEmitter();
+        /**
+         * @hidden
+         *
+         * Specifies whether the dependency drag clues will be rendered.
+         * Set internally by the dependency-drag-create directive.
+         *
+         * @default false
+         */
+        this.renderDependencyDragClues = false;
         /**
          * @hidden
          *
@@ -318,6 +352,7 @@ var GanttComponent = /** @class */ (function () {
         this.showConfirmationDialog = false;
         this._columns = new core_1.QueryList();
         this._data = [];
+        this._dragScrollSettings = tslib_1.__assign({}, DEFAULT_DRAG_SCROLL_SETTINGS);
         this._timelinePaneOptions = tslib_1.__assign({}, splitter_pane_options_interface_1.DEFAULT_TIMELINE_PANE_SETTINGS);
         this._treeListPaneOptions = tslib_1.__assign({}, splitter_pane_options_interface_1.DEFAULT_TREELIST_PANE_SETTINGS);
         this._rowClass = default_callbacks_1.rowClassCallback;
@@ -346,7 +381,7 @@ var GanttComponent = /** @class */ (function () {
         this.editServiceSubscription.add(this.editService.editEvent.subscribe(function (args) {
             _this[args.editResultType].emit({
                 taskFormGroup: args.taskFormGroup,
-                item: util_1.getEditItem(args.dataItem, _this.treeList.view.data, _this.mapper),
+                item: utils_2.getEditItem(args.dataItem, _this.treeList.view.data, _this.mapper),
                 dependencies: args.dependencies,
                 sender: _this
             });
@@ -358,7 +393,7 @@ var GanttComponent = /** @class */ (function () {
             var selectedItem = _this.getFirstSelectedItem();
             _this.taskAdd.emit({
                 actionType: args.actionType,
-                selectedItem: selectedItem ? util_1.getEditItem(selectedItem, _this.treeList.view.data, _this.mapper) : null
+                selectedItem: selectedItem ? utils_2.getEditItem(selectedItem, _this.treeList.view.data, _this.mapper) : null
             });
             _this.updateView();
         }));
@@ -596,6 +631,21 @@ var GanttComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(GanttComponent.prototype, "dragScrollSettings", {
+        get: function () {
+            return this._dragScrollSettings;
+        },
+        /**
+         * Specifies the settings for auto-scrolling during dragging
+         * when the pointer moves outside of the container bounderies
+         * [see example]({% slug editing_drag_create_dependencies_gantt %}#toc-auto-scrolling).
+         */
+        set: function (settings) {
+            this._dragScrollSettings = tslib_1.__assign({}, DEFAULT_DRAG_SCROLL_SETTINGS, settings);
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(GanttComponent.prototype, "renderedTreeListItems", {
         /**
          * @hidden
@@ -902,7 +952,7 @@ var GanttComponent = /** @class */ (function () {
         if (!utils_1.isPresent(this.lastTreeListCellClick) || event.target !== this.lastTreeListCellClick.originalEvent.target) {
             return;
         }
-        this.editItem = util_1.getEditItem(this.lastTreeListCellClick.dataItem, this.treeList.view.data, this.mapper);
+        this.editItem = utils_2.getEditItem(this.lastTreeListCellClick.dataItem, this.treeList.view.data, this.mapper);
         if (kendo_angular_common_1.hasObservers(this.cellDblClick)) {
             this.zone.run(function () {
                 _this.cellDblClick.emit({
@@ -1054,11 +1104,65 @@ var GanttComponent = /** @class */ (function () {
         var loadedItems = this.renderedTreeListItems || [];
         return loadedItems.find(isSelectedCallback);
     };
+    GanttComponent.prototype.defaultValidateNewDependencyCallback = function (dependency) {
+        var _this = this;
+        var fromTaskId = this.mapper.extractFromDependency(dependency, 'fromId');
+        var toTaskId = this.mapper.extractFromDependency(dependency, 'toId');
+        var fromTask = this.treeList.view.data.find(function (task) {
+            return _this.mapper.extractFromTask(task.data, 'id') === fromTaskId;
+        });
+        var toTask = this.treeList.view.data.find(function (task) {
+            return _this.mapper.extractFromTask(task.data, 'id') === toTaskId;
+        });
+        // mark as invalid if the attempted dependency is lacking valid from- and to-tasks
+        // or when the from- and to-tasks are actually the same task
+        if (!utils_1.isPresent(fromTask) || !utils_1.isPresent(fromTask.data) ||
+            !utils_1.isPresent(toTask) || !utils_1.isPresent(toTask.data) ||
+            fromTask.data === toTask.data) {
+            return false;
+        }
+        var tasksDependentOnOneAnother = this.dependencies.some(function (current) {
+            var currentFromId = _this.mapper.extractFromDependency(current, 'fromId');
+            var currentToId = _this.mapper.extractFromDependency(current, 'toId');
+            return (fromTaskId === currentFromId && toTaskId === currentToId) ||
+                (toTaskId === currentFromId && fromTaskId === currentToId);
+        });
+        // mark as invalid if the attempted dependency is trying to connect already dependent tasks
+        // mark as invalid if the two tasks are in parent-child relationship
+        if (tasksDependentOnOneAnother || utils_1.areParentChild(fromTask, toTask)) {
+            return false;
+        }
+        var fromTaskStart = this.mapper.extractFromTask(fromTask.data, 'start');
+        var fromTaskEnd = this.mapper.extractFromTask(fromTask.data, 'end');
+        var toTaskStart = this.mapper.extractFromTask(toTask.data, 'start');
+        var toTaskEnd = this.mapper.extractFromTask(toTask.data, 'end');
+        // if the two tasks are available to be connected via a dependency,
+        // check if their start and end time allow for the attempted dependency type
+        switch (this.mapper.extractFromDependency(dependency, 'type')) {
+            // finish to finish (FF) — the from-task ends before the to-task can end
+            case models_1.DependencyType.FF:
+                return fromTaskEnd <= toTaskEnd;
+            // finish to start (FS) — the from-task ends before the to-task can begin
+            case models_1.DependencyType.FS:
+                return fromTaskEnd <= toTaskStart;
+            // start to finish (SF) — the from-task begins before the to-task can end
+            case models_1.DependencyType.SF:
+                return fromTaskStart <= toTaskEnd;
+            // start to start (SS) — the from-task begins before the to-task can begin
+            case models_1.DependencyType.SS:
+                return fromTaskStart <= toTaskStart;
+            default: return false;
+        }
+    };
     var GanttComponent_1;
     tslib_1.__decorate([
         core_1.ViewChild(kendo_angular_treelist_1.TreeListComponent, { static: true }),
         tslib_1.__metadata("design:type", kendo_angular_treelist_1.TreeListComponent)
     ], GanttComponent.prototype, "treeList", void 0);
+    tslib_1.__decorate([
+        core_1.ViewChild(gantt_timeline_component_1.GanttTimelineComponent, { static: false }),
+        tslib_1.__metadata("design:type", gantt_timeline_component_1.GanttTimelineComponent)
+    ], GanttComponent.prototype, "timeline", void 0);
     tslib_1.__decorate([
         core_1.ContentChild(task_content_template_directive_1.GanttTaskContentTemplateDirective, { static: true }),
         tslib_1.__metadata("design:type", task_content_template_directive_1.GanttTaskContentTemplateDirective)
@@ -1117,6 +1221,10 @@ var GanttComponent = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", Function)
     ], GanttComponent.prototype, "isSelected", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Function)
+    ], GanttComponent.prototype, "validateNewDependency", void 0);
     tslib_1.__decorate([
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
@@ -1216,6 +1324,11 @@ var GanttComponent = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", Boolean)
     ], GanttComponent.prototype, "columnsResizable", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Object),
+        tslib_1.__metadata("design:paramtypes", [Object])
+    ], GanttComponent.prototype, "dragScrollSettings", null);
     tslib_1.__decorate([
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
@@ -1256,6 +1369,10 @@ var GanttComponent = /** @class */ (function () {
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
     ], GanttComponent.prototype, "taskAdd", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], GanttComponent.prototype, "dependencyAdd", void 0);
     tslib_1.__decorate([
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
@@ -1331,9 +1448,10 @@ var GanttComponent = /** @class */ (function () {
                 dependency_dom_service_1.DependencyDomService,
                 mapping_service_1.MappingService,
                 option_changes_service_1.OptionChangesService,
-                edit_service_1.EditService
+                edit_service_1.EditService,
+                timeline_scroll_service_1.TimelineScrollService
             ],
-            template: "\n        <ng-container kendoGanttLocalizedMessages\n            i18n-taskEditingGeneralTabTitle=\"kendo.gantt.taskEditingGeneralTabTitle|The title of the 'General' tab of the editing dialog TabStrip\"\n            taskEditingGeneralTabTitle=\"General\"\n\n            i18n-taskEditingPredecessorsTabTitle=\"kendo.gantt.taskEditingPredecessorsTabTitle|The title of the 'Predecessors' dependencies tab of the editing dialog TabStrip\"\n            taskEditingPredecessorsTabTitle=\"Predecessors\"\n\n            i18n-taskEditingSuccessorsTabTitle=\"kendo.gantt.taskEditingSuccessorsTabTitle|The title of the 'Successors' dependencies tab of the editing dialog TabStrip\"\n            taskEditingSuccessorsTabTitle=\"Successors\"\n\n            i18n-taskEditingDependenciesAddButtonText=\"kendo.gantt.taskEditingDependenciesAddButtonText|The text of the 'Add' button in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesAddButtonText=\"Add\"\n\n            i18n-taskEditingDependenciesRemoveButtonText=\"kendo.gantt.taskEditingDependenciesRemoveButtonText|The text of the 'Remove' button in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesRemoveButtonText=\"Remove\"\n\n            i18n-taskEditingDependenciesGridNameColumnTitle=\"kendo.gantt.taskEditingDependenciesGridNameColumnTitle|The title of the 'Task Title' Grid column in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesGridNameColumnTitle=\"Task Title\"\n\n            i18n-taskEditingDependenciesGridTypeColumnTitle=\"kendo.gantt.taskEditingDependenciesGridTypeColumnTitle|The title of the 'Type' Grid column in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesGridTypeColumnTitle=\"Type\"\n\n            i18n-taskDeleteLabel=\"kendo.gantt.taskDeleteLabel|The label of the task delete icon\"\n            taskDeleteLabel=\"Delete\"\n\n            i18n-taskEditingDialogTitle=\"kendo.gantt.taskEditingDialogTitle|The title of the task editing dialog\"\n            taskEditingDialogTitle=\"Editing Task\"\n\n            i18n-taskEditingDialogCloseTitle=\"kendo.gantt.taskEditingDialogCloseTitle|The title of the task editing dialog close button\"\n            taskEditingDialogCloseTitle=\"Close\"\n\n            i18n-confirmationDialogCloseTitle=\"kendo.gantt.confirmationDialogCloseTitle|The title of the confirmation dialog close button\"\n            confirmationDialogCloseTitle=\"Close\"\n\n            i18n-confirmationDialogTitle=\"kendo.gantt.confirmationDialogTitle|The title of the delete task confirmation dialog\"\n            confirmationDialogTitle=\"Delete Task\"\n\n            i18n-confirmationDialogContent=\"kendo.gantt.confirmationDialogContent|The content of the delete task confirmation dialog\"\n            confirmationDialogContent=\"Are you sure you want to delete this task?\"\n\n            i18n-deleteButtonText=\"kendo.gantt.deleteButtonText|The text of the task editing dialog 'Delete' button\"\n            deleteButtonText=\"Delete\"\n\n            i18n-cancelButtonText=\"kendo.gantt.cancelButtonText|The text of the task editing dialog 'Cancel' button\"\n            cancelButtonText=\"Cancel\"\n\n            i18n-saveButtonText=\"kendo.gantt.saveButtonText|The text of the task editing dialog 'Save' button\"\n            saveButtonText=\"Save\"\n\n            i18n-titleFieldInputLabel=\"kendo.gantt.titleFieldInputLabel|The label of the 'title' field input in editing mode\"\n            titleFieldInputLabel=\"Title\"\n\n            i18n-startFieldInputLabel=\"kendo.gantt.startFieldInputLabel|The label of the 'start' field input in editing mode\"\n            startFieldInputLabel=\"Start\"\n\n            i18n-endFieldInputLabel=\"kendo.gantt.endFieldInputLabel|The label of the 'end' field input in editing mode\"\n            endFieldInputLabel=\"End\"\n\n            i18n-completionRatioFieldInputLabel=\"kendo.gantt.completionRatioFieldInputLabel|The label of the 'completionRatio' field input in editing mode\"\n            completionRatioFieldInputLabel=\"Progress\"\n\n            i18n-dayViewText=\"kendo.gantt.dayViewText|The text of the day view in the ViewSelector component\"\n            dayViewText=\"Day\"\n\n            i18n-weekViewText=\"kendo.gantt.weekViewText|The text of the week view in the ViewSelector component\"\n            weekViewText=\"Week\"\n\n            i18n-monthViewText=\"kendo.gantt.monthViewText|The text of the month view in the ViewSelector component\"\n            monthViewText=\"Month\"\n\n            i18n-yearViewText-disabled=\"kendo.gantt.yearViewText|The text of the year view in the ViewSelector component\"\n            yearViewText=\"Year\"\n\n            i18n-addTaskText=\"kendo.gantt.addTaskText|The text of the DropDownButton in the AddTask component\"\n            addTaskText=\"Add Task\"\n\n            i18n-addChildText=\"kendo.gantt.addChildText|The text of the 'Add Child' option in the AddTask component\"\n            addChildText=\"Add Child\"\n\n            i18n-addAboveText=\"kendo.gantt.addAboveText|The text of the 'Add Above' option in the AddTask component\"\n            addAboveText=\"Add Above\"\n\n            i18n-addBelowText=\"kendo.gantt.addBelowText|The text of the 'Add Below' option in the AddTask component\"\n            addBelowText=\"Add Below\"\n\n            i18n-noRecords=\"kendo.gantt.noRecords|The label visible in the TreeList when there are no records\"\n            noRecords=\"No records available.\"\n\n            i18n-filter=\"kendo.gantt.filter|The label of the filter cell or icon\"\n            filter=\"Filter\"\n\n            i18n-filterEqOperator=\"kendo.gantt.filterEqOperator|The text of the equal filter operator\"\n            filterEqOperator=\"Is equal to\"\n\n            i18n-filterNotEqOperator=\"kendo.gantt.filterNotEqOperator|The text of the not equal filter operator\"\n            filterNotEqOperator=\"Is not equal to\"\n\n            i18n-filterIsNullOperator=\"kendo.gantt.filterIsNullOperator|The text of the is null filter operator\"\n            filterIsNullOperator=\"Is null\"\n\n            i18n-filterIsNotNullOperator=\"kendo.gantt.filterIsNotNullOperator|The text of the is not null filter operator\"\n            filterIsNotNullOperator=\"Is not null\"\n\n            i18n-filterIsEmptyOperator=\"kendo.gantt.filterIsEmptyOperator|The text of the is empty filter operator\"\n            filterIsEmptyOperator=\"Is empty\"\n\n            i18n-filterIsNotEmptyOperator=\"kendo.gantt.filterIsNotEmptyOperator|The text of the is not empty filter operator\"\n            filterIsNotEmptyOperator=\"Is not empty\"\n\n            i18n-filterStartsWithOperator=\"kendo.gantt.filterStartsWithOperator|The text of the starts with filter operator\"\n            filterStartsWithOperator=\"Starts with\"\n\n            i18n-filterContainsOperator=\"kendo.gantt.filterContainsOperator|The text of the contains filter operator\"\n            filterContainsOperator=\"Contains\"\n\n            i18n-filterNotContainsOperator=\"kendo.gantt.filterNotContainsOperator|The text of the does not contain filter operator\"\n            filterNotContainsOperator=\"Does not contain\"\n\n            i18n-filterEndsWithOperator=\"kendo.gantt.filterEndsWithOperator|The text of the ends with filter operator\"\n            filterEndsWithOperator=\"Ends with\"\n\n            i18n-filterGteOperator=\"kendo.gantt.filterGteOperator|The text of the greater than or equal filter operator\"\n            filterGteOperator=\"Is greater than or equal to\"\n\n            i18n-filterGtOperator=\"kendo.gantt.filterGtOperator|The text of the greater than filter operator\"\n            filterGtOperator=\"Is greater than\"\n\n            i18n-filterLteOperator=\"kendo.gantt.filterLteOperator|The text of the less than or equal filter operator\"\n            filterLteOperator=\"Is less than or equal to\"\n\n            i18n-filterLtOperator=\"kendo.gantt.filterLtOperator|The text of the less than filter operator\"\n            filterLtOperator=\"Is less than\"\n\n            i18n-filterIsTrue=\"kendo.gantt.filterIsTrue|The text of the IsTrue boolean filter option\"\n            filterIsTrue=\"Is True\"\n\n            i18n-filterIsFalse=\"kendo.gantt.filterIsFalse|The text of the IsFalse boolean filter option\"\n            filterIsFalse=\"Is False\"\n\n            i18n-filterBooleanAll=\"kendo.gantt.filterBooleanAll|The text of the (All) boolean filter option\"\n            filterBooleanAll=\"(All)\"\n\n            i18n-filterAfterOrEqualOperator=\"kendo.gantt.filterAfterOrEqualOperator|The text of the after or equal date filter operator\"\n            filterAfterOrEqualOperator=\"Is after or equal to\"\n\n            i18n-filterAfterOperator=\"kendo.gantt.filterAfterOperator|The text of the after date filter operator\"\n            filterAfterOperator=\"Is after\"\n\n            i18n-filterBeforeOperator=\"kendo.gantt.filterBeforeOperator|The text of the before date filter operator\"\n            filterBeforeOperator=\"Is before\"\n\n            i18n-filterBeforeOrEqualOperator=\"kendo.gantt.filterBeforeOrEqualOperator|The text of the before or equal date filter operator\"\n            filterBeforeOrEqualOperator=\"Is before or equal to\"\n\n            i18n-filterFilterButton=\"kendo.gantt.filterFilterButton|The text of the filter button\"\n            filterFilterButton=\"Filter\"\n\n            i18n-filterClearButton=\"kendo.gantt.filterClearButton|The text of the clear filter button\"\n            filterClearButton=\"Clear\"\n\n            i18n-filterAndLogic=\"kendo.gantt.filterAndLogic|The text of the And filter logic\"\n            filterAndLogic=\"And\"\n\n            i18n-filterOrLogic=\"kendo.gantt.filterOrLogic|The text of the Or filter logic\"\n            filterOrLogic=\"Or\"\n\n            i18n-loading=\"kendo.gantt.loading|The loading text\"\n            loading=\"Loading\"\n\n            i18n-columnMenu=\"kendo.gantt.columnMenu|The title of the column menu icon\"\n            columnMenu=\"Column Menu\"\n\n            i18n-columns=\"kendo.gantt.columns|The text shown in the column menu for the columns item\"\n            columns=\"Columns\"\n\n            i18n-lock-disabled=\"kendo.gantt.lock|The text shown in the column menu for the lock item\"\n            lock-disabled=\"Lock\"\n\n            i18n-unlock-disabled=\"kendo.gantt.unlock|The text shown in the column menu for the unlock item\"\n            unlock-disabled=\"Unlock\"\n\n            i18n-sortable=\"kendo.gantt.sortable|The label of the sort icon\"\n            sortable=\"Sortable\"\n\n            i18n-sortAscending=\"kendo.gantt.sortAscending|The text shown in the column menu for the sort ascending item\"\n            sortAscending=\"Sort Ascending\"\n\n            i18n-sortDescending=\"kendo.gantt.sortDescending|The text shown in the column menu for the sort descending item\"\n            sortDescending=\"Sort Descending\"\n\n            i18n-sortedAscending=\"kendo.gantt.sortedAscending|The status announcement when a column is sorted ascending\"\n            sortedAscending=\"Sorted Ascending\"\n\n            i18n-sortedDescending=\"kendo.gantt.sortedDescending|The status announcement when a column is sorted descending\"\n            sortedDescending=\"Sorted Descending\"\n\n            i18n-sortedDefault=\"kendo.gantt.sortedDefault|The status announcement when a column is no longer sorted\"\n            sortedDefault=\"Not Sorted\"\n\n            i18n-columnsApply=\"kendo.gantt.columnsApply|The text shown in the column menu or column chooser for the columns apply button\"\n            columnsApply=\"Apply\"\n\n            i18n-columnsReset=\"kendo.gantt.columnsReset|The text shown in the column menu or column chooser for the columns reset button\"\n            columnsReset=\"Reset\"></ng-container>\n        <kendo-gantt-toolbar\n            *ngIf=\"showToolbar('top')\"\n            [showAddTask]=\"toolbarSettings.addTaskTool === 'top' || toolbarSettings.addTaskTool === 'both'\"\n            [showViewSelector]=\"toolbarSettings.viewSelectorTool === 'top' || toolbarSettings.viewSelectorTool === 'both'\"\n            class=\"k-gantt-header k-toolbar k-gantt-toolbar\"\n            position=\"top\"></kendo-gantt-toolbar>\n        <div class=\"k-gantt-content\">\n            <kendo-splitter [style.border]=\"0\">\n                <kendo-splitter-pane\n                    class=\"k-gantt-treelist k-gantt-treelist-scrollable\"\n                    [collapsible]=\"treeListPaneOptions?.collapsible\"\n                    [collapsed]=\"treeListPaneOptions?.collapsed\"\n                    (collapsedChange)=\"onTreeListCollapsedChange($event)\"\n                    [scrollable]=\"false\">\n                    <kendo-treelist\n                        [idField]=\"taskIdField\"\n                        [columns]=\"columns\"\n                        [data]=\"data\"\n                        [hasChildren]=\"hasChildren\"\n                        [fetchChildren]=\"fetchChildren\"\n                        [isExpanded]=\"isExpanded\"\n                        [autoSize]=\"columnsAutoSize\"\n                        [columnMenu]=\"columnMenu\"\n                        [reorderable]=\"columnsReorderable\"\n                        [resizable]=\"columnsResizable\"\n                        [rowClass]=\"rowClass\"\n                        [isSelected]=\"isSelected\"\n                        [selectable]=\"selectable\"\n                        [sortable]=\"sortable\"\n                        [sort]=\"sort\"\n                        [filterable]=\"filterMenu\"\n                        [filter]=\"filter\"\n                        (filterChange)=\"filterChange.emit($event)\"\n                        (sortChange)=\"sortChange.emit($event)\"\n                        (dataStateChange)=\"dataStateChange.emit({\n                            filter: $event.filter,\n                            sort: $event.sort\n                        })\"\n                        (expandStateChange)=\"expandStateChange.emit($event)\"\n                        (expand)=\"rowExpand.emit({ dataItem: $event.dataItem })\"\n                        (collapse)=\"rowCollapse.emit({ dataItem: $event.dataItem })\"\n                        (columnReorder)=\"columnReorder.emit($event)\"\n                        (columnResize)=\"columnResize.emit($event)\"\n                        (columnVisibilityChange)=\"handleColumnVisibilityChange($event)\"\n                        (columnLockedChange)=\"columnLockedChange.emit($event)\"\n                        (selectionChange)=\"handleTreeListSelectionChange($event)\"\n                        (cellClick)=\"handleTreeListCellClick($event)\"\n                        (cellClose)=\"handleCellClose($event)\"\n                        [kendoEventsOutsideAngular]=\"{\n                            dblclick: handleTreeListDoubleClick\n                        }\"\n                        [scope]=\"this\"\n                    >\n                        <kendo-treelist-messages\n                            [noRecords]=\"getText('noRecords')\"\n                            [filter]=\"getText('filter')\"\n                            [filterEqOperator]=\"getText('filterEqOperator')\"\n                            [filterNotEqOperator]=\"getText('filterNotEqOperator')\"\n                            [filterIsNullOperator]=\"getText('filterIsNullOperator')\"\n                            [filterIsNotNullOperator]=\"getText('filterIsNotNullOperator')\"\n                            [filterIsEmptyOperator]=\"getText('filterIsEmptyOperator')\"\n                            [filterIsNotEmptyOperator]=\"getText('filterIsNotEmptyOperator')\"\n                            [filterStartsWithOperator]=\"getText('filterStartsWithOperator')\"\n                            [filterContainsOperator]=\"getText('filterContainsOperator')\"\n                            [filterNotContainsOperator]=\"getText('filterNotContainsOperator')\"\n                            [filterEndsWithOperator]=\"getText('filterEndsWithOperator')\"\n                            [filterGteOperator]=\"getText('filterGteOperator')\"\n                            [filterGtOperator]=\"getText('filterGtOperator')\"\n                            [filterLteOperator]=\"getText('filterLteOperator')\"\n                            [filterLtOperator]=\"getText('filterLtOperator')\"\n                            [filterIsTrue]=\"getText('filterIsTrue')\"\n                            [filterIsFalse]=\"getText('filterIsFalse')\"\n                            [filterBooleanAll]=\"getText('filterBooleanAll')\"\n                            [filterAfterOrEqualOperator]=\"getText('filterAfterOrEqualOperator')\"\n                            [filterAfterOperator]=\"getText('filterAfterOperator')\"\n                            [filterBeforeOperator]=\"getText('filterBeforeOperator')\"\n                            [filterBeforeOrEqualOperator]=\"getText('filterBeforeOrEqualOperator')\"\n                            [filterFilterButton]=\"getText('filterFilterButton')\"\n                            [filterClearButton]=\"getText('filterClearButton')\"\n                            [filterAndLogic]=\"getText('filterAndLogic')\"\n                            [filterOrLogic]=\"getText('filterOrLogic')\"\n                            [loading]=\"getText('loading')\"\n                            [columnMenu]=\"getText('columnMenu')\"\n                            [columns]=\"getText('columns')\"\n                            [sortable]=\"getText('sortable')\"\n                            [sortAscending]=\"getText('sortAscending')\"\n                            [sortDescending]=\"getText('sortDescending')\"\n                            [sortedAscending]=\"getText('sortedAscending')\"\n                            [sortedDescending]=\"getText('sortedDescending')\"\n                            [sortedDefault]=\"getText('sortedDefault')\"\n                            [columnsApply]=\"getText('columnsApply')\"\n                            [columnsReset]=\"getText('columnsReset')\"\n                        >\n                        </kendo-treelist-messages>\n                    </kendo-treelist>\n                </kendo-splitter-pane>\n                <kendo-splitter-pane\n                    [collapsible]=\"timelinePaneOptions?.collapsible\"\n                    [resizable]=\"timelinePaneOptions?.resizable\"\n                    [collapsed]=\"timelinePaneOptions?.collapsed\"\n                    [min]=\"timelinePaneOptions?.min\"\n                    [max]=\"timelinePaneOptions?.max\"\n                    [size]=\"timelinePaneOptions?.size\"\n                    (collapsedChange)=\"onTimelineCollapsedChange($event)\"\n                    (sizeChange)=\"onTimelinePaneSizeChange($event)\"\n                    [scrollable]=\"false\">\n                    <kendo-gantt-timeline\n                        *ngIf=\"views && views.length\"\n                        [rows]=\"renderedTreeListItems\"\n                        [slots]=\"timelineSlots\"\n                        [groupSlots]=\"timelineGroupSlots\"\n                        [tableWidth]=\"tableWidth\"\n                        [activeView]=\"activeView\"\n                        [taskContentTemplate]=\"taskContentTemplate?.templateRef\"\n                        [taskTemplate]=\"taskTemplate?.templateRef\"\n                        [summaryTaskTemplate]=\"summaryTaskTemplate?.templateRef\"\n                        [taskClass]=\"taskClass\"\n                        [dependencies]=\"dependencies\"\n                        [hasChildren]=\"hasChildren\"\n                        [isTaskSelected]=\"isTaskSelected\"\n                        [kendoEventsOutsideAngular]=\"{\n                            click: handleTimelineClick,\n                            contextmenu: handleTimelineRightClick,\n                            dblclick: handleTimelineDblClick,\n                            mousedown: handleTimelineMouseDown\n                        }\"\n                        [scope]=\"this\"\n                    ></kendo-gantt-timeline>\n                </kendo-splitter-pane>\n            </kendo-splitter>\n        </div>\n        <kendo-gantt-toolbar\n            *ngIf=\"showToolbar('bottom')\"\n            [showAddTask]=\"toolbarSettings.addTaskTool === 'bottom' || toolbarSettings.addTaskTool === 'both'\"\n            [showViewSelector]=\"toolbarSettings.viewSelectorTool === 'bottom' || toolbarSettings.viewSelectorTool === 'both'\"\n            class=\"k-gantt-footer k-toolbar k-gantt-toolbar\"\n            position=\"bottom\"></kendo-gantt-toolbar>\n        <kendo-gantt-edit-dialog\n            *ngIf=\"showEditingDialog\"\n            [data]=\"data\">\n        </kendo-gantt-edit-dialog>\n        <kendo-dialog\n            *ngIf=\"showConfirmationDialog\"\n            [width]=\"575\"\n            [height]=\"170\"\n            [title]=\"getText('confirmationDialogTitle')\"\n            (close)=\"showConfirmationDialog = false;\">\n            <span>{{ getText('confirmationDialogContent') }}</span>\n            <kendo-dialog-actions layout=\"normal\">\n                <kendo-treelist-spacer></kendo-treelist-spacer>\n                <button kendoButton [primary]=\"true\" (click)=\"handleDeleteConfirmation()\">{{ getText('deleteButtonText') }}</button>\n                <button kendoButton (click)=\"showConfirmationDialog = false;\">{{ getText('cancelButtonText') }}</button>\n            </kendo-dialog-actions>\n        </kendo-dialog>\n   "
+            template: "\n        <ng-container kendoGanttLocalizedMessages\n            i18n-taskEditingGeneralTabTitle=\"kendo.gantt.taskEditingGeneralTabTitle|The title of the 'General' tab of the editing dialog TabStrip\"\n            taskEditingGeneralTabTitle=\"General\"\n\n            i18n-taskEditingPredecessorsTabTitle=\"kendo.gantt.taskEditingPredecessorsTabTitle|The title of the 'Predecessors' dependencies tab of the editing dialog TabStrip\"\n            taskEditingPredecessorsTabTitle=\"Predecessors\"\n\n            i18n-taskEditingSuccessorsTabTitle=\"kendo.gantt.taskEditingSuccessorsTabTitle|The title of the 'Successors' dependencies tab of the editing dialog TabStrip\"\n            taskEditingSuccessorsTabTitle=\"Successors\"\n\n            i18n-taskEditingDependenciesAddButtonText=\"kendo.gantt.taskEditingDependenciesAddButtonText|The text of the 'Add' button in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesAddButtonText=\"Add\"\n\n            i18n-taskEditingDependenciesRemoveButtonText=\"kendo.gantt.taskEditingDependenciesRemoveButtonText|The text of the 'Remove' button in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesRemoveButtonText=\"Remove\"\n\n            i18n-taskEditingDependenciesGridNameColumnTitle=\"kendo.gantt.taskEditingDependenciesGridNameColumnTitle|The title of the 'Task Title' Grid column in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesGridNameColumnTitle=\"Task Title\"\n\n            i18n-taskEditingDependenciesGridTypeColumnTitle=\"kendo.gantt.taskEditingDependenciesGridTypeColumnTitle|The title of the 'Type' Grid column in the dependencies tabs of the editing dialog TabStrip\"\n            taskEditingDependenciesGridTypeColumnTitle=\"Type\"\n\n            i18n-taskDeleteLabel=\"kendo.gantt.taskDeleteLabel|The label of the task delete icon\"\n            taskDeleteLabel=\"Delete\"\n\n            i18n-taskEditingDialogTitle=\"kendo.gantt.taskEditingDialogTitle|The title of the task editing dialog\"\n            taskEditingDialogTitle=\"Editing Task\"\n\n            i18n-taskEditingDialogCloseTitle=\"kendo.gantt.taskEditingDialogCloseTitle|The title of the task editing dialog close button\"\n            taskEditingDialogCloseTitle=\"Close\"\n\n            i18n-confirmationDialogCloseTitle=\"kendo.gantt.confirmationDialogCloseTitle|The title of the confirmation dialog close button\"\n            confirmationDialogCloseTitle=\"Close\"\n\n            i18n-confirmationDialogTitle=\"kendo.gantt.confirmationDialogTitle|The title of the delete task confirmation dialog\"\n            confirmationDialogTitle=\"Delete Task\"\n\n            i18n-confirmationDialogContent=\"kendo.gantt.confirmationDialogContent|The content of the delete task confirmation dialog\"\n            confirmationDialogContent=\"Are you sure you want to delete this task?\"\n\n            i18n-deleteButtonText=\"kendo.gantt.deleteButtonText|The text of the task editing dialog 'Delete' button\"\n            deleteButtonText=\"Delete\"\n\n            i18n-cancelButtonText=\"kendo.gantt.cancelButtonText|The text of the task editing dialog 'Cancel' button\"\n            cancelButtonText=\"Cancel\"\n\n            i18n-saveButtonText=\"kendo.gantt.saveButtonText|The text of the task editing dialog 'Save' button\"\n            saveButtonText=\"Save\"\n\n            i18n-titleFieldInputLabel=\"kendo.gantt.titleFieldInputLabel|The label of the 'title' field input in editing mode\"\n            titleFieldInputLabel=\"Title\"\n\n            i18n-startFieldInputLabel=\"kendo.gantt.startFieldInputLabel|The label of the 'start' field input in editing mode\"\n            startFieldInputLabel=\"Start\"\n\n            i18n-endFieldInputLabel=\"kendo.gantt.endFieldInputLabel|The label of the 'end' field input in editing mode\"\n            endFieldInputLabel=\"End\"\n\n            i18n-completionRatioFieldInputLabel=\"kendo.gantt.completionRatioFieldInputLabel|The label of the 'completionRatio' field input in editing mode\"\n            completionRatioFieldInputLabel=\"Progress\"\n\n            i18n-dayViewText=\"kendo.gantt.dayViewText|The text of the day view in the ViewSelector component\"\n            dayViewText=\"Day\"\n\n            i18n-weekViewText=\"kendo.gantt.weekViewText|The text of the week view in the ViewSelector component\"\n            weekViewText=\"Week\"\n\n            i18n-monthViewText=\"kendo.gantt.monthViewText|The text of the month view in the ViewSelector component\"\n            monthViewText=\"Month\"\n\n            i18n-yearViewText-disabled=\"kendo.gantt.yearViewText|The text of the year view in the ViewSelector component\"\n            yearViewText=\"Year\"\n\n            i18n-addTaskText=\"kendo.gantt.addTaskText|The text of the DropDownButton in the AddTask component\"\n            addTaskText=\"Add Task\"\n\n            i18n-addChildText=\"kendo.gantt.addChildText|The text of the 'Add Child' option in the AddTask component\"\n            addChildText=\"Add Child\"\n\n            i18n-addAboveText=\"kendo.gantt.addAboveText|The text of the 'Add Above' option in the AddTask component\"\n            addAboveText=\"Add Above\"\n\n            i18n-addBelowText=\"kendo.gantt.addBelowText|The text of the 'Add Below' option in the AddTask component\"\n            addBelowText=\"Add Below\"\n\n            i18n-noRecords=\"kendo.gantt.noRecords|The label visible in the TreeList when there are no records\"\n            noRecords=\"No records available.\"\n\n            i18n-filter=\"kendo.gantt.filter|The label of the filter cell or icon\"\n            filter=\"Filter\"\n\n            i18n-filterEqOperator=\"kendo.gantt.filterEqOperator|The text of the equal filter operator\"\n            filterEqOperator=\"Is equal to\"\n\n            i18n-filterNotEqOperator=\"kendo.gantt.filterNotEqOperator|The text of the not equal filter operator\"\n            filterNotEqOperator=\"Is not equal to\"\n\n            i18n-filterIsNullOperator=\"kendo.gantt.filterIsNullOperator|The text of the is null filter operator\"\n            filterIsNullOperator=\"Is null\"\n\n            i18n-filterIsNotNullOperator=\"kendo.gantt.filterIsNotNullOperator|The text of the is not null filter operator\"\n            filterIsNotNullOperator=\"Is not null\"\n\n            i18n-filterIsEmptyOperator=\"kendo.gantt.filterIsEmptyOperator|The text of the is empty filter operator\"\n            filterIsEmptyOperator=\"Is empty\"\n\n            i18n-filterIsNotEmptyOperator=\"kendo.gantt.filterIsNotEmptyOperator|The text of the is not empty filter operator\"\n            filterIsNotEmptyOperator=\"Is not empty\"\n\n            i18n-filterStartsWithOperator=\"kendo.gantt.filterStartsWithOperator|The text of the starts with filter operator\"\n            filterStartsWithOperator=\"Starts with\"\n\n            i18n-filterContainsOperator=\"kendo.gantt.filterContainsOperator|The text of the contains filter operator\"\n            filterContainsOperator=\"Contains\"\n\n            i18n-filterNotContainsOperator=\"kendo.gantt.filterNotContainsOperator|The text of the does not contain filter operator\"\n            filterNotContainsOperator=\"Does not contain\"\n\n            i18n-filterEndsWithOperator=\"kendo.gantt.filterEndsWithOperator|The text of the ends with filter operator\"\n            filterEndsWithOperator=\"Ends with\"\n\n            i18n-filterGteOperator=\"kendo.gantt.filterGteOperator|The text of the greater than or equal filter operator\"\n            filterGteOperator=\"Is greater than or equal to\"\n\n            i18n-filterGtOperator=\"kendo.gantt.filterGtOperator|The text of the greater than filter operator\"\n            filterGtOperator=\"Is greater than\"\n\n            i18n-filterLteOperator=\"kendo.gantt.filterLteOperator|The text of the less than or equal filter operator\"\n            filterLteOperator=\"Is less than or equal to\"\n\n            i18n-filterLtOperator=\"kendo.gantt.filterLtOperator|The text of the less than filter operator\"\n            filterLtOperator=\"Is less than\"\n\n            i18n-filterIsTrue=\"kendo.gantt.filterIsTrue|The text of the IsTrue boolean filter option\"\n            filterIsTrue=\"Is True\"\n\n            i18n-filterIsFalse=\"kendo.gantt.filterIsFalse|The text of the IsFalse boolean filter option\"\n            filterIsFalse=\"Is False\"\n\n            i18n-filterBooleanAll=\"kendo.gantt.filterBooleanAll|The text of the (All) boolean filter option\"\n            filterBooleanAll=\"(All)\"\n\n            i18n-filterAfterOrEqualOperator=\"kendo.gantt.filterAfterOrEqualOperator|The text of the after or equal date filter operator\"\n            filterAfterOrEqualOperator=\"Is after or equal to\"\n\n            i18n-filterAfterOperator=\"kendo.gantt.filterAfterOperator|The text of the after date filter operator\"\n            filterAfterOperator=\"Is after\"\n\n            i18n-filterBeforeOperator=\"kendo.gantt.filterBeforeOperator|The text of the before date filter operator\"\n            filterBeforeOperator=\"Is before\"\n\n            i18n-filterBeforeOrEqualOperator=\"kendo.gantt.filterBeforeOrEqualOperator|The text of the before or equal date filter operator\"\n            filterBeforeOrEqualOperator=\"Is before or equal to\"\n\n            i18n-filterFilterButton=\"kendo.gantt.filterFilterButton|The text of the filter button\"\n            filterFilterButton=\"Filter\"\n\n            i18n-filterClearButton=\"kendo.gantt.filterClearButton|The text of the clear filter button\"\n            filterClearButton=\"Clear\"\n\n            i18n-filterAndLogic=\"kendo.gantt.filterAndLogic|The text of the And filter logic\"\n            filterAndLogic=\"And\"\n\n            i18n-filterOrLogic=\"kendo.gantt.filterOrLogic|The text of the Or filter logic\"\n            filterOrLogic=\"Or\"\n\n            i18n-loading=\"kendo.gantt.loading|The loading text\"\n            loading=\"Loading\"\n\n            i18n-columnMenu=\"kendo.gantt.columnMenu|The title of the column menu icon\"\n            columnMenu=\"Column Menu\"\n\n            i18n-columns=\"kendo.gantt.columns|The text shown in the column menu for the columns item\"\n            columns=\"Columns\"\n\n            i18n-lock-disabled=\"kendo.gantt.lock|The text shown in the column menu for the lock item\"\n            lock-disabled=\"Lock\"\n\n            i18n-unlock-disabled=\"kendo.gantt.unlock|The text shown in the column menu for the unlock item\"\n            unlock-disabled=\"Unlock\"\n\n            i18n-sortable=\"kendo.gantt.sortable|The label of the sort icon\"\n            sortable=\"Sortable\"\n\n            i18n-sortAscending=\"kendo.gantt.sortAscending|The text shown in the column menu for the sort ascending item\"\n            sortAscending=\"Sort Ascending\"\n\n            i18n-sortDescending=\"kendo.gantt.sortDescending|The text shown in the column menu for the sort descending item\"\n            sortDescending=\"Sort Descending\"\n\n            i18n-sortedAscending=\"kendo.gantt.sortedAscending|The status announcement when a column is sorted ascending\"\n            sortedAscending=\"Sorted Ascending\"\n\n            i18n-sortedDescending=\"kendo.gantt.sortedDescending|The status announcement when a column is sorted descending\"\n            sortedDescending=\"Sorted Descending\"\n\n            i18n-sortedDefault=\"kendo.gantt.sortedDefault|The status announcement when a column is no longer sorted\"\n            sortedDefault=\"Not Sorted\"\n\n            i18n-columnsApply=\"kendo.gantt.columnsApply|The text shown in the column menu or column chooser for the columns apply button\"\n            columnsApply=\"Apply\"\n\n            i18n-columnsReset=\"kendo.gantt.columnsReset|The text shown in the column menu or column chooser for the columns reset button\"\n            columnsReset=\"Reset\"></ng-container>\n        <kendo-gantt-toolbar\n            *ngIf=\"showToolbar('top')\"\n            [showAddTask]=\"toolbarSettings.addTaskTool === 'top' || toolbarSettings.addTaskTool === 'both'\"\n            [showViewSelector]=\"toolbarSettings.viewSelectorTool === 'top' || toolbarSettings.viewSelectorTool === 'both'\"\n            class=\"k-gantt-header k-toolbar k-gantt-toolbar\"\n            position=\"top\"></kendo-gantt-toolbar>\n        <div class=\"k-gantt-content\">\n            <kendo-splitter [style.border]=\"0\">\n                <kendo-splitter-pane\n                    class=\"k-gantt-treelist k-gantt-treelist-scrollable\"\n                    [collapsible]=\"treeListPaneOptions?.collapsible\"\n                    [collapsed]=\"treeListPaneOptions?.collapsed\"\n                    (collapsedChange)=\"onTreeListCollapsedChange($event)\"\n                    [scrollable]=\"false\">\n                    <kendo-treelist\n                        [idField]=\"taskIdField\"\n                        [columns]=\"columns\"\n                        [data]=\"data\"\n                        [hasChildren]=\"hasChildren\"\n                        [fetchChildren]=\"fetchChildren\"\n                        [isExpanded]=\"isExpanded\"\n                        [autoSize]=\"columnsAutoSize\"\n                        [columnMenu]=\"columnMenu\"\n                        [reorderable]=\"columnsReorderable\"\n                        [resizable]=\"columnsResizable\"\n                        [rowClass]=\"rowClass\"\n                        [isSelected]=\"isSelected\"\n                        [selectable]=\"selectable\"\n                        [sortable]=\"sortable\"\n                        [sort]=\"sort\"\n                        [filterable]=\"filterMenu\"\n                        [filter]=\"filter\"\n                        (filterChange)=\"filterChange.emit($event)\"\n                        (sortChange)=\"sortChange.emit($event)\"\n                        (dataStateChange)=\"dataStateChange.emit({\n                            filter: $event.filter,\n                            sort: $event.sort\n                        })\"\n                        (expandStateChange)=\"expandStateChange.emit($event)\"\n                        (expand)=\"rowExpand.emit({ dataItem: $event.dataItem })\"\n                        (collapse)=\"rowCollapse.emit({ dataItem: $event.dataItem })\"\n                        (columnReorder)=\"columnReorder.emit($event)\"\n                        (columnResize)=\"columnResize.emit($event)\"\n                        (columnVisibilityChange)=\"handleColumnVisibilityChange($event)\"\n                        (columnLockedChange)=\"columnLockedChange.emit($event)\"\n                        (selectionChange)=\"handleTreeListSelectionChange($event)\"\n                        (cellClick)=\"handleTreeListCellClick($event)\"\n                        (cellClose)=\"handleCellClose($event)\"\n                        [kendoEventsOutsideAngular]=\"{\n                            dblclick: handleTreeListDoubleClick\n                        }\"\n                        [scope]=\"this\"\n                    >\n                        <kendo-treelist-messages\n                            [noRecords]=\"getText('noRecords')\"\n                            [filter]=\"getText('filter')\"\n                            [filterEqOperator]=\"getText('filterEqOperator')\"\n                            [filterNotEqOperator]=\"getText('filterNotEqOperator')\"\n                            [filterIsNullOperator]=\"getText('filterIsNullOperator')\"\n                            [filterIsNotNullOperator]=\"getText('filterIsNotNullOperator')\"\n                            [filterIsEmptyOperator]=\"getText('filterIsEmptyOperator')\"\n                            [filterIsNotEmptyOperator]=\"getText('filterIsNotEmptyOperator')\"\n                            [filterStartsWithOperator]=\"getText('filterStartsWithOperator')\"\n                            [filterContainsOperator]=\"getText('filterContainsOperator')\"\n                            [filterNotContainsOperator]=\"getText('filterNotContainsOperator')\"\n                            [filterEndsWithOperator]=\"getText('filterEndsWithOperator')\"\n                            [filterGteOperator]=\"getText('filterGteOperator')\"\n                            [filterGtOperator]=\"getText('filterGtOperator')\"\n                            [filterLteOperator]=\"getText('filterLteOperator')\"\n                            [filterLtOperator]=\"getText('filterLtOperator')\"\n                            [filterIsTrue]=\"getText('filterIsTrue')\"\n                            [filterIsFalse]=\"getText('filterIsFalse')\"\n                            [filterBooleanAll]=\"getText('filterBooleanAll')\"\n                            [filterAfterOrEqualOperator]=\"getText('filterAfterOrEqualOperator')\"\n                            [filterAfterOperator]=\"getText('filterAfterOperator')\"\n                            [filterBeforeOperator]=\"getText('filterBeforeOperator')\"\n                            [filterBeforeOrEqualOperator]=\"getText('filterBeforeOrEqualOperator')\"\n                            [filterFilterButton]=\"getText('filterFilterButton')\"\n                            [filterClearButton]=\"getText('filterClearButton')\"\n                            [filterAndLogic]=\"getText('filterAndLogic')\"\n                            [filterOrLogic]=\"getText('filterOrLogic')\"\n                            [loading]=\"getText('loading')\"\n                            [columnMenu]=\"getText('columnMenu')\"\n                            [columns]=\"getText('columns')\"\n                            [sortable]=\"getText('sortable')\"\n                            [sortAscending]=\"getText('sortAscending')\"\n                            [sortDescending]=\"getText('sortDescending')\"\n                            [sortedAscending]=\"getText('sortedAscending')\"\n                            [sortedDescending]=\"getText('sortedDescending')\"\n                            [sortedDefault]=\"getText('sortedDefault')\"\n                            [columnsApply]=\"getText('columnsApply')\"\n                            [columnsReset]=\"getText('columnsReset')\"\n                        >\n                        </kendo-treelist-messages>\n                    </kendo-treelist>\n                </kendo-splitter-pane>\n                <kendo-splitter-pane\n                    [collapsible]=\"timelinePaneOptions?.collapsible\"\n                    [resizable]=\"timelinePaneOptions?.resizable\"\n                    [collapsed]=\"timelinePaneOptions?.collapsed\"\n                    [min]=\"timelinePaneOptions?.min\"\n                    [max]=\"timelinePaneOptions?.max\"\n                    [size]=\"timelinePaneOptions?.size\"\n                    (collapsedChange)=\"onTimelineCollapsedChange($event)\"\n                    (sizeChange)=\"onTimelinePaneSizeChange($event)\"\n                    [scrollable]=\"false\">\n                    <kendo-gantt-timeline\n                        *ngIf=\"views && views.length\"\n                        [renderDependencyDragClues]=\"renderDependencyDragClues\"\n                        [dragScrollSettings]=\"dragScrollSettings\"\n                        [rows]=\"renderedTreeListItems\"\n                        [slots]=\"timelineSlots\"\n                        [groupSlots]=\"timelineGroupSlots\"\n                        [tableWidth]=\"tableWidth\"\n                        [activeView]=\"activeView\"\n                        [taskContentTemplate]=\"taskContentTemplate?.templateRef\"\n                        [taskTemplate]=\"taskTemplate?.templateRef\"\n                        [summaryTaskTemplate]=\"summaryTaskTemplate?.templateRef\"\n                        [taskClass]=\"taskClass\"\n                        [dependencies]=\"dependencies\"\n                        [hasChildren]=\"hasChildren\"\n                        [isTaskSelected]=\"isTaskSelected\"\n                        [kendoEventsOutsideAngular]=\"{\n                            click: handleTimelineClick,\n                            contextmenu: handleTimelineRightClick,\n                            dblclick: handleTimelineDblClick,\n                            mousedown: handleTimelineMouseDown\n                        }\"\n                        [scope]=\"this\"\n                    ></kendo-gantt-timeline>\n                </kendo-splitter-pane>\n            </kendo-splitter>\n        </div>\n        <kendo-gantt-toolbar\n            *ngIf=\"showToolbar('bottom')\"\n            [showAddTask]=\"toolbarSettings.addTaskTool === 'bottom' || toolbarSettings.addTaskTool === 'both'\"\n            [showViewSelector]=\"toolbarSettings.viewSelectorTool === 'bottom' || toolbarSettings.viewSelectorTool === 'both'\"\n            class=\"k-gantt-footer k-toolbar k-gantt-toolbar\"\n            position=\"bottom\"></kendo-gantt-toolbar>\n        <kendo-gantt-edit-dialog\n            *ngIf=\"showEditingDialog\"\n            [data]=\"data\">\n        </kendo-gantt-edit-dialog>\n        <kendo-dialog\n            *ngIf=\"showConfirmationDialog\"\n            [width]=\"575\"\n            [height]=\"170\"\n            [title]=\"getText('confirmationDialogTitle')\"\n            (close)=\"showConfirmationDialog = false;\">\n            <span>{{ getText('confirmationDialogContent') }}</span>\n            <kendo-dialog-actions layout=\"normal\">\n                <kendo-treelist-spacer></kendo-treelist-spacer>\n                <button kendoButton [primary]=\"true\" (click)=\"handleDeleteConfirmation()\">{{ getText('deleteButtonText') }}</button>\n                <button kendoButton (click)=\"showConfirmationDialog = false;\">{{ getText('cancelButtonText') }}</button>\n            </kendo-dialog-actions>\n        </kendo-dialog>\n   "
         }),
         tslib_1.__metadata("design:paramtypes", [timeline_view_service_1.TimelineViewService,
             scroll_sync_service_1.ScrollSyncService,

package/dist/npm/gantt.module.js

@@ -7,11 +7,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var core_1 = require("@angular/core");
 var common_1 = require("@angular/common");
+var forms_1 = require("@angular/forms");
 var kendo_angular_layout_1 = require("@progress/kendo-angular-layout");
 var kendo_angular_treelist_1 = require("@progress/kendo-angular-treelist");
 var kendo_angular_buttons_1 = require("@progress/kendo-angular-buttons");
 var kendo_angular_common_1 = require("@progress/kendo-angular-common");
 var kendo_angular_dialog_1 = require("@progress/kendo-angular-dialog");
+var kendo_angular_label_1 = require("@progress/kendo-angular-label");
+var kendo_angular_inputs_1 = require("@progress/kendo-angular-inputs");
+var kendo_angular_dateinputs_1 = require("@progress/kendo-angular-dateinputs");
+var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
+var kendo_angular_popup_1 = require("@progress/kendo-angular-popup");
+var kendo_common_1 = require("@progress/kendo-common");
+var touch_enabled_1 = require("./common/touch-enabled");
 var gantt_component_1 = require("./gantt.component");
 var gantt_timeline_component_1 = require("./timeline/gantt-timeline.component");
 var gantt_tasks_table_body_component_1 = require("./rendering/gantt-tasks-table-body.component");
@@ -30,17 +38,15 @@ var toolbar_component_1 = require("./toolbar/toolbar.component");
 var toolbar_template_directive_1 = require("./toolbar/toolbar-template.directive");
 var view_selector_component_1 = require("./toolbar/view-selector.component");
 var gantt_dependency_directive_1 = require("./dependencies/gantt-dependency.directive");
+var dependency_drag_create_directive_1 = require("./dragging/dependency-drag-create.directive");
+var drag_validation_tooltip_component_1 = require("./dragging/drag-validation-tooltip.component");
+var timeline_scroll_directive_1 = require("./scrolling/timeline-scroll.directive");
 var columns_1 = require("./columns/columns");
 var timeline_day_view_component_1 = require("./timeline/timeline-day-view.component");
 var timeline_week_view_component_1 = require("./timeline/timeline-week-view.component");
 var timeline_month_view_component_1 = require("./timeline/timeline-month-view.component");
 var edit_dialog_component_1 = require("./editing/edit-dialog.component");
-var forms_1 = require("@angular/forms");
-var kendo_angular_label_1 = require("@progress/kendo-angular-label");
-var kendo_angular_inputs_1 = require("@progress/kendo-angular-inputs");
-var kendo_angular_dateinputs_1 = require("@progress/kendo-angular-dateinputs");
 var custom_messages_component_1 = require("./localization/custom-messages.component");
-var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
 var localized_messages_directive_1 = require("./localization/localized-messages.directive");
 var add_task_component_1 = require("./editing/add-task.component");
 var kendo_angular_grid_1 = require("@progress/kendo-angular-grid");
@@ -59,6 +65,8 @@ var IMPORTED_MODULES = [
     kendo_angular_buttons_1.ButtonsModule,
     kendo_angular_dialog_1.DialogModule,
     kendo_angular_common_1.EventsModule,
+    kendo_angular_popup_1.PopupModule,
+    kendo_angular_common_1.DraggableModule,
     kendo_angular_layout_1.TabStripModule,
     kendo_angular_grid_1.GridModule,
     kendo_angular_dropdowns_1.DropDownsModule
@@ -91,6 +99,7 @@ var DECLARATIONS = [
     columns_1.FooterTemplateDirective,
     expandable_directive_1.GanttExpandableDirective,
     gantt_dependency_directive_1.GanttDependencyDirective,
+    dependency_drag_create_directive_1.DependencyDragCreateDirective,
     timeline_day_view_component_1.TimelineDayViewComponent,
     timeline_week_view_component_1.TimelineWeekViewComponent,
     timeline_month_view_component_1.TimelineMonthViewComponent,
@@ -99,9 +108,13 @@ var DECLARATIONS = [
     custom_messages_component_1.CustomMessagesComponent,
     localized_messages_directive_1.LocalizedMessagesDirective,
     add_task_component_1.GanttAddTaskComponent,
+    drag_validation_tooltip_component_1.DragValidationTooltipComponent,
+    timeline_scroll_directive_1.TimelineScrollableDirective,
     dependencies_table_component_1.DependenciesTableComponent,
     task_fields_component_1.TaskFieldsComponent
 ];
+var ɵ0 = kendo_common_1.touchEnabled;
+exports.ɵ0 = ɵ0;
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
  * definition for the Gantt component.
@@ -141,9 +154,13 @@ var GanttModule = /** @class */ (function () {
             imports: IMPORTED_MODULES.slice(),
             declarations: DECLARATIONS.slice(),
             exports: DECLARATIONS.slice(),
+            entryComponents: [drag_validation_tooltip_component_1.DragValidationTooltipComponent],
             providers: [{
                     provide: kendo_angular_l10n_1.L10N_PREFIX,
                     useValue: 'kendo.gantt'
+                }, {
+                    provide: touch_enabled_1.TOUCH_ENABLED,
+                    useValue: ɵ0
                 }]
         })
     ], GanttModule);

package/dist/npm/index.js

@@ -13,10 +13,14 @@ var mapping_service_1 = require("./common/mapping.service");
 exports.MappingService = mapping_service_1.MappingService
 var option_changes_service_1 = require("./common/option-changes.service");
 exports.OptionChangesService = option_changes_service_1.OptionChangesService
+var touch_enabled_1 = require("./common/touch-enabled");
+exports.TOUCH_ENABLED = touch_enabled_1.TOUCH_ENABLED
 var dependency_dom_service_1 = require("./dependencies/dependency-dom.service");
 exports.DependencyDomService = dependency_dom_service_1.DependencyDomService
 var gantt_dependency_directive_1 = require("./dependencies/gantt-dependency.directive");
 exports.GanttDependencyDirective = gantt_dependency_directive_1.GanttDependencyDirective
+var drag_validation_tooltip_component_1 = require("./dragging/drag-validation-tooltip.component");
+exports.DragValidationTooltipComponent = drag_validation_tooltip_component_1.DragValidationTooltipComponent
 var add_task_component_1 = require("./editing/add-task.component");
 exports.GanttAddTaskComponent = add_task_component_1.GanttAddTaskComponent
 var dependencies_table_component_1 = require("./editing/dependencies-table.component");
@@ -51,6 +55,10 @@ var gantt_tasks_table_body_component_1 = require("./rendering/gantt-tasks-table-
 exports.GanttTasksTableBodyComponent = gantt_tasks_table_body_component_1.GanttTasksTableBodyComponent
 var scroll_sync_service_1 = require("./scrolling/scroll-sync.service");
 exports.ScrollSyncService = scroll_sync_service_1.ScrollSyncService
+var timeline_scroll_directive_1 = require("./scrolling/timeline-scroll.directive");
+exports.TimelineScrollableDirective = timeline_scroll_directive_1.TimelineScrollableDirective
+var timeline_scroll_service_1 = require("./scrolling/timeline-scroll.service");
+exports.TimelineScrollService = timeline_scroll_service_1.TimelineScrollService
 var gantt_timeline_component_1 = require("./timeline/gantt-timeline.component");
 exports.GanttTimelineComponent = gantt_timeline_component_1.GanttTimelineComponent
 var timeline_base_view_service_1 = require("./timeline/timeline-base-view.service");

package/dist/npm/main.js

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

package/dist/npm/models/events/dependency-add-event.interface.js

@@ -0,0 +1,6 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/models/view-item.interface.js

@@ -0,0 +1,6 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-gantt',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1641921322,
+    publishDate: 1642086647,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

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

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

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

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