UNPKG

smart-webcomponents-angular

Version:

[![Price](https://img.shields.io/badge/price-COMMERCIAL-0098f7.svg)](https://jqwidgets.com/license/)

310 lines 108 kB
import { GanttChart } from './../index'; import { GanttDayFormat, Duration, HorizontalScrollBarVisibility, HourFormat, MonthFormat, MonthScale, QuarterFormat, GanttChartResourceTimelineMode, GanttChartResourceTimelineView, GanttChartSelectionMode, GanttChartSortMode, VerticalScrollBarVisibility, GanttChartView, YearFormat, WeekFormat, GanttChartDataExport, GanttChartDateMarker, GanttChartResource, GanttChartResourceColumn, GanttChartTask, GanttChartTaskColumn, GanttChartTooltip } from './../index'; import { AfterViewInit, ElementRef, OnInit, OnChanges, OnDestroy, SimpleChanges, EventEmitter } from '@angular/core'; import { BaseElement } from './smart.element'; import * as i0 from "@angular/core"; export { GanttChartDataExportItemType, GanttDayFormat, Duration, HorizontalScrollBarVisibility, HourFormat, MonthFormat, MonthScale, QuarterFormat, GanttChartResourceTimelineMode, GanttChartResourceTimelineView, GanttChartSelectionMode, GanttChartSortMode, GanttChartTaskType, VerticalScrollBarVisibility, GanttChartView, YearFormat, WeekFormat, GanttChartDataExport, GanttChartDateMarker, GanttChartResource, GanttChartResourceColumn, GanttChartTask, GanttChartTaskIndicator, GanttChartTaskPlanned, GanttChartTaskSegment, GanttChartTaskColumn, GanttChartTooltip, ElementRenderMode } from './../index'; export { Smart } from './smart.element'; export { GanttChart } from './../index'; export declare class GanttChartComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges { constructor(ref: ElementRef<GanttChart>); private eventHandlers; nativeElement: GanttChart; /** @description Creates the component on demand. * @param properties An optional object of properties, which will be added to the template binded ones. */ createComponent(properties?: {}): any; /** @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(): boolean; set adjustToNonworkingTime(value: boolean); /** @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(): boolean; set autoSchedule(value: boolean); /** @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(): boolean; set autoScheduleStrictMode(value: boolean); /** @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(): number; set autoScrollStep(value: number); /** @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(): boolean; set columnMenu(value: boolean); /** @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(): boolean; set columnResize(value: boolean); /** @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(): boolean; set columnResizeFeedback(value: boolean); /** @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(): boolean; set criticalPath(value: boolean); /** @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(): string | Date; set currentTime(value: string | Date); /** @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(): boolean; set currentTimeIndicator(value: boolean); /** @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(): number; set currentTimeIndicatorInterval(value: number); /** @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(): GanttChartDataExport; set dataExport(value: GanttChartDataExport); /** @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(): any; set dataSource(value: any); /** @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(): GanttDayFormat | string; set dayFormat(value: GanttDayFormat | string); /** @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(): string | Date; set dateEnd(value: string | Date); /** @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(): string | Date; set dateStart(value: string | Date); /** @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(): GanttChartDateMarker[]; set dateMarkers(value: GanttChartDateMarker[]); /** @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(): boolean; set disabled(value: boolean); /** @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(): boolean; set disableAutoScroll(value: boolean); /** @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(): boolean; set disableTaskDrag(value: boolean); /** @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(): boolean; set disableTaskProgressChange(value: boolean); /** @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(): boolean; set disableTaskResize(value: boolean); /** @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(): boolean; set disableSelection(value: boolean); /** @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(): boolean; set disableSegmentDrag(value: boolean); /** @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(): boolean; set disableSegmentResize(value: boolean); /** @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(): boolean; set disableWindowEditor(value: boolean); /** @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(): Duration | string; set durationUnit(value: Duration | string); /** @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(): boolean; set filterRow(value: boolean); /** @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(): number; set firstDayOfWeek(value: number); /** @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. */ get groupByResources(): boolean; set groupByResources(value: boolean); /** @description Enables you to define custom header content for the Task Panel. The attribute accepts either an HTMLTemplate element, the id of an existing HTMLTemplate, or a function that returns the desired content. This provides flexibility to use static templates or generate dynamic header content programmatically. */ get headerTemplate(): any; set headerTemplate(value: any); /** @description Specifies whether the dateMarkers are displayed on the interface. When set to true, the date markers will be visible; when set to false, they will be hidden. */ get hideDateMarkers(): boolean; set hideDateMarkers(value: boolean); /** @description By default, the Timeline component displays a three-level header structure: the top section shows primary timeline details, the middle section displays secondary details, and the bottom section contains the main timeline header. This property allows you to hide the header container, which refers specifically to the bottom section of the header. */ get hideTimelineHeader(): boolean; set hideTimelineHeader(value: boolean); /** @description By default, the Timeline component displays a three-level header structure: the main timeline details (topmost header), secondary timeline details (middle header), and the primary timeline header (bottom header). This property allows you to hide the topmost container, which holds the main timeline details, effectively removing the first (outermost) header section from the Timeline display. */ get hideTimelineHeaderDetails(): boolean; set hideTimelineHeaderDetails(value: boolean); /** @description By default, the Timeline component displays a three-level header structure: the main timeline header, a secondary header with additional details, and a primary details section. This property specifically controls the visibility of the second (middle) header, which contains supplementary timeline details. When enabled, the secondary details container will be hidden, resulting in a simplified two-level header layout. */ get hideTimelineSecondHeaderDetails(): boolean; set hideTimelineSecondHeaderDetails(value: boolean); /** @description Controls the visibility of the Resource panel in the GanttChart component. By default, the Resource panel is displayed automatically when resources are added to the GanttChart. Enabling this property will permanently hide the Resource panel, regardless of whether resources are present or not. This allows developers to prevent the Resource panel from appearing under any circumstances. */ get hideResourcePanel(): boolean; set hideResourcePanel(value: boolean); /** @description Specifies whether the horizontal scrollbar is visible, allowing users to scroll content horizontally when it exceeds the container’s width. */ get horizontalScrollBarVisibility(): HorizontalScrollBarVisibility | string; set horizontalScrollBarVisibility(value: HorizontalScrollBarVisibility | string); /** @description Specifies the display format for dates shown as hours within the timeline header, controlling how hour values (e.g., "14:00", "2 PM", "14h") are presented to users. This setting ensures that the hour labels in the timeline header are formatted consistently according to your application's requirements. */ get hourFormat(): HourFormat | string; set hourFormat(value: HourFormat | string); /** @description When this option is enabled, reaching the end of the horizontal timeline through scrolling will dynamically generate additional timeline cells, effectively extending the visible time range. The exact number of new cells added each time the scrollbar reaches the end is specified by the infiniteTimelineStep setting. This allows for an "infinite scrolling" experience, where more timeline segments are loaded as the user scrolls horizontally. */ get infiniteTimeline(): boolean; set infiniteTimeline(value: boolean); /** @description Specifies how many new cells should be dynamically loaded and added to the Timeline when the user scrolls horizontally to the end, provided that infiniteTimeline is enabled. This controls the batch size of additional timeline cells appended each time the end of the scrollable area is reached. */ get infiniteTimelineStep(): number; set infiniteTimelineStep(value: number); /** @description When enabled, this setting displays the Timeline component on the left side of the interface and the Task Tree on the right side. By default, the layout is reversed: the Task Tree appears on the left and the Timeline on the right. */ get inverted(): boolean; set inverted(value: boolean); /** @description Controls whether users can navigate within the Table using the keyboard. When enabled, keyboard navigation applies to both the Task and Resource Tables, allowing users to move between table items using the keyboard.For the Task Table, the following keyboard shortcuts are available when a task is focused: Enter – Opens the Window editor, allowing you to edit the currently focused task. Delete – Opens a confirmation dialog to confirm the deletion of the currently focused task.Enabling this option improves accessibility and streamlines user interactions for both Task and Resource management within the Table. */ get keyboardNavigation(): boolean; set keyboardNavigation(value: boolean); /** @description Sets or retrieves the unlockKey, a unique value required to unlock and access the full features of the product. Use this property to assign an unlock key for activation or to obtain the currently set unlock key. */ get unlockKey(): string; set unlockKey(value: string); /** @description Specifies the language used for the GanttChart interface, including labels, tooltips, and other user-facing text elements. */ get locale(): string; set locale(value: string); /** @description Determines the latest allowable date that can be displayed or selected on the Timeline, effectively setting the upper limit for date values within the component. */ get max(): string | Date; set max(value: string | Date); /** @description Specifies the earliest allowable date that can be selected or displayed on the Timeline, effectively setting the lower date limit. */ get min(): string | Date; set min(value: string | Date); /** @description Defines or retrieves an object containing customizable strings used within the widget's interface for localization purposes. This object allows developers to provide translated or adapted text for various UI elements, ensuring the widget can support multiple languages and regions. It is typically used in combination with the locale property to display content in the desired language. */ get messages(): any; set messages(value: any); /** @description Specifies the date format used for displaying months in the timeline header. This setting defines how month values appear, such as "Jan 2024" or "01/2024", ensuring consistent and customizable presentation of months within the timeline. */ get monthFormat(): MonthFormat | string; set monthFormat(value: MonthFormat | string); /** @description Specifies the time interval granularity displayed in the Month view, such as whether events are shown by week, day, or custom periods. This setting adjusts how dates and events are grouped and visualized within the Month view of the calendar. */ get monthScale(): MonthScale | string; set monthScale(value: MonthScale | string); /** @description Specifies which days of the week, represented by integers from 0 to 6 (where 0 indicates the first day of the week and 6 indicates the last), are considered nonworking days. These selected nonworking days are visually highlighted with colored cells within the timeline display. By default, nonworking days do not influence the task end dates (dateEnd). However, if the adjustToNonworkingTime property is enabled, task scheduling will automatically adjust to account for nonworking days when calculating end dates. */ get nonworkingDays(): number[]; set nonworkingDays(value: number[]); /** @description Specifies which hours of the day are considered nonworking. The nonworking hours are defined using an array that can contain individual hour numbers (e.g., [1, 2, 3] represents 1 AM, 2 AM, and 3 AM as nonworking hours) and/or nested arrays to indicate continuous ranges (e.g., [[0, 6]] represents all hours from 12:00 AM to 6:00 AM inclusive as nonworking hours).In the timeline view, cells corresponding to nonworking hours are visually distinguished (typically with a different color), helping users easily identify unavailable time slots. By default, these nonworking hours do not influence the calculation of a task’s end date (dateEnd). However, if the adjustToNonworkingTime property is enabled, the scheduler will automatically adjust tasks to skip or extend around nonworking hours. */ get nonworkingHours(): number[] | number[][]; set nonworkingHours(value: number[] | number[][]); /** @description This function enables complete customization of the task element within your interface. It accepts five arguments, providing granular control over both the task and its visual representation:1. 'task' – The full task object containing all associated data.2. 'segment' – The current segment object for the task. If the task consists of a single segment, this argument will be the same as the task object.3. 'taskElement' – The root HTML element representing the task in the DOM.4. 'segmentElement' – The HTML element representing the current segment of the task.5. 'labelElement' – The HTML element that displays the segment’s label.You can use these arguments to modify the appearance, content, and behavior of the task and its segments, allowing for advanced UI customizations tailored to different application needs. */ get onTaskRender(): any; set onTaskRender(value: any); /** @description A function that allows you to fully customize the appearance and behavior of each task element. This function receives two parameters: task: The JavaScript object representing the task's data and properties. taskElement: The HTML element corresponding to the task, which you can manipulate or modify as needed.Use this function to add custom styles, event listeners, or additional content to each task element based on its data. */ get taskFormatFunction(): any; set taskFormatFunction(value: any); /** @description A function that enables full customization of the tooltip's appearance and behavior. This function accepts three arguments:- tooltipObject: The tooltip instance, containing all relevant data and methods for manipulating the tooltip.- event: The event object that triggered the tooltip display, useful for accessing event-specific information (e.g., cursor position).- content: The DOM element representing the tooltip’s label, which can be modified to display custom HTML, styles, or dynamic content. */ get tooltipFormatFunction(): any; set tooltipFormatFunction(value: any); /** @description A function that allows complete customization of the popup window used for task interactions by modifying its properties before it is displayed. The function receives three arguments: target — The popup window instance that is about to be opened. You can use this parameter to modify visual aspects (such as size, title, buttons, and content) or add custom behavior. type — Specifies the purpose of the popup window. Possible values are: 'task': For editing or viewing a task. 'confirm': For displaying a confirmation prompt. 'connection': For actions related to connections between tasks (e.g., deleting a link). item — The data object associated with the popup window. This will be the current task (for 'task' and 'confirm' types) or the specific connection object (for the 'connection' type). Use this function to dynamically personalize the popup window’s content, appearance, or logic based on the context of the action being performed. */ get popupWindowCustomizationFunction(): any; set popupWindowCustomizationFunction(value: any); /** @description Specifies which tab sections are displayed within the popup window. This property accepts the following three values: general – Displays the General tab, which shows the main properties of the task as defined by the taskColumns property. dependency – Displays the Dependency tab, where users can view, add, or remove connections (dependencies) related to the current task. segments – Displays the Segments tab, where users can view, create, or delete segments that make up the task. Use these values to control which tabs are visible to users in the popup window interface. Multiple values can be specified to show more than one tab. */ get popupWindowTabs(): string[]; set popupWindowTabs(value: string[]); /** @description This property accepts a formatting function for the progress label displayed on the Timeline task. The function should return a string representing the desired label text. By default, the progress label is hidden; it can be made visible by setting the showProgressLabel property to true. */ get progressLabelFormatFunction(): any; set progressLabelFormatFunction(value: any); /** @description Specifies the date format used to display quarter representations (e.g., "Q1 2024") in the timeline header. This setting controls how quarter periods are labeled, ensuring consistency and clarity in the timeline’s visual presentation. */ get quarterFormat(): QuarterFormat | string; set quarterFormat(value: QuarterFormat | string); /** @description Returns an array containing a flat list of all resource objects found within the element, including those nested at any level. This getter traverses the element's hierarchy and aggregates all resources into a single, non-nested array for simplified access. */ get resources(): GanttChartResource[]; set resources(value: GanttChartResource[]); /** @description Determines which columns are displayed in the Resource Tree. Each entry in this property should be an Object containing the following keys:- label: Specifies the column header text as it will appear in the Task Tree.- value: Defines the property or content to be displayed in the cells of that column.By default, a single column displays all resource labels. You can configure additional columns by adding objects with custom label and value pairs.Additional configurable properties for each column object include: formatFunction: A callback function that allows customization of the cell content for the column. This function receives two arguments: the label text (as a string) and the index of the resource. It should return a string, which will be used as the displayed cell content. min: Sets the minimum width (in pixels or another supported unit) for the column. max: Sets the maximum width for the column. size: Specifies the fixed width for the column.Use this configuration to tailor which resource attributes appear as columns in the Resource Tree and how they are displayed. */ get resourceColumns(): GanttChartResourceColumn[]; set resourceColumns(value: GanttChartResourceColumn[]); /** @description Specifies whether the Resource Table supports filtering functionality, allowing users to narrow down and display specific data based on filter criteria. If set to true, filters can be applied to the Resource Table; if false, filtering options will be disabled. */ get resourceFiltering(): boolean; set resourceFiltering(value: boolean); /** @description A format function that enables you to customize the display of group row labels when the groupByResources option is enabled. This function allows for dynamic re-formatting of group headers, so you can control how resource names or other grouping information appear in the UI. */ get resourceGroupFormatFunction(): any; set resourceGroupFormatFunction(value: any); /** @description Enables you to define a custom header for the Resource Panel by specifying the content through one of the following options: an HTMLTemplate element, the ID of an existing template, or a function that returns the desired HTML. This allows for flexible and dynamic header customization to fit your application's needs. */ get resourcePanelHeaderTemplate(): any; set resourcePanelHeaderTemplate(value: any); /** @description Specifies the minimum allowable size (in pixels) for the Resource Panel, ensuring that users cannot resize the panel below this value. This setting helps maintain usability and proper display of the panel's content. */ get resourcePanelMin(): number | string; set resourcePanelMin(value: number | string); /** @description Specifies the dimensions (width and/or height) of the Resource Panel, controlling how much space it occupies within the user interface. Adjusting this value directly affects the visible area available for displaying resource-related content. */ get resourcePanelSize(): number | string; set resourcePanelSize(value: number | string); /** @description Controls how frequently the Resource Panel updates when a task is dragged, resized, or its progress is changed on the Timeline. By setting this property, you can customize the interval (in milliseconds) between automatic refreshes of the resource Tree and Timeline during these interactions. By default, the Resource Panel refreshes instantly after each change, but adjusting this value can help optimize performance for complex project schedules or large datasets. */ get resourcePanelRefreshRate(): number; set resourcePanelRefreshRate(value: number); /** @description A callback function that allows you to fully control and customize the content displayed in the cells of the resource timeline. The callback receives three parameters: taskIndexes – An array containing the indexes of the tasks assigned to the current resource in this cell. resourceIndex – The index representing the current resource row. cellDate – A Date object or date string representing the current cell’s date.This property is specifically used when the resourceTimelineView is set to custom. The expected return value depends on the value of resourceTimelineMode: diagram – Return a string that will be rendered as the cell’s content. histogram – Return an object with the following properties: capacity: The current value to be visualized for the cell. maxCapacity: The maximum value for the histogram, used to determine the cell visualization’s scale. custom – (Optional) You may return any custom content for the timeline cell, giving you full flexibility to represent resources however you wish.Use this callback to tailor the timeline’s resource cell display—such as showing aggregated values, custom HTML, or visualizations—according to your application’s requirements. */ get resourceTimelineFormatFunction(): any; set resourceTimelineFormatFunction(value: any); /** @description Specifies the method used to display the resource's capacity within the resource timeline. By default, the capacity is shown in hours, but this may vary depending on the value of the element’s view property. This setting controls how capacity data is visually represented for each resource, ensuring that users see capacity information in a format appropriate to the current timeline view (such as hours, days, or custom intervals). */ get resourceTimelineMode(): GanttChartResourceTimelineMode | string; set resourceTimelineMode(value: GanttChartResourceTimelineMode | string); /** @description Specifies the layout and presentation of resources within the resource Timeline, controlling how individual resources are visually arranged, organized, and grouped for optimal clarity and user experience. */ get resourceTimelineView(): GanttChartResourceTimelineView | string; set resourceTimelineView(value: GanttChartResourceTimelineView | string); /** @description Determines whether paging functionality is enabled. When set to true, data is divided into discrete pages for easier navigation and viewing; when false, all data is displayed in a single, continuous view. You can use this property to enable or disable paging, or retrieve its current state. */ get paging(): boolean; set paging(value: boolean); /** @description Gets or sets a value that determines whether the element’s alignment supports right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element’s content and layout are adjusted to display text and UI elements in a right-to-left orientation, ensuring proper localization for RTL locales. */ get rightToLeft(): boolean; set rightToLeft(value: boolean); /** @description "Allows you to specify which tasks are selected by providing their unique task IDs, or retrieve the IDs of the currently selected tasks. If a task does not already have an ID, the system automatically generates an internal ID for it based on its position in the task hierarchy (using its index or tree path)." */ get selectedTaskIds(): number[] | string[]; set selectedTaskIds(value: number[] | string[]); /** @description Sets which resources to select by their id or gets the currently selected resource ids. If no id is provided for the resource, an internal id is generated for each resource according to it's index(tree path)."---'Improved Version:'Specifies which resources should be selected by providing their unique IDs, or retrieves the list of currently selected resource IDs. If a resource does not have a user-defined ID, the system automatically generates an internal ID for each resource based on its position within the resource hierarchy (tree path or index). This ensures that every resource can be uniquely identified, even if explicit IDs are not assigned. */ get selectedResourceIds(): number[] | string[]; set selectedResourceIds(value: number[] | string[]); /** @description Defines or retrieves the selection mode for the component. This property is relevant only when the selection feature is enabled. It determines how users can select items (e.g., single, multiple), and has no effect if selection is disabled. */ get selectionMode(): GanttChartSelectionMode | string; set selectionMode(value: GanttChartSelectionMode | string); /** @description Controls whether the current time shader is active. When enabled, all cells corresponding to past time periods will be visually shaded to distinguish them from present and future time slots. Disabling this option will display all cells without any time-based shading. */ get shadeUntilCurrentTime(): boolean; set shadeUntilCurrentTime(value: boolean); /** @description Displays the selection column in the Task or Resource Table. When enabled, a checkbox column appears, allowing users to select individual tasks or resources directly from the table. This feature facilitates bulk actions or easy identification of selected items. */ get showSelectionColumn(): boolean; set showSelectionColumn(value: boolean); /** @description Controls the visibility of task baselines in the interface. Baselines represent the original planned schedule of tasks and are specified using the 'planned' attribute on each task object within the dataSource property. When this option is enabled, the baselines will be displayed alongside the actual task data for comparison. */ get showBaseline(): boolean; set showBaseline(value: boolean); /** @description Displays a progress label within the progress bars for each Timeline task, providing a clear visual indication of the current completion percentage directly on the corresponding task's bar. */ get showProgressLabel(): boolean; set showProgressLabel(value: boolean); /** @description If enabled, the dateStart and dateEnd values of tasks will be automatically adjusted (coerced) to align with the nearest timeline cell boundary, based on the current timeline view. This setting also affects task positioning during drag-and-drop operations, ensuring that tasks always snap to the closest valid timeline interval when they are moved or resized. */ get snapToNearest(): boolean; set snapToNearest(value: boolean); /** @description Specifies whether the GanttChart allows sorting by a single column, multiple columns, or disallows column sorting entirely. This setting controls the user's ability to organize tasks in the chart by clicking on one or more column headers. */ get sortFunction(): { (dataSource: any, sortColumns: string[], directions: string[], defaultCompareFunctions: { (firstRecord: any, secondRecord: any): number; }[]): void; }; set sortFunction(value: { (dataSource: any, sortColumns: string[], directions: string[], defaultCompareFunctions: { (firstRecord: any, secondRecord: any): number; }[]): void; }); /** @description A getter method that returns a flattened array containing all task objects nested within the element, regardless of their depth or hierarchical structure. This allows easy access to every task in the element as a single-level array. */ get sortMode(): GanttChartSortMode | string; set sortMode(value: GanttChartSortMode | string); /** @description 'Description'Defines which columns are displayed in the Task Tree. The value of this property should be an array of objects, each describing a column. Each column object must include the following required keys:- label: Specifies the text that will appear as the column header in the Task Tree.- value: Specifies the key of the task attribute from the dataSource to display as the cell content in that column.By default, one column will be shown with all task labels. Additional columns can be configured using this property.'Optional properties for each column object:' formatFunction: A function for customizing the display content of each cell in the column. Receives the final label value (string) and returns the desired rendering (string or element). min: Sets the minimum width of the column (in pixels or CSS units). max: Sets the maximum width of the column (in pixels or CSS units). size: Sets the default (actual) width of the column (in pixels or CSS units). customEditor: A callback for providing a custom editor for the column when editing via a dialog/window. It accepts two arguments: label: The column label. value: The current cell value in the column. The function should return the editor component or element. setCustomEditorValue: A callback used to programmatically set the value of the custom editor. getCustomEditorValue: A callback used to programmatically retrieve the value from the custom editor.This configuration enables fine-grained customization of how task attributes are displayed and edited within each column of the Task Tree. */ get tasks(): GanttChartTask[]; set tasks(value: GanttChartTask[]); /** @description Specifies whether users can apply filters to the Task Table, allowing them to view only tasks that meet certain criteria. If enabled, filtering options will be available; if disabled, the Task Table will display all tasks without filtering capabilities. */ get taskColumns(): GanttChartTaskColumn[]; set taskColumns(value: GanttChartTaskColumn[]); /** @description Specifies the minimum size of the Task Panel when the Resource Panel is visible. This property ensures that the Task Panel does not shrink below the defined size, maintaining usability and layout integrity when both panels are displayed. */ get taskFiltering(): boolean; set taskFiltering(value: boolean); /** @description Specifies the dimensions of the Task Panel when the Resource Panel is displayed. This setting controls how much space the Task Panel occupies, ensuring it remains visible and accessible alongside the Resource Panel. */ get taskPanelMin(): string | number; set taskPanelMin(value: string | number); /** @description Specifies the minimum width, in pixels, that the timeline component can be resized or displayed at. This ensures that the timeline will not shrink below the defined width, maintaining usability and proper layout. */ get taskPanelSize(): string | number; set taskPanelSize(value: string | number); /** @description Specifies the minimum width (in pixels) that the task table can be resized to, ensuring the table does not become narrower than this value. This helps maintain readability and layout consistency. */ get timelineMin(): string | number; set timelineMin(value: string | number); /** @description Specifies the width of the task table, controlling how much horizontal space it occupies within its container. Adjust this value to set the overall size of the table and ensure proper display and alignment within your layout. */ get treeMin(): string | number; set treeMin(value: string | number); /** @description A custom formatting function for the Timeline header, allowing you to control how each date cell in the header is displayed. The function receives the following arguments: date (Date): The JavaScript Date object representing the date associated with the current header cell. type (string): A string indicating the granularity of the header cell, such as 'month', 'week', 'day', etc., specifying what period the cell represents. isHeaderDetails (boolean): A boolean value specifying whether the cell is part of the detailed header section (typically used for secondary or sub-header rows) or part of the main header row. value (string): The default formatted label for the cell, as generated by the timeline component, which you may use or modify in your custom output.Use this function to return a custom string (or JSX/HTML element, depending on context) for each header cell, enabling advanced formatting of date headers in the timeline view. */ get treeSize(): string | number; set treeSize(value: string | number); /** @description Controls the visibility of tooltips throughout the application. When enabled, informative tooltips will appear for timeline tasks, resources, connections, indicators, and segments, providing users with additional context and details about each element. Disabling this option will hide all tooltips in these areas. */ get timelineHeaderFormatFunction(): any; set timelineHeaderFormatFunction(value: any); /** @description Specifies whether the vertical scrollbar is displayed, allowing the user to scroll content vertically when necessary. */ get tooltip(): GanttChartTooltip; set tooltip(value: GanttChartTooltip); /** @description Specifies the date range displayed on the timeline. Accepted values include:day: The timeline displays all hours within a single day, allowing for detailed, intraday scheduling and review.week: The timeline presents each day within a single week, providing a broader weekly overview.month: The timeline shows individual days across an entire month, making it easy to view and manage monthly schedules.year: The timeline displays each month of the year, providing a high-level annual perspective.resource: The timeline groups and displays current tasks by the resources assigned to them. Tasks without an assigned resource are grouped under a special "Unassigned" category for easy identification.The timeline features a header section that labels each cell according to its corresponding date or resource. This header is divided into two tiers (for example, months and days, or days and hours) to provide both summary and detailed information, enhancing clarity and context for users navigating the timeline. */ get verticalScrollBarVisibility(): VerticalScrollBarVisibility | string; set verticalScrollBarVisibility(value: VerticalScrollBarVisibility | string); /** @description Specifies the display format for dates in the timeline header when they represent years. This setting controls how years are presented (e.g., "2024", "’24", or "Year 2024") to ensure consistency and clarity in the timeline header’s date representation. */ get view(): GanttChartView | string; set view(value: GanttChartView | string); /** @description Specifies the display format for dates in the timeline header when the timeline view is set to show weeks. This setting controls how each week's date range or label appears, allowing customization of the week header’s date representation. */ get yearFormat(): YearFormat | string; set yearFormat(value: YearFormat | string); /** @description Specifies or retrieves the visual theme applied to the element, controlling its overall appearance and styling (such as colors, backgrounds, and typography) according to predefined theme options. */ get weekFormat(): WeekFormat | string; set weekFormat(value: WeekFormat | string); /** @description D