@smart-webcomponents-angular/ganttchart
Version:
[](https://jqwidgets.com/license/)
1 lines • 216 kB
Source Map (JSON)
{"version":3,"file":"smart-webcomponents-angular-ganttchart.mjs","sources":["../../ganttchart/src/smart.element.ts","../../ganttchart/src/smart.ganttchart.ts","../../ganttchart/src/smart.ganttchart.module.ts","../../ganttchart/src/smart-webcomponents-angular-ganttchart.ts"],"sourcesContent":["\ndeclare global {\n interface Window {\n Smart: any;\n}\n}\n\n\nimport { Directive, ElementRef, Input, Output, EventEmitter } from '@angular/core';\nimport { ElementRenderMode } from './../index';\n\n@Directive()\nexport class BaseElement {\n constructor(ref: ElementRef) {\n const that = this;\n this.nativeElement = ref.nativeElement as any;\n\n that.nativeElement.onAttached = () => {\n that.onAttach.emit(that.nativeElement);\n }\n\n that.nativeElement.onDetached = () => {\n that.onDetach.emit(that.nativeElement);\n }\n }\n\n @Output() onCreate: EventEmitter<any> = new EventEmitter();\n @Output() onReady: EventEmitter<any> = new EventEmitter();\n @Output() onAttach: EventEmitter<any> = new EventEmitter();\n @Output() onDetach: EventEmitter<any> = new EventEmitter();\n\n public nativeElement: any;\n\n public addEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions = false): void {\n this.nativeElement.addEventListener(type, listener, options);\n\t}\n\n\tpublic removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions = false): void {\n\t\tthis.nativeElement.removeEventListener(type, listener, options);\n\t}\n\n\tpublic dispatchEvent(event: Event): boolean {\n\t\treturn this.nativeElement.dispatchEvent(event);\n\t}\n\n\tpublic blur(): void {\n\t\tthis.nativeElement.blur();\n\t}\n\n\tpublic click(): void {\n\t\tthis.nativeElement.click();\n\t}\n\n\tpublic focus(options?: FocusOptions): void {\n\t\tthis.nativeElement.focus(options);\n\t}\n\n/** @description Sets or gets the license. */\n\t@Input()\n\tget license(): string {\n\t\treturn this.nativeElement ? this.nativeElement.license : undefined;\n\t}\n\tset license(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.license = value : undefined;\n\t}\n\t\n/** @description Sets or gets the language. Used in conjunction with the property messages. */\n\t@Input()\n\tget locale(): string {\n\t\treturn this.nativeElement ? this.nativeElement.locale : undefined;\n\t}\n\tset locale(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.locale = value : undefined;\n\t}\n\n\t/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */\n\t@Input()\n\tget localizeFormatFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;\n\t}\n\tset localizeFormatFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;\n\t}\n\n\t/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. */\n\t@Input()\n\tget messages(): any {\n\t\treturn this.nativeElement ? this.nativeElement.messages : undefined;\n\t}\n\tset messages(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.messages = value : undefined;\n\t}\n\n\t/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */\n\t@Input()\n\tget rightToLeft(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.rightToLeft : undefined;\n\t}\n\tset rightToLeft(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.rightToLeft = value : undefined;\n\t}\n\n\t/** @description Determines the theme. Theme defines the look of the element */\n\t@Input()\n\tget theme(): string {\n\t\treturn this.nativeElement ? this.nativeElement.theme : undefined;\n\t}\n\tset theme(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.theme = value : undefined;\n\t}\n}\n\nlet Smart: any;\nif (typeof window !== \"undefined\") {\n\tSmart = window.Smart;\n}\nexport { Smart };\n\n","import { GanttChart } from './../index';\nimport { 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';\nimport { Component, Directive, AfterViewInit, ElementRef, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, Output, EventEmitter } from '@angular/core';\nimport { BaseElement, Smart } from './smart.element';\nexport { 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';\nexport { Smart } from './smart.element';\nexport { GanttChart } from './../index';\n\n\n@Directive({\n\texportAs: 'smart-gantt-chart',\tselector: 'smart-gantt-chart, [smart-gantt-chart]'\n})\n\nexport class GanttChartComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges {\n\tconstructor(ref: ElementRef<GanttChart>) {\n\t\tsuper(ref);\n\t\tthis.nativeElement = ref.nativeElement as GanttChart;\n\t}\n\n\tprivate eventHandlers: any[] = [];\n\n\tpublic declare nativeElement: GanttChart;\n\t/** @description Creates the component on demand.\n\t * @param properties An optional object of properties, which will be added to the template binded ones.\n\t */\n\tpublic createComponent(properties = {}): any {\n \tthis.nativeElement = <GanttChart>document.createElement('smart-gantt-chart');\n\t\tfor (let propertyName in properties) { \n \t\t\tthis.nativeElement[propertyName] = properties[propertyName];\n\t\t}\n\t\treturn this.nativeElement;\n\t}\n\t/** @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. */\n\t@Input()\n\tget adjustToNonworkingTime(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.adjustToNonworkingTime : undefined;\n\t}\n\tset adjustToNonworkingTime(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.adjustToNonworkingTime = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget autoSchedule(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.autoSchedule : undefined;\n\t}\n\tset autoSchedule(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.autoSchedule = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget autoScheduleStrictMode(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.autoScheduleStrictMode : undefined;\n\t}\n\tset autoScheduleStrictMode(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.autoScheduleStrictMode = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget autoScrollStep(): number {\n\t\treturn this.nativeElement ? this.nativeElement.autoScrollStep : undefined;\n\t}\n\tset autoScrollStep(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.autoScrollStep = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget columnMenu(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.columnMenu : undefined;\n\t}\n\tset columnMenu(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.columnMenu = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget columnResize(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.columnResize : undefined;\n\t}\n\tset columnResize(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.columnResize = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget columnResizeFeedback(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.columnResizeFeedback : undefined;\n\t}\n\tset columnResizeFeedback(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.columnResizeFeedback = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget criticalPath(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.criticalPath : undefined;\n\t}\n\tset criticalPath(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.criticalPath = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget currentTime(): string | Date {\n\t\treturn this.nativeElement ? this.nativeElement.currentTime : undefined;\n\t}\n\tset currentTime(value: string | Date) {\n\t\tthis.nativeElement ? this.nativeElement.currentTime = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget currentTimeIndicator(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.currentTimeIndicator : undefined;\n\t}\n\tset currentTimeIndicator(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.currentTimeIndicator = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget currentTimeIndicatorInterval(): number {\n\t\treturn this.nativeElement ? this.nativeElement.currentTimeIndicatorInterval : undefined;\n\t}\n\tset currentTimeIndicatorInterval(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.currentTimeIndicatorInterval = value : undefined;\n\t}\n\n\t/** @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). */\n\t@Input()\n\tget dataExport(): GanttChartDataExport {\n\t\treturn this.nativeElement ? this.nativeElement.dataExport : undefined;\n\t}\n\tset dataExport(value: GanttChartDataExport) {\n\t\tthis.nativeElement ? this.nativeElement.dataExport = value : undefined;\n\t}\n\n\t/** @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/. */\n\t@Input()\n\tget dataSource(): any {\n\t\treturn this.nativeElement ? this.nativeElement.dataSource : undefined;\n\t}\n\tset dataSource(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.dataSource = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget dayFormat(): GanttDayFormat | string {\n\t\treturn this.nativeElement ? this.nativeElement.dayFormat : undefined;\n\t}\n\tset dayFormat(value: GanttDayFormat | string) {\n\t\tthis.nativeElement ? this.nativeElement.dayFormat = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget dateEnd(): string | Date {\n\t\treturn this.nativeElement ? this.nativeElement.dateEnd : undefined;\n\t}\n\tset dateEnd(value: string | Date) {\n\t\tthis.nativeElement ? this.nativeElement.dateEnd = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget dateStart(): string | Date {\n\t\treturn this.nativeElement ? this.nativeElement.dateStart : undefined;\n\t}\n\tset dateStart(value: string | Date) {\n\t\tthis.nativeElement ? this.nativeElement.dateStart = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget dateMarkers(): GanttChartDateMarker[] {\n\t\treturn this.nativeElement ? this.nativeElement.dateMarkers : undefined;\n\t}\n\tset dateMarkers(value: GanttChartDateMarker[]) {\n\t\tthis.nativeElement ? this.nativeElement.dateMarkers = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget disabled(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disabled : undefined;\n\t}\n\tset disabled(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disabled = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget disableAutoScroll(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disableAutoScroll : undefined;\n\t}\n\tset disableAutoScroll(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disableAutoScroll = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget disableTaskDrag(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disableTaskDrag : undefined;\n\t}\n\tset disableTaskDrag(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disableTaskDrag = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget disableTaskProgressChange(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disableTaskProgressChange : undefined;\n\t}\n\tset disableTaskProgressChange(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disableTaskProgressChange = value : undefined;\n\t}\n\n\t/** @description Prevents users from adjusting the start or end dates of tasks directly within the Timeline by disabling the resize handles on tasks. */\n\t@Input()\n\tget disableTaskResize(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disableTaskResize : undefined;\n\t}\n\tset disableTaskResize(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disableTaskResize = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget disableSelection(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disableSelection : undefined;\n\t}\n\tset disableSelection(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disableSelection = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget disableSegmentDrag(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disableSegmentDrag : undefined;\n\t}\n\tset disableSegmentDrag(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disableSegmentDrag = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget disableSegmentResize(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disableSegmentResize : undefined;\n\t}\n\tset disableSegmentResize(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disableSegmentResize = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget disableWindowEditor(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disableWindowEditor : undefined;\n\t}\n\tset disableWindowEditor(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disableWindowEditor = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget durationUnit(): Duration | string {\n\t\treturn this.nativeElement ? this.nativeElement.durationUnit : undefined;\n\t}\n\tset durationUnit(value: Duration | string) {\n\t\tthis.nativeElement ? this.nativeElement.durationUnit = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget filterRow(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.filterRow : undefined;\n\t}\n\tset filterRow(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.filterRow = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget firstDayOfWeek(): number {\n\t\treturn this.nativeElement ? this.nativeElement.firstDayOfWeek : undefined;\n\t}\n\tset firstDayOfWeek(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.firstDayOfWeek = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget groupByResources(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.groupByResources : undefined;\n\t}\n\tset groupByResources(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.groupByResources = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget headerTemplate(): any {\n\t\treturn this.nativeElement ? this.nativeElement.headerTemplate : undefined;\n\t}\n\tset headerTemplate(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.headerTemplate = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget hideDateMarkers(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.hideDateMarkers : undefined;\n\t}\n\tset hideDateMarkers(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.hideDateMarkers = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget hideTimelineHeader(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.hideTimelineHeader : undefined;\n\t}\n\tset hideTimelineHeader(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.hideTimelineHeader = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget hideTimelineHeaderDetails(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.hideTimelineHeaderDetails : undefined;\n\t}\n\tset hideTimelineHeaderDetails(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.hideTimelineHeaderDetails = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget hideTimelineSecondHeaderDetails(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.hideTimelineSecondHeaderDetails : undefined;\n\t}\n\tset hideTimelineSecondHeaderDetails(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.hideTimelineSecondHeaderDetails = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget hideResourcePanel(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.hideResourcePanel : undefined;\n\t}\n\tset hideResourcePanel(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.hideResourcePanel = value : undefined;\n\t}\n\n\t/** @description Specifies whether the horizontal scrollbar is visible, allowing users to scroll content horizontally when it exceeds the container’s width. */\n\t@Input()\n\tget horizontalScrollBarVisibility(): HorizontalScrollBarVisibility | string {\n\t\treturn this.nativeElement ? this.nativeElement.horizontalScrollBarVisibility : undefined;\n\t}\n\tset horizontalScrollBarVisibility(value: HorizontalScrollBarVisibility | string) {\n\t\tthis.nativeElement ? this.nativeElement.horizontalScrollBarVisibility = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget hourFormat(): HourFormat | string {\n\t\treturn this.nativeElement ? this.nativeElement.hourFormat : undefined;\n\t}\n\tset hourFormat(value: HourFormat | string) {\n\t\tthis.nativeElement ? this.nativeElement.hourFormat = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget infiniteTimeline(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.infiniteTimeline : undefined;\n\t}\n\tset infiniteTimeline(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.infiniteTimeline = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget infiniteTimelineStep(): number {\n\t\treturn this.nativeElement ? this.nativeElement.infiniteTimelineStep : undefined;\n\t}\n\tset infiniteTimelineStep(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.infiniteTimelineStep = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget inverted(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.inverted : undefined;\n\t}\n\tset inverted(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.inverted = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget keyboardNavigation(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.keyboardNavigation : undefined;\n\t}\n\tset keyboardNavigation(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.keyboardNavigation = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget unlockKey(): string {\n\t\treturn this.nativeElement ? this.nativeElement.unlockKey : undefined;\n\t}\n\tset unlockKey(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.unlockKey = value : undefined;\n\t}\n\n\t/** @description Specifies the language used for the GanttChart interface, including labels, tooltips, and other user-facing text elements. */\n\t@Input()\n\tget locale(): string {\n\t\treturn this.nativeElement ? this.nativeElement.locale : undefined;\n\t}\n\tset locale(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.locale = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget max(): string | Date {\n\t\treturn this.nativeElement ? this.nativeElement.max : undefined;\n\t}\n\tset max(value: string | Date) {\n\t\tthis.nativeElement ? this.nativeElement.max = value : undefined;\n\t}\n\n\t/** @description Specifies the earliest allowable date that can be selected or displayed on the Timeline, effectively setting the lower date limit. */\n\t@Input()\n\tget min(): string | Date {\n\t\treturn this.nativeElement ? this.nativeElement.min : undefined;\n\t}\n\tset min(value: string | Date) {\n\t\tthis.nativeElement ? this.nativeElement.min = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget messages(): any {\n\t\treturn this.nativeElement ? this.nativeElement.messages : undefined;\n\t}\n\tset messages(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.messages = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget monthFormat(): MonthFormat | string {\n\t\treturn this.nativeElement ? this.nativeElement.monthFormat : undefined;\n\t}\n\tset monthFormat(value: MonthFormat | string) {\n\t\tthis.nativeElement ? this.nativeElement.monthFormat = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget monthScale(): MonthScale | string {\n\t\treturn this.nativeElement ? this.nativeElement.monthScale : undefined;\n\t}\n\tset monthScale(value: MonthScale | string) {\n\t\tthis.nativeElement ? this.nativeElement.monthScale = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget nonworkingDays(): number[] {\n\t\treturn this.nativeElement ? this.nativeElement.nonworkingDays : undefined;\n\t}\n\tset nonworkingDays(value: number[]) {\n\t\tthis.nativeElement ? this.nativeElement.nonworkingDays = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget nonworkingHours(): number[] | number[][] {\n\t\treturn this.nativeElement ? this.nativeElement.nonworkingHours : undefined;\n\t}\n\tset nonworkingHours(value: number[] | number[][]) {\n\t\tthis.nativeElement ? this.nativeElement.nonworkingHours = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget onTaskRender(): any {\n\t\treturn this.nativeElement ? this.nativeElement.onTaskRender : undefined;\n\t}\n\tset onTaskRender(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.onTaskRender = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget taskFormatFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.taskFormatFunction : undefined;\n\t}\n\tset taskFormatFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.taskFormatFunction = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget tooltipFormatFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.tooltipFormatFunction : undefined;\n\t}\n\tset tooltipFormatFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.tooltipFormatFunction = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget popupWindowCustomizationFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.popupWindowCustomizationFunction : undefined;\n\t}\n\tset popupWindowCustomizationFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.popupWindowCustomizationFunction = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget popupWindowTabs(): string[] {\n\t\treturn this.nativeElement ? this.nativeElement.popupWindowTabs : undefined;\n\t}\n\tset popupWindowTabs(value: string[]) {\n\t\tthis.nativeElement ? this.nativeElement.popupWindowTabs = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget progressLabelFormatFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.progressLabelFormatFunction : undefined;\n\t}\n\tset progressLabelFormatFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.progressLabelFormatFunction = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget quarterFormat(): QuarterFormat | string {\n\t\treturn this.nativeElement ? this.nativeElement.quarterFormat : undefined;\n\t}\n\tset quarterFormat(value: QuarterFormat | string) {\n\t\tthis.nativeElement ? this.nativeElement.quarterFormat = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget resources(): GanttChartResource[] {\n\t\treturn this.nativeElement ? this.nativeElement.resources : undefined;\n\t}\n\tset resources(value: GanttChartResource[]) {\n\t\tthis.nativeElement ? this.nativeElement.resources = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget resourceColumns(): GanttChartResourceColumn[] {\n\t\treturn this.nativeElement ? this.nativeElement.resourceColumns : undefined;\n\t}\n\tset resourceColumns(value: GanttChartResourceColumn[]) {\n\t\tthis.nativeElement ? this.nativeElement.resourceColumns = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget resourceFiltering(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.resourceFiltering : undefined;\n\t}\n\tset resourceFiltering(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.resourceFiltering = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget resourceGroupFormatFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.resourceGroupFormatFunction : undefined;\n\t}\n\tset resourceGroupFormatFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.resourceGroupFormatFunction = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget resourcePanelHeaderTemplate(): any {\n\t\treturn this.nativeElement ? this.nativeElement.resourcePanelHeaderTemplate : undefined;\n\t}\n\tset resourcePanelHeaderTemplate(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.resourcePanelHeaderTemplate = value : undefined;\n\t}\n\n\t/** @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. */\n\t@Input()\n\tget resourcePanelMin(): number | string {\n\t\t