@progress/kendo-angular-gantt 2.0.0-next.202204011501 → 2.0.0-next.202204121507

package/esm2015/gantt.component.js

@@ -0,0 +1,2227 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, forwardRef, HostBinding, Input, Output, EventEmitter, ViewChild, ContentChildren, ContentChild, QueryList, isDevMode } from '@angular/core';
+import { TreeListComponent, DataBoundTreeComponent, ExpandableTreeComponent } from '@progress/kendo-angular-treelist';
+import { Subscription } from 'rxjs';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from './package-metadata';
+import { anyChanged, hasObservers, Keys } from '@progress/kendo-angular-common';
+import { getIndexFromViewDigitKeyCode, isArrowUpDownKey, isExpandCollapseKey, isNavigationKey, isViewDigitKey } from './navigation/utils';
+import { GanttTimelineComponent } from './timeline/gantt-timeline.component';
+import { GanttColumnBase } from './columns/columns';
+import { fetchChildren, hasChildren, isSelected, rowClassCallback, taskClassCallback } from './common/default-callbacks';
+import { DependencyType } from './models/models';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { TimelineViewService } from './timeline/timeline-view.service';
+import { TimelineDayViewService } from './timeline/timeline-day-view.service';
+import { TimelineWeekViewService } from './timeline/timeline-week-view.service';
+import { TimelineMonthViewService } from './timeline/timeline-month-view.service';
+import { ScrollSyncService } from './scrolling/scroll-sync.service';
+import { DependencyDomService } from './dependencies/dependency-dom.service';
+import { MappingService } from './common/mapping.service';
+import { OptionChangesService } from './common/option-changes.service';
+import { EditService } from './editing/edit.service';
+import { TimelineScrollService } from './scrolling/timeline-scroll.service';
+import { GanttLocalizationService } from './localization/gantt-localization.service';
+import { NavigationService } from './navigation/navigation.service';
+import { areParentChild, getClosestTaskIndex, isClearButton, isColumnGroup, isPresent, isTask, isToolbar, normalizeGanttData, scrollbarWidth } from './utils';
+import { DEFAULT_TIMELINE_PANE_SETTINGS, DEFAULT_TREELIST_PANE_SETTINGS } from './models/splitter-pane-options.interface';
+import { GanttTaskTemplateDirective } from './template-directives/task-template.directive';
+import { GanttSummaryTaskTemplateDirective } from './template-directives/summary-task-template.directive';
+import { GanttTaskContentTemplateDirective } from './template-directives/task-content-template.directive';
+import { ToolbarTemplateDirective } from './toolbar/toolbar-template.directive';
+import { ViewBase } from './timeline/view-base';
+import { getEditItem } from './editing/utils';
+import { CellCloseEvent } from './models/events/cell-close-event.interface';
+import * as i0 from "@angular/core";
+import * as i1 from "./timeline/timeline-view.service";
+import * as i2 from "./scrolling/scroll-sync.service";
+import * as i3 from "./common/mapping.service";
+import * as i4 from "./common/option-changes.service";
+import * as i5 from "./dependencies/dependency-dom.service";
+import * as i6 from "./editing/edit.service";
+import * as i7 from "@progress/kendo-angular-l10n";
+import * as i8 from "./navigation/navigation.service";
+import * as i9 from "./toolbar/toolbar.component";
+import * as i10 from "@progress/kendo-angular-layout";
+import * as i11 from "@progress/kendo-angular-treelist";
+import * as i12 from "./timeline/gantt-timeline.component";
+import * as i13 from "./editing/edit-dialog.component";
+import * as i14 from "@progress/kendo-angular-dialog";
+import * as i15 from "./localization/localized-messages.directive";
+import * as i16 from "@angular/common";
+import * as i17 from "@progress/kendo-angular-common";
+import * as i18 from "@progress/kendo-angular-buttons";
+const TREELIST_GROUP_COLUMNS_CLASS = 'k-gantt-treelist-nested-columns';
+const DEFAULT_VIEW = 'week';
+const DEFAULT_DRAG_SCROLL_SETTINGS = {
+    enabled: true,
+    step: 3,
+    interval: 1,
+    threshold: 10
+};
+/**
+ * Represents the Kendo UI Gantt component for Angular.
+ *
+ * @example
+ * ```ts-preview
+ * _@Component({
+ *    selector: 'my-app',
+ *    template: `
+ *        <kendo-gantt
+ *            [style.height.px]="500"
+ *            [kendoGanttHierarchyBinding]="data"
+ *            childrenField="subtasks"
+ *            [dependencies]="dependencies">
+ *            <kendo-gantt-column
+ *                field="title"
+ *                title="Task"
+ *                [width]="200"
+ *                [expandable]="true"></kendo-gantt-column>
+ *            <kendo-gantt-column
+ *                field="start"
+ *                title="Start"
+ *                format="dd-MMM-yyyy"
+ *                [width]="120"></kendo-gantt-column>
+ *            <kendo-gantt-column
+ *                field="end"
+ *                title="End"
+ *                format="dd-MMM-yyyy"
+ *                [width]="120"></kendo-gantt-column>
+ *            <kendo-gantt-timeline-day-view></kendo-gantt-timeline-day-view>
+ *            <kendo-gantt-timeline-week-view></kendo-gantt-timeline-week-view>
+ *            <kendo-gantt-timeline-month-view></kendo-gantt-timeline-month-view>
+ *        </kendo-gantt>
+ *    `
+ * })
+ * class AppComponent {
+ *     public data: Task[] = [{
+ *         id: 7, title: 'Validation and R&D', start: new Date('2014-06-02T00:00:00.000Z'),
+ *         end: new Date('2014-06-19T00:00:00.000Z'), completionRatio: 0.45708333333333334,
+ *         subtasks: [
+ *             { id: 18, title: 'Project Kickoff', start: new Date('2014-06-02T00:00:00.000Z'),
+ *                 end: new Date('2014-06-02T00:00:00.000Z'), completionRatio: 0.23 },
+ *             { id: 11, title: 'Research', start: new Date('2014-06-02T00:00:00.000Z'),
+ *                 end: new Date('2014-06-07T00:00:00.000Z'), completionRatio: 0.5766666666666667,
+ *                 subtasks: [
+ *                     { id: 19, title: 'Validation', start: new Date('2014-06-02T00:00:00.000Z'),
+ *                         end: new Date('2014-06-04T00:00:00.000Z'), completionRatio: 0.25 },
+ *                     { id: 39, title: 'Specification', start: new Date('2014-06-04T00:00:00.000Z'),
+ *                         end: new Date('2014-06-07T00:00:00.000Z'), completionRatio: 0.66 }]
+ *             }, { id: 13, title: 'Implementation', start: new Date('2014-06-08T00:00:00.000Z'),
+ *                 end: new Date('2014-06-19T00:00:00.000Z'), completionRatio: 0.77,
+ *                 subtasks: [
+ *                     { id: 24, title: 'Prototype', start: new Date('2014-06-08T00:00:00.000Z'),
+ *                         end: new Date('2014-06-14T00:00:00.000Z'), completionRatio: 0.77 },
+ *                     { id: 29, title: 'UI and Interaction', start: new Date('2014-06-14T00:00:00.000Z'),
+ *                         end: new Date('2014-06-19T00:00:00.000Z'), completionRatio: 0.6 }]
+ *             }, { id: 17, title: 'Release', start: new Date('2014-06-19T00:00:00.000Z'),
+ *                 end: new Date('2014-06-19T00:00:00.000Z'), completionRatio: 0 }]
+ *     }];
+ *
+ *     public dependencies: GanttDependency[] = [
+ *         { id: 528, fromId: 18, toId: 19, type: DependencyType.FS },
+ *         { id: 529, fromId: 19, toId: 39, type: DependencyType.FS },
+ *         { id: 535, fromId: 24, toId: 29, type: DependencyType.FS },
+ *         { id: 551, fromId: 13, toId: 29, type: DependencyType.FF },
+ *         { id: 777, fromId: 7, toId: 11, type: DependencyType.SF },
+ *         { id: 556, fromId: 39, toId: 24, type: DependencyType.FS },
+ *         { id: 546, fromId: 29, toId: 17, type: DependencyType.FS },
+ *     ];
+ * }
+ * ```
+ */
+export class GanttComponent {
+    constructor(timelineViewService, scrollSyncService, renderer, mapper, optionChangesService, dependencyDomService, editService, localizationService, hostElement, zone, navigation) {
+        this.timelineViewService = timelineViewService;
+        this.scrollSyncService = scrollSyncService;
+        this.renderer = renderer;
+        this.mapper = mapper;
+        this.optionChangesService = optionChangesService;
+        this.dependencyDomService = dependencyDomService;
+        this.editService = editService;
+        this.localizationService = localizationService;
+        this.hostElement = hostElement;
+        this.zone = zone;
+        this.navigation = navigation;
+        /**
+         * @hidden
+         */
+        this.roleDescription = 'Gantt Chart';
+        /**
+         * @hidden
+         */
+        this.role = 'application';
+        this.hostClasses = true;
+        /**
+         * 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 = 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.
+         *
+         * Holds data about the affected [`items`]({% slug api_gantt_selectionchangeevent %}#toc-items) and the attempted [`action`]({% slug api_gantt_selectionchangeevent %}#toc-action):
+         * - `select` - Triggered on `click` or `ctrl + click` on deselected items.
+         * - `remove` - Triggered on `ctrl + click` on selected items.
+         */
+        this.selectionChange = new EventEmitter();
+        /**
+         * Enables or disables the Gantt selection mechanism ([see example]({% slug selection_gantt %}#toc-custom-selection)).
+         *
+         * > When set to `true`, the [`isSelected`]({% slug api_gantt_ganttcomponent %}#toc-isselected) callback has to be provided.
+         * > When applied, the [`SelectableDirective`]({% slug api_gantt_selectabledirective %}) sets `selectable` to `true` internally.
+         */
+        this.selectable = false;
+        /**
+         * Defines the dependencies that will be drawn between the rendered tasks.
+         *
+         * > The dependency data items should either conform to the [`GanttDependency`]({% slug api_gantt_ganttdependency %}) interface, or a [`dependencyModelFields`]({% slug api_gantt_ganttcomponent %}#toc-dependencymodelfields) object has to be provided.
+         */
+        this.dependencies = [];
+        /**
+         * Enables the sorting of the Gantt columns that have their `field` option set.
+         */
+        this.sortable = false;
+        /**
+         * The descriptors by which the data will be sorted.
+         */
+        this.sort = [];
+        /**
+         * Enables the filtering of the Gantt columns that have their `field` option set.
+         *
+         * @default false
+         */
+        this.filterable = false;
+        /**
+         * The start time of the work day.
+         * Accepts string values in the `HH:mm` format.
+         */
+        this.workDayStart = '08:00';
+        /**
+         * The end time of the work day.
+         * Accepts string values in the `HH:mm` format.
+         */
+        this.workDayEnd = '17:00';
+        /**
+         * The start of the work week (index based).
+         */
+        this.workWeekStart = 1;
+        /**
+         * The end of the work week (index based).
+         */
+        this.workWeekEnd = 5;
+        /**
+         * If set to `true`, the user can use dedicated shortcuts to interact with the Gantt.
+         * By default, navigation is disabled for the TreeList and Timeline parts of the component,
+         * ([see example]({% slug keyboard_navigation_gantt %})).
+         */
+        this.navigable = false;
+        /**
+         * Indicates whether the Gantt columns will be resized during initialization so that they fit their headers and row content.
+         * Columns with autoSize set to false are excluded.
+         *
+         * @default false
+         */
+        this.columnsAutoSize = false;
+        /**
+         * Specifies if the column menu of the columns will be displayed.
+         *
+         * @default false
+         */
+        this.columnMenu = false;
+        /**
+         * If set to true, the user can reorder columns by dragging their header cells.
+         *
+         * @default false
+         */
+        this.columnsReorderable = false;
+        /**
+         * If set to true, the user can resize columns by dragging the edges (resize handles) of their header cells.
+         *
+         * @default false
+         */
+        this.columnsResizable = false;
+        /**
+         * Fires when an item is expanded.
+         */
+        this.rowExpand = new EventEmitter();
+        /**
+         * Fires when a Gantt task in the timeline pane is double-clicked. The data item, associated with the clicked task,
+         * is available in the event data. Use the event handler to open a task editing dialog as necessary.
+         */
+        this.taskDblClick = new EventEmitter();
+        /**
+         * Fires when the user double clicks a cell.
+         */
+        this.cellDblClick = new EventEmitter();
+        /**
+         * Fires when the user leaves an edited cell.
+         */
+        this.cellClose = new EventEmitter();
+        /**
+         * Fires when the end user clicks the `Delete` button in the task editing dialog,
+         * the task delete icon, or presses the `Delete` key on the keyboard when a task in the timeline is focused.
+         * Use the event handler to open a confirmation dialog when necessary.
+         */
+        this.taskDelete = new EventEmitter();
+        /**
+         * Fires when an item is collapsed.
+         */
+        this.rowCollapse = new EventEmitter();
+        /**
+         * Fires when the user confirms deleting a task.
+         */
+        this.remove = new EventEmitter();
+        /**
+         * Fires when the user cancels editing a task.
+         */
+        this.cancel = new EventEmitter();
+        /**
+         * Fires when the user saves an edited task.
+         */
+        this.save = new EventEmitter();
+        /**
+         * Fires when the user adds a task.
+         */
+        this.taskAdd = new EventEmitter();
+        /**
+         * Fires when the user adds a dependency via dragging
+         * [see example]({% slug editing_drag_create_dependencies_gantt %}#toc-basic-concepts).
+         */
+        this.dependencyAdd = new EventEmitter();
+        /**
+         * Fires when the sorting of the Gantt is changed.
+         * You have to handle the event yourself and sort the data.
+         */
+        this.sortChange = new EventEmitter();
+        /**
+         * Fires when the Gantt filter is modified.
+         * You have to handle the event yourself and filter the data.
+         */
+        this.filterChange = new EventEmitter();
+        /**
+         * Fires when the filter or sort state of the Gantt is changed.
+         */
+        this.dataStateChange = new EventEmitter();
+        /**
+         * Fires when the collapsed state of the treelist pane is changed.
+         */
+        this.treeListPaneCollapsedChange = new EventEmitter();
+        /**
+         * Fires when the collapsed state of the timeline pane is changed.
+         */
+        this.timelinePaneCollapsedChange = new EventEmitter();
+        /**
+         * Fires each time the user resizes the timeline pane.
+         */
+        this.timelinePaneSizeChange = new EventEmitter();
+        /**
+         * Fires each time the user selects a different view type. The event data contains the type of the newly selected view.
+         */
+        this.activeViewChange = new EventEmitter();
+        /**
+         * Fires when the user completes the resizing of the column.
+         */
+        this.columnResize = new EventEmitter();
+        /**
+         * Fires when the user completes the reordering of the column.
+         */
+        this.columnReorder = new EventEmitter();
+        /**
+         * Fires when the user changes the visibility of the columns from the column menu or column chooser.
+         */
+        this.columnVisibilityChange = new EventEmitter();
+        /**
+         * @hidden
+         *
+         * Fires when the user changes the locked state of the columns from the column menu or by reordering the columns.
+         */
+        this.columnLockedChange = new EventEmitter();
+        /**
+         * Fires when a cell is clicked.
+         */
+        this.cellClick = new EventEmitter();
+        /**
+         * Fires when a task is clicked.
+         */
+        this.taskClick = new 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
+         *
+         * Used by the GanttExpandableDirective.
+         */
+        this.expandStateChange = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.showEditingDialog = false;
+        /**
+         * @hidden
+         */
+        this.showConfirmationDialog = false;
+        this._columns = new QueryList();
+        this._data = [];
+        this._dragScrollSettings = Object.assign({}, DEFAULT_DRAG_SCROLL_SETTINGS);
+        this._timelinePaneOptions = Object.assign({}, DEFAULT_TIMELINE_PANE_SETTINGS);
+        this._treeListPaneOptions = Object.assign({}, DEFAULT_TREELIST_PANE_SETTINGS);
+        this._rowClass = rowClassCallback;
+        this._taskClass = taskClassCallback;
+        this._activeView = DEFAULT_VIEW;
+        this._toolbarSettings = {
+            position: 'top',
+            addTaskTool: 'none',
+            viewSelectorTool: 'top'
+        };
+        this._fetchChildren = fetchChildren;
+        this._hasChildren = hasChildren;
+        this.rtl = false;
+        this.optionChangesSubscriptions = new Subscription();
+        this.editServiceSubscription = new Subscription();
+        validatePackage(packageMetadata);
+        this.optionChangesSubscriptions.add(this.optionChangesService.viewChanges.subscribe(() => {
+            this.loadTimelineData();
+        }));
+        this.optionChangesSubscriptions.add(this.optionChangesService.columnChanges.subscribe(() => {
+            this.treeList.columns.notifyOnChanges();
+        }));
+        this.editService.getSelectedItem = this.getFirstSelectedItem.bind(this);
+        this.editServiceSubscription.add(this.editService.showEditingDialog.subscribe(show => this.showEditingDialog = show));
+        this.editServiceSubscription.add(this.editService.taskDelete.subscribe(task => {
+            if (hasObservers(this.taskDelete)) {
+                this.zone.run(() => this.notifyTaskDelete(task));
+            }
+        }));
+        this.editServiceSubscription.add(this.editService.editEvent.subscribe(args => {
+            this[args.editResultType].emit({
+                taskFormGroup: args.taskFormGroup,
+                item: getEditItem(args.dataItem, this.treeList.view.data, this.mapper),
+                dependencies: args.dependencies,
+                sender: this
+            });
+            this.showConfirmationDialog = this.showEditingDialog = false;
+            this.editService.dataItem = this.editService.taskFormGroup = null;
+            this.updateView();
+            if (this.navigable) {
+                this.focus();
+            }
+        }));
+        this.editServiceSubscription.add(this.editService.addEvent.subscribe(args => {
+            const selectedItem = this.getFirstSelectedItem();
+            this.taskAdd.emit({
+                actionType: args.actionType,
+                selectedItem: selectedItem ? getEditItem(selectedItem, this.treeList.view.data, this.mapper) : null
+            });
+            this.updateView();
+        }));
+        this.localizationSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
+            this.rtl = rtl;
+            this.direction = this.rtl ? 'rtl' : 'ltr';
+        });
+    }
+    get toolbarTemplate() {
+        if (this._customToolbarTemplate) {
+            return this._customToolbarTemplate;
+        }
+        return this.toolbarTemplateChildren ? this.toolbarTemplateChildren.first : undefined;
+    }
+    set toolbarTemplate(customToolbarTemplate) {
+        this._customToolbarTemplate = customToolbarTemplate;
+    }
+    get hostRoleDescriptionAttr() {
+        return this.roleDescription;
+    }
+    get hostRoleAttr() {
+        return this.role;
+    }
+    get dir() {
+        return this.direction;
+    }
+    /**
+     * A query list of all declared columns.
+     */
+    set columns(columns) {
+        this._columns = columns;
+        this.updateTreeListGroupClass(columns);
+    }
+    get columns() {
+        return this._columns;
+    }
+    /**
+     * Sets the fields which will be used to extract the task data from the provided `data` array items.
+     * The `id` field is also used as a TreeList data item unique identifier (defaults to `'id'`).
+     *
+     * > If no object is provided, the Gantt task data items will have to conform to the [`GanttTask`]({% slug api_gantt_gantttask %}) interface.
+     */
+    set taskModelFields(fields) {
+        this.mapper.taskFields = fields;
+    }
+    /**
+     * Sets the fields which will be used to extract the dependency data from the provided `dependencies` array items.
+     *
+     * > If no object is provided, the Gantt dependency data items will have to conform to the [`GanttDependency`]({% slug api_gantt_ganttdependency %}) interface.
+     */
+    set dependencyModelFields(fields) {
+        this.mapper.dependencyFields = fields;
+    }
+    /**
+     * The active timeline view.
+     * @default 'week'
+     */
+    set activeView(view) {
+        this._activeView = view;
+    }
+    get activeView() {
+        /**
+         * If the default/provided activeView is not among the provided views,
+         * fallback to setting the first provided view as active
+         */
+        const view = this.views.find(view => view.type === this._activeView) ?
+            this._activeView :
+            this.views.first.type;
+        return view;
+    }
+    /**
+     * Gets or sets the data of the Gantt.
+     *
+     * > The task data items should either conform to the [`GanttTask`]({% slug api_gantt_gantttask %}) interface, or a [`taskModelFields`]({% slug api_gantt_ganttcomponent %}#toc-taskmodelfields) object has to be provided.
+     */
+    set data(data) {
+        this._data = normalizeGanttData(data);
+        this.loadTimelineData();
+    }
+    get data() {
+        return this._data;
+    }
+    /**
+     * The toolbar configuration. Defines the position and content of the toolbar(s).
+     * The available properties are `position`, `addTaskTool`, and `viewSelectorTool`.
+     * All are optional and default to `top`.
+     *
+     * The possible values for each option are:
+     * - `top`&mdash;Positions the toolbar above the Gantt panes. Renders the respective tool in the top toolbar.
+     * - `bottom`&mdash;Positions the toolbar below the Gantt panes. Renders the respective tool in the bottom toolbar.
+     * - `both`&mdash;Displays two toolbar instances. Positions the first one above,
+     * and the second one - below the Gantt panes. Renders the respective tool in the both toolbars.
+     * - `none`&mdash;No toolbar is rendered when used for setting `position`.
+     * No add task or view selector tool is rendered when used for setting `addTaskTool` or `viewSelectorTool`.
+     */
+    set toolbarSettings(value) {
+        this._toolbarSettings = {
+            position: value.position || 'top',
+            addTaskTool: value.addTaskTool || 'none',
+            viewSelectorTool: value.viewSelectorTool || 'top'
+        };
+    }
+    get toolbarSettings() {
+        return this._toolbarSettings;
+    }
+    /**
+     * Gets or sets the callback function that retrieves the child items for a particular item.
+     */
+    set fetchChildren(fn) {
+        this._fetchChildren = fn;
+        this.editService.fetchChildren = fn;
+    }
+    get fetchChildren() {
+        return this._fetchChildren;
+    }
+    /**
+     * Gets or sets the callback function that indicates if a particular item has child items.
+     */
+    set hasChildren(fn) {
+        this._hasChildren = fn;
+        this.editService.hasChildren = fn;
+    }
+    get hasChildren() {
+        return this._hasChildren;
+    }
+    /**
+     * The options of the timeline splitter pane. By default the pane is `collapsible`,
+     * `resizable`, not `collapsed`, and its `size` is `'50%'`.
+     */
+    set timelinePaneOptions(value) {
+        if (this._timelinePaneOptions.collapsed && !value.collapsed) {
+            this.dependencyDomService.notifyChanges();
+        }
+        this._timelinePaneOptions = Object.assign(Object.assign({}, DEFAULT_TIMELINE_PANE_SETTINGS), value);
+    }
+    get timelinePaneOptions() {
+        return Object.assign(Object.assign({}, this._timelinePaneOptions), { size: this.treeListPaneOptions.collapsed ? '100%' : this._timelinePaneOptions.size });
+    }
+    /**
+     * The options of the treelist splitter pane.
+     * By default the pane is `collapsible` and not `collapsed`.
+     */
+    set treeListPaneOptions(value) {
+        this._treeListPaneOptions = Object.assign(Object.assign({}, DEFAULT_TREELIST_PANE_SETTINGS), value);
+    }
+    get treeListPaneOptions() {
+        return this._treeListPaneOptions;
+    }
+    /**
+     * Defines a function that is executed for every task in the component.
+     * The classes returned from the function are applied to the task wrapper element.
+     */
+    set taskClass(fn) {
+        if (isDevMode() && typeof fn !== 'function') {
+            throw new Error(`taskClass must be a function, but received ${JSON.stringify(fn)}.`);
+        }
+        this._taskClass = fn;
+    }
+    get taskClass() {
+        return this._taskClass;
+    }
+    /**
+     * Defines a function that is executed for every data row in the component.
+     */
+    set rowClass(fn) {
+        if (isDevMode() && typeof fn !== 'function') {
+            throw new Error(`rowClass must be a function, but received ${JSON.stringify(fn)}.`);
+        }
+        this._rowClass = fn;
+    }
+    get rowClass() {
+        return this._rowClass;
+    }
+    /**
+     * The name of the field which contains the unique identifier of the task data item.
+     * Defaults to 'id'.
+     */
+    get taskIdField() {
+        return this.mapper.taskFields.id;
+    }
+    /**
+     * 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 dragScrollSettings(settings) {
+        this._dragScrollSettings = Object.assign(Object.assign({}, DEFAULT_DRAG_SCROLL_SETTINGS), settings);
+    }
+    get dragScrollSettings() {
+        return this._dragScrollSettings;
+    }
+    /**
+     * @hidden
+     */
+    get renderedTreeListItems() {
+        if (!isPresent(this.treeList)) {
+            return [];
+        }
+        return this.treeList.view.data.map(item => item.data);
+    }
+    /**
+     * @hidden
+     */
+    get viewItems() {
+        if (!isPresent(this.treeList)) {
+            return [];
+        }
+        return this.treeList.view.data;
+    }
+    /**
+     * @hidden
+     */
+    get filterMenu() {
+        return this.filterable ? 'menu' : false;
+    }
+    /**
+     * @hidden
+     */
+    get viewService() {
+        if (!this.views || !this.views.length) {
+            return null;
+        }
+        // TODO: review if this is a performance concern?
+        return this.timelineViewService.service(this.activeView);
+    }
+    /**
+     * @hidden
+     *
+     * Retrieves the `isSelected` callback if `selectable` is set to `true`
+     * Otherwise returns the default callback, which always returns `false`.
+     */
+    get isTaskSelected() {
+        return this.selectable ? this.isSelected : isSelected;
+    }
+    /**
+     * @hidden
+     *
+     * Used by the GanttExpandableDirective.
+     */
+    get idGetter() {
+        if (isPresent(this.treeList)) {
+            return this.treeList.idGetter;
+        }
+    }
+    /**
+     * @hidden
+     *
+     * Used by the views selector.
+     */
+    get viewTypes() {
+        return this.views.map(view => view.type);
+    }
+    /**
+     * @hidden
+     */
+    get isInEditMode() {
+        return this.showEditingDialog || this.showConfirmationDialog || this.treeList.isEditing();
+    }
+    ngOnChanges(changes) {
+        if (anyChanged(['data', 'activeView', 'workWeekStart', 'workWeekEnd', 'workDayStart', 'workDayEnd'], changes)) {
+            this.loadTimelineData();
+        }
+    }
+    ngAfterViewInit() {
+        this.updateTreeListMargin();
+        this.zone.runOutsideAngular(() => {
+            this.keydownListenerDisposers = this.renderer.listen(this.hostElement.nativeElement, 'keydown', this.handleKeydown.bind(this));
+        });
+        if (this.navigable) {
+            this.navigation.initialize({
+                treeList: this.treeList,
+                host: this.hostElement.nativeElement,
+                treeListElement: this.treeList.wrapper.nativeElement,
+                timelineElement: this.timeline.timelineContent.nativeElement,
+                columns: this.columns,
+                data: this.data
+            });
+        }
+        const leftContainer = this.treeList.wrapper.nativeElement.querySelector('kendo-treelist-list > div');
+        this.scrollSyncService.registerElement(leftContainer, 'treelist');
+    }
+    ngAfterContentInit() {
+        if (isDevMode() && this.views.length === 0) {
+            throw new Error('No views declared for <kendo-gantt>. Please, declare at least one view.');
+        }
+        this.loadTimelineData();
+        this.updateTreeListGroupClass();
+    }
+    ngOnDestroy() {
+        this.optionChangesSubscriptions.unsubscribe();
+        this.editServiceSubscription.unsubscribe();
+        if (this.localizationSubscription) {
+            this.localizationSubscription.unsubscribe();
+        }
+        if (isPresent(this.keydownListenerDisposers)) {
+            this.keydownListenerDisposers();
+            this.keydownListenerDisposers = null;
+        }
+    }
+    /**
+     * Focuses the last active cell or task in the Gantt.
+     * If no item has previously been focused, the first cell of the TreeList part will receive focus,
+     * ([see example]({% slug keyboard_navigation_gantt %}#toc-controlling-the-focus)).
+     */
+    focus() {
+        if (this.navigable) {
+            this.navigation.focusLastActiveItem();
+        }
+    }
+    /**
+     * Focuses the targeted cell in the TreeList part of the component,
+     * ([see example]({% slug keyboard_navigation_gantt %}#toc-controlling-the-focus)).
+     */
+    focusCell(rowIndex, colIndex) {
+        if (this.navigable) {
+            this.navigation.focusCell(rowIndex, colIndex);
+        }
+    }
+    /**
+     * Focuses the targeted task in the Timeline part of the component,
+     * ([see example]({% slug keyboard_navigation_gantt %}#toc-controlling-the-focus)).
+     */
+    focusTask(taskIndex) {
+        if (this.navigable) {
+            this.navigation.focusTask(taskIndex);
+        }
+    }
+    /**
+     * Applies the minimum possible width for the specified column,
+     * so that the whole text fits without wrapping. This method expects the Gantt
+     * to be resizable (set `resizable` to `true`).
+     * Makes sense to execute this method only after the Gantt is already populated with data.
+     */
+    autoFitColumn(column) {
+        if (isPresent(this.treeList)) {
+            this.treeList.autoFitColumn(column);
+        }
+    }
+    /**
+     * Adjusts the width of the specified columns to fit the entire content, including headers, without wrapping.
+     * If no columns are specified, `autoFitColumns` is applied to all columns.
+     *
+     * This method requires the Gantt to be resizable (set `resizable` to `true`).
+     */
+    autoFitColumns(columns = this.columns) {
+        if (isPresent(this.treeList)) {
+            this.treeList.autoFitColumns(columns);
+        }
+    }
+    /**
+     * Clears the already loaded children for the dataItem so that the Gantt will fetch them again the next time it is rendered.
+     */
+    reload(dataItem, reloadChildren) {
+        if (isPresent(this.treeList)) {
+            this.treeList.reload(dataItem, reloadChildren);
+        }
+    }
+    /**
+     * Changes the position of the specified column.
+     * The reordering of columns operates only on the level
+     * which is inferred by the source column.
+     * For the `reorderColumn` method to work properly,
+     * the `source` column has to be visible.
+     *
+     * @param {ColumnBase} source - The column whose position will be changed.
+     * @param {number} destIndex - The new position of the column.
+     * @param {ColumnReorderConfig} options - Additional options.
+     */
+    reorderColumn(source, destIndex, options = { before: false }) {
+        if (isPresent(this.treeList)) {
+            this.treeList.reorderColumn(source, destIndex, options);
+        }
+    }
+    /**
+     * Forces the TreeList to evaluate if some data items have changed and re-renders the rows information, if needed.
+     * Recalculates and re-renders the Timeline period, if needed.
+     * Redraws changed dependencies, if needed.
+     * Executes all row-related callbacks anew.
+     */
+    updateView() {
+        if (isPresent(this.treeList)) {
+            this.treeList.updateView();
+        }
+        this.loadTimelineData();
+        this.dependencyDomService.notifyChanges();
+    }
+    /**
+     * Opens the task editing dialog.
+     */
+    editTask(dataItem, formGroup) {
+        if (!this.showEditingDialog) {
+            const taskId = this.mapper.extractFromTask(dataItem, 'id');
+            const dependencies = this.dependencies.filter(item => this.mapper.extractFromDependency(item, 'toId') === taskId
+                || this.mapper.extractFromDependency(item, 'fromId') === taskId);
+            this.editService.createEditDialog(dataItem, formGroup, dependencies);
+        }
+    }
+    /**
+     * Closes the task editing dialog.
+     */
+    closeTaskDialog() {
+        if (this.showEditingDialog) {
+            this.editService.closeEditDialog();
+        }
+    }
+    /**
+     * Opens the delete task confirmation dialog.
+     */
+    openConfirmationDialog() {
+        this.showConfirmationDialog = true;
+    }
+    /**
+     * @hidden
+     */
+    handleConfirmationDialogClose() {
+        this.showConfirmationDialog = false;
+        if (this.navigable) {
+            this.focus();
+        }
+    }
+    /**
+     * Opens a cell for editing.
+     */
+    editCell(dataItem, column, formGroup) {
+        this.treeList.editCell(dataItem, column, formGroup);
+    }
+    /**
+     * Closes an edited cell.
+     */
+    closeCell() {
+        this.treeList.closeCell();
+    }
+    /**
+     * @hidden
+     */
+    handleCellClose(e) {
+        this.cellClose.emit(new CellCloseEvent(Object.assign(Object.assign({}, e), { item: this.editItem, sender: this })));
+        this.dependencyDomService.notifyChanges();
+    }
+    /**
+     * @hidden
+     */
+    onTreeListCollapsedChange(collapsed) {
+        this.treeListPaneCollapsedChange.emit(collapsed);
+        if (!collapsed) {
+            this.scrollSyncService.syncScrollTop('timeline', 'treelist');
+        }
+    }
+    /**
+     * @hidden
+     */
+    onTimelineCollapsedChange(collapsed) {
+        this.timelinePaneCollapsedChange.emit(collapsed);
+        if (!collapsed) {
+            this.scrollSyncService.syncScrollTop('treelist', 'timeline');
+            this.dependencyDomService.notifyChanges();
+        }
+    }
+    /**
+     * @hidden
+     */
+    loadTimelineData() {
+        if (!isPresent(this.viewService)) {
+            return;
+        }
+        const activeViewOptions = this.getActiveViewOptions();
+        this.viewService.options = Object.assign({ workWeekStart: this.workWeekStart, workWeekEnd: this.workWeekEnd, workDayStart: this.workDayStart, workDayEnd: this.workDayEnd }, activeViewOptions);
+        this.tableWidth = this.viewService.getTableWidth(this.data);
+        const [groupedSlots, slots] = this.viewService.getSlots(this.data);
+        this.timelineSlots = slots;
+        this.timelineGroupSlots = groupedSlots;
+    }
+    /**
+     * @hidden
+     */
+    showToolbar(position) {
+        return this.toolbarSettings.position !== 'none' && ([position, 'both'].indexOf(this.toolbarSettings.position) > -1);
+    }
+    /**
+     * @hidden
+     */
+    handleColumnVisibilityChange(event) {
+        this.columnVisibilityChange.emit(event);
+        this.updateTreeListGroupClass();
+    }
+    /**
+     * @hidden
+     */
+    onTimelinePaneSizeChange(e) {
+        this._timelinePaneOptions.size = e;
+        this.timelinePaneSizeChange.emit(e);
+    }
+    /**
+     * @hidden
+     */
+    handleTimelineRightClick(event) {
+        const target = event.target;
+        const gantt = this.hostElement.nativeElement;
+        if (!isTask(target, gantt) || isClearButton(target, gantt)) {
+            return;
+        }
+        if (hasObservers(this.taskClick)) {
+            const taskIndex = getClosestTaskIndex(target, gantt);
+            const task = this.renderedTreeListItems[taskIndex];
+            this.zone.run(() => this.notifyTaskClick(event, task, taskIndex));
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleTimelineClick(event) {
+        const target = event.target;
+        const gantt = this.hostElement.nativeElement;
+        if (!isTask(target, gantt) || isClearButton(target, gantt)) {
+            return;
+        }
+        const taskIndex = getClosestTaskIndex(target, gantt);
+        const task = this.renderedTreeListItems[taskIndex];
+        const selectionAction = this.getSelectionAction(event, task);
+        if ((hasObservers(this.selectionChange) && !this.isSameSelection(selectionAction, task)) ||
+            hasObservers(this.taskClick)) {
+            this.zone.run(() => {
+                this.notifySelectionChange(task, selectionAction);
+                this.notifyTaskClick(event, task, taskIndex);
+            });
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleTreeListDoubleClick(event) {
+        if (!isPresent(this.lastTreeListCellClick) || event.target !== this.lastTreeListCellClick.originalEvent.target) {
+            return;
+        }
+        this.editItem = getEditItem(this.lastTreeListCellClick.dataItem, this.treeList.view.data, this.mapper);
+        if (hasObservers(this.cellDblClick)) {
+            this.zone.run(() => {
+                this.cellDblClick.emit({
+                    column: this.lastTreeListCellClick.column,
+                    columnIndex: this.lastTreeListCellClick.columnIndex,
+                    dataItem: this.lastTreeListCellClick.dataItem,
+                    isEdited: this.lastTreeListCellClick.isEdited,
+                    originalEvent: this.lastTreeListCellClick.originalEvent,
+                    rowIndex: this.lastTreeListCellClick.rowIndex,
+                    type: 'dblclick',
+                    sender: this
+                });
+            });
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleTreeListSelectionChange(event) {
+        // prevent selection change from right-click
+        if (isPresent(this.lastTreeListCellClick) && this.lastTreeListCellClick.type === 'contextmenu') {
+            return;
+        }
+        const task = event.items.map(item => item.dataItem)[0]; // single selection only currently available
+        const action = event.action;
+        this.notifySelectionChange(task, action);
+    }
+    /**
+     * @hidden
+     */
+    handleTreeListCellClick(event) {
+        this.lastTreeListCellClick = event;
+        this.cellClick.emit({
+            column: event.column,
+            columnIndex: event.columnIndex,
+            dataItem: event.dataItem,
+            isEdited: event.isEdited,
+            originalEvent: event.originalEvent,
+            rowIndex: event.rowIndex,
+            type: event.type,
+            sender: this
+        });
+    }
+    /**
+     * @hidden
+     */
+    handleDeleteConfirmation() {
+        this.editService.triggerEditEvent('remove');
+    }
+    /**
+     * @hidden
+     */
+    handleTimelineMouseDown(event) {
+        const target = event.target;
+        const gantt = this.hostElement.nativeElement;
+        if (!isTask(target, gantt) || isClearButton(target, gantt)) {
+            return;
+        }
+        event.preventDefault();
+    }
+    /**
+     * @hidden
+     */
+    handleTimelineDblClick(event) {
+        const target = event.target;
+        const gantt = this.hostElement.nativeElement;
+        if (!isTask(target, gantt) || isClearButton(target, gantt)) {
+            return;
+        }
+        if (hasObservers(this.taskDblClick)) {
+            const taskIndex = getClosestTaskIndex(target, gantt);
+            const task = this.renderedTreeListItems[taskIndex];
+            this.zone.run(() => this.taskDblClick.emit({
+                dataItem: task,
+                originalEvent: event,
+                sender: this,
+                index: taskIndex,
+                type: 'dblclick'
+            }));
+        }
+    }
+    /**
+     * @hidden
+     */
+    getText(token) {
+        return this.localizationService.get(token);
+    }
+    /**
+     * @hidden
+     */
+    changeActiveView(view) {
+        if (view !== this.activeView) {
+            this.activeView = view;
+            this.loadTimelineData();
+            this.scrollSyncService.resetTimelineScrollLeft();
+            this.activeViewChange.emit(view);
+        }
+    }
+    /**
+     * @hidden
+     */
+    notifyTaskClick(event, dataItem, itemIndex) {
+        // simulates the TreeList `cellClick` event triggered by enter press (type: 'click')
+        const type = event instanceof KeyboardEvent ? 'click' : event.type;
+        this.taskClick.emit({
+            originalEvent: event,
+            dataItem: dataItem,
+            index: itemIndex,
+            type: type,
+            sender: this
+        });
+    }
+    /**
+     * @hidden
+     */
+    notifySelectionChange(dataItem, action) {
+        if (this.isSameSelection(action, dataItem)) {
+            return;
+        }
+        this.selectionChange.emit({
+            action: action,
+            items: [dataItem],
+            sender: this
+        });
+        this.treeList.updateView();
+    }
+    /**
+     * @hidden
+     */
+    notifyTaskDelete(task) {
+        this.editService.dataItem = task;
+        this.taskDelete.emit({
+            item: getEditItem(task, this.treeList.view.data, this.mapper),
+            sender: this
+        });
+    }
+    /**
+     * @hidden
+     */
+    isSameSelection(action, dataItem) {
+        return action === 'select' && this.isSelected(dataItem);
+    }
+    /**
+     * @hidden
+     */
+    getSelectionAction({ ctrlKey, metaKey }, dataItem) {
+        const shouldToggleSelection = ctrlKey || metaKey;
+        return (shouldToggleSelection && this.isSelected(dataItem)) ? 'remove' : 'select';
+    }
+    updateTreeListGroupClass(columns = this.columns) {
+        if (!isPresent(this.treeList)) {
+            return;
+        }
+        const hasColumns = isPresent(columns) && columns.length > 0;
+        const hasVisibleGroupedColumns = hasColumns && columns.some(column => isColumnGroup(column) && column.childrenArray.some(childColumn => childColumn.isVisible));
+        if (hasVisibleGroupedColumns) {
+            this.renderer.addClass(this.treeList.wrapper.nativeElement, TREELIST_GROUP_COLUMNS_CLASS);
+        }
+        else {
+            this.renderer.removeClass(this.treeList.wrapper.nativeElement, TREELIST_GROUP_COLUMNS_CLASS);
+        }
+    }
+    /**
+     * Used to hide the vertical scrollbar
+     */
+    updateTreeListMargin() {
+        const treeListContentEl = this.treeList.wrapper.nativeElement.querySelector('.k-treelist .k-grid-content');
+        this.renderer.setStyle(treeListContentEl, 'margin-right', `${-Math.abs(scrollbarWidth() - 1)}px`);
+    }
+    get activeTimelineIndex() {
+        return this.navigation.activeTimelineIndex;
+    }
+    getActiveViewOptions() {
+        if (!this.views) {
+            return;
+        }
+        return this.views.find(view => view.type === this.activeView);
+    }
+    getFirstSelectedItem() {
+        const isSelectedCallback = this.isSelected || isSelected;
+        const loadedItems = this.renderedTreeListItems || [];
+        return loadedItems.find(isSelectedCallback);
+    }
+    defaultValidateNewDependencyCallback(dependency) {
+        const fromTaskId = this.mapper.extractFromDependency(dependency, 'fromId');
+        const toTaskId = this.mapper.extractFromDependency(dependency, 'toId');
+        const fromTask = this.treeList.view.data.find(task => this.mapper.extractFromTask(task.data, 'id') === fromTaskId);
+        const toTask = this.treeList.view.data.find(task => 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 (!isPresent(fromTask) || !isPresent(fromTask.data) ||
+            !isPresent(toTask) || !isPresent(toTask.data) ||
+            fromTask.data === toTask.data) {
+            return false;
+        }
+        const tasksDependentOnOneAnother = this.dependencies.some(current => {
+            const currentFromId = this.mapper.extractFromDependency(current, 'fromId');
+            const 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 || areParentChild(fromTask, toTask)) {
+            return false;
+        }
+        const fromTaskStart = this.mapper.extractFromTask(fromTask.data, 'start');
+        const fromTaskEnd = this.mapper.extractFromTask(fromTask.data, 'end');
+        const toTaskStart = this.mapper.extractFromTask(toTask.data, 'start');
+        const 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 DependencyType.FF:
+                return fromTaskEnd <= toTaskEnd;
+            // finish to start (FS) — the from-task ends before the to-task can begin
+            case DependencyType.FS:
+                return fromTaskEnd <= toTaskStart;
+            // start to finish (SF) — the from-task begins before the to-task can end
+            case DependencyType.SF:
+                return fromTaskStart <= toTaskEnd;
+            // start to start (SS) — the from-task begins before the to-task can begin
+            case DependencyType.SS:
+                return fromTaskStart <= toTaskStart;
+            default: return false;
+        }
+    }
+    handleKeydown(event) {
+        const { keyCode, target, altKey } = event;
+        const isTimelineActive = this.timeline.timelineContent.nativeElement.contains(target);
+        if (isTimelineActive) {
+            if (isArrowUpDownKey(keyCode)) {
+                const direction = keyCode === Keys.ArrowUp ? -1 : 1;
+                this.navigation.activeTimelineIndex = this.activeTimelineIndex + direction;
+                this.navigation.updateActiveTreeListCell();
+            }
+            else if (keyCode === Keys.Home) {
+                this.navigation.activeTimelineIndex = 0;
+                this.navigation.updateActiveTreeListCell();
+            }
+            else if (keyCode === Keys.End) {
+                const lastAvailableIndex = this.treeList.view.data.length - 1;
+                this.navigation.activeTimelineIndex = lastAvailableIndex;
+                this.navigation.updateActiveTreeListCell();
+            }
+            if (isNavigationKey(keyCode)) {
+                this.navigation.scrollHorizontallyToTask();
+                this.scrollSyncService.syncScrollTop('timeline', 'treelist');
+                this.navigation.notifyTaskStatusChange();
+                event.preventDefault();
+            }
+            if (keyCode === Keys.Space && hasObservers(this.selectionChange)) {
+                const task = this.renderedTreeListItems[this.activeTimelineIndex];
+                const selectionAction = this.getSelectionAction(event, task);
+                if (isPresent(task) && !this.isSameSelection(selectionAction, task)) {
+                    this.zone.run(() => this.notifySelectionChange(task, selectionAction));
+                }
+                event.preventDefault();
+            }
+            if (keyCode === Keys.Enter && hasObservers(this.taskClick)) {
+                const task = this.renderedTreeListItems[this.activeTimelineIndex];
+                if (isPresent(task)) {
+                    this.zone.run(() => this.notifyTaskClick(event, task, this.activeTimelineIndex));
+                }
+                event.preventDefault();
+            }
+            if (isExpandCollapseKey(keyCode, altKey)) {
+                const task = this.renderedTreeListItems[this.activeTimelineIndex];
+                if (isPresent(task) && this.hasChildren(task)) {
+                    const shouldExpand = keyCode === Keys.ArrowRight;
+                    const isExpanded = this.isExpanded(task);
+                    const sameState = shouldExpand === isExpanded;
+                    if (!sameState) {
+                        this.zone.run(() => {
+                            const expandEvent = { dataItem: task };
+                            // order is not arbitrary
+                            // the TreeList emits the individual events first, then the combined `expandStateChange` event
+                            const individualEmitter = shouldExpand ? this.rowExpand : this.rowCollapse;
+                            individualEmitter.emit(expandEvent);
+                            this.expandStateChange.emit(Object.assign(Object.assign({}, expandEvent), { expand: shouldExpand }));
+                            this.updateView();
+                            this.navigation.scrollHorizontallyToTask();
+                        });
+                    }
+                }
+                event.preventDefault();
+            }
+        }
+        const isTreeListActive = this.treeList.wrapper.nativeElement.contains(target);
+        if (keyCode === Keys.Delete && (isTimelineActive || isTreeListActive) && hasObservers(this.taskDelete)) {
+            const taskIndex = isTreeListActive ?
+                this.treeList.activeCell.dataRowIndex :
+                this.activeTimelineIndex;
+            const task = this.renderedTreeListItems[taskIndex];
+            if (isPresent(task)) {
+                this.zone.run(() => this.notifyTaskDelete(task));
+            }
+        }
+        if (isViewDigitKey(keyCode) && !isToolbar(target, this.hostElement.nativeElement) && !this.isInEditMode) {
+            const targetViewIndex = getIndexFromViewDigitKeyCode(keyCode);
+            const availableViews = this.views.toArray();
+            const targetView = availableViews[targetViewIndex];
+            if (isPresent(targetView) && targetView.type !== this.activeView) {
+                this.zone.run(() => this.changeActiveView(targetView.type));
+            }
+        }
+    }
+}
+GanttComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttComponent, deps: [{ token: i1.TimelineViewService }, { token: i2.ScrollSyncService }, { token: i0.Renderer2 }, { token: i3.MappingService }, { token: i4.OptionChangesService }, { token: i5.DependencyDomService }, { token: i6.EditService }, { token: i7.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i8.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: GanttComponent, selector: "kendo-gantt", inputs: { roleDescription: ["aria-roledescription", "roleDescription"], role: "role", taskModelFields: "taskModelFields", dependencyModelFields: "dependencyModelFields", activeView: "activeView", data: "data", isSelected: "isSelected", validateNewDependency: "validateNewDependency", selectable: "selectable", toolbarSettings: "toolbarSettings", fetchChildren: "fetchChildren", hasChildren: "hasChildren", dependencies: "dependencies", sortable: "sortable", sort: "sort", filterable: "filterable", filter: "filter", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", navigable: "navigable", timelinePaneOptions: "timelinePaneOptions", treeListPaneOptions: "treeListPaneOptions", taskClass: "taskClass", rowClass: "rowClass", isExpanded: "isExpanded", columnsAutoSize: "columnsAutoSize", columnMenu: "columnMenu", columnsReorderable: "columnsReorderable", columnsResizable: "columnsResizable", dragScrollSettings: "dragScrollSettings" }, outputs: { selectionChange: "selectionChange", rowExpand: "rowExpand", taskDblClick: "taskDblClick", cellDblClick: "cellDblClick", cellClose: "cellClose", taskDelete: "taskDelete", rowCollapse: "rowCollapse", remove: "remove", cancel: "cancel", save: "save", taskAdd: "taskAdd", dependencyAdd: "dependencyAdd", sortChange: "sortChange", filterChange: "filterChange", dataStateChange: "dataStateChange", treeListPaneCollapsedChange: "treeListPaneCollapsedChange", timelinePaneCollapsedChange: "timelinePaneCollapsedChange", timelinePaneSizeChange: "timelinePaneSizeChange", activeViewChange: "activeViewChange", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", cellClick: "cellClick", taskClick: "taskClick" }, host: { properties: { "attr.aria-roledescription": "this.hostRoleDescriptionAttr", "attr.role": "this.hostRoleAttr", "class.k-gantt": "this.hostClasses", "attr.dir": "this.dir" } }, providers: [
+        GanttLocalizationService,
+        LocalizationService,
+        {
+            provide: DataBoundTreeComponent,
+            useExisting: forwardRef(() => GanttComponent)
+        },
+        {
+            provide: ExpandableTreeComponent,
+            useExisting: forwardRef(() => GanttComponent)
+        },
+        TimelineViewService,
+        TimelineDayViewService,
+        TimelineWeekViewService,
+        TimelineMonthViewService,
+        ScrollSyncService,
+        DependencyDomService,
+        MappingService,
+        OptionChangesService,
+        EditService,
+        TimelineScrollService,
+        NavigationService
+    ], queries: [{ propertyName: "taskContentTemplate", first: true, predicate: GanttTaskContentTemplateDirective, descendants: true }, { propertyName: "taskTemplate", first: true, predicate: GanttTaskTemplateDirective, descendants: true }, { propertyName: "summaryTaskTemplate", first: true, predicate: GanttSummaryTaskTemplateDirective, descendants: true }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columns", predicate: GanttColumnBase }, { propertyName: "views", predicate: ViewBase }], viewQueries: [{ propertyName: "treeList", first: true, predicate: TreeListComponent, descendants: true, static: true }, { propertyName: "timeline", first: true, predicate: GanttTimelineComponent, descendants: true }], exportAs: ["kendoGantt"], usesOnChanges: true, ngImport: i0, template: `
+        <ng-container kendoGanttLocalizedMessages
+            i18n-taskEditingGeneralTabTitle="kendo.gantt.taskEditingGeneralTabTitle|The title of the 'General' tab of the editing dialog TabStrip"
+            taskEditingGeneralTabTitle="General"
+
+            i18n-taskEditingPredecessorsTabTitle="kendo.gantt.taskEditingPredecessorsTabTitle|The title of the 'Predecessors' dependencies tab of the editing dialog TabStrip"
+            taskEditingPredecessorsTabTitle="Predecessors"
+
+            i18n-taskEditingSuccessorsTabTitle="kendo.gantt.taskEditingSuccessorsTabTitle|The title of the 'Successors' dependencies tab of the editing dialog TabStrip"
+            taskEditingSuccessorsTabTitle="Successors"
+
+            i18n-taskEditingDependenciesAddButtonText="kendo.gantt.taskEditingDependenciesAddButtonText|The text of the 'Add' button in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesAddButtonText="Add"
+
+            i18n-taskEditingDependenciesRemoveButtonText="kendo.gantt.taskEditingDependenciesRemoveButtonText|The text of the 'Remove' button in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesRemoveButtonText="Remove"
+
+            i18n-taskEditingDependenciesGridNameColumnTitle="kendo.gantt.taskEditingDependenciesGridNameColumnTitle|The title of the 'Task Title' Grid column in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesGridNameColumnTitle="Task Title"
+
+            i18n-taskEditingDependenciesGridTypeColumnTitle="kendo.gantt.taskEditingDependenciesGridTypeColumnTitle|The title of the 'Type' Grid column in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesGridTypeColumnTitle="Type"
+
+            i18n-taskDeleteLabel="kendo.gantt.taskDeleteLabel|The label of the task delete icon"
+            taskDeleteLabel="Delete"
+
+            i18n-taskEditingDialogTitle="kendo.gantt.taskEditingDialogTitle|The title of the task editing dialog"
+            taskEditingDialogTitle="Editing Task"
+
+            i18n-taskEditingDialogCloseTitle="kendo.gantt.taskEditingDialogCloseTitle|The title of the task editing dialog close button"
+            taskEditingDialogCloseTitle="Close"
+
+            i18n-confirmationDialogCloseTitle="kendo.gantt.confirmationDialogCloseTitle|The title of the confirmation dialog close button"
+            confirmationDialogCloseTitle="Close"
+
+            i18n-confirmationDialogTitle="kendo.gantt.confirmationDialogTitle|The title of the delete task confirmation dialog"
+            confirmationDialogTitle="Delete Task"
+
+            i18n-confirmationDialogContent="kendo.gantt.confirmationDialogContent|The content of the delete task confirmation dialog"
+            confirmationDialogContent="Are you sure you want to delete this task?"
+
+            i18n-deleteButtonText="kendo.gantt.deleteButtonText|The text of the task editing dialog 'Delete' button"
+            deleteButtonText="Delete"
+
+            i18n-cancelButtonText="kendo.gantt.cancelButtonText|The text of the task editing dialog 'Cancel' button"
+            cancelButtonText="Cancel"
+
+            i18n-saveButtonText="kendo.gantt.saveButtonText|The text of the task editing dialog 'Save' button"
+            saveButtonText="Save"
+
+            i18n-titleFieldInputLabel="kendo.gantt.titleFieldInputLabel|The label of the 'title' field input in editing mode"
+            titleFieldInputLabel="Title"
+
+            i18n-startFieldInputLabel="kendo.gantt.startFieldInputLabel|The label of the 'start' field input in editing mode"
+            startFieldInputLabel="Start"
+
+            i18n-endFieldInputLabel="kendo.gantt.endFieldInputLabel|The label of the 'end' field input in editing mode"
+            endFieldInputLabel="End"
+
+            i18n-completionRatioFieldInputLabel="kendo.gantt.completionRatioFieldInputLabel|The label of the 'completionRatio' field input in editing mode"
+            completionRatioFieldInputLabel="Progress"
+
+            i18n-dayViewText="kendo.gantt.dayViewText|The text of the day view in the ViewSelector component"
+            dayViewText="Day"
+
+            i18n-weekViewText="kendo.gantt.weekViewText|The text of the week view in the ViewSelector component"
+            weekViewText="Week"
+
+            i18n-monthViewText="kendo.gantt.monthViewText|The text of the month view in the ViewSelector component"
+            monthViewText="Month"
+
+            i18n-yearViewText-disabled="kendo.gantt.yearViewText|The text of the year view in the ViewSelector component"
+            yearViewText="Year"
+
+            i18n-addTaskText="kendo.gantt.addTaskText|The text of the DropDownButton in the AddTask component"
+            addTaskText="Add Task"
+
+            i18n-addChildText="kendo.gantt.addChildText|The text of the 'Add Child' option in the AddTask component"
+            addChildText="Add Child"
+
+            i18n-addAboveText="kendo.gantt.addAboveText|The text of the 'Add Above' option in the AddTask component"
+            addAboveText="Add Above"
+
+            i18n-addBelowText="kendo.gantt.addBelowText|The text of the 'Add Below' option in the AddTask component"
+            addBelowText="Add Below"
+
+            i18n-noRecords="kendo.gantt.noRecords|The label visible in the TreeList when there are no records"
+            noRecords="No records available."
+
+            i18n-filter="kendo.gantt.filter|The label of the filter cell or icon"
+            filter="Filter"
+
+            i18n-filterEqOperator="kendo.gantt.filterEqOperator|The text of the equal filter operator"
+            filterEqOperator="Is equal to"
+
+            i18n-filterNotEqOperator="kendo.gantt.filterNotEqOperator|The text of the not equal filter operator"
+            filterNotEqOperator="Is not equal to"
+
+            i18n-filterIsNullOperator="kendo.gantt.filterIsNullOperator|The text of the is null filter operator"
+            filterIsNullOperator="Is null"
+
+            i18n-filterIsNotNullOperator="kendo.gantt.filterIsNotNullOperator|The text of the is not null filter operator"
+            filterIsNotNullOperator="Is not null"
+
+            i18n-filterIsEmptyOperator="kendo.gantt.filterIsEmptyOperator|The text of the is empty filter operator"
+            filterIsEmptyOperator="Is empty"
+
+            i18n-filterIsNotEmptyOperator="kendo.gantt.filterIsNotEmptyOperator|The text of the is not empty filter operator"
+            filterIsNotEmptyOperator="Is not empty"
+
+            i18n-filterStartsWithOperator="kendo.gantt.filterStartsWithOperator|The text of the starts with filter operator"
+            filterStartsWithOperator="Starts with"
+
+            i18n-filterContainsOperator="kendo.gantt.filterContainsOperator|The text of the contains filter operator"
+            filterContainsOperator="Contains"
+
+            i18n-filterNotContainsOperator="kendo.gantt.filterNotContainsOperator|The text of the does not contain filter operator"
+            filterNotContainsOperator="Does not contain"
+
+            i18n-filterEndsWithOperator="kendo.gantt.filterEndsWithOperator|The text of the ends with filter operator"
+            filterEndsWithOperator="Ends with"
+
+            i18n-filterGteOperator="kendo.gantt.filterGteOperator|The text of the greater than or equal filter operator"
+            filterGteOperator="Is greater than or equal to"
+
+            i18n-filterGtOperator="kendo.gantt.filterGtOperator|The text of the greater than filter operator"
+            filterGtOperator="Is greater than"
+
+            i18n-filterLteOperator="kendo.gantt.filterLteOperator|The text of the less than or equal filter operator"
+            filterLteOperator="Is less than or equal to"
+
+            i18n-filterLtOperator="kendo.gantt.filterLtOperator|The text of the less than filter operator"
+            filterLtOperator="Is less than"
+
+            i18n-filterIsTrue="kendo.gantt.filterIsTrue|The text of the IsTrue boolean filter option"
+            filterIsTrue="Is True"
+
+            i18n-filterIsFalse="kendo.gantt.filterIsFalse|The text of the IsFalse boolean filter option"
+            filterIsFalse="Is False"
+
+            i18n-filterBooleanAll="kendo.gantt.filterBooleanAll|The text of the (All) boolean filter option"
+            filterBooleanAll="(All)"
+
+            i18n-filterAfterOrEqualOperator="kendo.gantt.filterAfterOrEqualOperator|The text of the after or equal date filter operator"
+            filterAfterOrEqualOperator="Is after or equal to"
+
+            i18n-filterAfterOperator="kendo.gantt.filterAfterOperator|The text of the after date filter operator"
+            filterAfterOperator="Is after"
+
+            i18n-filterBeforeOperator="kendo.gantt.filterBeforeOperator|The text of the before date filter operator"
+            filterBeforeOperator="Is before"
+
+            i18n-filterBeforeOrEqualOperator="kendo.gantt.filterBeforeOrEqualOperator|The text of the before or equal date filter operator"
+            filterBeforeOrEqualOperator="Is before or equal to"
+
+            i18n-filterFilterButton="kendo.gantt.filterFilterButton|The text of the filter button"
+            filterFilterButton="Filter"
+
+            i18n-filterClearButton="kendo.gantt.filterClearButton|The text of the clear filter button"
+            filterClearButton="Clear"
+
+            i18n-filterAndLogic="kendo.gantt.filterAndLogic|The text of the And filter logic"
+            filterAndLogic="And"
+
+            i18n-filterOrLogic="kendo.gantt.filterOrLogic|The text of the Or filter logic"
+            filterOrLogic="Or"
+
+            i18n-loading="kendo.gantt.loading|The loading text"
+            loading="Loading"
+
+            i18n-columnMenu="kendo.gantt.columnMenu|The title of the column menu icon"
+            columnMenu="Column Menu"
+
+            i18n-columns="kendo.gantt.columns|The text shown in the column menu for the columns item"
+            columns="Columns"
+
+            i18n-lock-disabled="kendo.gantt.lock|The text shown in the column menu for the lock item"
+            lock-disabled="Lock"
+
+            i18n-unlock-disabled="kendo.gantt.unlock|The text shown in the column menu for the unlock item"
+            unlock-disabled="Unlock"
+
+            i18n-sortable="kendo.gantt.sortable|The label of the sort icon"
+            sortable="Sortable"
+
+            i18n-sortAscending="kendo.gantt.sortAscending|The text shown in the column menu for the sort ascending item"
+            sortAscending="Sort Ascending"
+
+            i18n-sortDescending="kendo.gantt.sortDescending|The text shown in the column menu for the sort descending item"
+            sortDescending="Sort Descending"
+
+            i18n-sortedAscending="kendo.gantt.sortedAscending|The status announcement when a column is sorted ascending"
+            sortedAscending="Sorted Ascending"
+
+            i18n-sortedDescending="kendo.gantt.sortedDescending|The status announcement when a column is sorted descending"
+            sortedDescending="Sorted Descending"
+
+            i18n-sortedDefault="kendo.gantt.sortedDefault|The status announcement when a column is no longer sorted"
+            sortedDefault="Not Sorted"
+
+            i18n-columnsApply="kendo.gantt.columnsApply|The text shown in the column menu or column chooser for the columns apply button"
+            columnsApply="Apply"
+
+            i18n-columnsReset="kendo.gantt.columnsReset|The text shown in the column menu or column chooser for the columns reset button"
+            columnsReset="Reset"></ng-container>
+        <kendo-gantt-toolbar
+            *ngIf="showToolbar('top')"
+            [showAddTask]="toolbarSettings.addTaskTool === 'top' || toolbarSettings.addTaskTool === 'both'"
+            [showViewSelector]="toolbarSettings.viewSelectorTool === 'top' || toolbarSettings.viewSelectorTool === 'both'"
+            [toolbarTemplate]="toolbarTemplate"
+            [views]="viewTypes"
+            [activeView]="activeView"
+            class="k-gantt-header k-toolbar k-gantt-toolbar"
+            position="top"
+            (activeViewChange)="changeActiveView($event)"></kendo-gantt-toolbar>
+        <div class="k-gantt-content">
+            <kendo-splitter [style.border]="0">
+                <kendo-splitter-pane
+                    class="k-gantt-treelist k-gantt-treelist-scrollable"
+                    [collapsible]="treeListPaneOptions?.collapsible"
+                    [collapsed]="treeListPaneOptions?.collapsed"
+                    (collapsedChange)="onTreeListCollapsedChange($event)"
+                    [scrollable]="false">
+                    <kendo-treelist
+                        [idField]="taskIdField"
+                        [columns]="columns"
+                        [data]="data"
+                        [hasChildren]="hasChildren"
+                        [fetchChildren]="fetchChildren"
+                        [navigable]="navigable"
+                        [isExpanded]="isExpanded"
+                        [autoSize]="columnsAutoSize"
+                        [columnMenu]="columnMenu"
+                        [reorderable]="columnsReorderable"
+                        [resizable]="columnsResizable"
+                        [rowClass]="rowClass"
+                        [isSelected]="isSelected"
+                        [selectable]="selectable"
+                        [sortable]="sortable"
+                        [sort]="sort"
+                        [filterable]="filterMenu"
+                        [filter]="filter"
+                        (filterChange)="filterChange.emit($event)"
+                        (sortChange)="sortChange.emit($event)"
+                        (dataStateChange)="dataStateChange.emit({
+                            filter: $event.filter,
+                            sort: $event.sort
+                        })"
+                        (expandStateChange)="expandStateChange.emit($event)"
+                        (expand)="rowExpand.emit({ dataItem: $event.dataItem })"
+                        (collapse)="rowCollapse.emit({ dataItem: $event.dataItem })"
+                        (columnReorder)="columnReorder.emit($event)"
+                        (columnResize)="columnResize.emit($event)"
+                        (columnVisibilityChange)="handleColumnVisibilityChange($event)"
+                        (columnLockedChange)="columnLockedChange.emit($event)"
+                        (selectionChange)="handleTreeListSelectionChange($event)"
+                        (cellClick)="handleTreeListCellClick($event)"
+                        (cellClose)="handleCellClose($event)"
+                        [kendoEventsOutsideAngular]="{
+                            dblclick: handleTreeListDoubleClick
+                        }"
+                        [scope]="this"
+                    >
+                        <kendo-treelist-messages
+                            [noRecords]="getText('noRecords')"
+                            [filter]="getText('filter')"
+                            [filterEqOperator]="getText('filterEqOperator')"
+                            [filterNotEqOperator]="getText('filterNotEqOperator')"
+                            [filterIsNullOperator]="getText('filterIsNullOperator')"
+                            [filterIsNotNullOperator]="getText('filterIsNotNullOperator')"
+                            [filterIsEmptyOperator]="getText('filterIsEmptyOperator')"
+                            [filterIsNotEmptyOperator]="getText('filterIsNotEmptyOperator')"
+                            [filterStartsWithOperator]="getText('filterStartsWithOperator')"
+                            [filterContainsOperator]="getText('filterContainsOperator')"
+                            [filterNotContainsOperator]="getText('filterNotContainsOperator')"
+                            [filterEndsWithOperator]="getText('filterEndsWithOperator')"
+                            [filterGteOperator]="getText('filterGteOperator')"
+                            [filterGtOperator]="getText('filterGtOperator')"
+                            [filterLteOperator]="getText('filterLteOperator')"
+                            [filterLtOperator]="getText('filterLtOperator')"
+                            [filterIsTrue]="getText('filterIsTrue')"
+                            [filterIsFalse]="getText('filterIsFalse')"
+                            [filterBooleanAll]="getText('filterBooleanAll')"
+                            [filterAfterOrEqualOperator]="getText('filterAfterOrEqualOperator')"
+                            [filterAfterOperator]="getText('filterAfterOperator')"
+                            [filterBeforeOperator]="getText('filterBeforeOperator')"
+                            [filterBeforeOrEqualOperator]="getText('filterBeforeOrEqualOperator')"
+                            [filterFilterButton]="getText('filterFilterButton')"
+                            [filterClearButton]="getText('filterClearButton')"
+                            [filterAndLogic]="getText('filterAndLogic')"
+                            [filterOrLogic]="getText('filterOrLogic')"
+                            [loading]="getText('loading')"
+                            [columnMenu]="getText('columnMenu')"
+                            [columns]="getText('columns')"
+                            [sortable]="getText('sortable')"
+                            [sortAscending]="getText('sortAscending')"
+                            [sortDescending]="getText('sortDescending')"
+                            [sortedAscending]="getText('sortedAscending')"
+                            [sortedDescending]="getText('sortedDescending')"
+                            [sortedDefault]="getText('sortedDefault')"
+                            [columnsApply]="getText('columnsApply')"
+                            [columnsReset]="getText('columnsReset')"
+                        >
+                        </kendo-treelist-messages>
+                    </kendo-treelist>
+                </kendo-splitter-pane>
+                <kendo-splitter-pane
+                    [collapsible]="timelinePaneOptions?.collapsible"
+                    [resizable]="timelinePaneOptions?.resizable"
+                    [collapsed]="timelinePaneOptions?.collapsed"
+                    [min]="timelinePaneOptions?.min"
+                    [max]="timelinePaneOptions?.max"
+                    [size]="timelinePaneOptions?.size"
+                    (collapsedChange)="onTimelineCollapsedChange($event)"
+                    (sizeChange)="onTimelinePaneSizeChange($event)"
+                    [scrollable]="false">
+                    <kendo-gantt-timeline
+                        *ngIf="views && views.length"
+                        [renderDependencyDragClues]="renderDependencyDragClues"
+                        [dragScrollSettings]="dragScrollSettings"
+                        [rows]="viewItems"
+                        [slots]="timelineSlots"
+                        [groupSlots]="timelineGroupSlots"
+                        [tableWidth]="tableWidth"
+                        [activeView]="activeView"
+                        [taskContentTemplate]="taskContentTemplate?.templateRef"
+                        [taskTemplate]="taskTemplate?.templateRef"
+                        [summaryTaskTemplate]="summaryTaskTemplate?.templateRef"
+                        [taskClass]="taskClass"
+                        [dependencies]="dependencies"
+                        [isExpanded]="isExpanded"
+                        [selectable]="selectable"
+                        [isTaskSelected]="isTaskSelected"
+                        [kendoEventsOutsideAngular]="{
+                            click: handleTimelineClick,
+                            contextmenu: handleTimelineRightClick,
+                            dblclick: handleTimelineDblClick,
+                            mousedown: handleTimelineMouseDown
+                        }"
+                        [scope]="this"
+                    ></kendo-gantt-timeline>
+                </kendo-splitter-pane>
+            </kendo-splitter>
+        </div>
+        <kendo-gantt-toolbar
+            *ngIf="showToolbar('bottom')"
+            [showAddTask]="toolbarSettings.addTaskTool === 'bottom' || toolbarSettings.addTaskTool === 'both'"
+            [showViewSelector]="toolbarSettings.viewSelectorTool === 'bottom' || toolbarSettings.viewSelectorTool === 'both'"
+            [toolbarTemplate]="toolbarTemplate"
+            [views]="viewTypes"
+            [activeView]="activeView"
+            class="k-gantt-footer k-toolbar k-gantt-toolbar"
+            position="bottom"></kendo-gantt-toolbar>
+        <kendo-gantt-edit-dialog
+            *ngIf="showEditingDialog"
+            [data]="data">
+        </kendo-gantt-edit-dialog>
+        <kendo-dialog
+            *ngIf="showConfirmationDialog"
+            [width]="575"
+            [height]="170"
+            [title]="getText('confirmationDialogTitle')"
+            (close)="handleConfirmationDialogClose()">
+            <span>{{ getText('confirmationDialogContent') }}</span>
+            <kendo-dialog-actions layout="normal">
+                <kendo-treelist-spacer></kendo-treelist-spacer>
+                <button kendoButton [primary]="true" (click)="handleDeleteConfirmation()">{{ getText('deleteButtonText') }}</button>
+                <button kendoButton (click)="handleConfirmationDialogClose()">{{ getText('cancelButtonText') }}</button>
+            </kendo-dialog-actions>
+        </kendo-dialog>
+   `, isInline: true, components: [{ type: i9.ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: ["showAddTask", "showViewSelector", "views", "activeView", "toolbarTemplate", "position"], outputs: ["activeViewChange"] }, { type: i10.SplitterComponent, selector: "kendo-splitter", inputs: ["orientation"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { type: i10.SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { type: i11.TreeListComponent, selector: "kendo-treelist", inputs: ["pageSize", "scrollable", "trackBy", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "autoSize", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "skip", "data", "sort", "navigatable", "rowClass", "idField", "selectable", "isSelected", "columns", "fetchChildren", "hasChildren", "isExpanded", "aria-label", "height", "rowHeight", "filter"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange"], exportAs: ["kendoTreeList"] }, { type: i11.CustomMessagesComponent, selector: "kendo-treelist-messages" }, { type: i12.GanttTimelineComponent, selector: "kendo-gantt-timeline", inputs: ["rows", "slots", "groupSlots", "tableWidth", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "renderDependencyDragClues", "dragScrollSettings", "selectable", "isTaskSelected", "isExpanded", "dependencies"], outputs: ["timelineContainerPress", "timelineContainerDrag", "timelineContainerRelease"] }, { type: i13.EditDialogComponent, selector: "kendo-gantt-edit-dialog", inputs: ["data"] }, { type: i14.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: i14.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i11.TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }], directives: [{ type: i15.LocalizedMessagesDirective, selector: "[kendoGanttLocalizedMessages]" }, { type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i17.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i18.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-gantt',
+                    exportAs: 'kendoGantt',
+                    providers: [
+                        GanttLocalizationService,
+                        LocalizationService,
+                        {
+                            provide: DataBoundTreeComponent,
+                            useExisting: forwardRef(() => GanttComponent)
+                        },
+                        {
+                            provide: ExpandableTreeComponent,
+                            useExisting: forwardRef(() => GanttComponent)
+                        },
+                        TimelineViewService,
+                        TimelineDayViewService,
+                        TimelineWeekViewService,
+                        TimelineMonthViewService,
+                        ScrollSyncService,
+                        DependencyDomService,
+                        MappingService,
+                        OptionChangesService,
+                        EditService,
+                        TimelineScrollService,
+                        NavigationService
+                    ],
+                    template: `
+        <ng-container kendoGanttLocalizedMessages
+            i18n-taskEditingGeneralTabTitle="kendo.gantt.taskEditingGeneralTabTitle|The title of the 'General' tab of the editing dialog TabStrip"
+            taskEditingGeneralTabTitle="General"
+
+            i18n-taskEditingPredecessorsTabTitle="kendo.gantt.taskEditingPredecessorsTabTitle|The title of the 'Predecessors' dependencies tab of the editing dialog TabStrip"
+            taskEditingPredecessorsTabTitle="Predecessors"
+
+            i18n-taskEditingSuccessorsTabTitle="kendo.gantt.taskEditingSuccessorsTabTitle|The title of the 'Successors' dependencies tab of the editing dialog TabStrip"
+            taskEditingSuccessorsTabTitle="Successors"
+
+            i18n-taskEditingDependenciesAddButtonText="kendo.gantt.taskEditingDependenciesAddButtonText|The text of the 'Add' button in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesAddButtonText="Add"
+
+            i18n-taskEditingDependenciesRemoveButtonText="kendo.gantt.taskEditingDependenciesRemoveButtonText|The text of the 'Remove' button in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesRemoveButtonText="Remove"
+
+            i18n-taskEditingDependenciesGridNameColumnTitle="kendo.gantt.taskEditingDependenciesGridNameColumnTitle|The title of the 'Task Title' Grid column in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesGridNameColumnTitle="Task Title"
+
+            i18n-taskEditingDependenciesGridTypeColumnTitle="kendo.gantt.taskEditingDependenciesGridTypeColumnTitle|The title of the 'Type' Grid column in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesGridTypeColumnTitle="Type"
+
+            i18n-taskDeleteLabel="kendo.gantt.taskDeleteLabel|The label of the task delete icon"
+            taskDeleteLabel="Delete"
+
+            i18n-taskEditingDialogTitle="kendo.gantt.taskEditingDialogTitle|The title of the task editing dialog"
+            taskEditingDialogTitle="Editing Task"
+
+            i18n-taskEditingDialogCloseTitle="kendo.gantt.taskEditingDialogCloseTitle|The title of the task editing dialog close button"
+            taskEditingDialogCloseTitle="Close"
+
+            i18n-confirmationDialogCloseTitle="kendo.gantt.confirmationDialogCloseTitle|The title of the confirmation dialog close button"
+            confirmationDialogCloseTitle="Close"
+
+            i18n-confirmationDialogTitle="kendo.gantt.confirmationDialogTitle|The title of the delete task confirmation dialog"
+            confirmationDialogTitle="Delete Task"
+
+            i18n-confirmationDialogContent="kendo.gantt.confirmationDialogContent|The content of the delete task confirmation dialog"
+            confirmationDialogContent="Are you sure you want to delete this task?"
+
+            i18n-deleteButtonText="kendo.gantt.deleteButtonText|The text of the task editing dialog 'Delete' button"
+            deleteButtonText="Delete"
+
+            i18n-cancelButtonText="kendo.gantt.cancelButtonText|The text of the task editing dialog 'Cancel' button"
+            cancelButtonText="Cancel"
+
+            i18n-saveButtonText="kendo.gantt.saveButtonText|The text of the task editing dialog 'Save' button"
+            saveButtonText="Save"
+
+            i18n-titleFieldInputLabel="kendo.gantt.titleFieldInputLabel|The label of the 'title' field input in editing mode"
+            titleFieldInputLabel="Title"
+
+            i18n-startFieldInputLabel="kendo.gantt.startFieldInputLabel|The label of the 'start' field input in editing mode"
+            startFieldInputLabel="Start"
+
+            i18n-endFieldInputLabel="kendo.gantt.endFieldInputLabel|The label of the 'end' field input in editing mode"
+            endFieldInputLabel="End"
+
+            i18n-completionRatioFieldInputLabel="kendo.gantt.completionRatioFieldInputLabel|The label of the 'completionRatio' field input in editing mode"
+            completionRatioFieldInputLabel="Progress"
+
+            i18n-dayViewText="kendo.gantt.dayViewText|The text of the day view in the ViewSelector component"
+            dayViewText="Day"
+
+            i18n-weekViewText="kendo.gantt.weekViewText|The text of the week view in the ViewSelector component"
+            weekViewText="Week"
+
+            i18n-monthViewText="kendo.gantt.monthViewText|The text of the month view in the ViewSelector component"
+            monthViewText="Month"
+
+            i18n-yearViewText-disabled="kendo.gantt.yearViewText|The text of the year view in the ViewSelector component"
+            yearViewText="Year"
+
+            i18n-addTaskText="kendo.gantt.addTaskText|The text of the DropDownButton in the AddTask component"
+            addTaskText="Add Task"
+
+            i18n-addChildText="kendo.gantt.addChildText|The text of the 'Add Child' option in the AddTask component"
+            addChildText="Add Child"
+
+            i18n-addAboveText="kendo.gantt.addAboveText|The text of the 'Add Above' option in the AddTask component"
+            addAboveText="Add Above"
+
+            i18n-addBelowText="kendo.gantt.addBelowText|The text of the 'Add Below' option in the AddTask component"
+            addBelowText="Add Below"
+
+            i18n-noRecords="kendo.gantt.noRecords|The label visible in the TreeList when there are no records"
+            noRecords="No records available."
+
+            i18n-filter="kendo.gantt.filter|The label of the filter cell or icon"
+            filter="Filter"
+
+            i18n-filterEqOperator="kendo.gantt.filterEqOperator|The text of the equal filter operator"
+            filterEqOperator="Is equal to"
+
+            i18n-filterNotEqOperator="kendo.gantt.filterNotEqOperator|The text of the not equal filter operator"
+            filterNotEqOperator="Is not equal to"
+
+            i18n-filterIsNullOperator="kendo.gantt.filterIsNullOperator|The text of the is null filter operator"
+            filterIsNullOperator="Is null"
+
+            i18n-filterIsNotNullOperator="kendo.gantt.filterIsNotNullOperator|The text of the is not null filter operator"
+            filterIsNotNullOperator="Is not null"
+
+            i18n-filterIsEmptyOperator="kendo.gantt.filterIsEmptyOperator|The text of the is empty filter operator"
+            filterIsEmptyOperator="Is empty"
+
+            i18n-filterIsNotEmptyOperator="kendo.gantt.filterIsNotEmptyOperator|The text of the is not empty filter operator"
+            filterIsNotEmptyOperator="Is not empty"
+
+            i18n-filterStartsWithOperator="kendo.gantt.filterStartsWithOperator|The text of the starts with filter operator"
+            filterStartsWithOperator="Starts with"
+
+            i18n-filterContainsOperator="kendo.gantt.filterContainsOperator|The text of the contains filter operator"
+            filterContainsOperator="Contains"
+
+            i18n-filterNotContainsOperator="kendo.gantt.filterNotContainsOperator|The text of the does not contain filter operator"
+            filterNotContainsOperator="Does not contain"
+
+            i18n-filterEndsWithOperator="kendo.gantt.filterEndsWithOperator|The text of the ends with filter operator"
+            filterEndsWithOperator="Ends with"
+
+            i18n-filterGteOperator="kendo.gantt.filterGteOperator|The text of the greater than or equal filter operator"
+            filterGteOperator="Is greater than or equal to"
+
+            i18n-filterGtOperator="kendo.gantt.filterGtOperator|The text of the greater than filter operator"
+            filterGtOperator="Is greater than"
+
+            i18n-filterLteOperator="kendo.gantt.filterLteOperator|The text of the less than or equal filter operator"
+            filterLteOperator="Is less than or equal to"
+
+            i18n-filterLtOperator="kendo.gantt.filterLtOperator|The text of the less than filter operator"
+            filterLtOperator="Is less than"
+
+            i18n-filterIsTrue="kendo.gantt.filterIsTrue|The text of the IsTrue boolean filter option"
+            filterIsTrue="Is True"
+
+            i18n-filterIsFalse="kendo.gantt.filterIsFalse|The text of the IsFalse boolean filter option"
+            filterIsFalse="Is False"
+
+            i18n-filterBooleanAll="kendo.gantt.filterBooleanAll|The text of the (All) boolean filter option"
+            filterBooleanAll="(All)"
+
+            i18n-filterAfterOrEqualOperator="kendo.gantt.filterAfterOrEqualOperator|The text of the after or equal date filter operator"
+            filterAfterOrEqualOperator="Is after or equal to"
+
+            i18n-filterAfterOperator="kendo.gantt.filterAfterOperator|The text of the after date filter operator"
+            filterAfterOperator="Is after"
+
+            i18n-filterBeforeOperator="kendo.gantt.filterBeforeOperator|The text of the before date filter operator"
+            filterBeforeOperator="Is before"
+
+            i18n-filterBeforeOrEqualOperator="kendo.gantt.filterBeforeOrEqualOperator|The text of the before or equal date filter operator"
+            filterBeforeOrEqualOperator="Is before or equal to"
+
+            i18n-filterFilterButton="kendo.gantt.filterFilterButton|The text of the filter button"
+            filterFilterButton="Filter"
+
+            i18n-filterClearButton="kendo.gantt.filterClearButton|The text of the clear filter button"
+            filterClearButton="Clear"
+
+            i18n-filterAndLogic="kendo.gantt.filterAndLogic|The text of the And filter logic"
+            filterAndLogic="And"
+
+            i18n-filterOrLogic="kendo.gantt.filterOrLogic|The text of the Or filter logic"
+            filterOrLogic="Or"
+
+            i18n-loading="kendo.gantt.loading|The loading text"
+            loading="Loading"
+
+            i18n-columnMenu="kendo.gantt.columnMenu|The title of the column menu icon"
+            columnMenu="Column Menu"
+
+            i18n-columns="kendo.gantt.columns|The text shown in the column menu for the columns item"
+            columns="Columns"
+
+            i18n-lock-disabled="kendo.gantt.lock|The text shown in the column menu for the lock item"
+            lock-disabled="Lock"
+
+            i18n-unlock-disabled="kendo.gantt.unlock|The text shown in the column menu for the unlock item"
+            unlock-disabled="Unlock"
+
+            i18n-sortable="kendo.gantt.sortable|The label of the sort icon"
+            sortable="Sortable"
+
+            i18n-sortAscending="kendo.gantt.sortAscending|The text shown in the column menu for the sort ascending item"
+            sortAscending="Sort Ascending"
+
+            i18n-sortDescending="kendo.gantt.sortDescending|The text shown in the column menu for the sort descending item"
+            sortDescending="Sort Descending"
+
+            i18n-sortedAscending="kendo.gantt.sortedAscending|The status announcement when a column is sorted ascending"
+            sortedAscending="Sorted Ascending"
+
+            i18n-sortedDescending="kendo.gantt.sortedDescending|The status announcement when a column is sorted descending"
+            sortedDescending="Sorted Descending"
+
+            i18n-sortedDefault="kendo.gantt.sortedDefault|The status announcement when a column is no longer sorted"
+            sortedDefault="Not Sorted"
+
+            i18n-columnsApply="kendo.gantt.columnsApply|The text shown in the column menu or column chooser for the columns apply button"
+            columnsApply="Apply"
+
+            i18n-columnsReset="kendo.gantt.columnsReset|The text shown in the column menu or column chooser for the columns reset button"
+            columnsReset="Reset"></ng-container>
+        <kendo-gantt-toolbar
+            *ngIf="showToolbar('top')"
+            [showAddTask]="toolbarSettings.addTaskTool === 'top' || toolbarSettings.addTaskTool === 'both'"
+            [showViewSelector]="toolbarSettings.viewSelectorTool === 'top' || toolbarSettings.viewSelectorTool === 'both'"
+            [toolbarTemplate]="toolbarTemplate"
+            [views]="viewTypes"
+            [activeView]="activeView"
+            class="k-gantt-header k-toolbar k-gantt-toolbar"
+            position="top"
+            (activeViewChange)="changeActiveView($event)"></kendo-gantt-toolbar>
+        <div class="k-gantt-content">
+            <kendo-splitter [style.border]="0">
+                <kendo-splitter-pane
+                    class="k-gantt-treelist k-gantt-treelist-scrollable"
+                    [collapsible]="treeListPaneOptions?.collapsible"
+                    [collapsed]="treeListPaneOptions?.collapsed"
+                    (collapsedChange)="onTreeListCollapsedChange($event)"
+                    [scrollable]="false">
+                    <kendo-treelist
+                        [idField]="taskIdField"
+                        [columns]="columns"
+                        [data]="data"
+                        [hasChildren]="hasChildren"
+                        [fetchChildren]="fetchChildren"
+                        [navigable]="navigable"
+                        [isExpanded]="isExpanded"
+                        [autoSize]="columnsAutoSize"
+                        [columnMenu]="columnMenu"
+                        [reorderable]="columnsReorderable"
+                        [resizable]="columnsResizable"
+                        [rowClass]="rowClass"
+                        [isSelected]="isSelected"
+                        [selectable]="selectable"
+                        [sortable]="sortable"
+                        [sort]="sort"
+                        [filterable]="filterMenu"
+                        [filter]="filter"
+                        (filterChange)="filterChange.emit($event)"
+                        (sortChange)="sortChange.emit($event)"
+                        (dataStateChange)="dataStateChange.emit({
+                            filter: $event.filter,
+                            sort: $event.sort
+                        })"
+                        (expandStateChange)="expandStateChange.emit($event)"
+                        (expand)="rowExpand.emit({ dataItem: $event.dataItem })"
+                        (collapse)="rowCollapse.emit({ dataItem: $event.dataItem })"
+                        (columnReorder)="columnReorder.emit($event)"
+                        (columnResize)="columnResize.emit($event)"
+                        (columnVisibilityChange)="handleColumnVisibilityChange($event)"
+                        (columnLockedChange)="columnLockedChange.emit($event)"
+                        (selectionChange)="handleTreeListSelectionChange($event)"
+                        (cellClick)="handleTreeListCellClick($event)"
+                        (cellClose)="handleCellClose($event)"
+                        [kendoEventsOutsideAngular]="{
+                            dblclick: handleTreeListDoubleClick
+                        }"
+                        [scope]="this"
+                    >
+                        <kendo-treelist-messages
+                            [noRecords]="getText('noRecords')"
+                            [filter]="getText('filter')"
+                            [filterEqOperator]="getText('filterEqOperator')"
+                            [filterNotEqOperator]="getText('filterNotEqOperator')"
+                            [filterIsNullOperator]="getText('filterIsNullOperator')"
+                            [filterIsNotNullOperator]="getText('filterIsNotNullOperator')"
+                            [filterIsEmptyOperator]="getText('filterIsEmptyOperator')"
+                            [filterIsNotEmptyOperator]="getText('filterIsNotEmptyOperator')"
+                            [filterStartsWithOperator]="getText('filterStartsWithOperator')"
+                            [filterContainsOperator]="getText('filterContainsOperator')"
+                            [filterNotContainsOperator]="getText('filterNotContainsOperator')"
+                            [filterEndsWithOperator]="getText('filterEndsWithOperator')"
+                            [filterGteOperator]="getText('filterGteOperator')"
+                            [filterGtOperator]="getText('filterGtOperator')"
+                            [filterLteOperator]="getText('filterLteOperator')"
+                            [filterLtOperator]="getText('filterLtOperator')"
+                            [filterIsTrue]="getText('filterIsTrue')"
+                            [filterIsFalse]="getText('filterIsFalse')"
+                            [filterBooleanAll]="getText('filterBooleanAll')"
+                            [filterAfterOrEqualOperator]="getText('filterAfterOrEqualOperator')"
+                            [filterAfterOperator]="getText('filterAfterOperator')"
+                            [filterBeforeOperator]="getText('filterBeforeOperator')"
+                            [filterBeforeOrEqualOperator]="getText('filterBeforeOrEqualOperator')"
+                            [filterFilterButton]="getText('filterFilterButton')"
+                            [filterClearButton]="getText('filterClearButton')"
+                            [filterAndLogic]="getText('filterAndLogic')"
+                            [filterOrLogic]="getText('filterOrLogic')"
+                            [loading]="getText('loading')"
+                            [columnMenu]="getText('columnMenu')"
+                            [columns]="getText('columns')"
+                            [sortable]="getText('sortable')"
+                            [sortAscending]="getText('sortAscending')"
+                            [sortDescending]="getText('sortDescending')"
+                            [sortedAscending]="getText('sortedAscending')"
+                            [sortedDescending]="getText('sortedDescending')"
+                            [sortedDefault]="getText('sortedDefault')"
+                            [columnsApply]="getText('columnsApply')"
+                            [columnsReset]="getText('columnsReset')"
+                        >
+                        </kendo-treelist-messages>
+                    </kendo-treelist>
+                </kendo-splitter-pane>
+                <kendo-splitter-pane
+                    [collapsible]="timelinePaneOptions?.collapsible"
+                    [resizable]="timelinePaneOptions?.resizable"
+                    [collapsed]="timelinePaneOptions?.collapsed"
+                    [min]="timelinePaneOptions?.min"
+                    [max]="timelinePaneOptions?.max"
+                    [size]="timelinePaneOptions?.size"
+                    (collapsedChange)="onTimelineCollapsedChange($event)"
+                    (sizeChange)="onTimelinePaneSizeChange($event)"
+                    [scrollable]="false">
+                    <kendo-gantt-timeline
+                        *ngIf="views && views.length"
+                        [renderDependencyDragClues]="renderDependencyDragClues"
+                        [dragScrollSettings]="dragScrollSettings"
+                        [rows]="viewItems"
+                        [slots]="timelineSlots"
+                        [groupSlots]="timelineGroupSlots"
+                        [tableWidth]="tableWidth"
+                        [activeView]="activeView"
+                        [taskContentTemplate]="taskContentTemplate?.templateRef"
+                        [taskTemplate]="taskTemplate?.templateRef"
+                        [summaryTaskTemplate]="summaryTaskTemplate?.templateRef"
+                        [taskClass]="taskClass"
+                        [dependencies]="dependencies"
+                        [isExpanded]="isExpanded"
+                        [selectable]="selectable"
+                        [isTaskSelected]="isTaskSelected"
+                        [kendoEventsOutsideAngular]="{
+                            click: handleTimelineClick,
+                            contextmenu: handleTimelineRightClick,
+                            dblclick: handleTimelineDblClick,
+                            mousedown: handleTimelineMouseDown
+                        }"
+                        [scope]="this"
+                    ></kendo-gantt-timeline>
+                </kendo-splitter-pane>
+            </kendo-splitter>
+        </div>
+        <kendo-gantt-toolbar
+            *ngIf="showToolbar('bottom')"
+            [showAddTask]="toolbarSettings.addTaskTool === 'bottom' || toolbarSettings.addTaskTool === 'both'"
+            [showViewSelector]="toolbarSettings.viewSelectorTool === 'bottom' || toolbarSettings.viewSelectorTool === 'both'"
+            [toolbarTemplate]="toolbarTemplate"
+            [views]="viewTypes"
+            [activeView]="activeView"
+            class="k-gantt-footer k-toolbar k-gantt-toolbar"
+            position="bottom"></kendo-gantt-toolbar>
+        <kendo-gantt-edit-dialog
+            *ngIf="showEditingDialog"
+            [data]="data">
+        </kendo-gantt-edit-dialog>
+        <kendo-dialog
+            *ngIf="showConfirmationDialog"
+            [width]="575"
+            [height]="170"
+            [title]="getText('confirmationDialogTitle')"
+            (close)="handleConfirmationDialogClose()">
+            <span>{{ getText('confirmationDialogContent') }}</span>
+            <kendo-dialog-actions layout="normal">
+                <kendo-treelist-spacer></kendo-treelist-spacer>
+                <button kendoButton [primary]="true" (click)="handleDeleteConfirmation()">{{ getText('deleteButtonText') }}</button>
+                <button kendoButton (click)="handleConfirmationDialogClose()">{{ getText('cancelButtonText') }}</button>
+            </kendo-dialog-actions>
+        </kendo-dialog>
+   `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.TimelineViewService }, { type: i2.ScrollSyncService }, { type: i0.Renderer2 }, { type: i3.MappingService }, { type: i4.OptionChangesService }, { type: i5.DependencyDomService }, { type: i6.EditService }, { type: i7.LocalizationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i8.NavigationService }]; }, propDecorators: { treeList: [{
+                type: ViewChild,
+                args: [TreeListComponent, { static: true }]
+            }], timeline: [{
+                type: ViewChild,
+                args: [GanttTimelineComponent, { static: false }]
+            }], taskContentTemplate: [{
+                type: ContentChild,
+                args: [GanttTaskContentTemplateDirective, { static: false }]
+            }], taskTemplate: [{
+                type: ContentChild,
+                args: [GanttTaskTemplateDirective, { static: false }]
+            }], summaryTaskTemplate: [{
+                type: ContentChild,
+                args: [GanttSummaryTaskTemplateDirective, { static: false }]
+            }], toolbarTemplateChildren: [{
+                type: ContentChildren,
+                args: [ToolbarTemplateDirective]
+            }], roleDescription: [{
+                type: Input,
+                args: ['aria-roledescription']
+            }], hostRoleDescriptionAttr: [{
+                type: HostBinding,
+                args: ['attr.aria-roledescription']
+            }], role: [{
+                type: Input,
+                args: ['role']
+            }], hostRoleAttr: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-gantt']
+            }], dir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], columns: [{
+                type: ContentChildren,
+                args: [GanttColumnBase]
+            }], taskModelFields: [{
+                type: Input
+            }], dependencyModelFields: [{
+                type: Input
+            }], views: [{
+                type: ContentChildren,
+                args: [ViewBase]
+            }], activeView: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], isSelected: [{
+                type: Input
+            }], validateNewDependency: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], selectable: [{
+                type: Input
+            }], toolbarSettings: [{
+                type: Input
+            }], fetchChildren: [{
+                type: Input
+            }], hasChildren: [{
+                type: Input
+            }], dependencies: [{
+                type: Input
+            }], sortable: [{
+                type: Input
+            }], sort: [{
+                type: Input
+            }], filterable: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], workDayStart: [{
+                type: Input
+            }], workDayEnd: [{
+                type: Input
+            }], workWeekStart: [{
+                type: Input
+            }], workWeekEnd: [{
+                type: Input
+            }], navigable: [{
+                type: Input
+            }], timelinePaneOptions: [{
+                type: Input
+            }], treeListPaneOptions: [{
+                type: Input
+            }], taskClass: [{
+                type: Input
+            }], rowClass: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], columnsAutoSize: [{
+                type: Input
+            }], columnMenu: [{
+                type: Input
+            }], columnsReorderable: [{
+                type: Input
+            }], columnsResizable: [{
+                type: Input
+            }], dragScrollSettings: [{
+                type: Input
+            }], rowExpand: [{
+                type: Output
+            }], taskDblClick: [{
+                type: Output
+            }], cellDblClick: [{
+                type: Output
+            }], cellClose: [{
+                type: Output
+            }], taskDelete: [{
+                type: Output
+            }], rowCollapse: [{
+                type: Output
+            }], remove: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }], save: [{
+                type: Output
+            }], taskAdd: [{
+                type: Output
+            }], dependencyAdd: [{
+                type: Output
+            }], sortChange: [{
+                type: Output
+            }], filterChange: [{
+                type: Output
+            }], dataStateChange: [{
+                type: Output
+            }], treeListPaneCollapsedChange: [{
+                type: Output
+            }], timelinePaneCollapsedChange: [{
+                type: Output
+            }], timelinePaneSizeChange: [{
+                type: Output
+            }], activeViewChange: [{
+                type: Output
+            }], columnResize: [{
+                type: Output
+            }], columnReorder: [{
+                type: Output
+            }], columnVisibilityChange: [{
+                type: Output
+            }], columnLockedChange: [{
+                type: Output
+            }], cellClick: [{
+                type: Output
+            }], taskClick: [{
+                type: Output
+            }] } });