smart-webcomponents-angular

import {BaseElement, Animation} from "./smart.element" export interface GanttChartProperties { /** * 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. * Default value: false */ adjustToNonworkingTime?: boolean; /** * 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. * Default value: false */ autoSchedule?: boolean; /** * 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. * Default value: false */ autoScheduleStrictMode?: boolean; /** * 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. * Default value: 5 */ autoScrollStep?: number; /** * 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. * Default value: false */ columnMenu?: boolean; /** * 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. * Default value: false */ columnResize?: boolean; /** * 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. * Default value: false */ columnResizeFeedback?: boolean; /** * 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. * Default value: false */ criticalPath?: boolean; /** * 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. * Default value: */ currentTime?: string | Date; /** * 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. * Default value: false */ currentTimeIndicator?: boolean; /** * 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. * Default value: 1 */ currentTimeIndicatorInterval?: number; /** * 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). * Default value: [object Object] */ dataExport?: GanttChartDataExport; /** * 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/. * Default value: */ dataSource?: any; /** * 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. * Default value: short */ dayFormat?: GanttDayFormat | string; /** * 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. * Default value: */ dateEnd?: string | Date; /** * 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. * Default value: */ dateStart?: string | Date; /** * 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. * Default value: null */ dateMarkers?: GanttChartDateMarker[]; /** * 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. * Default value: false */ disabled?: boolean; /** * 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. * Default value: false */ disableAutoScroll?: boolean; /** * 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. * Default value: false */ disableTaskDrag?: boolean; /** * 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. * Default value: false */ disableTaskProgressChange?: boolean; /** * Prevents users from adjusting the start or end dates of tasks directly within the Timeline by disabling the resize handles on tasks. * Default value: false */ disableTaskResize?: boolean; /** * Prevents users from selecting tasks, milestones, or any other elements within the GanttChart, effectively disabling all selection interactions and highlighting within the chart area. * Default value: false */ disableSelection?: boolean; /** * 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. * Default value: false */ disableSegmentDrag?: boolean; /** * 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. * Default value: false */ disableSegmentResize?: boolean; /** * 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. * Default value: false */ disableWindowEditor?: boolean; /** * 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. * Default value: milisecond */ durationUnit?: Duration | string; /** * 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. * Default value: false */ filterRow?: boolean; /** * 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. * Default value: -1 */ firstDayOfWeek?: number; /** * 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. * Default value: false */ groupByResources?: boolean; /** * 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. * Default value: null */ headerTemplate?: any; /** * 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. * Default value: false */ hideDateMarkers?: boolean; /** * 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. * Default value: false */ hideTimelineHeader?: boolean; /** * 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. * Default value: false */ hideTimelineHeaderDetails?: boolean; /** * 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. * Default value: true */ hideTimelineSecondHeaderDetails?: boolean; /** * 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. * Default value: false */ hideResourcePanel?: boolean; /** * Specifies whether the horizontal scrollbar is visible, allowing users to scroll content horizontally when it exceeds the container’s width. * Default value: auto */ horizontalScrollBarVisibility?: HorizontalScrollBarVisibility | string; /** * 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. * Default value: numeric */ hourFormat?: HourFormat | string; /** * 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. * Default value: false */ infiniteTimeline?: boolean; /** * 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. * Default value: 5 */ infiniteTimelineStep?: number; /** * 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. * Default value: false */ inverted?: boolean; /** * 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. * Default value: false */ keyboardNavigation?: boolean; /** * 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. * Default value: "" */ unlockKey?: string; /** * Specifies the language used for the GanttChart interface, including labels, tooltips, and other user-facing text elements. * Default value: "en" */ locale?: string; /** * 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. * Default value: 2100-1-1 */ max?: string | Date; /** * Specifies the earliest allowable date that can be selected or displayed on the Timeline, effectively setting the lower date limit. * Default value: 1900-1-1 */ min?: string | Date; /** * 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. * Default value: * [object Object] */ messages?: any; /** * 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. * Default value: short */ monthFormat?: MonthFormat | string; /** * 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. * Default value: week */ monthScale?: MonthScale | string; /** * 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. * Default value: */ nonworkingDays?: number[]; /** * 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. * Default value: */ nonworkingHours?: number[] | number[][]; /** * 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. * Default value: null */ onTaskRender?: any; /** * 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. * Default value: null */ taskFormatFunction?: any; /** * 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. * Default value: null */ tooltipFormatFunction?: any; /** * 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. * Default value: null */ popupWindowCustomizationFunction?: any; /** * 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. * Default value: ['general', 'dependency', 'segments'] */ popupWindowTabs?: string[]; /** * 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. * Default value: null */ progressLabelFormatFunction?: any; /** * 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. * Default value: short */ quarterFormat?: QuarterFormat | string; /** * 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. * Default value: null */ resources?: GanttChartResource[]; /** * 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. * Default value: { "label": "resourceColumnLabel", "value": "label" } */ resourceColumns?: GanttChartResourceColumn[]; /** * 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. * Default value: false */ resourceFiltering?: boolean; /** * 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. * Default value: null */ resourceGroupFormatFunction?: any; /** * 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. * Default value: null */ resourcePanelHeaderTemplate?: any; /** * 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. * Default value: 100 */ resourcePanelMin?: number | string; /** * 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. * Default value: */ resourcePanelSize?: number | string; /** * 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. * Default value: 0 */ resourcePanelRefreshRate?: number; /** * 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. * Default value: null */ resourceTimelineFormatFunction?: any; /** * 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). * Default value: diagram */ resourceTimelineMode?: GanttChartResourceTimelineMode | string; /** * 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. * Default value: hours */ resourceTimelineView?: GanttChartResourceTimelineView | string; /** * 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. * Default value: false */ paging?: boolean; /** * 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. * Default value: false */ rightToLeft?: boolean; /** * "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)." * Default value: */ selectedTaskIds?: number[] | string[]; /** * 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. * Default value: */ selectedResourceIds?: number[] | string[]; /** * 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. * Default value: many */ selectionMode?: GanttChartSelectionMode | string; /** * 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. * Default value: false */ shadeUntilCurrentTime?: boolean; /** * 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. * Default value: false */ showSelectionColumn?: boolean; /** * 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. * Default value: false */ showBaseline?: boolean; /** * 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. * Default value: false */ showProgressLabel?: boolean; /** * 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. * Default value: false */ snapToNearest?: boolean; /** * Enables you to specify a custom sorting function that will be invoked whenever a column in the table is sorted, allowing you to override the default sorting logic with customized behavior. The custom function receives the following parameters: dataSource – The complete array of data objects currently used by the table. sortColumns – An array containing the keys or data fields of the columns that need to be sorted, in the order of user preference or configuration. directions – An array specifying the sort direction ('asc' or 'desc') for each column listed in sortColumns. The direction at each index corresponds to the column at the same index. defaultCompareFunctions – An array of default comparison functions for each column, aligned by index with sortColumns. Use these as fallbacks when only some columns require custom sorting logic.By implementing your own sorting function, you can customize the way the table data is ordered—such as sorting complex data structures, handling locale-specific strings, or applying multi-level sorts—while optionally leveraging the provided default comparison functions for columns that do not require special handling. * Default value: null */ sortFunction?: { (dataSource: any, sortColumns: string[], directions: string[], defaultCompareFunctions: { (firstRecord: any, secondRecord: any): number }[]): void }; /** * 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. * Default value: none */ sortMode?: GanttChartSortMode | string; /** * 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. * Default value: */ tasks?: GanttChartTask[]; /** * '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. * Default value: { "label": "Task Name", "value": "label" } */ taskColumns?: GanttChartTaskColumn[]; /** * 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. * Default value: false */ taskFiltering?: boolean; /** * 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. * Default value: 200 */ taskPanelMin?: string | number; /** * 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. * Default value: */ taskPanelSize?: string | number; /** * 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. * Default value: 200 */ timelineMin?: string | number; /** * 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. * Default value: 100 */ treeMin?: string | number; /** * 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. * Default value: 100 */ treeSize?: string | number; /** * 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. * Default value: null */ timelineHeaderFormatFunction?: any; /** * 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. * Default value: [object Object] */ tooltip?: GanttChartTooltip; /** * Specifies whether the vertical scrollbar is displayed, allowing the user to scroll content vertically when necessary. * Default value: auto */ verticalScrollBarVisibility?: VerticalScrollBarVisibility | string; /** * 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. * Default value: year */ view?: GanttChartView | string; /** * 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. * Default value: numeric */ yearFormat?: YearFormat | string; /** * 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. * Default value: long */ weekFormat?: WeekFormat | string; /** * 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. * Default value: "" */ theme?: string; /** * Determines whether the element can receive keyboard focus. When set to true, the element becomes focusable and can be navigated to using the Tab key or programmatically via JavaScript. When accessed, returns a boolean indicating the current focusability state of the element. * Default value: false */ unfocusable?: boolean; } /** Gantt charts are specialized bar charts that help clearly represent how tasks and resources are allocated over time in planning, project management, and scheduling applications. */ export interface GanttChart extends BaseElement, GanttChartProperties { /* Get a member by its name */ [name: string]: any; /** * 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. */ onBeginUpdate?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null; /** * 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. */ onEndUpdate?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null; /** * 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 data event was created with: ev.detail(startIndex) * startIndex - The index of the task that a connection is started from. */ onConnectionStart?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null; /** * 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 data event was created with: ev.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>0 - start-to-start</li><li>1 - end-to-start</li><li>2 - end-to-end</li><li>3 - start-to-end</li></ul> */ onConnectionEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null; /** * 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 data event was created with: ev.detail(value, oldValue) * value - The index of the new selected task. * oldValue - The index of the previously selected task. */ onChange: ((this: any, ev: Event) => any) | null; /** * 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