@smart-webcomponents-angular/ganttchart
Version:
[](https://jqwidgets.com/license/)
539 lines (534 loc) • 171 kB
JavaScript
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
import './../source/modules/smart.ganttchart';
import { __awaiter } from 'tslib';
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Output, Input, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
class BaseElement {
constructor(ref) {
this.onCreate = new EventEmitter();
this.onReady = new EventEmitter();
this.onAttach = new EventEmitter();
this.onDetach = new EventEmitter();
const that = this;
this.nativeElement = ref.nativeElement;
that.nativeElement.onAttached = () => {
that.onAttach.emit(that.nativeElement);
};
that.nativeElement.onDetached = () => {
that.onDetach.emit(that.nativeElement);
};
}
addEventListener(type, listener, options = false) {
this.nativeElement.addEventListener(type, listener, options);
}
removeEventListener(type, listener, options = false) {
this.nativeElement.removeEventListener(type, listener, options);
}
dispatchEvent(event) {
return this.nativeElement.dispatchEvent(event);
}
blur() {
this.nativeElement.blur();
}
click() {
this.nativeElement.click();
}
focus(options) {
this.nativeElement.focus(options);
}
/** @description Sets or gets the license. */
get license() {
return this.nativeElement ? this.nativeElement.license : undefined;
}
set license(value) {
this.nativeElement ? this.nativeElement.license = value : undefined;
}
/** @description Sets or gets the language. Used in conjunction with the property messages. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Determines the theme. Theme defines the look of the element */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
}
BaseElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
BaseElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: BaseElement, inputs: { license: "license", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", rightToLeft: "rightToLeft", theme: "theme" }, outputs: { onCreate: "onCreate", onReady: "onReady", onAttach: "onAttach", onDetach: "onDetach" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onCreate: [{
type: Output
}], onReady: [{
type: Output
}], onAttach: [{
type: Output
}], onDetach: [{
type: Output
}], license: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], rightToLeft: [{
type: Input
}], theme: [{
type: Input
}] } });
let Smart;
if (typeof window !== "undefined") {
Smart = window.Smart;
}
class GanttChartComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/** @description This event is triggered when a batch update operation begins, specifically after the beginUpdate method has been executed. It signals that subsequent changes to the data will be grouped as part of a batch, allowing for improved performance and deferred processing until the update process is completed.
* @param event. The custom event. */
this.onBeginUpdate = new EventEmitter();
/** @description This event is triggered after the endUpdate method has been executed, indicating that a batch update operation has completed. It signals that any batched changes have been applied, and the system can now perform follow-up actions or refresh the affected components.
* @param event. The custom event. */
this.onEndUpdate = new EventEmitter();
/** @description This event is fired when the user initiates the process of connecting one task to another—such as starting to draw a link or dependency between two tasks. Within the event handler, you can call event.preventDefault() to cancel the connection operation before it completes. This provides an opportunity to validate conditions, enforce business rules, or restrict certain connections as needed.
* @param event. The custom event. Custom event was created with: event.detail( startIndex)
* startIndex - The index of the task that a connection is started from.
*/
this.onConnectionStart = new EventEmitter();
/** @description This event is triggered when the user successfully establishes a link or dependency between two distinct tasks, typically by connecting their endpoints within the user interface. It signifies that a relationship (such as a workflow, sequence, or prerequisite) has been created between the selected tasks.
* @param event. The custom event. Custom event was created with: event.detail( id, startTaskId, startIndex, endIndex, endTaskId, type)
* id - The id of the connection that was created.
* startTaskId - The id of the task that a connection is started from.
* startIndex - The index of the task that a connection is started from.
* endIndex - The index of the task that a connection ended to.
* endTaskId - The id of the task that a connection ended to.
* type - The type of connection. Fours types are available: <ul><li><b>0</b> - start-to-start</li><li><b>1</b> - end-to-start</li><li><b>2</b> - end-to-end</li><li><b>3</b> - start-to-end</li></ul>
*/
this.onConnectionEnd = new EventEmitter();
/** @description This event is triggered whenever a user selects or deselects a Task item. It fires both when a Task becomes selected and when a previously selected Task is unselected, allowing you to respond to changes in Task selection state.
* @param event. The custom event. Custom event was created with: event.detail( value, oldValue)
* value - The index of the new selected task.
* oldValue - The index of the previously selected task.
*/
this.onChange = new EventEmitter();
/** @description This event is triggered whenever a column within the Tree component is resized by the user. You can enable or disable column resizing functionality using the columnResize property. When column resizing is enabled, this event allows you to respond to changes in column width, such as updating layout or saving user preferences.
* @param event. The custom event. Custom event was created with: event.detail( dataField, headerCellElement, widthInPercentages, width)
* dataField - The name of the column. Corresponds to the <b>value</b> attribute of a <b>taskColumns/resourceColumns</b> object.
* headerCellElement - The HTMLElement column cell element that was resized.
* widthInPercentages - The new width of the column in percentages.
* width - The new width of the column in pixels.
*/
this.onColumnResize = new EventEmitter();
/** @description This event is fired immediately before the task editing window or tooltip is about to close. At this stage, you have the opportunity to intercept and prevent the closing operation by calling event.preventDefault() within your event handler. This allows you to perform validation, display confirmation dialogs, or execute other logic before the window or tooltip is dismissed.
* @param event. The custom event. Custom event was created with: event.detail( owner, item, target, type)
* owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip.
* item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
* target - The instance of the window/tooltip that is going to close.
* type - The type of window/tooltip that is going to close. There are three types of windows inside GanttChart: <ul><li><b>confirm</b> - a confirm window. This type of window is usually used to confirm the deletion of a task.</li><li><b>task</b> - a window used for task editing.</li><li><b>connection</b> - a window used to delete a connection.</li></ul>. If the event is a tooltip event, there are several tooltip types: <ul><li>indicator - when the tooltip owner is an indicator.</li><li>segment - when the tooltip owner is a task segment.</li><li>task - when the tooltip owner is a task.</li><li>resource - when the tooltip target is a resource.</li></ul>
*/
this.onClosing = new EventEmitter();
/** @description This event is triggered when the task editing window is closed or hidden by the user. It indicates that the user has exited the task editing interface, either by saving changes, cancelling, or clicking outside the window. This event can be used to perform cleanup actions, update the UI, or save edits as necessary.
* @param event. The custom event. Custom event was created with: event.detail( owner, item, target, type)
* owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip
* item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
* target - The instance of the window/tooltip that is closed.
* type - The type of window/tooltip that is closed. There are three types of windows inside GanttChart: <ul><li><b>confirm</b> - a confirm window. This type of window is usually used to confirm the deletion of a task.</li><li><b>task</b> - a window used for task editing.</li><li><b>connection</b> - a window used to delete a connection.</li></ul>. If the event is a tooltip event, there are several tooltip types: <ul><li>indicator - when the tooltip owner is an indicator.</li><li>segment - when the tooltip owner is a task segment.</li><li>task - when the tooltip owner is a task.</li><li>resource - when the tooltip target is a resource.</li></ul>
*/
this.onClose = new EventEmitter();
/** @description This event is triggered whenever a user collapses an item, such as hiding or minimizing a section, panel, or list element within the interface. It enables developers to execute custom logic or UI updates in response to the item's transition from an expanded (visible) state to a collapsed (hidden or minimized) state.
* @param event. The custom event. Custom event was created with: event.detail( isGroup, item, index, label, value)
* isGroup - A boolean flag indicating whether the collapsed item is a resource group. This is the case when <b>groupByResoruces</b> is enabled.
* item - The object details of the collapsed item.
* index - The index of the collapsed item.
* label - The label of the collapsed item.
* value - The value of the collapsed item.
*/
this.onCollapse = new EventEmitter();
/** @description This event is triggered when a user begins dragging a task element. In the event handler function, you can call event.preventDefault() to cancel or prevent the drag operation from proceeding. This allows you to implement custom logic to determine whether dragging should be allowed for a specific task, based on application requirements.
* @param event. The custom event. Custom event was created with: event.detail( id, item, dateStart, dateEnd, segment)
* id - The id of the task that is going to be dragged.
* item - The object of the task that is going to be dragged.
* dateStart - The start date of the task that is going to be dragged.
* dateEnd - The end date of the task that is going to be dragged.
* segment - The segment object that is going to be dragged. This attribute is undefined if a segment is not going to be dragged.
*/
this.onDragStart = new EventEmitter();
/** @description This event is triggered when the user completes dragging a task and releases it, indicating the end of the drag-and-drop operation for that specific task. It can be used to perform actions such as updating the task's position, saving changes, or triggering related callbacks after the drag action concludes.
* @param event. The custom event. Custom event was created with: event.detail( id, item, dateStart, dateEnd, segment)
* id - The id of the task that is was dragged.
* item - The object of the task that is was dragged.
* dateStart - The start date of the task that is was dragged.
* dateEnd - The end date of the task that is was dragged.
* segment - The segment object that was dragged. This attribute is undefined if a segment has not been dragged.
*/
this.onDragEnd = new EventEmitter();
/** @description This event is triggered when a user expands an item, such as clicking to reveal additional content or details. It can be used to execute custom logic in response to the item's expansion, such as loading more data, updating the user interface, or tracking user interactions.
* @param event. The custom event. Custom event was created with: event.detail( isGroup, item, index, label, value)
* isGroup - A boolean flag indicating whether the collapsed item is a resource group. This is the case when <b>groupByResoruces</b> is enabled.
* item - The index of the expanded item.
* index - The index of the expanded item.
* label - The label of the expanded item.
* value - The value of the expanded item.
*/
this.onExpand = new EventEmitter();
/** @description This event is triggered whenever a filter is applied to the GanttChart, such as when the user sets specific criteria to display only certain tasks or time periods. It allows developers to execute custom logic in response to filtering actions, such as updating related UI components or fetching additional data based on the current filter state.
* @param event. The custom event. Custom event was created with: event.detail( type, action, filters)
* type - The type of items that have been filtered ( task or resource ).
* action - The name of the filtering action (whether filtering is added or removed).
* filters - The filters that have been applied. Filters represent JQX.Utilities.FilterGroup objects.
*/
this.onFilter = new EventEmitter();
/** @description This event is triggered whenever a user clicks on a task, resource, or connection within either the Timeline area or the Tree columns of the interface. It enables developers to handle user interactions with these elements, allowing for custom behaviors or actions in response to the selection.
* @param event. The custom event. Custom event was created with: event.detail( id, item, type, originalEvent)
* id - The id of the task.
* item - The item that was clicked. It can be a task, resource or connection.
* type - The type of item. Possible values are: 'task', 'project', 'resource', 'connection'.
* originalEvent - The original DOM event.
*/
this.onItemClick = new EventEmitter();
/** @description This event is triggered whenever a user double clicks on a task, resource, or connection within either the Timeline area or the Tree columns of the interface. It enables developers to handle user interactions with these elements, allowing for custom behaviors or actions in response to the selection.
* @param event. The custom event. Custom event was created with: event.detail( id, item, type, originalEvent)
* id - The id of the task.
* item - The item that was clicked. It can be a task, resource or connection.
* type - The type of item. Possible values are: 'task', 'project', 'resource', 'connection'.
* originalEvent - The original DOM event.
*/
this.onItemDoubleClick = new EventEmitter();
/** @description This event is triggered whenever a new Task, Resource, or Connection is added to the system—such as when a user creates a new task, assigns a new resource, or establishes a new connection between entities. The event allows you to handle actions or updates related to these insertions in real time.
* @param event. The custom event. Custom event was created with: event.detail( type, item)
* type - The type of item that has been modified. The type could be: 'connection', 'task', 'project', 'resource'.
* item - An object that represents the actual item with it's attributes.
*/
this.onItemInsert = new EventEmitter();
/** @description This event is triggered whenever a Task, Resource, or Connection is deleted or removed from the system. It allows you to perform actions or update the user interface in response to the removal of these entities. The event provides relevant information about the item that was removed, enabling you to handle cleanup, logging, or other custom behaviors as needed.
* @param event. The custom event. Custom event was created with: event.detail( id, type, item)
* id - The id of the task.
* type - The type of item that has been modified. The type could be: 'connection', 'task', 'project', 'resource'.
* item - An object that represents the actual item with it's attributes.
*/
this.onItemRemove = new EventEmitter();
/** @description This event is triggered whenever a Task, Resource, or Connection undergoes an update. This includes changes to properties, status, or associations within any of these entities. Use this event to respond to modifications such as edits, status transitions, or reassignments involving Tasks, Resources, or Connections in the system.
* @param event. The custom event. Custom event was created with: event.detail( id, type, item)
* id - The id of the task.
* type - The type of item that has been modified. The type could be: 'connection', 'task', 'project', 'resource'.
* item - An object that represents the actual item with it's attributes.
*/
this.onItemUpdate = new EventEmitter();
/** @description This event is fired immediately before the task editing window or tooltip is about to open. At this stage, you have the opportunity to intercept and potentially cancel the opening operation by calling event.preventDefault() within your event handler. This allows you to implement custom logic to control whether the editing window or tooltip should be displayed.
* @param event. The custom event. Custom event was created with: event.detail( owner, item, target, type)
* owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip
* item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
* target - The instance of the window/tooltip that is going to open.
* type - The type of window/tooltip that is going to open. There are three types of windows inside GanttChart: <ul><li><b>confirm</b> - a confirm window. This type of window is usually used to confirm the deletion of a task.</li><li><b>task</b> - a window used for task editing.</li><li><b>connection</b> - a window used to delete a connection.</li></ul>. If the event is a tooltip event, there are several tooltip types: <ul><li>indicator - when the tooltip owner is an indicator.</li><li>segment - when the tooltip owner is a task segment.</li><li>task - when the tooltip owner is a task.</li><li>resource - when the tooltip target is a resource.</li></ul>
*/
this.onOpening = new EventEmitter();
/** @description This event is triggered whenever the task editing window becomes visible, such as when a user opens the edit task modal or interface. It is also triggered whenever a tooltip related to task actions is shown. This allows developers to respond to both the display of the task edit view and the appearance of relevant tooltips.
* @param event. The custom event. Custom event was created with: event.detail( owner, item, target, type)
* owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip
* item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
* target - The instance of the window/tooltip that is opened.
* type - The type of window/tooltip that is opened. There are three types of windows inside GanttChart: <ul><li><b>confirm</b> - a confirm window. This type of window is usually used to confirm the deletion of a task.</li><li><b>task</b> - a window used for task editing.</li><li><b>connection</b> - a window used to delete a connection.</li></ul>. If the event is a tooltip event, there are several tooltip types: <ul><li>indicator - when the tooltip owner is an indicator.</li><li>segment - when the tooltip owner is a task segment.</li><li>task - when the tooltip owner is a task.</li><li>resource - when the tooltip target is a resource.</li></ul>
*/
this.onOpen = new EventEmitter();
/** @description This event is fired whenever the progress of a task bar begins to change due to user interaction, such as dragging the progress handle or clicking on the bar. Within the event handler, you can call event.preventDefault() to cancel or prevent the progress update from occurring. This provides an opportunity to validate the operation or implement custom logic before the task bar value is changed.
* @param event. The custom event. Custom event was created with: event.detail( id, index, progress)
* id - The id of the task.
* index - The index of the task which progress is going to be changed.
* progress - The progress of the task before it is changed.
*/
this.onProgressChangeStart = new EventEmitter();
/** @description This event is triggered whenever there is an update to a task's progress value. It occurs each time the task progresses, such as when a user completes a step or when the system automatically tracks advancement. The event provides updated information about the current state of the task’s progress, enabling UI elements or other components to respond accordingly (e.g., updating a progress bar or displaying status messages).
* @param event. The custom event. Custom event was created with: event.detail( id, index, progress)
* id - The id of the task.
* index - The index of the task which progress is has been changed.
* progress - The progress of the task after it was changed.
*/
this.onProgressChangeEnd = new EventEmitter();
/** @description This event is triggered when the user begins resizing a task, such as changing its duration or endpoints. Within the event handler function, you can prevent the resizing operation from proceeding by calling event.preventDefault(). This allows developers to implement custom logic or validation before allowing the resize action to continue.
* @param event. The custom event. Custom event was created with: event.detail( id, item, dateStart, dateEnd, segment)
* id - The id of the task that is going to be resized.
* item - The object of the task that is going to be resized.
* dateStart - The start date of the task that is going to be resized.
* dateEnd - The end date of the task that is going to be resized.
* segment - The segment object that is going to be resized. This attribute is undefined if a segment is not going to be resized.
*/
this.onResizeStart = new EventEmitter();
/** @description This event is triggered when a user completes resizing a task, indicating that the resize action has ended and the new task size has been set.
* @param event. The custom event. Custom event was created with: event.detail( id, item, dateStart, dateEnd, segment)
* id - The id of the task that was resized.
* item - The object of the task that was resized.
* dateStart - The start date of the task that was resized.
* dateEnd - The end date of the task that was resized.
* segment - The segment object that was resized. This attribute is undefined if a segment has not been resized.
*/
this.onResizeEnd = new EventEmitter();
/** @description This event is triggered whenever the user sorts the GanttChart by clicking on a column header. It fires each time the sorting order or the sorted column changes, allowing you to respond to updates in the displayed task order.
* @param event. The custom event. Custom event was created with: event.detail( type, columns, sortDataFields, sortOrders, sortDataTypes)
* type - The type of columns that have been sorted ( task or resource column ).
* columns - An array of objects that contains the currently sorted column objects.
* sortDataFields - The dataFields of the columns that have been sorted. The dataField corresponds to the <b>value</b> property of a <b>taskColumns/resourceColumns</b> object.
* sortOrders - The orders of the columns that have been sorted.
* sortDataTypes - The data types of the columns that have been sorted.
*/
this.onSort = new EventEmitter();
/** @description This event is triggered when the user scrolls to the very bottom of the Timeline component, indicating that all currently loaded timeline items have been reached. It can be used to implement features such as infinite scrolling or loading additional content when the end of the timeline is visible.
* @param event. The custom event. */
this.onScrollBottomReached = new EventEmitter();
/** @description This event is triggered when the Timeline component reaches its uppermost scroll position, indicating that the user has scrolled all the way to the top of the Timeline. Use this event to load earlier items, display notifications, or perform other actions when the beginning of the Timeline is reached.
* @param event. The custom event. */
this.onScrollTopReached = new EventEmitter();
/** @description This event is triggered when the user scrolls the Timeline component all the way to the start of its horizontal axis, reaching the earliest (leftmost) visible position. Use this event to detect when the Timeline has reached its starting boundary during horizontal scrolling.
* @param event. The custom event. */
this.onScrollLeftReached = new EventEmitter();
/** @description This event is triggered when the user scrolls to the far right end of the Timeline component horizontally, indicating that no additional content is available in that direction.
* @param event. The custom event. */
this.onScrollRightReached = new EventEmitter();
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-gantt-chart');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Specifies whether nonworkingDays and nonworkingHours should be considered when calculating the dateEnd of tasks. When enabled, dateEnd is determined based only on actual working time, excluding periods defined as nonworking. If disabled (the default behavior), dateEnd is calculated using continuous calendar time, without regard for nonworking periods. */
get adjustToNonworkingTime() {
return this.nativeElement ? this.nativeElement.adjustToNonworkingTime : undefined;
}
set adjustToNonworkingTime(value) {
this.nativeElement ? this.nativeElement.adjustToNonworkingTime = value : undefined;
}
/** @description Automatically recalculates and updates the scheduling of tasks based on their defined connections and dependencies. When tasks are linked (for example, via finish-to-start or start-to-start relationships), this process adjusts their start and end dates to maintain the intended order and constraints. If a task has no connections to other tasks, autoScheduling will not alter its dates until a new connection is established. The type of connection between tasks dictates how their possible start and end dates are constrained relative to each other. */
get autoSchedule() {
return this.nativeElement ? this.nativeElement.autoSchedule : undefined;
}
set autoSchedule(value) {
this.nativeElement ? this.nativeElement.autoSchedule = value : undefined;
}
/** @description This setting only impacts tasks when autoSchedule is enabled. When set to true, tasks are automatically and strictly scheduled based on their defined dependencies (connections), and users will not be able to manually drag tasks to reschedule them.Additionally, users can specify a lag value for individual task connections. The lag attribute represents the delay or overlap (specified in milliseconds) between the start or end times of two connected tasks. By configuring the lag property within each task connection in the dataSource, you can control the timing interval between dependent tasks. */
get autoScheduleStrictMode() {
return this.nativeElement ? this.nativeElement.autoScheduleStrictMode : undefined;
}
set autoScheduleStrictMode(value) {
this.nativeElement ? this.nativeElement.autoScheduleStrictMode = value : undefined;
}
/** @description Specifies the speed at which the content scrolls when dragging an item and the autoScroll property is enabled. Increasing this value results in faster scrolling while dragging near the container's edge. */
get autoScrollStep() {
return this.nativeElement ? this.nativeElement.autoScrollStep : undefined;
}
set autoScrollStep(value) {
this.nativeElement ? this.nativeElement.autoScrollStep = value : undefined;
}
/** @description Controls whether the column header menu is enabled or disabled. When enabled, hovering over a column header displays a dropdown button that opens a menu with quick actions such as sorting, filtering, and other column-specific operations. The available actions in this menu are context-sensitive and depend on which Gantt features are enabled; for example, the filtering option will be shown only if filtering is enabled for the corresponding column. */
get columnMenu() {
return this.nativeElement ? this.nativeElement.columnMenu : undefined;
}
set columnMenu(value) {
this.nativeElement ? this.nativeElement.columnMenu = value : undefined;
}
/** @description Specifies whether the Table columns can be resized by the user. When enabled, users can adjust the width of each column directly from the table’s header cells in both the Task and Resource timelines. This allows for greater flexibility in customizing the Table’s appearance to better fit the displayed data. */
get columnResize() {
return this.nativeElement ? this.nativeElement.columnResize : undefined;
}
set columnResize(value) {
this.nativeElement ? this.nativeElement.columnResize = value : undefined;
}
/** @description Controls whether visual resize feedback is displayed while adjusting column width. This property is effective only when the columnResize feature is enabled. If set to true, users will see a preview of the new column size as they drag to resize; if set to false, no visual feedback will be shown during the resizing action. */
get columnResizeFeedback() {
return this.nativeElement ? this.nativeElement.columnResizeFeedback : undefined;
}
set columnResizeFeedback(value) {
this.nativeElement ? this.nativeElement.columnResizeFeedback = value : undefined;
}
/** @description Enables or disables the visualization of the project’s Critical Path. When set to true, the Gantt chart highlights tasks that directly affect the project's total duration. The Critical Path represents the sequence of dependent tasks that cannot be delayed without delaying the overall project completion. */
get criticalPath() {
return this.nativeElement ? this.nativeElement.criticalPath : undefined;
}
set criticalPath(value) {
this.nativeElement ? this.nativeElement.criticalPath = value : undefined;
}
/** @description Represents the current time indicator on the Gantt chart. By default, this value is set to today’s date, highlighting the present day on the timeline. */
get currentTime() {
return this.nativeElement ? this.nativeElement.currentTime : undefined;
}
set currentTime(value) {
this.nativeElement ? this.nativeElement.currentTime = value : undefined;
}
/** @description Controls the visibility of the current time indicator within the scheduling view. When enabled, a highlighted marker or line is displayed across the relevant time slots or cells to indicate the current system time, helping users easily identify the present moment within the schedule or calendar interface. Disabling this option hides the indicator from view. */
get currentTimeIndicator() {
return this.nativeElement ? this.nativeElement.currentTimeIndicator : undefined;
}
set currentTimeIndicator(value) {
this.nativeElement ? this.nativeElement.currentTimeIndicator = value : undefined;
}
/** @description Specifies how often, in seconds, the currentTimeIndicator is refreshed or updated. A lower value results in more frequent updates, while a higher value reduces the update rate, potentially improving performance. */
get currentTimeIndicatorInterval() {
return this.nativeElement ? this.nativeElement.currentTimeIndicatorInterval : undefined;
}
set currentTimeIndicatorInterval(value) {
this.nativeElement ? this.nativeElement.currentTimeIndicatorInterval = value : undefined;
}
/** @description Configures the data export settings for the GanttChart, allowing customization of how chart data is exported (e.g., format, included fields, file name, and export behavior). */
get dataExport() {
return this.nativeElement ? this.nativeElement.dataExport : undefined;
}
set dataExport(value) {
this.nativeElement ? this.nativeElement.dataExport = value : undefined;
}
/** @description Determines the set of tasks to be displayed within the Timeline. The value must be an array of objects, where each object represents a single task and includes both required and optional properties that define its behavior and appearance. Required Task Properties: label – A string value representing the name or description of the task. dateStart – The task’s start date as a string in a valid date format (e.g., 'YYYY-MM-DD'). dateEnd – The task’s end date as a string in a valid date format. type – Specifies the type of the task. Accepts one of: task (standard activity), project (parent grouping of subtasks), or milestone (key event). Each type may have type-specific behaviors and allowed attributes. Optional Task Properties: connections – An array of objects defining dependencies between tasks. Each connection object requires: target – An integer specifying the zero-based index of the target task in the main tasks array. type – An integer (0–3) indicating the type of dependency: 0 – Start-to-Start 1 – End-to-Start 2 – End-to-End 3 – Start-to-End lag – A number denoting delay (positive) or overlap (negative) between auto-scheduled tasks, in applicable time units. Used in conjunction with autoSchedule. duration – Describes how long the task lasts (e.g., "3d", "4h", "15m"). Useful when dateEnd is unknown or not specified. Duration always represents total calendar time. minDuration / maxDuration – Set minimum or maximum allowed duration for the task. minDateStart / maxDateStart – Define earliest/latest allowed start dates, as strings in valid date formats. minDateEnd / maxDateEnd – Define earliest/latest allowed end dates, as strings in valid date formats. progress – A number from 0 to 100 indicating the percentage of work completed. overdue – A boolean that is true if the task’s dateEnd has passed its deadline. disableDrag – Boolean. If true, users cannot drag (move) the task on the timeline. disableResize – Boolean. If true, users cannot resize the duration of the task on the timeline. dragProject – Boolean. If true, allows the entire project (including all subtasks) to be dragged when the project parent task is dragged. Applicable only to project tasks. segments – An array of objects allowing a task to be split into multiple segments with different properties (such as distinct start dates, labels, or durations). synchronized – Boolean. If true, a project’s start and end dates are calculated automatically based on its child tasks, and cannot be moved independently. Applicable only to project tasks. expanded – Boolean. Determines if a project’s subtasks are visible (expanded). If false, only the project summary bar is displayed. By default, projects are collapsed. Applicable only to project tasks. The GanttChart component can also accept a DataAdapter instance as its data source for flexible data integration. For more details, see the DataAdapter documentation: https://www.htmlelements.com/docs/data-adapter/. */
get dataSource() {
return this.nativeElement ? this.nativeElement.dataSource : undefined;
}
set dataSource(value) {
this.nativeElement ? this.nativeElement.dataSource = value : undefined;
}
/** @description Specifies the display format for dates in the timeline header when the timeline is showing individual days. This setting controls how each day's date is presented (e.g., "MM/DD/YYYY", "Monday, Jan 1", etc.), ensuring that day labels in the header are clear and consistent with your application's requirements. */
get dayFormat() {
return this.nativeElement ? this.nativeElement.dayFormat : undefined;
}
set dayFormat(value) {
this.nativeElement ? this.nativeElement.dayFormat = value : undefined;
}
/** @description Specifies a custom end date for the Timeline. This is useful when the user wants to define a specific end point for the Timeline, overriding the automatic calculation based on task completion dates. If no end date is provided, the Timeline will automatically use the latest end date from the existing tasks. */
get dateEnd() {
return this.nativeElement ? this.nativeElement.dateEnd : undefined;
}
set dateEnd(value) {
this.nativeElement ? this.nativeElement.dateEnd = value : undefined;
}
/** @description Specifies a custom starting date for the Timeline. This option is useful when you want the Timeline to begin on a specific date, rather than relying on the earliest start date of the tasks. If a starting date is not provided, the Timeline will automatically use the start date from the first scheduled task. */
get dateStart() {
return this.nativeElement ? this.nativeElement.dateStart : undefined;
}
set dateStart(value) {
this.nativeElement ? this.nativeElement.dateStart = value : undefined;
}
/** @description Specifies the date markers to be shown within the timeline of the GanttChart component. Date markers highlight and optionally label particular dates and times directly on the Gantt chart, providing visual cues or annotations for significant milestones, deadlines, or events within the project's schedule. */
get dateMarkers() {
return this.nativeElement ? this.nativeElement.dateMarkers : undefined;
}
set dateMarkers(value) {
this.nativeElement ? this.nativeElement.dateMarkers = value : undefined;
}
/** @description Specifies whether the element is interactive and can be used by the user. When enabled, the element responds to user input; when disabled, the element appears inactive and does not accept user interactions. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Prevents the timeline from automatically scrolling when a task bar is being dragged or resized. This means the viewport will remain stationary during these actions, requiring the user to manually scroll if they wish to view other parts of the timeline. */
get disableAutoScroll() {
return this.nativeElement ? this.nativeElement.disableAutoScroll : undefined;
}
set disableAutoScroll(value) {
this.nativeElement ? this.nativeElement.disableAutoScroll = value : undefined;
}
/** @description Prevents users from clicking and dragging tasks to reschedule or move them within the Timeline view. Tasks remain fixed in their current positions and cannot be repositioned through drag-and-drop actions. */
get disableTaskDrag() {
return this.nativeElement ? this.nativeElement.disableTaskDrag : undefined;
}
set disableTaskDrag(value) {
this.nativeElement ? this.nativeElement.disableTaskDrag = value : undefined;
}
/** @description Prevents users from modifying or updating task progress values within the Timeline view. Task progress indicators will be displayed as read-only and cannot be adjusted through the Timeline interface. */
get disableTaskProgressChange() {
return this.nativeElement ? this.nativeElement.disableTaskProgressChange : undefined;
}
set disableTaskProgressChange(value) {
this.nativeElement ? this.nativeElement.disableTaskProgressChange = value : undefined;
}
/** @description Prevents users from adjusting the start or end dates of tasks directly within the Timeline by disabling the resize handles on tasks. */
get disableTaskResize() {
return this.nativeElement ? this.nativeElement.disableTaskResize : undefined;
}
set disableTaskResize(value) {
this.nativeElement ? this.nativeElement.disableTaskResize = value : undefined;
}
/** @description Prevents users from selecting tasks, milestones, or any other elements within the GanttChart, effectively disabling all selection interactions and highlighting within the chart area. */
get disableSelection() {
return this.nativeElement ? this.nativeElement.disableSelection : undefined;
}
set disableSelection(value) {
this.nativeElement ? this.nativeElement.disableSelection = value : undefined;
}
/** @description Prevents users from dragging and repositioning individual task segments within the interface. When this option is enabled, task segments remain fixed in place and cannot be moved through drag-and-drop actions. */
get disableSegmentDrag() {
return this.nativeElement ? this.nativeElement.disableSegmentDrag : undefined;
}
set disableSegmentDrag(value) {
this.nativeElement ? this.nativeElement.disableSegmentDrag = value : undefined;
}
/** @description Prevents users from changing the size of the task segment. When this option is enabled, the task segment cannot be resized or adjusted, ensuring its dimensions remain fixed. */
get disableSegmentResize() {
return this.nativeElement ? this.nativeElement.disableSegmentResize : undefined;
}
set disableSegmentResize(value) {
this.nativeElement ? this.nativeElement.disableSegmentResize = value : undefined;
}
/** @description Prevents the window editor from opening or being used within the GanttChart component, thereby disabling any ability for users to add, edit, or configure tasks through the graphical window interface. This setting ensures that all task modifications must be handled through alternative methods, such as programmatic updates or external forms. */
get disableWindowEditor() {
return this.nativeElement ? this.nativeElement.disableWindowEditor : undefined;
}
set disableWindowEditor(value) {
this.nativeElement ? this.nativeElement.disableWindowEditor = value : undefined;
}
/** @description Specifies the unit of measurement (such as seconds, minutes, hours, or days) used for the task's duration property. This defines how the duration value should be interpreted and ensures consistent handling of time-related data across the application. */
get durationUnit() {
return this.nativeElement ? this.nativeElement.durationUnit : undefined;
}
set durationUnit(value) {
this.nativeElement ? this.nativeElement.durationUnit = value : undefined;
}
/** @description Specifies whether a dedicated filter row should be displayed within the table for filtering purposes, replacing the default inline filter input. When enabled, each column in the table will provide its own filter input within a separate filter row. This property is only applicable if the filtering option is enabled; otherwise, it will have no effect. */
get filterRow() {
return this.nativeElement ? this.nativeElement.filterRow : undefined;
}
set filterRow(value) {
this.nativeElement ? this.nativeElement.filterRow = value : undefined;
}
/** @description Specifies which day of the week the calendar view should start on. The value is a number from 0 to 6, where 0 represents Sunday, 1 represents Monday, and 6 represents Saturday. The default value is 0 (Sunday). Adjusting this setting allows you to control the first day displayed in the weekly or monthly calendar view. */
get firstDayOfWeek() {
return this.nativeElement ? this.nativeElement.firstDayOfWeek : undefined;
}
set firstDayOfWeek(value) {
this.nativeElement ? this.nativeElement.firstDayOfWeek = value : undefined;
}
/** @description Organizes tasks within the Task timeline by grouping them based on their assigned resources. Each resource receives its own group containing all tasks allocated to it. Tasks that have not been assigned to any resource are automatically placed in a separate group labeled "Unassigned" for easy identification. */