/**----------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the project root for more information *-------------------------------------------------------------------------------------------*/ import { EventEmitter, OnChanges, QueryList, SimpleChanges, Renderer2, AfterContentInit, OnDestroy, ElementRef, NgZone } from '@angular/core'; import { FormGroup } from '@angular/forms'; import { TreeListComponent, DataBoundTreeComponent, ExpandableTreeComponent, SelectionChangeEvent as TreeListSelectionChangeEvent, CellClickEvent as TreeListCellClickEvent } from '@progress/kendo-angular-treelist'; import { CompositeFilterDescriptor, SortDescriptor } from '@progress/kendo-data-query'; import { Day } from '@progress/kendo-date-math'; import { Observable } from 'rxjs'; import { GanttTimelineComponent } from './timeline/gantt-timeline.component'; import { GanttColumnBase } from './columns/columns'; import { DataStateChangeEvent, ColumnMenuSettings, RowClassFn, TaskClassFn, ColumnVisibilityChangeEvent, ColumnResizeEvent, ColumnLockedChangeEvent, ColumnReorderEvent, ColumnReorderConfig, GanttTaskModelFields, GanttDependencyModelFields, SortSettings, CellClickEvent, TaskClickEvent, DependencyAddEvent, TaskDeleteEvent } from './models/models'; import { LocalizationService } from '@progress/kendo-angular-l10n'; import { TimelineViewService } from './timeline/timeline-view.service'; import { TimelineViewType } from './models/timeline-view'; import { TimelineBaseViewService } from './timeline/timeline-base-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 { NavigationService } from './navigation/navigation.service'; import { TimelinePaneOptions, TreeListPaneOptions } 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 { ToolbarSettings } from './models/toolbar-settings'; import { ExpandEvent } from './expanded-state/expand-event'; import { ViewBase } from './timeline/view-base'; import { SelectionChangeEvent } from './selection/selection-change-event'; import { TaskEditEvent } from './models/events/task-edit-event.interface'; import { CellCloseEvent } from './models/events/cell-close-event.interface'; import { CellCloseEvent as TreeListCellCloseEvent } from '@progress/kendo-angular-treelist'; import { TaskAddEvent } from './models/events/task-add-event.interface'; import { ViewItem } from './models/view-item.interface'; import { DragScrollSettings } from './scrolling/drag-scroll-settings'; import { FilterableSettings } from './models/filterable-settings'; import { CurrentTimeMarkerService } from './timeline/current-time-marker.service'; import { CurrentTimeSettings } from './models/current-time-settings.interface'; import { GanttTaskTooltipTemplateDirective } from './template-directives/task-tooltip-template.directive'; import { TaskTooltipOptions } from './models/tooltip-options.interface'; import { IntlService } from '@progress/kendo-angular-intl'; import * as i0 from "@angular/core"; /** * Represents the [Kendo UI Gantt component for Angular](slug:overview_gantt). * * Use the Gantt component to display and manage project tasks and dependencies in a timeline view. * * @example * ```ts * import { Component } from '@angular/core'; * import { GanttComponent, DependencyType } from '@progress/kendo-angular-gantt'; * * @Component({ * selector: 'my-app', * template: ` * * * * * * * * * ` * }) * export class AppComponent { * public data: Task[] = [ * { * id: 1, * title: 'Planning', * start: new Date('2024-01-01'), * end: new Date('2024-01-05'), * subtasks: [] * } * ]; * public dependencies = [ * { id: 1, fromId: 1, toId: 2, type: DependencyType.FS } * ]; * } * ``` * * @remarks * Supported children components are: * {@link GanttColumnComponent}, * {@link GanttSpanColumnComponent}, * {@link GanttColumnGroupComponent}, * {@link TimelineDayViewComponent}, * {@link TimelineWeekViewComponent}, * {@link TimelineMonthViewComponent}, * {@link TimelineYearViewComponent}, * {@link CustomMessagesComponent}. */ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDestroy, DataBoundTreeComponent, ExpandableTreeComponent { private timelineViewService; private scrollSyncService; private renderer; private mapper; private optionChangesService; private dependencyDomService; private editService; private localizationService; hostElement: ElementRef; private zone; private navigation; private currentTimeMarkerService; private intlService; localeId: string; treeList: TreeListComponent; timeline: GanttTimelineComponent; /** * @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: GanttTaskContentTemplateDirective; /** * @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: GanttTaskTemplateDirective; /** * @hidden * * Queries the template for a task tooltip 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`. */ taskTooltipTemplate: GanttTaskTooltipTemplateDirective; /** * @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: GanttSummaryTaskTemplateDirective; toolbarTemplateChildren: QueryList; get toolbarTemplate(): ToolbarTemplateDirective; set toolbarTemplate(customToolbarTemplate: ToolbarTemplateDirective); /** * @hidden */ roleDescription: string; get hostRoleDescriptionAttr(): string; /** * @hidden */ role: string; get hostRoleAttr(): string; hostClasses: boolean; get dir(): string; /** * A query list of all declared columns. */ set columns(columns: QueryList); get columns(): QueryList; /** * Sets the fields used to extract task data from the `data` array items. * The `id` field is also used as a unique identifier for TreeList data items. * If not set, task data items must match the [`GanttTask`](slug:api_gantt_gantttask) interface. */ set taskModelFields(fields: GanttTaskModelFields); /** * Sets the fields used to extract dependency data from the `dependencies` array items. * If not set, dependency data items must match the [`GanttDependency`](slug:api_gantt_ganttdependency) interface. */ set dependencyModelFields(fields: GanttDependencyModelFields); /** * A query list of all declared views. */ views: QueryList; /** * Sets the active timeline view. * @default 'week' */ set activeView(view: TimelineViewType); get activeView(): TimelineViewType; /** * @hidden * */ get activeViewCurrentTimeMarker(): boolean | CurrentTimeSettings; /** * Gets or sets the Gantt data. * The task data items must match the [`GanttTask`]({% slug api_gantt_gantttask %}) interface or use [`taskModelFields`]({% slug api_gantt_ganttcomponent %}#toc-taskmodelfields). */ set data(data: any[]); get data(): any[]; /** * Specifies a callback to determine if a task is selected ([see example]({% slug selection_gantt %}#toc-custom-selection)). * Set [`selectable`]({% slug api_gantt_ganttcomponent %}#toc-selectable) to `true` to use this callback. */ isSelected: (dataItem: object) => boolean; /** * Specifies a callback to validate new dependencies. * Use this callback to control the valid dependencies that users can create ([see example]({% slug editing_drag_create_dependencies_gantt %}#toc-validation)). */ validateNewDependency: (dependency: object) => boolean; /** * Fires when the Gantt selection changes through user interaction. * The event data contains the affected items and the action type. */ selectionChange: EventEmitter; /** * Enables or disables selection in the Gantt ([see example]({% slug selection_gantt %}#toc-custom-selection)). * Set to `true` to allow 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. * @default false */ selectable: boolean; /** * Configures the toolbar position and content. * Set `position`, `addTaskTool`, and `viewSelectorTool` as needed. */ set toolbarSettings(value: ToolbarSettings); get toolbarSettings(): ToolbarSettings; /** * Sets the `aria-label` attribute value for the toolbar. * Use this to improve accessibility. * @default "Toolbar" */ toolbarAriaLabel: string; /** * Sets the callback function to retrieve child items for a data item. */ set fetchChildren(fn: (dataItem: any) => Observable | object[]); get fetchChildren(): (dataItem: any) => Observable | object[]; /** * Sets the callback function to indicate if a data item has child items. */ set hasChildren(fn: (dataItem: any) => boolean); get hasChildren(): (dataItem: any) => boolean; /** * Sets the dependencies to display between tasks. * Dependency data items must match the [`GanttDependency`]({% slug api_gantt_ganttdependency %}) interface or use [`dependencyModelFields`]({% slug api_gantt_ganttcomponent %}#toc-dependencymodelfields). */ dependencies: any[]; /** * Enables sorting for columns with a `field` option. */ sortable: SortSettings; /** * Sets the descriptors for sorting the data. */ sort: SortDescriptor[]; /** * Enables filtering for columns with a `field` option. * @default false */ filterable: boolean; /** * Sets the descriptor for filtering the data. */ filter: CompositeFilterDescriptor; /** * Sets the start time of the work day in `HH:mm` format. * @default "08:00" */ workDayStart: string; /** * Sets the end time of the work day in `HH:mm` format. * @default "17:00" */ workDayEnd: string; /** * Sets the start day of the work week (index based). * @default 1 */ workWeekStart: Day; /** * Sets the end day of the work week (index based). * @default 5 */ workWeekEnd: Day; /** * Enables keyboard navigation for the Gantt. * By default, navigation is enabled for the TreeList and Timeline parts of the component ([see example]({% slug keyboard_navigation_gantt %})). * @default true */ navigable: boolean; /** * Sets the options for the timeline splitter pane. * By default, the pane is collapsible, resizable, not collapsed, and its size is `'50%'`. */ set timelinePaneOptions(value: TimelinePaneOptions); get timelinePaneOptions(): TimelinePaneOptions; /** * Sets the options for the treelist splitter pane. * By default the pane is collapsible and not collapsed. */ set treeListPaneOptions(value: TreeListPaneOptions); get treeListPaneOptions(): TreeListPaneOptions; /** * Sets a function to apply custom CSS classes to each task. * The function receives the task data item. */ set taskClass(fn: TaskClassFn); get taskClass(): TaskClassFn; /** * Sets a function to apply custom CSS classes to each data row. * The function receives the row data item. */ set rowClass(fn: RowClassFn); get rowClass(): RowClassFn; /** * Gets the name of the field that contains the unique identifier for task data items. * @default "id" */ get taskIdField(): any; /** * Sets a callback function to indicate if a data item is expanded. * If not set, all items are expanded and no expand icons are shown. */ isExpanded: (item: object) => boolean; /** * Enables automatic resizing of columns to fit their content. * @default false */ columnsAutoSize: boolean; /** * Sets the current time marker settings for the Gantt. * Applies to all views unless overridden by the settings of a particular view. * @default true */ currentTimeMarker: boolean | CurrentTimeSettings; /** * Enables the column menu for all columns. * @default false */ columnMenu: boolean | ColumnMenuSettings; /** * Enables reordering of the columns by dragging their header cells. * @default false */ columnsReorderable: boolean; /** * Enables resizing of the columns by dragging the header cell edges (resize handles). * @default false */ columnsResizable: boolean; /** * Defines the settings for auto-scrolling during dragging when the pointer moves outside the container ([see example](slug:editing_drag_create_dependencies_gantt#auto-scrolling)). */ set dragScrollSettings(settings: DragScrollSettings); get dragScrollSettings(): DragScrollSettings; /** * Sets the options for the task tooltip, such as `position`, `callout`, and `showAfter`. * @default { position: 'top', callout: true, showAfter: 100 } */ taskTooltipOptions: TaskTooltipOptions; /** * Fires when a row is expanded. */ rowExpand: EventEmitter; /** * Fires when a Gantt task in the timeline pane is double-clicked. * The event data contains the clicked task. Use this event to open a task editing dialog if needed. */ taskDblClick: EventEmitter; /** * Fires when a cell is double-clicked. */ cellDblClick: EventEmitter; /** * Fires when an edited cell is closed. */ cellClose: EventEmitter; /** * Fires when the user clicks the `Delete` button in the task editing dialog, * the task delete icon, or presses the `Delete` key on a focused task. * Use this event to open a confirmation dialog if needed. */ taskDelete: EventEmitter; /** * Fires when a row is collapsed. */ rowCollapse: EventEmitter; /** * Fires when the user confirms deleting a task. */ remove: EventEmitter; /** * Fires when the user cancels editing a task. */ cancel: EventEmitter; /** * Fires when the user saves an edited task. */ save: EventEmitter; /** * Fires when the user adds a task. */ taskAdd: EventEmitter; /** * Fires when the user adds a dependency by dragging [see example]({% slug editing_drag_create_dependencies_gantt %}#toc-basic-concepts). */ dependencyAdd: EventEmitter; /** * Fires when there are changes in the Gantt sorting. * Handle this event to sort the data. */ sortChange: EventEmitter; /** * Fires when there are changes in the Gantt filtering. * Handle this event to filter the data. */ filterChange: EventEmitter; /** * Fires when the filter or sort state changes. */ dataStateChange: EventEmitter; /** * Fires when the collapsed state of the treelist pane changes. */ treeListPaneCollapsedChange: EventEmitter; /** * Fires when the collapsed state of the timeline pane changes. */ timelinePaneCollapsedChange: EventEmitter; /** * Fires when the user resizes the timeline pane. */ timelinePaneSizeChange: EventEmitter; /** * Fires when the user selects a different view type. * The event data contains the type of the new view. */ activeViewChange: EventEmitter; /** * Fires when the user completes resizing a column. */ columnResize: EventEmitter; /** * Fires when the user completes reordering a column. */ columnReorder: EventEmitter; /** * Fires when the user changes column visibility from the column menu or chooser. */ columnVisibilityChange: EventEmitter; /** * @hidden * * Fires when the user changes the locked state of the columns from the column menu or by reordering the columns. */ columnLockedChange: EventEmitter; /** * Fires when a cell is clicked. */ cellClick: EventEmitter; /** * Fires when a task is clicked. */ taskClick: EventEmitter; /** * @hidden */ get renderedTreeListItems(): any[]; /** * @hidden */ get viewItems(): ViewItem[]; /** * @hidden */ get filterMenu(): FilterableSettings; /** * @hidden * * Specifies whether the dependency drag clues will be rendered. * Set internally by the dependency-drag-create directive. * * @default false */ renderDependencyDragClues: boolean; /** * @hidden */ timelineSlots: any[]; /** * @hidden */ timelineGroupSlots: any[]; /** * @hidden */ tableWidth: number; /** * @hidden */ get viewService(): TimelineBaseViewService; /** * @hidden * * Retrieves the `isSelected` callback if `selectable` is set to `true` * Otherwise returns the default callback, which always returns `false`. */ get isTaskSelected(): (dataItem: any) => boolean; /** * @hidden * * Used by the GanttExpandableDirective. */ get idGetter(): any; /** * @hidden * * Used by the views selector. */ get viewTypes(): TimelineViewType[]; /** * @hidden * * Used by the GanttExpandableDirective. */ expandStateChange: EventEmitter; /** * @hidden */ showEditingDialog: boolean; /** * @hidden */ showConfirmationDialog: boolean; /** * @hidden */ get isInEditMode(): boolean; /** * @hidden */ showLicenseWatermark: boolean; /** * @hidden */ licenseMessage?: string; private _columns; private _data; private _dragScrollSettings; private _timelinePaneOptions; private _treeListPaneOptions; private _customToolbarTemplate; private _rowClass; private _taskClass; private _activeView; private _toolbarSettings; private _fetchChildren; private _hasChildren; private lastTreeListCellClick; private direction; private rtl; private editItem; private optionChangesSubscriptions; private editServiceSubscription; private localizationSubscription; private intlSubscription; private keydownListenerDisposers; constructor(timelineViewService: TimelineViewService, scrollSyncService: ScrollSyncService, renderer: Renderer2, mapper: MappingService, optionChangesService: OptionChangesService, dependencyDomService: DependencyDomService, editService: EditService, localizationService: LocalizationService, hostElement: ElementRef, zone: NgZone, navigation: NavigationService, currentTimeMarkerService: CurrentTimeMarkerService, intlService: IntlService, localeId: string); ngOnChanges(changes: SimpleChanges): void; ngAfterViewInit(): void; ngAfterContentInit(): void; ngOnDestroy(): void; /** * Focuses the last active cell or task in the Gantt. * If no item was previously focused, focuses the first TreeList cell ([see example]({% slug keyboard_navigation_gantt %}#toc-controlling-the-focus)). */ focus(): void; /** * Focuses the specified cell in the TreeList ([see example]({% slug keyboard_navigation_gantt %}#toc-controlling-the-focus)). * @param rowIndex The row index. * @param colIndex The column index. */ focusCell(rowIndex: number, colIndex: number): void; /** * Focuses the specified task in the Timeline ([see example]({% slug keyboard_navigation_gantt %}#toc-controlling-the-focus)). * @param taskIndex The index of the task. */ focusTask(taskIndex: number): void; /** * Sets the minimum width for the specified column so that its content fits. * The Gantt must be resizable. * @param column The column to auto-fit. */ autoFitColumn(column: GanttColumnBase): void; /** * Adjusts the width of the specified columns to fit their content. * If no columns are specified, fits all columns. * The Gantt must be resizable to use this method. * @param columns The columns to auto-fit. */ autoFitColumns(columns?: Array | QueryList): void; /** * Clears loaded children for the data item so the Gantt fetches them again. * @param dataItem The data item to reload. * @param reloadChildren Whether to reload children. */ reload(dataItem: any, reloadChildren?: boolean): void; /** * Changes the position of the specified column. * The source column must be visible. * @param source The column to move. * @param destIndex The new position index. * @param options Additional options. */ reorderColumn(source: GanttColumnBase, destIndex: number, options?: ColumnReorderConfig): void; /** * Forces the Gantt to re-evaluate data items and re-render the rows and Timeline period, if needed. * Also redraws dependencies and executes row-related callbacks. */ updateView(): void; /** * Opens the task editing dialog for the specified data item. * @param dataItem The task data item. * @param formGroup The form group for editing. */ editTask(dataItem: any, formGroup: FormGroup): void; /** * Closes the task editing dialog. */ closeTaskDialog(): void; /** * Opens the delete task confirmation dialog. */ openConfirmationDialog(): void; /** * @hidden */ handleConfirmationDialogClose(): void; /** * Opens a cell for editing. * @param dataItem The data item. * @param column The column index, name, or object. * @param formGroup The form group for editing. */ editCell(dataItem: any, column: number | string | any, formGroup?: FormGroup): void; /** * Closes the currently edited cell. */ closeCell(): void; /** * @hidden */ handleCellClose(e: TreeListCellCloseEvent): void; /** * @hidden */ onTreeListCollapsedChange(collapsed: boolean): void; /** * @hidden */ onTimelineCollapsedChange(collapsed: boolean): void; /** * @hidden */ loadTimelineData(): void; /** * @hidden */ showToolbar(position: string): boolean; /** * @hidden */ handleColumnVisibilityChange(event: ColumnVisibilityChangeEvent): void; /** * @hidden */ onTimelinePaneSizeChange(e: string): void; /** * @hidden */ handleTimelineRightClick(event: PointerEvent): void; /** * @hidden */ handleTimelineClick(event: PointerEvent): void; /** * @hidden */ handleTreeListDoubleClick(event: PointerEvent): void; /** * @hidden */ handleTreeListSelectionChange(event: TreeListSelectionChangeEvent): void; /** * @hidden */ handleTreeListCellClick(event: TreeListCellClickEvent): void; /** * @hidden */ handleDeleteConfirmation(): void; /** * @hidden */ handleTimelineMouseDown(event: MouseEvent): void; /** * @hidden */ handleTimelineDblClick(event: PointerEvent): void; /** * @hidden */ getText(token: string): string; /** * @hidden */ changeActiveView(view: TimelineViewType): void; /** * @hidden */ notifyTaskClick(event: PointerEvent | KeyboardEvent, dataItem: any, itemIndex: number): void; /** * @hidden */ notifySelectionChange(dataItem: any, action: 'select' | 'remove'): void; /** * @hidden */ notifyTaskDelete(task: any): void; /** * @hidden */ isSameSelection(action: 'select' | 'remove', dataItem: any): boolean; /** * @hidden */ getSelectionAction({ ctrlKey, metaKey }: PointerEvent | KeyboardEvent, dataItem: any): 'select' | 'remove'; private updateTreeListGroupClass; /** * Used to hide the vertical scrollbar */ private updateTreeListMargin; private get activeTimelineIndex(); private getActiveViewOptions; private getFirstSelectedItem; private defaultValidateNewDependencyCallback; private handleKeydown; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; }