@progress/kendo-angular-gantt 17.0.0-develop.4 → 17.0.0-develop.40

package/{esm2020 → esm2022}/gantt.component.mjs

@@ -135,337 +135,45 @@ const DEFAULT_DRAG_SCROLL_SETTINGS = {
  * ```
  */
 export class GanttComponent {
-    constructor(timelineViewService, scrollSyncService, renderer, mapper, optionChangesService, dependencyDomService, editService, localizationService, hostElement, zone, navigation, currentTimeMarkerService) {
-        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;
-        this.currentTimeMarkerService = currentTimeMarkerService;
-        /**
-         * @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;
-        /**
-         * Allows setting the toolbar(s) `aria-label` attribute value as necessary to comply with accessibility requirements.
-         * Typically, toolbars need an `aria-label` when there is more than one toolbar in the application.
-         */
-        this.toolbarAriaLabel = 'Toolbar';
-        /**
-         * 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 the Gantt current time marker settings.
-         * The settings will be applied for all views.
-         * If the `currentTimeMarker` is set for a view then it takes precedence.
-         *
-         * @default true
-         */
-        this.currentTimeMarker = true;
-        /**
-         * 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;
-        /**
-         * @hidden
-         */
-        this.showLicenseWatermark = false;
-        this._columns = new QueryList();
-        this._data = [];
-        this._dragScrollSettings = { ...DEFAULT_DRAG_SCROLL_SETTINGS };
-        this._timelinePaneOptions = { ...DEFAULT_TIMELINE_PANE_SETTINGS };
-        this._treeListPaneOptions = { ...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();
-        const isValid = validatePackage(packageMetadata);
-        this.showLicenseWatermark = shouldShowValidationUI(isValid);
-        this.optionChangesSubscriptions.add(this.optionChangesService.viewChanges.subscribe(() => {
-            this.loadTimelineData();
-        }));
-        this.optionChangesSubscriptions.add(this.optionChangesService.dateFormatChanges.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';
-            this.currentTimeMarkerService.rtl = rtl;
-        });
-    }
+    timelineViewService;
+    scrollSyncService;
+    renderer;
+    mapper;
+    optionChangesService;
+    dependencyDomService;
+    editService;
+    localizationService;
+    hostElement;
+    zone;
+    navigation;
+    currentTimeMarkerService;
+    treeList;
+    timeline;
+    /**
+     * @hidden
+     *
+     * Queries the template for a task content template declaration.
+     * In newer Angular versions the ngIf-ed value gets evaluated after the static query is resolved.
+     * Therefore the `static` property needs to be set to `false`.
+     */
+    taskContentTemplate;
+    /**
+     * @hidden
+     *
+     * Queries the template for a task template declaration.
+     * In newer Angular versions the ngIf-ed value gets evaluated after the static query is resolved.
+     * Therefore the `static` property needs to be set to `false`.
+     */
+    taskTemplate;
+    /**
+     * @hidden
+     *
+     * Queries the template for a task summary template declaration.
+     * In newer Angular versions the ngIf-ed value gets evaluated after the static query is resolved.
+     * Therefore the `static` property needs to be set to `false`.
+     */
+    summaryTaskTemplate;
+    toolbarTemplateChildren;
     get toolbarTemplate() {
         if (this._customToolbarTemplate) {
             return this._customToolbarTemplate;
@@ -475,12 +183,21 @@ export class GanttComponent {
     set toolbarTemplate(customToolbarTemplate) {
         this._customToolbarTemplate = customToolbarTemplate;
     }
+    /**
+     * @hidden
+     */
+    roleDescription = 'Gantt Chart';
     get hostRoleDescriptionAttr() {
         return this.roleDescription;
     }
+    /**
+     * @hidden
+     */
+    role = 'application';
     get hostRoleAttr() {
         return this.role;
     }
+    hostClasses = true;
     get dir() {
         return this.direction;
     }
@@ -511,6 +228,10 @@ export class GanttComponent {
     set dependencyModelFields(fields) {
         this.mapper.dependencyFields = fields;
     }
+    /**
+     * A query list of all declared views.
+     */
+    views;
     /**
      * The active timeline view.
      * @default 'week'
@@ -552,6 +273,38 @@ export class GanttComponent {
     get data() {
         return this._data;
     }
+    /**
+     * 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.
+     */
+    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.
+     */
+    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.
+     */
+    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.
+     */
+    selectable = false;
     /**
      * The toolbar configuration. Defines the position and content of the toolbar(s).
      * The available properties are `position`, `addTaskTool`, and `viewSelectorTool`.
@@ -575,6 +328,11 @@ export class GanttComponent {
     get toolbarSettings() {
         return this._toolbarSettings;
     }
+    /**
+     * Allows setting the toolbar(s) `aria-label` attribute value as necessary to comply with accessibility requirements.
+     * Typically, toolbars need an `aria-label` when there is more than one toolbar in the application.
+     */
+    toolbarAriaLabel = 'Toolbar';
     /**
      * Gets or sets the callback function that retrieves the child items for a particular item.
      */
@@ -595,6 +353,54 @@ export class GanttComponent {
     get hasChildren() {
         return this._hasChildren;
     }
+    /**
+     * 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.
+     */
+    dependencies = [];
+    /**
+     * Enables the sorting of the Gantt columns that have their `field` option set.
+     */
+    sortable = false;
+    /**
+     * The descriptors by which the data will be sorted.
+     */
+    sort = [];
+    /**
+     * Enables the filtering of the Gantt columns that have their `field` option set.
+     *
+     * @default false
+     */
+    filterable = false;
+    /**
+     * The descriptor by which the data will be filtered.
+     */
+    filter;
+    /**
+     * The start time of the work day.
+     * Accepts string values in the `HH:mm` format.
+     */
+    workDayStart = '08:00';
+    /**
+     * The end time of the work day.
+     * Accepts string values in the `HH:mm` format.
+     */
+    workDayEnd = '17:00';
+    /**
+     * The start of the work week (index based).
+     */
+    workWeekStart = 1;
+    /**
+     * The end of the work week (index based).
+     */
+    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 %})).
+     */
+    navigable = false;
     /**
      * The options of the timeline splitter pane. By default the pane is `collapsible`,
      * `resizable`, not `collapsed`, and its `size` is `'50%'`.
@@ -650,6 +456,44 @@ export class GanttComponent {
     get taskIdField() {
         return this.mapper.taskFields.id;
     }
+    /**
+     * Sets the callback function that indicates if a particular item is expanded.
+     * If no callback is set, all items will be expanded and no expand icons will be rendered.
+     */
+    isExpanded;
+    /**
+     * 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
+     */
+    columnsAutoSize = false;
+    /**
+     * Specifies the Gantt current time marker settings.
+     * The settings will be applied for all views.
+     * If the `currentTimeMarker` is set for a view then it takes precedence.
+     *
+     * @default true
+     */
+    currentTimeMarker = true;
+    /**
+     * Specifies if the column menu of the columns will be displayed.
+     *
+     * @default false
+     */
+    columnMenu = false;
+    /**
+     * If set to true, the user can reorder columns by dragging their header cells.
+     *
+     * @default false
+     */
+    columnsReorderable = false;
+    /**
+     * If set to true, the user can resize columns by dragging the edges (resize handles) of their header cells.
+     *
+     * @default false
+     */
+    columnsResizable = false;
     /**
      * Specifies the settings for auto-scrolling during dragging
      * when the pointer moves outside of the container bounderies
@@ -661,6 +505,110 @@ export class GanttComponent {
     get dragScrollSettings() {
         return this._dragScrollSettings;
     }
+    /**
+     * Fires when an item is expanded.
+     */
+    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.
+     */
+    taskDblClick = new EventEmitter();
+    /**
+     * Fires when the user double clicks a cell.
+     */
+    cellDblClick = new EventEmitter();
+    /**
+     * Fires when the user leaves an edited cell.
+     */
+    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.
+     */
+    taskDelete = new EventEmitter();
+    /**
+     * Fires when an item is collapsed.
+     */
+    rowCollapse = new EventEmitter();
+    /**
+     * Fires when the user confirms deleting a task.
+     */
+    remove = new EventEmitter();
+    /**
+     * Fires when the user cancels editing a task.
+     */
+    cancel = new EventEmitter();
+    /**
+     * Fires when the user saves an edited task.
+     */
+    save = new EventEmitter();
+    /**
+     * Fires when the user adds a task.
+     */
+    taskAdd = new EventEmitter();
+    /**
+     * Fires when the user adds a dependency via dragging
+     * [see example]({% slug editing_drag_create_dependencies_gantt %}#toc-basic-concepts).
+     */
+    dependencyAdd = new EventEmitter();
+    /**
+     * Fires when the sorting of the Gantt is changed.
+     * You have to handle the event yourself and sort the data.
+     */
+    sortChange = new EventEmitter();
+    /**
+     * Fires when the Gantt filter is modified.
+     * You have to handle the event yourself and filter the data.
+     */
+    filterChange = new EventEmitter();
+    /**
+     * Fires when the filter or sort state of the Gantt is changed.
+     */
+    dataStateChange = new EventEmitter();
+    /**
+     * Fires when the collapsed state of the treelist pane is changed.
+     */
+    treeListPaneCollapsedChange = new EventEmitter();
+    /**
+     * Fires when the collapsed state of the timeline pane is changed.
+     */
+    timelinePaneCollapsedChange = new EventEmitter();
+    /**
+     * Fires each time the user resizes the timeline pane.
+     */
+    timelinePaneSizeChange = new EventEmitter();
+    /**
+     * Fires each time the user selects a different view type. The event data contains the type of the newly selected view.
+     */
+    activeViewChange = new EventEmitter();
+    /**
+     * Fires when the user completes the resizing of the column.
+     */
+    columnResize = new EventEmitter();
+    /**
+     * Fires when the user completes the reordering of the column.
+     */
+    columnReorder = new EventEmitter();
+    /**
+     * Fires when the user changes the visibility of the columns from the column menu or column chooser.
+     */
+    columnVisibilityChange = new EventEmitter();
+    /**
+     * @hidden
+     *
+     * Fires when the user changes the locked state of the columns from the column menu or by reordering the columns.
+     */
+    columnLockedChange = new EventEmitter();
+    /**
+     * Fires when a cell is clicked.
+     */
+    cellClick = new EventEmitter();
+    /**
+     * Fires when a task is clicked.
+     */
+    taskClick = new EventEmitter();
     /**
      * @hidden
      */
@@ -685,6 +633,27 @@ export class GanttComponent {
     get filterMenu() {
         return this.filterable ? 'menu' : false;
     }
+    /**
+     * @hidden
+     *
+     * Specifies whether the dependency drag clues will be rendered.
+     * Set internally by the dependency-drag-create directive.
+     *
+     * @default false
+     */
+    renderDependencyDragClues = false;
+    /**
+     * @hidden
+     */
+    timelineSlots;
+    /**
+     * @hidden
+     */
+    timelineGroupSlots;
+    /**
+     * @hidden
+     */
+    tableWidth;
     /**
      * @hidden
      */
@@ -722,12 +691,113 @@ export class GanttComponent {
     get viewTypes() {
         return this.views.map(view => view.type);
     }
+    /**
+     * @hidden
+     *
+     * Used by the GanttExpandableDirective.
+     */
+    expandStateChange = new EventEmitter();
+    /**
+     * @hidden
+     */
+    showEditingDialog = false;
+    /**
+     * @hidden
+     */
+    showConfirmationDialog = false;
     /**
      * @hidden
      */
     get isInEditMode() {
         return this.showEditingDialog || this.showConfirmationDialog || this.treeList.isEditing();
     }
+    /**
+     * @hidden
+     */
+    showLicenseWatermark = false;
+    _columns = new QueryList();
+    _data = [];
+    _dragScrollSettings = { ...DEFAULT_DRAG_SCROLL_SETTINGS };
+    _timelinePaneOptions = { ...DEFAULT_TIMELINE_PANE_SETTINGS };
+    _treeListPaneOptions = { ...DEFAULT_TREELIST_PANE_SETTINGS };
+    _customToolbarTemplate;
+    _rowClass = rowClassCallback;
+    _taskClass = taskClassCallback;
+    _activeView = DEFAULT_VIEW;
+    _toolbarSettings = {
+        position: 'top',
+        addTaskTool: 'none',
+        viewSelectorTool: 'top'
+    };
+    _fetchChildren = fetchChildren;
+    _hasChildren = hasChildren;
+    lastTreeListCellClick;
+    direction;
+    rtl = false;
+    editItem;
+    optionChangesSubscriptions = new Subscription();
+    editServiceSubscription = new Subscription();
+    localizationSubscription;
+    keydownListenerDisposers;
+    constructor(timelineViewService, scrollSyncService, renderer, mapper, optionChangesService, dependencyDomService, editService, localizationService, hostElement, zone, navigation, currentTimeMarkerService) {
+        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;
+        this.currentTimeMarkerService = currentTimeMarkerService;
+        const isValid = validatePackage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
+        this.optionChangesSubscriptions.add(this.optionChangesService.viewChanges.subscribe(() => {
+            this.loadTimelineData();
+        }));
+        this.optionChangesSubscriptions.add(this.optionChangesService.dateFormatChanges.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';
+            this.currentTimeMarkerService.rtl = rtl;
+        });
+    }
     ngOnChanges(changes) {
         if (anyChanged(['data', 'activeView', 'workWeekStart', 'workWeekEnd', 'workDayStart', 'workDayEnd'], changes)) {
             this.loadTimelineData();
@@ -1325,37 +1395,36 @@ export class GanttComponent {
             }
         }
     }
-}
-GanttComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 }, { token: i9.CurrentTimeMarkerService }], target: i0.ɵɵFactoryTarget.Component });
-GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GanttComponent, isStandalone: true, 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", toolbarAriaLabel: "toolbarAriaLabel", 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", currentTimeMarker: "currentTimeMarker", 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: L10N_PREFIX,
-            useValue: 'kendo.gantt'
-        },
-        {
-            provide: DataBoundTreeComponent,
-            useExisting: forwardRef(() => GanttComponent)
-        },
-        {
-            provide: ExpandableTreeComponent,
-            useExisting: forwardRef(() => GanttComponent)
-        },
-        TimelineViewService,
-        TimelineDayViewService,
-        TimelineWeekViewService,
-        TimelineMonthViewService,
-        TimeLineYearViewService,
-        ScrollSyncService,
-        DependencyDomService,
-        MappingService,
-        OptionChangesService,
-        EditService,
-        TimelineScrollService,
-        NavigationService,
-        CurrentTimeMarkerService
-    ], 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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 }, { token: i9.CurrentTimeMarkerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GanttComponent, isStandalone: true, 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", toolbarAriaLabel: "toolbarAriaLabel", 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", currentTimeMarker: "currentTimeMarker", 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: L10N_PREFIX,
+                useValue: 'kendo.gantt'
+            },
+            {
+                provide: DataBoundTreeComponent,
+                useExisting: forwardRef(() => GanttComponent)
+            },
+            {
+                provide: ExpandableTreeComponent,
+                useExisting: forwardRef(() => GanttComponent)
+            },
+            TimelineViewService,
+            TimelineDayViewService,
+            TimelineWeekViewService,
+            TimelineMonthViewService,
+            TimeLineYearViewService,
+            ScrollSyncService,
+            DependencyDomService,
+            MappingService,
+            OptionChangesService,
+            EditService,
+            TimelineScrollService,
+            NavigationService,
+            CurrentTimeMarkerService
+        ], 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"
@@ -1727,8 +1796,9 @@ GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
         </kendo-dialog>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-   `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGanttLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: ["showAddTask", "showViewSelector", "views", "activeView", "toolbarTemplate", "navigable", "position"], outputs: ["activeViewChange"] }, { kind: "component", type: SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "splitbarWidth", "resizeStep"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { kind: "component", type: SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "separatorLabel", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { kind: "component", type: TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "navigatable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "rowReorderable", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange", "rowReorder"], exportAs: ["kendoTreeList"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: CustomMessagesComponent, selector: "kendo-treelist-messages" }, { kind: "component", type: GanttTimelineComponent, selector: "kendo-gantt-timeline", inputs: ["rows", "slots", "groupSlots", "tableWidth", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "renderDependencyDragClues", "dragScrollSettings", "currentTimeMarker", "selectable", "isTaskSelected", "isExpanded", "dependencies"], outputs: ["timelineContainerPress", "timelineContainerDrag", "timelineContainerRelease"] }, { kind: "component", type: EditDialogComponent, selector: "kendo-gantt-edit-dialog", inputs: ["data"] }, { kind: "component", type: DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttComponent, decorators: [{
+   `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGanttLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: ["showAddTask", "showViewSelector", "views", "activeView", "toolbarTemplate", "navigable", "position"], outputs: ["activeViewChange"] }, { kind: "component", type: SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "splitbarWidth", "resizeStep", "splitterBarClass"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { kind: "component", type: SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "splitterBarAttributes", "splitterBarClass", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { kind: "component", type: TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "navigatable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "rowReorderable", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange", "rowReorder"], exportAs: ["kendoTreeList"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: CustomMessagesComponent, selector: "kendo-treelist-messages" }, { kind: "component", type: GanttTimelineComponent, selector: "kendo-gantt-timeline", inputs: ["rows", "slots", "groupSlots", "tableWidth", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "renderDependencyDragClues", "dragScrollSettings", "currentTimeMarker", "selectable", "isTaskSelected", "isExpanded", "dependencies"], outputs: ["timelineContainerPress", "timelineContainerDrag", "timelineContainerRelease"] }, { kind: "component", type: EditDialogComponent, selector: "kendo-gantt-edit-dialog", inputs: ["data"] }, { kind: "component", type: DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: TreeListSpacerComponent, selector: "kendo-treelist-spacer", inputs: ["width"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GanttComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-gantt',