apexgantt 2.0.0 → 3.0.0

package/lib/models/DataManager.d.ts

@@ -1,4 +1,5 @@
 import { Task } from './Tasks';
+import { ChartContext } from '../../../../graph-utils/src/index.ts';
 import { Dayjs } from 'dayjs';
 
 type Dependency = {
@@ -10,96 +11,34 @@ export declare class DataManager {
     private dependencies;
     private taskMap;
     private taskTree;
+    private arrowLinkInstanceId;
     constructor(tasks?: Task[]);
     private buildTaskTree;
     private processLevel;
-    /**
-     * Sort tasks recursively by a specified date field (start or end).
-     * @param field - The date field to sort by ('start' or 'end').
-     */
     private sortTasksByDate;
-    /**
-     * Validate a single task.
-     * @param task - Task to validate
-     * @returns - The validated task
-     */
     private validateTask;
-    /**
-     * Add a new dependency between tasks
-     */
     addDependency(fromId: string, toId: string, type?: Dependency['type']): void;
-    /**
-     * Add a new task to the list.
-     * @param task - Task to add
-     */
     addTask(task: Partial<Task>): void;
-    /**
-     * Calculate the overall progress of all tasks.
-     * @returns - Total progress percentage (0-100)
-     */
     calculateProgress(): number;
-    /**
-     * Get a date range from all tasks.
-     * @returns - The start and end date from all tasks
-     */
     getDateRange(add: number, viewMode: any): [Dayjs, Dayjs];
     getFlatSortedTasks(tasks: Task[], getAll?: boolean): Task[];
     getFlatTasks(): Task[];
     getFlatVisibleTasks(): Task[];
     getNestedChildTasks(taskId: string, visibleOnly?: boolean): Task[];
-    /**
-     * Get a task by ID.
-     * @param id - ID of the task
-     * @returns - The task or null if not found
-     */
     getTaskById(id: string): null | Task;
-    /**
-     * Get all dependencies for a task
-     * @param taskId - ID of the task
-     * @returns Object containing incoming and outgoing dependencies
-     */
     getTaskDependencies(taskId: string): {
         incoming: Dependency[];
         outgoing: Dependency[];
     };
-    /**
-     * Get a all tasks.
-     * @returns - The all tasks
-     */
     getTasks(): Task[];
-    /**
-     * Get a all top parent tasks.
-     * @returns - The all tasks
-     */
     getTopParentTasks(): Task[];
     hasChildren(id: string): boolean;
-    /**
-     * Remove a dependency
-     */
     removeDependency(fromId: string, toId: string): void;
-    /**
-     * Remove a task by ID.
-     * @param id - ID of the task to remove
-     */
     removeTask(id: string): void;
-    /**
-     * Validate and set the initial list of tasks.
-     * @param tasks - Array of tasks to initialize the DataManager
-     */
     setTasks(tasks: Task[]): void;
     toggleTask(id: string): void;
-    /**
-     * Update arrow positions when a task is moved
-     * @param taskId - ID of the task being moved
-     * @param dx - Change in x position
-     */
-    updateDependencyArrows(taskId: string): void;
-    /**
-     * Update an existing task by ID.
-     * @param id - ID of the task to update
-     * @param updates - Partial task updates
-     */
+    setArrowLinkInstanceId(instanceId: string): void;
+    updateDependencyArrows(taskId: string, chartContext?: ChartContext): void;
     updateTask(id: string, updates: Partial<Task>): Task;
 }
-export declare const dataManager: DataManager;
 export {};

package/lib/models/Dialog.d.ts

@@ -1,3 +1,5 @@
+import { ChartContext } from '../../../../graph-utils/src/index.ts';
+
 export interface DialogOptions {
     closeOnClickOutside?: boolean;
     closeOnEscape?: boolean;
@@ -7,16 +9,22 @@ export interface DialogOptions {
     modal?: boolean;
     title?: string;
     width?: string;
+    positionRelativeToChart?: boolean;
 }
 export declare class Dialog {
+    private chartContext;
     private options;
     private container;
     private overlay;
     private keydownHandler;
     private clickOutsideHandler;
-    constructor(options: DialogOptions);
+    constructor(chartContext: ChartContext, options: DialogOptions);
     private createDialog;
     private createDialogStructure;
+    /**
+     * Position dialog relative to the chart container
+     */
+    private positionRelativeToChart;
     private setupEventListeners;
     private trapFocus;
     private updateDialogContent;

package/lib/models/Options.d.ts

@@ -1,7 +1,7 @@
+import { ThemeMode } from './Theme';
 import { Task } from './Tasks';
 import { Annotation, Orientation } from './Annotation';
 import { ViewMode } from '../util/gantt.util';
-import { ArrowLink } from '../../../../graph-utils/src/index.ts';
 
 export interface AnnotationOptions {
     readonly annotationBgColor?: string;
@@ -15,6 +15,8 @@ export interface BorderOptions {
     readonly cellBorderWidth: string;
 }
 export interface CommonOptions {
+    readonly backgroundColor: string;
+    readonly borderColor: string;
     readonly canvasStyle: string;
     readonly enableExport: boolean;
     readonly enableResize: boolean;
@@ -60,6 +62,7 @@ export interface TooltipOptions {
 }
 export type GanttOptionsInternal = AnnotationOptions & BorderOptions & CommonOptions & FontOptions & GanttBarOptions & GanttData & GanttRowOptions & InteractiveOptions & TooltipOptions;
 export interface GanttUserOptions {
+    readonly theme?: ThemeMode;
     readonly annotationBgColor?: string;
     readonly annotationBorderColor?: string;
     readonly annotationBorderDashArray?: number[];
@@ -67,10 +70,12 @@ export interface GanttUserOptions {
     readonly annotationOrientation?: Orientation;
     readonly annotations?: Annotation[];
     readonly arrowColor?: string;
+    readonly backgroundColor?: string;
     readonly barBackgroundColor?: string;
     readonly barBorderRadius?: string;
     readonly barMargin?: number;
     readonly barTextColor?: string;
+    readonly borderColor?: string;
     readonly canvasStyle?: string;
     readonly cellBorderColor?: string;
     readonly cellBorderWidth?: string;
@@ -102,5 +107,5 @@ export type GanttOptions = GanttOptionsInternal;
 export declare const ColumnWidthByMode: Record<ViewMode, number>;
 export declare function getDaysInUnit(date: any, mode: any): number;
 export declare const getPixelsPerDayForUnit: (unitStartDate: any, viewMode: any) => number;
-export declare const arrowLink: ArrowLink;
+export declare function getDefaultOptions(theme?: ThemeMode): GanttOptionsInternal;
 export declare const DefaultOptions: GanttOptionsInternal;

package/lib/models/TaskForm.d.ts

@@ -1,13 +1,19 @@
 import { Task } from './Tasks';
+import { DataManager } from './DataManager';
+import { ChartContext } from '../../../../graph-utils/src/index.ts';
 
 export declare class TaskForm {
+    private chartContext;
+    private dataManager;
     private task;
+    private containerElement;
     private onSubmit;
     private dateFormat;
     private errors;
     private form;
     private submitButton;
-    constructor(task: Task, onSubmit: (updatedTask: Partial<Task>) => void, dateFormat?: string);
+    constructor(chartContext: ChartContext, dataManager: DataManager, task: Task, containerElement: HTMLElement, onSubmit: (updatedTask: Partial<Task>) => void, dateFormat?: string);
+    private emitEvent;
     private clearError;
     private createForm;
     private formatDate;

package/lib/models/Tasks.d.ts

@@ -1,4 +1,6 @@
 import { GanttOptions } from './Options';
+import { DataManager } from './DataManager';
+import { ChartContext } from '../../../../graph-utils/src/index.ts';
 
 export declare enum TaskType {
     Milestone = "milestone",
@@ -22,10 +24,12 @@ export interface Task {
 }
 export declare class Tasks {
     options: GanttOptions;
-    constructor(options: GanttOptions);
+    chartContext: ChartContext;
+    dataManager: DataManager;
+    constructor(options: GanttOptions, chartContext: ChartContext, dataManager: DataManager);
     generateBody(tasks: Task[], reRender: () => void): HTMLElement;
     generateHeader(headerList: string[]): HTMLElement;
     generateRow(task: Task, reRender: () => void): HTMLTableRowElement;
     generateRows(tasks: Task[], tableBody: HTMLElement, reRender: () => void): HTMLElement;
-    render(reRender: () => void): HTMLElement;
+    render(reRender: () => void): HTMLElement[];
 }

package/lib/models/Theme.d.ts

@@ -0,0 +1,36 @@
+export type ThemeMode = 'dark' | 'light';
+export interface GanttTheme {
+    readonly tooltipBGColor: string;
+    readonly tooltipBorderColor: string;
+    readonly tooltipTextColor: string;
+    readonly cellBorderColor: string;
+    readonly rowBackgroundColors: readonly string[];
+    readonly headerBackground: string;
+    readonly headerTextColor: string;
+    readonly barBackgroundColor: string;
+    readonly barTextColor: string;
+    readonly arrowColor: string;
+    readonly backgroundColor: string;
+    readonly textColor: string;
+    readonly borderColor: string;
+    readonly annotationBgColor: string;
+    readonly annotationBorderColor: string;
+    readonly dialogBgColor: string;
+    readonly dialogBorderColor: string;
+    readonly buttonBgColor: string;
+    readonly buttonTextColor: string;
+    readonly buttonHoverBgColor: string;
+    readonly toolbarBgColor: string;
+    readonly toolbarBorderColor: string;
+    readonly toolbarHoverBgColor: string;
+    readonly scrollbarTrackColor: string;
+    readonly scrollbarThumbColor: string;
+    readonly scrollbarThumbHoverColor: string;
+    readonly splitBarColor: string;
+    readonly splitBarHoverColor: string;
+    readonly splitBarBorderColor: string;
+    readonly splitBarHandleColor: string;
+}
+export declare const LightTheme: GanttTheme;
+export declare const DarkTheme: GanttTheme;
+export declare function getTheme(mode: ThemeMode): GanttTheme;

package/lib/models/TimeLine.d.ts

@@ -1,13 +1,17 @@
 import { Task } from './Tasks';
 import { GanttOptions } from './Options';
+import { DataManager } from './DataManager';
 import { ViewMode } from '../util/gantt.util';
 import { HeaderObject } from '../util/date.util';
 import { Dayjs } from 'dayjs';
+import { ChartContext } from '../../../../graph-utils/src/index.ts';
 
 export declare class TimeLine {
     viewMode: ViewMode;
     options: GanttOptions;
-    constructor(viewMode: ViewMode, options: GanttOptions);
+    chartContext: ChartContext;
+    dataManager: DataManager;
+    constructor(viewMode: ViewMode, options: GanttOptions, chartContext: ChartContext, dataManager: DataManager);
     generateHeader(headerData: HeaderObject[], subHeader: null | string[]): HTMLElement;
     generateRow(taskId: string, cellCount: number): HTMLElement;
     generateRows(tasks: Task[], cellCount: number): HTMLElement;

package/lib/styles/Dialog.style.d.ts

@@ -1 +1 @@
-export declare const DialogStyle = "\n  .gantt-dialog-container {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: none;\n    z-index: 999;\n  }\n\n  .gantt-dialog-container .dialog-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0, 0, 0, 0.5);\n  }\n\n  .gantt-dialog-container .gantt-dialog {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    background: white;\n    border-radius: 4px;\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n    z-index: 1000;\n    min-width: 300px;\n  }\n\n  .gantt-dialog .dialog-header {\n    padding: 12px 16px;\n    border-bottom: 1px solid #eee;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .gantt-dialog .dialog-title {\n    font-weight: 600;\n    font-size: 16px;\n  }\n\n  .gantt-dialog .dialog-close {\n    background: none;\n    border: none;\n    font-size: 20px;\n    cursor: pointer;\n    padding: 0;\n    color: #666;\n    transition: color 0.2s;\n  }\n\n  .gantt-dialog .dialog-close:hover {\n    color: #333;\n  }\n\n  .gantt-dialog .dialog-content {\n    padding: 16px;\n    max-height: calc(100vh - 200px);\n    overflow-y: auto;\n  }\n\n  .gantt-dialog-container.show {\n    display: block;\n  }\n\n  /* Animation classes */\n  .gantt-dialog-container.animate .dialog-overlay {\n    animation: fadeIn 0.2s ease-out;\n  }\n\n  .gantt-dialog-container.animate .gantt-dialog {\n    animation: slideIn 0.3s ease-out;\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n\n  @keyframes slideIn {\n    from {\n      opacity: 0;\n      transform: translate(-50%, -48%);\n    }\n    to {\n      opacity: 1;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
+export declare const DialogStyle = "\n  .gantt-dialog-container {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: none;\n    z-index: 999;\n    overflow: hidden;\n  }\n\n  .gantt-dialog-container .dialog-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0, 0, 0, 0.5);\n  }\n\n  .gantt-dialog-container .gantt-dialog {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    background: var(--dialog-bg-color, white);\n    border-radius: 4px;\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n    border: 1px solid var(--dialog-border-color, #eee);\n    z-index: 1000;\n    min-width: 300px;\n    max-width: 90%;\n    max-height: 90%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .gantt-dialog .dialog-header {\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--dialog-border-color, #eee);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    background: var(--header-bg-color, #f3f3f3);\n    flex-shrink: 0;\n  }\n\n  .gantt-dialog .dialog-title {\n    font-weight: 600;\n    font-size: 16px;\n    color: var(--header-text-color, #333);\n    margin: 0;\n  }\n\n  .gantt-dialog .dialog-close {\n    background: none;\n    border: none;\n    font-size: 20px;\n    cursor: pointer;\n    padding: 0;\n    color: var(--text-color, #666);\n    transition: color 0.2s;\n    line-height: 1;\n  }\n\n  .gantt-dialog .dialog-close:hover {\n    color: var(--text-color, #333);\n  }\n\n  .gantt-dialog .dialog-content {\n    padding: 16px;\n    overflow-y: auto;\n    overflow-x: hidden;\n    flex: 1;\n    background: var(--dialog-bg-color, white);\n    color: var(--text-color, #333);\n  }\n\n  .gantt-dialog .dialog-content::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  .gantt-dialog .dialog-content::-webkit-scrollbar-track {\n    background: var(--dialog-bg-color, #f1f1f1);\n  }\n\n  .gantt-dialog .dialog-content::-webkit-scrollbar-thumb {\n    background: var(--border-color, #888);\n    border-radius: 4px;\n  }\n\n  .gantt-dialog .dialog-content::-webkit-scrollbar-thumb:hover {\n    background: var(--text-color, #555);\n  }\n\n  .gantt-dialog-container.show {\n    display: block;\n  }\n\n  .gantt-dialog-container.animate .dialog-overlay {\n    animation: fadeIn 0.2s ease-out;\n  }\n\n  .gantt-dialog-container.animate .gantt-dialog {\n    animation: slideIn 0.3s ease-out;\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n\n  @keyframes slideIn {\n    from {\n      opacity: 0;\n      transform: translate(-50%, -48%);\n    }\n    to {\n      opacity: 1;\n      transform: translate(-50%, -50%);\n    }\n  }\n\n  .gantt-container {\n    position: relative;\n  }\n";

package/lib/styles/Dropdown.style.d.ts

@@ -1 +1 @@
-export declare const DropdownStyle = "\n  .dropdown {\n    position: relative;\n    display: inline-block;\n  }\n  \n  .dropdown-btn {\n    padding: 8px 16px;\n    background-color: #fff;\n    color: rgba(0, 0, 0, 0.7);\n    border: 1px solid #ddd;\n    cursor: pointer;\n    font-weight: bold;\n    border-radius: 2px;\n    font-family: inherit;\n    font-size: inherit;\n    line-height: 1.5;\n    transition: background-color 0.2s ease, border-color 0.2s ease;\n  }\n  \n  .dropdown-btn:hover {\n    background-color: #f8f9fa;\n    border-color: #bbb;\n  }\n  \n  .dropdown-btn:focus {\n    outline: none;\n    border-color: #0066cc;\n    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);\n  }\n  \n  .dropdown-content {\n    display: none;\n    position: absolute;\n    background-color: #fff;\n    min-width: 160px;\n    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);\n    z-index: 1000;\n    border-radius: 4px;\n    right: 0;\n    border: 1px solid #D9D9D9;\n    overflow: hidden;\n  }\n  \n  .dropdown-content a {\n    color: #333;\n    padding: 12px 16px;\n    text-decoration: none;\n    display: block;\n    font-family: inherit;\n    font-size: inherit;\n    line-height: 1.4;\n    transition: background-color 0.2s ease;\n    cursor: pointer;\n  }\n  \n  .dropdown-content a:hover {\n    background-color: #f1f1f1;\n  }\n  \n  .dropdown-content a:focus {\n    background-color: #e6f3ff;\n    outline: none;\n  }\n  \n  .dropdown.show .dropdown-content {\n    display: block;\n    animation: dropdownSlideDown 0.2s ease-out;\n  }\n  \n  @keyframes dropdownSlideDown {\n    from {\n      opacity: 0;\n      transform: translateY(-5px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  \n  /* Shadow DOM specific adjustments */\n  :host .dropdown {\n    position: relative;\n    display: inline-block;\n  }\n";
+export declare const DropdownStyle = "\n  .dropdown {\n    position: relative;\n    display: inline-block;\n  }\n\n  .dropdown .gantt-action-button {\n    border-radius: 4px;\n  }\n\n  .dropdown.show .gantt-action-button {\n    background: var(--toolbar-hover-bg-color, #f8f9fa);\n    border-color: var(--button-bg-color, #0066cc);\n  }\n  \n  .dropdown-btn {\n    padding: 8px 16px;\n    background-color: var(--toolbar-bg-color, #fff);\n    color: var(--text-color, rgba(0, 0, 0, 0.7));\n    border: 1px solid var(--toolbar-border-color, #ddd);\n    cursor: pointer;\n    font-weight: bold;\n    border-radius: 2px;\n    font-family: inherit;\n    font-size: inherit;\n    line-height: 1.5;\n    transition: background-color 0.2s ease, border-color 0.2s ease;\n  }\n  \n  .dropdown-btn:hover {\n    background-color: var(--toolbar-hover-bg-color, #f8f9fa);\n    border-color: var(--toolbar-border-color, #bbb);\n  }\n  \n  .dropdown-btn:focus {\n    outline: none;\n    border-color: var(--button-bg-color, #0066cc);\n    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);\n  }\n  \n  .dropdown-content {\n    display: none;\n    position: absolute;\n    background-color: var(--dialog-bg-color, #fff);\n    min-width: 160px;\n    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);\n    z-index: 1000;\n    border-radius: 4px;\n    right: 0;\n    top: calc(100% + 4px);\n    border: 1px solid var(--dialog-border-color, #D9D9D9);\n    overflow: hidden;\n  }\n  \n  .dropdown-content a {\n    color: var(--text-color, #333);\n    padding: 10px 14px;\n    text-decoration: none;\n    display: block;\n    font-family: inherit;\n    font-size: 13px;\n    line-height: 1.4;\n    transition: background-color 0.2s ease;\n    cursor: pointer;\n  }\n  \n  .dropdown-content a:hover {\n    background-color: var(--toolbar-hover-bg-color, #f1f1f1);\n  }\n  \n  .dropdown-content a:focus {\n    background-color: var(--button-hover-bg-color, #e6f3ff);\n    outline: none;\n  }\n  \n  .dropdown.show .dropdown-content {\n    display: block;\n    animation: dropdownSlideDown 0.2s ease-out;\n  }\n  \n  @keyframes dropdownSlideDown {\n    from {\n      opacity: 0;\n      transform: translateY(-5px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  \n  /* Shadow DOM specific adjustments */\n  :host .dropdown {\n    position: relative;\n    display: inline-block;\n  }\n";

package/lib/styles/Gantt.style.d.ts

@@ -1 +1 @@
-export declare const GanttStyle = "\n  * {\n    box-sizing: border-box;\n  }\n\n  .gantt-container * {\n    user-select: none;\n  }\n\n  .gantt-actions-container {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin: 5px 0;\n  }\n\n  .gantt-container {\n    display: flex;  \n    border: 1px solid #DFE0E1;\n    height: auto;\n    position: relative;\n  }\n  \n  .gantt-button {\n    border: 1px solid #D9D9D9;\n    border-radius: 2px;\n    background: #fff;\n    padding: 4px 12px;\n    color: rgba(0, 0, 0, 0.7);\n    line-height: 20px;\n    font-weight: bold;\n    cursor: pointer;\n  }\n  \n  .gantt-button:disabled {\n    color: rgba(0, 0, 0, 0.2);\n  }\n";
+export declare const GanttStyle = "\n  * {\n    box-sizing: border-box;\n  }\n\n  .gantt-container * {\n    user-select: none;\n  }\n\n  .gantt-actions-container {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 6px 10px;\n    flex: 0 0 36px;\n    min-height: 36px;\n    max-height: 36px;\n    background-color: var(--background-color, #FFFFFF);\n    border-bottom: 1px solid var(--border-color, #DFE0E1);\n  }\n\n  .gantt-action-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    padding: 0;\n    border: 1px solid var(--toolbar-border-color, #D9D9D9);\n    border-radius: 4px;\n    background: var(--toolbar-bg-color, #fff);\n    color: var(--text-color, #333);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    flex-shrink: 0;\n  }\n\n  .gantt-action-button:hover:not(:disabled) {\n    background: var(--toolbar-hover-bg-color, #f8f9fa);\n    border-color: var(--toolbar-border-color, #999);\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n  }\n\n  .gantt-action-button:active:not(:disabled) {\n    transform: translateY(0);\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n  }\n\n  .gantt-action-button:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n    background: var(--toolbar-bg-color, #fafafa);\n  }\n\n  .gantt-action-button svg {\n    width: 16px;\n    height: 16px;\n    stroke: currentColor;\n    flex-shrink: 0;\n  }\n\n  .gantt-action-separator {\n    width: 1px;\n    height: 20px;\n    background-color: var(--border-color, #DFE0E1);\n    margin: 0 4px;\n    flex-shrink: 0;\n  }\n\n  .gantt-view-mode-display {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    height: 28px;\n    font-size: 13px;\n    color: var(--text-color, #666);\n    background: var(--toolbar-bg-color, #f8f9fa);\n    border-radius: 4px;\n    margin-left: 4px;\n    font-weight: 500;\n    white-space: nowrap;\n    flex-shrink: 0;\n  }\n\n  .gantt-view-mode-display svg {\n    width: 14px;\n    height: 14px;\n    flex-shrink: 0;\n  }\n  \n  .gantt-container {\n    display: flex;\n    flex: 1 1 auto;\n    min-height: 0;\n    min-width: 0;\n    border: 1px solid var(--border-color, #DFE0E1);\n    border-top: none;\n    position: relative;\n    background-color: var(--background-color, #FFFFFF);\n    overflow: hidden;\n  }\n  \n  .gantt-button {\n    border: 1px solid var(--toolbar-border-color, #D9D9D9);\n    border-radius: 2px;\n    background: var(--toolbar-bg-color, #fff);\n    padding: 4px 12px;\n    color: var(--text-color, rgba(0, 0, 0, 0.7));\n    line-height: 20px;\n    font-weight: bold;\n    cursor: pointer;\n    transition: background-color 0.2s ease;\n  }\n\n  .gantt-button:hover {\n    background: var(--toolbar-hover-bg-color, #f8f9fa);\n  }\n  \n  .gantt-button:disabled {\n    color: rgba(128, 128, 128, 0.5);\n    opacity: 0.6;\n  }\n";

package/lib/styles/Scrollbar.style.d.ts

@@ -0,0 +1 @@
+export declare const ScrollbarStyle = "\n  .gantt-container ::-webkit-scrollbar {\n    width: 12px;\n    height: 12px;\n  }\n\n  .gantt-container ::-webkit-scrollbar-track {\n    background: var(--scrollbar-track-color, #F5F5F5);\n    border-radius: 4px;\n  }\n\n  .gantt-container ::-webkit-scrollbar-thumb {\n    background: var(--scrollbar-thumb-color, #C1C1C1);\n    border-radius: 4px;\n    border: 2px solid var(--scrollbar-track-color, #F5F5F5);\n  }\n\n  .gantt-container ::-webkit-scrollbar-thumb:hover {\n    background: var(--scrollbar-thumb-hover-color, #A8A8A8);\n  }\n\n  .gantt-container * {\n    scrollbar-width: thin;\n    scrollbar-color: var(--scrollbar-thumb-color, #C1C1C1) var(--scrollbar-track-color, #F5F5F5);\n  }\n\n  /* Shadow DOM support */\n  :host .gantt-container ::-webkit-scrollbar {\n    width: 12px;\n    height: 12px;\n  }\n\n  :host .gantt-container ::-webkit-scrollbar-track {\n    background: var(--scrollbar-track-color, #F5F5F5);\n    border-radius: 4px;\n  }\n\n  :host .gantt-container ::-webkit-scrollbar-thumb {\n    background: var(--scrollbar-thumb-color, #C1C1C1);\n    border-radius: 4px;\n    border: 2px solid var(--scrollbar-track-color, #F5F5F5);\n  }\n\n  :host .gantt-container ::-webkit-scrollbar-thumb:hover {\n    background: var(--scrollbar-thumb-hover-color, #A8A8A8);\n  }\n\n  :host .gantt-container * {\n    scrollbar-width: thin;\n    scrollbar-color: var(--scrollbar-thumb-color, #C1C1C1) var(--scrollbar-track-color, #F5F5F5);\n  }\n";

package/lib/styles/TaskForm.style.d.ts

@@ -1 +1 @@
-export declare const TaskFormStyle = "\n\n  .task-form .form-group {\n    margin-bottom: 18px;\n    position: relative;\n  }\n\n  .task-form label {\n    display: block;\n    margin-bottom: 5px;\n    font-weight: 500;\n  }\n\n  .task-form input {\n    width: 100%;\n    padding: 8px;\n    border: 1px solid #ddd;\n    border-radius: 4px;\n    font-size: 14px;\n  }\n\n  .task-form input:focus {\n    outline: none;\n    border-color: #0066cc;\n  }\n\n  .task-form .grid {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .task-form .form-actions {\n    display: flex;\n    justify-content: flex-end;\n    gap: 8px;\n    margin-top: 24px;\n  }\n\n  .task-form .btn-primary {\n    background: #0066cc;\n    color: white;\n    border: none;\n    padding: 8px 16px;\n    border-radius: 4px;\n    cursor: pointer;\n  }\n\n  .task-form .btn-primary:hover {\n    background: #0052a3;\n  }\n\n  .task-form .btn-disabled,\n  .task-form .btn-disabled:hover {\n    background: #99c2ff;\n    cursor: not-allowed;\n    opacity: 0.7;\n  }\n\n  .task-form .form-error {\n    position: absolute;\n    bottom: -15px;\n    left: 0;\n    color: #dc3545;\n    font-size: 12px;\n    margin-top: 4px;\n    line-height: 1.2;\n    transition: opacity 0.2s ease;\n  }\n\n  .task-form .invalid {\n    border-color: #dc3545;\n  }\n\n  .task-form .invalid:focus {\n    border-color: #dc3545;\n    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);\n  }\n\n  .color-picker-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .color-picker-wrapper input[type=\"color\"] {\n    -webkit-appearance: none;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: 4px;\n    cursor: pointer;\n  }\n\n  .color-picker-wrapper input[type=\"color\"]::-webkit-color-swatch-wrapper {\n    padding: 0;\n  }\n\n  .color-picker-wrapper input[type=\"color\"]::-webkit-color-swatch {\n    border: 1px solid #ddd;\n    border-radius: 4px;\n  }\n\n  .color-picker-wrapper .color-preview {\n    font-size: 12px;\n    color: #666;\n  }\n";
+export declare const TaskFormStyle = "\n\n  .task-form {\n    overflow: visible;\n  }\n\n  .task-form .form-group {\n    margin-bottom: 18px;\n    position: relative;\n  }\n\n  /* extra padding to last form group for breathing room */\n  .task-form .form-group:last-of-type {\n    margin-bottom: 24px;\n  }\n\n  .task-form label {\n    display: block;\n    margin-bottom: 5px;\n    font-weight: 500;\n    color: var(--text-color, #333);\n  }\n\n  .task-form input {\n    width: 100%;\n    padding: 8px;\n    border: 1px solid var(--dialog-border-color, #ddd);\n    border-radius: 4px;\n    font-size: 14px;\n    background-color: var(--dialog-bg-color, #fff);\n    color: var(--text-color, #333);\n  }\n\n  .task-form input:focus {\n    outline: none;\n    border-color: var(--button-bg-color, #0066cc);\n  }\n\n  .task-form .grid {\n    display: flex;\n    justify-content: space-between;\n    gap: 12px;\n  }\n\n  .task-form .grid .form-group {\n    flex: 1;\n  }\n\n  .task-form .form-actions {\n    display: flex;\n    justify-content: flex-end;\n    gap: 8px;\n    margin-top: 24px;\n    padding-top: 16px;\n    border-top: 1px solid var(--dialog-border-color, #eee);\n    position: sticky;\n    bottom: -16px;\n    background: var(--dialog-bg-color, white);\n    margin-left: -16px;\n    margin-right: -16px;\n    margin-bottom: -16px;\n    padding-left: 16px;\n    padding-right: 16px;\n    padding-bottom: 16px;\n  }\n\n  .task-form .btn-primary {\n    background: var(--button-bg-color, #0066cc);\n    color: var(--button-text-color, white);\n    border: none;\n    padding: 8px 16px;\n    border-radius: 4px;\n    cursor: pointer;\n    font-weight: 500;\n  }\n\n  .task-form .btn-primary:hover {\n    background: var(--button-hover-bg-color, #0052a3);\n  }\n\n  .task-form .btn-disabled,\n  .task-form .btn-disabled:hover {\n    background: #99c2ff;\n    cursor: not-allowed;\n    opacity: 0.7;\n  }\n\n  .task-form .form-error {\n    position: absolute;\n    bottom: -15px;\n    left: 0;\n    color: #dc3545;\n    font-size: 12px;\n    margin-top: 4px;\n    line-height: 1.2;\n    transition: opacity 0.2s ease;\n  }\n\n  .task-form .invalid {\n    border-color: #dc3545;\n  }\n\n  .task-form .invalid:focus {\n    border-color: #dc3545;\n    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);\n  }\n\n  .color-picker-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .color-picker-wrapper input[type=\"color\"] {\n    -webkit-appearance: none;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: 4px;\n    cursor: pointer;\n  }\n\n  .color-picker-wrapper input[type=\"color\"]::-webkit-color-swatch-wrapper {\n    padding: 0;\n  }\n\n  .color-picker-wrapper input[type=\"color\"]::-webkit-color-swatch {\n    border: 1px solid var(--dialog-border-color, #ddd);\n    border-radius: 4px;\n  }\n\n  .color-picker-wrapper .color-preview {\n    font-size: 12px;\n    color: var(--text-color, #666);\n  }\n";

package/lib/styles/Tasks.style.d.ts

@@ -1 +1 @@
-export declare const TableStyle = "\n  .tasks-table,\n  .tasks-table th,\n  .tasks-table td {\n    border: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n    border-collapse: collapse;\n  }\n\n  .tasks-table th {\n    height: 50px;\n  }\n\n  .tasks-table th,\n  .tasks-table td {\n    padding: 0 10px;\n    text-align: center;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .tasks-table .tasks-data-row .task-toggle-icon,\n  .tasks-table .tasks-data-row .task-toggle-icon-blank {\n    margin-right: 5px;\n    width: 10px;\n  }\n";
+export declare const TableStyle = "\n  .tasks-container {\n    height: 100%;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  .tasks-header-table {\n    flex-shrink: 0;\n    overflow-x: auto;\n    overflow-y: hidden;\n    display: block;\n    background-color: var(--header-bg-color, #F3F3F3) !important;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n  }\n\n  .tasks-header-table::-webkit-scrollbar {\n    display: none;\n    height: 0;\n    width: 0;\n  }\n\n  /* Shadow DOM specific - hiding */\n  :host .tasks-header-table {\n    scrollbar-width: none !important;\n    -ms-overflow-style: none !important;\n  }\n\n  :host .tasks-header-table::-webkit-scrollbar {\n    display: none !important;\n    height: 0 !important;\n    width: 0 !important;\n  }\n\n  .tasks-header-table thead {\n    display: table;\n    width: 100%;\n    table-layout: fixed;\n  }\n\n  .tasks-body-wrapper {\n    flex: 1;\n    overflow: auto;\n    position: relative;\n  }\n\n  .tasks-table {\n    background-color: var(--background-color, #FFFFFF);\n    width: 100%;\n    table-layout: fixed;\n  }\n\n  .tasks-table,\n  .tasks-table th,\n  .tasks-table td {\n    border: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n    border-collapse: collapse;\n  }\n\n  .tasks-table th {\n    height: 50px;\n    background-color: var(--header-bg-color, #F3F3F3);\n    color: var(--header-text-color, #333);\n  }\n\n  .tasks-table th,\n  .tasks-table td {\n    padding: 0 10px;\n    text-align: center;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: var(--text-color, #000);\n  }\n\n  .tasks-table .tasks-data-row .task-toggle-icon,\n  .tasks-table .tasks-data-row .task-toggle-icon-blank {\n    display: inline-block;\n    margin-right: 5px;\n    width: 10px;\n    height: 10px;\n    vertical-align: middle;\n  }\n\n  .tasks-table .tasks-data-row .task-toggle-icon {\n    cursor: pointer;\n    position: relative;\n  }\n\n  /* chevron (expanded) */\n  .tasks-table .tasks-data-row .task-toggle-icon.expanded::before {\n    content: '';\n    position: absolute;\n    width: 6px;\n    height: 6px;\n    border-right: 2px solid var(--text-color, #000000);\n    border-bottom: 2px solid var(--text-color, #000000);\n    transform: rotate(45deg);\n    top: 0;\n    left: 2px;\n  }\n\n  /* chevron - pointing right (collapsed) */\n  .tasks-table .tasks-data-row .task-toggle-icon.collapsed::before {\n    content: '';\n    position: absolute;\n    width: 6px;\n    height: 6px;\n    border-right: 2px solid var(--text-color, #000000);\n    border-bottom: 2px solid var(--text-color, #000000);\n    transform: rotate(-45deg);\n    top: 2px;\n    left: 0;\n  }\n\n  .tasks-table .tasks-data-row .task-toggle-icon:hover::before {\n    opacity: 0.7;\n  }\n";

package/lib/styles/Timeline.style.d.ts

@@ -1 +1 @@
-export declare const TimelineStyle = "\n  .gantt-container .timeline-container {\n    width: 100%;\n    overflow-y: auto;\n    position: relative;\n  }\n\n  .timeline-container .annotation {\n    position: absolute;\n  }\n\n  .timeline-container .bar-timeline {\n    position: absolute;\n    cursor: move;\n    cursor: grab;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .timeline-container .bar-timeline .bar-handle {\n    height: 100%;\n    width: 5px;\n    position: absolute;\n    z-index: 1000;\n    background: transparent;\n  }\n\n  .timeline-container .bar-timeline .bar-handle:hover {\n    cursor: col-resize;\n  }\n\n  .resizing {\n    pointer-events: none;\n    opacity: 0.8;\n  }\n\n  .timeline-container .bar-timeline .bar-handle.handle-left {\n    left: -5px;\n  }\n\n  .timeline-container .bar-timeline .bar-handle.handle-right {\n    right: -5px;\n  }\n\n  .timeline-container .bar-timeline.dragging {\n    cursor: grabbing;\n  }\n\n  .bar-timeline .bar-timeline-progress {\n    position: absolute;\n    pointer-events: none;\n    height: 100%;\n    left: 0;\n  }\n\n  .bar-timeline .bar-label {\n    white-space: nowrap;\n    pointer-events: none;\n    overflow: hidden;\n    z-index: 1;\n  }\n\n  .timeline-container .timeline-header,\n  .timeline-container .timeline-body {\n    width: max-content;\n    position: relative;\n  }\n  \n  .timeline-container .timeline-header-row,\n  .timeline-container .timeline-data-row {\n    display: flex;\n  }\n\n  .timeline-container .timeline-header-cell,\n  .timeline-container .timeline-data-cell {\n    padding: 0 10px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n  }\n";
+export declare const TimelineStyle = "\n  .gantt-container .timeline-container {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    background-color: var(--background-color, #FFFFFF);\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  .timeline-container .timeline-header {\n    position: relative;\n    z-index: 100;\n    background-color: var(--header-bg-color, #F3F3F3);\n    flex-shrink: 0;\n    overflow-x: auto;\n    overflow-y: hidden;\n    width: 100%;\n    scrollbar-width: none; \n    -ms-overflow-style: none; \n  }\n\n  .timeline-container .timeline-header::-webkit-scrollbar {\n    display: none;\n    height: 0;\n    width: 0;\n  }\n\n  /* Shadow DOM specific */\n  :host .timeline-container .timeline-header {\n    scrollbar-width: none !important;\n    -ms-overflow-style: none !important;\n  }\n\n  :host .timeline-container .timeline-header::-webkit-scrollbar {\n    display: none !important;\n    height: 0 !important;\n    width: 0 !important;\n  }\n\n  .timeline-container .timeline-header > .timeline-header-row {\n    width: max-content;\n    position: relative;\n  }\n\n  .timeline-container .timeline-body-wrapper {\n    flex: 1;\n    overflow: auto;\n    position: relative;\n    width: 100%;\n  }\n\n  .timeline-container .annotation,\n  .timeline-container .annotation-container {\n    position: absolute;\n    top: 0;\n    left: 0;\n    pointer-events: none;\n  }\n\n  .timeline-container .annotation-container > * {\n    pointer-events: auto;\n  }\n\n  .timeline-container .bar-container {\n    position: absolute;\n    top: 0;\n    left: 0;\n    pointer-events: none;\n  }\n\n  .timeline-container .bar-container > * {\n    pointer-events: auto;\n  }\n\n  .timeline-container .bar-timeline {\n    position: absolute;\n    cursor: move;\n    cursor: grab;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .timeline-container .bar-timeline .bar-handle {\n    height: 100%;\n    width: 5px;\n    position: absolute;\n    z-index: 1000;\n    background: transparent;\n  }\n\n  .timeline-container .bar-timeline .bar-handle:hover {\n    cursor: col-resize;\n  }\n\n  .resizing {\n    pointer-events: none;\n    opacity: 0.8;\n  }\n\n  .timeline-container .bar-timeline .bar-handle.handle-left {\n    left: -5px;\n  }\n\n  .timeline-container .bar-timeline .bar-handle.handle-right {\n    right: -5px;\n  }\n\n  .timeline-container .bar-timeline.dragging {\n    cursor: grabbing;\n  }\n\n  .bar-timeline .bar-timeline-progress {\n    position: absolute;\n    pointer-events: none;\n    height: 100%;\n    left: 0;\n  }\n\n  .bar-timeline .bar-label {\n    white-space: nowrap;\n    pointer-events: none;\n    overflow: hidden;\n    z-index: 1;\n  }\n\n  .timeline-container .timeline-body {\n    width: max-content;\n    position: relative;\n  }\n  \n  .timeline-container .timeline-header-row,\n  .timeline-container .timeline-data-row {\n    display: flex;\n  }\n\n  .timeline-container .timeline-header-cell,\n  .timeline-container .timeline-data-cell {\n    padding: 0 10px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n    color: var(--text-color, #000);\n  }\n\n  .timeline-container .timeline-header-cell {\n    background-color: var(--header-bg-color, #F3F3F3);\n    color: var(--header-text-color, #333);\n  }\n";

package/lib/styles/Toolbar.style.d.ts

@@ -1 +1 @@
-export declare const ToolbarStyle = "\n  #toolbar {\n    display: flex;\n    gap: 5px;\n    position: absolute;\n    right: 10px;\n    top: 10px;\n    z-index: 100;\n  }\n  \n  .toolbar-item {\n    align-items: center;\n    background-color: #FFFFFF;\n    border: 1px solid #BCBCBC;\n    cursor: pointer;\n    display: flex;\n    height: 30px;\n    justify-content: center;\n    width: 30px;\n    border-radius: 3px;\n    transition: all 0.2s ease;\n    position: relative;\n  }\n  \n  .toolbar-item:hover {\n    background-color: #f8f9fa;\n    border-color: #999;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  }\n  \n  .toolbar-item:active {\n    transform: translateY(0);\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n  }\n  \n  .toolbar-item:focus {\n    outline: none;\n    border-color: #0066cc;\n    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);\n  }\n  \n  .toolbar-item img {\n    width: 16px;\n    height: 16px;\n    pointer-events: none;\n  }\n  \n  .toolbar-item[disabled] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n  \n  /* Tooltip styles */\n  .toolbar-item::after {\n    content: attr(data-tooltip);\n    position: absolute;\n    bottom: -35px;\n    left: 50%;\n    transform: translateX(-50%);\n    background: #333;\n    color: white;\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 12px;\n    white-space: nowrap;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.2s ease;\n    z-index: 1000;\n  }\n  \n  .toolbar-item::before {\n    content: '';\n    position: absolute;\n    bottom: -25px;\n    left: 50%;\n    transform: translateX(-50%);\n    border: 5px solid transparent;\n    border-bottom-color: #333;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.2s ease;\n    z-index: 1000;\n  }\n  \n  .toolbar-item:hover::after,\n  .toolbar-item:hover::before {\n    opacity: 1;\n  }\n  \n  /* Shadow DOM specific adjustments */\n  :host #toolbar {\n    display: flex;\n    gap: 5px;\n    position: absolute;\n    right: 10px;\n    top: 10px;\n    z-index: 100;\n  }\n";
+export declare const ToolbarStyle = "\n  #toolbar {\n    display: flex;\n    gap: 5px;\n    position: absolute;\n    right: 10px;\n    top: 10px;\n    z-index: 100;\n  }\n  \n  .toolbar-item {\n    align-items: center;\n    background-color: var(--toolbar-bg-color, #FFFFFF);\n    border: 1px solid var(--toolbar-border-color, #BCBCBC);\n    cursor: pointer;\n    display: flex;\n    height: 30px;\n    justify-content: center;\n    width: 30px;\n    border-radius: 3px;\n    transition: all 0.2s ease;\n    position: relative;\n  }\n  \n  .toolbar-item:hover {\n    background-color: var(--toolbar-hover-bg-color, #f8f9fa);\n    border-color: var(--toolbar-border-color, #999);\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  }\n  \n  .toolbar-item:active {\n    transform: translateY(0);\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n  }\n  \n  .toolbar-item:focus {\n    outline: none;\n    border-color: var(--button-bg-color, #0066cc);\n    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);\n  }\n  \n  .toolbar-item img {\n    width: 16px;\n    height: 16px;\n    pointer-events: none;\n    filter: var(--toolbar-icon-filter, none);\n  }\n  \n  .toolbar-item[disabled] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n  \n  /* Tooltip styles */\n  .toolbar-item::after {\n    content: attr(data-tooltip);\n    position: absolute;\n    bottom: -35px;\n    left: 50%;\n    transform: translateX(-50%);\n    background: var(--tooltip-bg-color, #333);\n    color: var(--tooltip-text-color, white);\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 12px;\n    white-space: nowrap;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.2s ease;\n    z-index: 1000;\n  }\n  \n  .toolbar-item::before {\n    content: '';\n    position: absolute;\n    bottom: -25px;\n    left: 50%;\n    transform: translateX(-50%);\n    border: 5px solid transparent;\n    border-bottom-color: var(--tooltip-bg-color, #333);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.2s ease;\n    z-index: 1000;\n  }\n  \n  .toolbar-item:hover::after,\n  .toolbar-item:hover::before {\n    opacity: 1;\n  }\n  \n  /* Shadow DOM specific adjustments */\n  :host #toolbar {\n    display: flex;\n    gap: 5px;\n    position: absolute;\n    right: 10px;\n    top: 10px;\n    z-index: 100;\n  }\n";

package/lib/styles/Tooltip.style.d.ts

@@ -1 +1 @@
-export declare const TooltipStyle = "\n  #apexgantt-tooltip-container,\n  [role=\"tooltip\"] {\n    position: absolute;\n    z-index: 1000;\n    pointer-events: none;\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.2s ease;\n    font-family: inherit;\n    font-size: 13px;\n    line-height: 1.4;\n    display: none;\n    width: 300px !important;\n    max-width: 300px !important;\n    box-sizing: border-box;\n  }\n  \n  #apexgantt-tooltip-container.visible,\n  [role=\"tooltip\"].visible {\n    display: block;\n    opacity: 1;\n    visibility: visible;\n  }\n  \n  #apexgantt-tooltip-container .tooltip-content,\n  [role=\"tooltip\"] .tooltip-content {\n    background: #333;\n    color: white;\n    padding: 12px 16px;\n    border-radius: 6px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);\n    width: 100%;\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n    box-sizing: border-box;\n    display: block;\n    border: 1px solid rgba(255, 255, 255, 0.1);\n  }\n  \n  /* Shadow DOM specific adjustments */\n  :host #apexgantt-tooltip-container,\n  :host [role=\"tooltip\"] {\n    position: absolute;\n    z-index: 1000;\n    pointer-events: none;\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.2s ease;\n    font-family: inherit;\n    font-size: 13px;\n    line-height: 1.4;\n    display: none;\n    width: 300px !important;\n    max-width: 300px !important;\n    box-sizing: border-box;\n  }\n  \n  :host #apexgantt-tooltip-container.visible,\n  :host [role=\"tooltip\"].visible {\n    display: block;\n    opacity: 1;\n    visibility: visible;\n  }\n\n  #apexgantt-tooltip-container .tooltip-content div,\n  [role=\"tooltip\"] .tooltip-content div {\n    margin: 6px 0;\n    word-break: break-word;\n    line-height: 1.4;\n  }\n  \n  #apexgantt-tooltip-container .tooltip-content strong,\n  [role=\"tooltip\"] .tooltip-content strong {\n    font-weight: 600;\n    color: rgba(255, 255, 255, 0.9);\n    display: inline;\n    margin-right: 8px;\n  }\n  \n  #apexgantt-tooltip-container .tooltip-content span,\n  [role=\"tooltip\"] .tooltip-content span {\n    color: white;\n    display: inline;\n  }\n  \n  /* First item (Name) styling */\n  #apexgantt-tooltip-container .tooltip-content div:first-child,\n  [role=\"tooltip\"] .tooltip-content div:first-child {\n    margin-bottom: 10px;\n    padding-bottom: 8px;\n    border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n  }\n  \n  #apexgantt-tooltip-container .tooltip-content div:first-child strong,\n  [role=\"tooltip\"] .tooltip-content div:first-child strong {\n    color: #4CAF50;\n    font-weight: 700;\n  }\n  \n  #apexgantt-tooltip-container .tooltip-content div:last-child,\n  [role=\"tooltip\"] .tooltip-content div:last-child {\n    margin-bottom: 0;\n  }\n";
+export declare const TooltipStyle = "\n  #apexgantt-tooltip-container,\n  [role=\"tooltip\"] {\n    position: absolute;\n    z-index: 1000;\n    pointer-events: none;\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.2s ease;\n    font-family: inherit;\n    font-size: 13px;\n    line-height: 1.4;\n    display: none;\n    width: 300px !important;\n    max-width: 300px !important;\n    box-sizing: border-box;\n  }\n  \n  #apexgantt-tooltip-container.visible,\n  [role=\"tooltip\"].visible {\n    display: block;\n    opacity: 1;\n    visibility: visible;\n  }\n  \n  #apexgantt-tooltip-container .tooltip-content,\n  [role=\"tooltip\"] .tooltip-content {\n    padding: 12px 16px;\n    border-radius: 6px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);\n    width: 100%;\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n    box-sizing: border-box;\n    display: block;\n    border: 1px solid rgba(255, 255, 255, 0.1);\n  }\n  \n  /* Shadow DOM specific adjustments */\n  :host #apexgantt-tooltip-container,\n  :host [role=\"tooltip\"] {\n    position: absolute;\n    z-index: 1000;\n    pointer-events: none;\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.2s ease;\n    font-family: inherit;\n    font-size: 13px;\n    line-height: 1.4;\n    display: none;\n    width: 300px !important;\n    max-width: 300px !important;\n    box-sizing: border-box;\n  }\n  \n  :host #apexgantt-tooltip-container.visible,\n  :host [role=\"tooltip\"].visible {\n    display: block;\n    opacity: 1;\n    visibility: visible;\n  }\n\n  #apexgantt-tooltip-container .tooltip-content div,\n  [role=\"tooltip\"] .tooltip-content div {\n    margin: 6px 0;\n    word-break: break-word;\n    line-height: 1.4;\n  }\n  \n  #apexgantt-tooltip-container .tooltip-content strong,\n  [role=\"tooltip\"] .tooltip-content strong {\n    font-weight: 600;\n    display: inline;\n    margin-right: 8px;\n  }\n  \n  #apexgantt-tooltip-container .tooltip-content span,\n  [role=\"tooltip\"] .tooltip-content span {\n    display: inline;\n  }\n  \n  /* First item (Name) styling */\n  #apexgantt-tooltip-container .tooltip-content div:first-child,\n  [role=\"tooltip\"] .tooltip-content div:first-child {\n    margin-bottom: 10px;\n    padding-bottom: 8px;\n    border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n  }\n  \n  #apexgantt-tooltip-container .tooltip-content div:first-child strong,\n  [role=\"tooltip\"] .tooltip-content div:first-child strong {\n    font-weight: 700;\n  }\n  \n  #apexgantt-tooltip-container .tooltip-content div:last-child,\n  [role=\"tooltip\"] .tooltip-content div:last-child {\n    margin-bottom: 0;\n  }\n";

package/lib/types/events.d.ts

@@ -1,9 +1,63 @@
+import { Task } from '../models/Tasks';
+
 export interface DependencyArrowUpdateDetail {
     fromId: string;
     toId: string;
     type: 'FF' | 'FS' | 'SF' | 'SS';
+    chartInstanceId: string;
+    arrowLinkInstanceId?: string;
 }
 export interface DependencyArrowUpdateEvent extends CustomEvent {
     detail: DependencyArrowUpdateDetail;
 }
 export declare function isDependencyArrowUpdateEvent(event: Event): event is DependencyArrowUpdateEvent;
+export interface TaskUpdateEventDetail {
+    taskId: string;
+    updates: Partial<Task>;
+    updatedTask: Task;
+    timestamp: number;
+}
+export interface TaskValidationErrorEventDetail {
+    taskId: string;
+    errors: Array<{
+        field: string;
+        message: string;
+    }>;
+    timestamp: number;
+}
+export interface TaskUpdateSuccessEventDetail {
+    taskId: string;
+    updatedTask: Task;
+    timestamp: number;
+}
+export interface TaskUpdateErrorEventDetail {
+    taskId: string;
+    error: Error;
+    timestamp: number;
+}
+/**
+ * chart event names
+ * use these constants to attach event listeners like below
+ *
+ * element.addEventListener(GanttEvents.TASK_UPDATE, (e) => {
+ *   console.log(e.detail);
+ * });
+ */
+export declare const GanttEvents: {
+    /**
+     * emits when a task is being updated (before completion)
+     */
+    readonly TASK_UPDATE: "taskUpdate";
+    /**
+     * emits when form validation fails
+     */
+    readonly TASK_VALIDATION_ERROR: "taskValidationError";
+    /**
+     * emits after a task update completes successfully
+     */
+    readonly TASK_UPDATE_SUCCESS: "taskUpdateSuccess";
+    /**
+     * emits when a task update fails
+     */
+    readonly TASK_UPDATE_ERROR: "taskUpdateError";
+};

package/lib/util/arrow.util.d.ts

@@ -1 +1,3 @@
-export declare function updateArrow(fromId: string, toId: string): void;
+import { ChartContext } from '../../../../graph-utils/src/index.ts';
+
+export declare function updateArrow(context: ChartContext, fromId: string, toId: string, arrowLinkInstanceId: string): void;

package/lib/util/bar.util.d.ts

@@ -1,2 +1,7 @@
-export declare function getBarElement(taskId: string): HTMLElement | null;
-export declare function getBarRowElement(taskId: string): HTMLElement | null;
+import { ChartContext } from '../../../../graph-utils/src/index.ts';
+
+export declare function getBarElement(context: ChartContext, taskId: string): HTMLElement | null;
+export declare function getBarRowElement(context: ChartContext, taskId: string): HTMLElement | null;
+export declare function getTaskRowElement(context: ChartContext, taskId: string): HTMLElement | null;
+export declare function updateColumnContent(context: ChartContext, taskId: string, columnKey: string, value: string): void;
+export declare function setTaskRowBackgroundColor(context: ChartContext, taskId: string, bgColor: string): void;

package/lib/util/icon.util.d.ts

@@ -0,0 +1,7 @@
+export declare const Icons: {
+    zoomIn: string;
+    zoomOut: string;
+    calendar: string;
+    chevronDown: string;
+    download: string;
+};

package/lib/util/style-injection.util.d.ts

@@ -1,21 +1,24 @@
+import { ChartContext } from '../../../../graph-utils/src/index.ts';
+
 export declare class StyleInjection {
     private static injectedStyles;
     /**
-     * Inject CSS styles into the correct context (document.head or shadow root)
+     * Inject CSS styles into the correct context using ChartContext
+     * @param chartContext - Chart context instance
      * @param css - CSS string to inject
      * @param id - Optional ID for the style element to prevent duplicates
      */
-    static injectStyles(css: string, id?: string): void;
+    static injectStyles(chartContext: ChartContext, css: string, id?: string): void;
     /**
      * Check if a style with given ID has been injected
      */
     static hasStyle(id: string): boolean;
     /**
-     * Remove a style by ID
+     * Remove a style by ID using ChartContext
      */
-    static removeStyle(id: string): void;
+    static removeStyle(chartContext: ChartContext, id: string): void;
     /**
-     * Clear all injected styles
+     * Clear all injected styles using ChartContext
      */
-    static clearAll(): void;
+    static clearAll(chartContext: ChartContext): void;
 }

package/lib/util/task.util.d.ts

@@ -1,7 +1,9 @@
 import { ViewMode } from './gantt.util';
 import { Task } from '../models/Tasks';
 import { GanttOptions } from '../models/Options';
+import { DataManager } from '../models/DataManager';
 import { Dayjs } from 'dayjs';
+import { ChartContext } from '../../../../graph-utils/src/index.ts';
 
 export declare enum ColumnKey {
     Duration = "duration",
@@ -23,15 +25,15 @@ export interface ColumnListItem {
 }
 export declare const ColumnList: ColumnListItem[];
 export declare function getTaskTextByColumn(task: Task, columnKey: ColumnKey, inputDateFormat: string): string;
-export declare function getTaskRowElement(taskId: string): HTMLElement | null;
-export declare function updateColumnContent(taskId: string, columnKey: string, value: string): void;
+export declare function getTaskRowElement(context: ChartContext, taskId: string): HTMLElement | null;
+export declare function updateColumnContent(context: ChartContext, taskId: string, columnKey: string, value: string): void;
 export declare function getRowBackgroundColor(index: number, rowBackgroundColors: readonly string[]): string;
-export declare function setTaskRowBackgroundColor(taskId: string, bgColor: string): void;
+export declare function setTaskRowBackgroundColor(context: ChartContext, taskId: string, bgColor: string): void;
 interface TaskElements {
     taskBar: HTMLElement | null;
     taskBarRow: HTMLElement | null;
     taskRow: HTMLElement | null;
 }
-export declare const getTaskElements: (taskId: string) => TaskElements;
-export declare const updateTaskInUI: (taskId: string, updates: Partial<Task>, options: GanttOptions, viewMode: ViewMode, ganttStartDate: Dayjs) => void;
+export declare const getTaskElements: (context: ChartContext, taskId: string) => TaskElements;
+export declare const updateTaskInUI: (context: ChartContext, dataManager: DataManager, taskId: string, updates: Partial<Task>, options: GanttOptions, viewMode: ViewMode, ganttStartDate: Dayjs) => void;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apexgantt",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "dependencies": {
     "dayjs": "^1.11.13",
     "html2pdf.js": "^0.10.3",
@@ -22,4 +22,4 @@
       }
     }
   }
-}
+}