@worktile/gantt 19.0.4 → 19.0.6-0

package/components/scrollbar/scrollbar.component.d.ts

@@ -3,10 +3,11 @@ import { NgxGanttRootComponent } from '../../root.component';
 import * as i0 from "@angular/core";
 export declare class GanttScrollbarComponent {
     ganttUpper: GanttUpper;
-    hasFooter: boolean;
-    tableWidth: number;
-    ganttRoot: NgxGanttRootComponent;
+    hasFooter: import("@angular/core").InputSignal<boolean>;
+    tableWidth: import("@angular/core").InputSignal<number>;
+    ganttRoot: import("@angular/core").InputSignal<NgxGanttRootComponent>;
+    tableScrollWidth: import("@angular/core").InputSignal<number>;
     constructor(ganttUpper: GanttUpper);
     static ɵfac: i0.ɵɵFactoryDeclaration<GanttScrollbarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GanttScrollbarComponent, "gantt-scrollbar", never, { "hasFooter": { "alias": "hasFooter"; "required": false; }; "tableWidth": { "alias": "tableWidth"; "required": false; }; "ganttRoot": { "alias": "ganttRoot"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GanttScrollbarComponent, "gantt-scrollbar", never, { "hasFooter": { "alias": "hasFooter"; "required": false; "isSignal": true; }; "tableWidth": { "alias": "tableWidth"; "required": false; "isSignal": true; }; "ganttRoot": { "alias": "ganttRoot"; "required": false; "isSignal": true; }; "tableScrollWidth": { "alias": "tableScrollWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/components/table/body/gantt-table-body.component.d.ts

@@ -1,5 +1,5 @@
 import { CdkDrag, CdkDragDrop, CdkDragEnd, CdkDragMove, CdkDragStart } from '@angular/cdk/drag-drop';
-import { AfterViewInit, ChangeDetectorRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList, TemplateRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList, TemplateRef } from '@angular/core';
 import { GanttGroupInternal, GanttItemInternal, GanttSelectedEvent, GanttTableDragDroppedEvent, GanttTableDragEndedEvent, GanttTableDragEnterPredicateContext, GanttTableDragStartedEvent } from '../../../class';
 import { GanttAbstractComponent } from '../../../gantt-abstract';
 import { GanttUpper } from '../../../gantt-upper';
@@ -10,6 +10,7 @@ export declare class GanttTableBodyComponent implements OnInit, OnDestroy, After
     ganttUpper: GanttUpper;
     private cdr;
     private document;
+    protected elementRef: ElementRef<HTMLElement>;
     private ngZone;
     private _viewportItems;
     set viewportItems(data: (GanttGroupInternal | GanttItemInternal)[]);
@@ -39,7 +40,8 @@ export declare class GanttTableBodyComponent implements OnInit, OnDestroy, After
     sideContainer: Element;
     headerContainer: Element;
     footerContainer: Element;
-    constructor(gantt: GanttAbstractComponent, ganttUpper: GanttUpper, cdr: ChangeDetectorRef, document: Document, ngZone: NgZone);
+    tableScrollbarContainer: Element;
+    constructor(gantt: GanttAbstractComponent, ganttUpper: GanttUpper, cdr: ChangeDetectorRef, document: Document, elementRef: ElementRef<HTMLElement>, ngZone: NgZone);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     initialize(): void;

package/components/table/gantt-table.scss

@@ -16,7 +16,7 @@
       border-right: none;
     }
 
-    &:last-child {
+    &.gantt-table-column-placeholder {
       padding: 0;
       border: 1px solid variables.$gantt-border-color;
       border-right: none;
@@ -70,7 +70,7 @@
     &:nth-last-child(2) {
       border-right: none;
     }
-    &:last-child {
+    &.gantt-table-column-placeholder {
       padding: 0;
       border: 1px solid variables.$gantt-border-color;
       border-right: none;
@@ -205,6 +205,7 @@
 
 .gantt-table-body {
   display: block;
+  flex: 1;
   .gantt-table-group {
     display: flex;
     background: variables.$gantt-group-background-color;

package/fesm2022/worktile-gantt.mjs

@@ -4,7 +4,7 @@ import * as i1$1 from '@angular/cdk/scrolling';
 import { CdkScrollable, CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, ScrollingModule } from '@angular/cdk/scrolling';
 import { isPlatformServer, NgTemplateOutlet, NgStyle, NgClass, DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Inject, Injectable, EventEmitter, HostBinding, ContentChild, Output, Input, Directive, signal, PLATFORM_ID, effect, ViewChildren, ViewChild, Component, Pipe, ElementRef, HostListener, Optional, forwardRef, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { InjectionToken, inject, Inject, Injectable, EventEmitter, HostBinding, ContentChild, Output, Input, Directive, signal, PLATFORM_ID, effect, ViewChildren, ViewChild, Component, Pipe, input, ElementRef, HostListener, Optional, forwardRef, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { fromUnixTime, getWeek, getDaysInMonth, differenceInCalendarDays, setDate, addSeconds, addMinutes, addHours, addDays, addWeeks, addMonths, addQuarters, addYears, startOfMinute, startOfHour, startOfDay, startOfWeek, startOfMonth, startOfQuarter, startOfYear, endOfMinute, endOfHour, endOfDay, endOfWeek, endOfMonth, endOfQuarter, endOfYear, getUnixTime, format, isWeekend, isToday, differenceInHours, differenceInMinutes, differenceInDays, differenceInCalendarQuarters, eachMonthOfInterval, eachYearOfInterval, eachWeekOfInterval, eachDayOfInterval, differenceInCalendarYears, eachHourOfInterval, setDefaultOptions } from 'date-fns';
 export { addDays, addHours, addMinutes, addMonths, addQuarters, addSeconds, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarQuarters, differenceInDays, differenceInMinutes, eachDayOfInterval, eachHourOfInterval, eachMonthOfInterval, eachWeekOfInterval, endOfDay, endOfHour, endOfMinute, endOfMonth, endOfQuarter, endOfWeek, endOfYear, format, fromUnixTime, getDaysInMonth, getUnixTime, getWeek, isToday, isWeekend, setDate, startOfDay, startOfHour, startOfMinute, startOfMonth, startOfQuarter, startOfWeek, startOfYear } from 'date-fns';
 import { BehaviorSubject, Subject, from, fromEvent, merge, Observable, EMPTY, interval, animationFrameScheduler, take as take$1, takeUntil as takeUntil$1, combineLatest, startWith as startWith$1, auditTime as auditTime$1, filter } from 'rxjs';
@@ -3752,11 +3752,11 @@ class GanttTableHeaderComponent {
         this.unsubscribe$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttTableHeaderComponent, deps: [{ token: i0.ElementRef }, { token: GANTT_ABSTRACT_TOKEN }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: GanttTableHeaderComponent, isStandalone: true, selector: "gantt-table-header", inputs: { columns: "columns" }, host: { properties: { "class": "this.className", "style.height": "this.height", "style.line-height": "this.lineHeight" } }, viewQueries: [{ propertyName: "resizeLineElementRef", first: true, predicate: ["resizeLine"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"gantt-table-header-container\" [style.width.px]=\"tableWidth\" cdkScrollable>\n  @for (column of columns; track $index) {\n    <div class=\"gantt-table-column\" [style.width]=\"column.columnWidth\">\n      @if (column.headerTemplateRef) {\n        <ng-container [ngTemplateOutlet]=\"column.headerTemplateRef\"> </ng-container>\n      } @else {\n        {{ column.name }}\n      }\n      <div\n        class=\"column-resize-handle\"\n        cdkDrag\n        cdkDragLockAxis=\"x\"\n        cdkDragBoundary=\".gantt\"\n        (cdkDragMoved)=\"onResizeMoved($event, column)\"\n        (cdkDragStarted)=\"onResizeStarted($event)\"\n        (cdkDragEnded)=\"onResizeEnded($event, column)\"\n      ></div>\n    </div>\n  }\n  <div class=\"gantt-table-column\"></div>\n</div>\n\n@if (gantt?.table?.settingsSlot) {\n  <ng-template [ngTemplateOutlet]=\"gantt?.table?.settingsSlot\"></ng-template>\n}\n\n<div\n  class=\"table-resize-handle\"\n  cdkDrag\n  cdkDragLockAxis=\"x\"\n  cdkDragBoundary=\".gantt\"\n  (cdkDragMoved)=\"onResizeMoved($event)\"\n  (cdkDragStarted)=\"onResizeStarted($event)\"\n  (cdkDragEnded)=\"onOverallResizeEnded($event)\"\n></div>\n\n<div #resizeLine class=\"table-resize-auxiliary-line\"></div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: GanttTableHeaderComponent, isStandalone: true, selector: "gantt-table-header", inputs: { columns: "columns" }, host: { properties: { "class": "this.className", "style.height": "this.height", "style.line-height": "this.lineHeight" } }, viewQueries: [{ propertyName: "resizeLineElementRef", first: true, predicate: ["resizeLine"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"gantt-table-header-container\" [style.width.px]=\"tableWidth\" cdkScrollable>\n  @for (column of columns; track $index) {\n    <div class=\"gantt-table-column\" [style.width]=\"column.columnWidth\">\n      @if (column.headerTemplateRef) {\n        <ng-container [ngTemplateOutlet]=\"column.headerTemplateRef\"> </ng-container>\n      } @else {\n        {{ column.name }}\n      }\n      <div\n        class=\"column-resize-handle\"\n        cdkDrag\n        cdkDragLockAxis=\"x\"\n        cdkDragBoundary=\".gantt\"\n        (cdkDragMoved)=\"onResizeMoved($event, column)\"\n        (cdkDragStarted)=\"onResizeStarted($event)\"\n        (cdkDragEnded)=\"onResizeEnded($event, column)\"\n      ></div>\n    </div>\n  }\n  <div class=\"gantt-table-column gantt-table-column-placeholder\"></div>\n</div>\n\n@if (gantt?.table?.settingsSlot) {\n  <ng-template [ngTemplateOutlet]=\"gantt?.table?.settingsSlot\"></ng-template>\n}\n\n<div\n  class=\"table-resize-handle\"\n  cdkDrag\n  cdkDragLockAxis=\"x\"\n  cdkDragBoundary=\".gantt\"\n  (cdkDragMoved)=\"onResizeMoved($event)\"\n  (cdkDragStarted)=\"onResizeStarted($event)\"\n  (cdkDragEnded)=\"onOverallResizeEnded($event)\"\n></div>\n\n<div #resizeLine class=\"table-resize-auxiliary-line\"></div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttTableHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gantt-table-header', imports: [NgTemplateOutlet, CdkDrag], template: "<div class=\"gantt-table-header-container\" [style.width.px]=\"tableWidth\" cdkScrollable>\n  @for (column of columns; track $index) {\n    <div class=\"gantt-table-column\" [style.width]=\"column.columnWidth\">\n      @if (column.headerTemplateRef) {\n        <ng-container [ngTemplateOutlet]=\"column.headerTemplateRef\"> </ng-container>\n      } @else {\n        {{ column.name }}\n      }\n      <div\n        class=\"column-resize-handle\"\n        cdkDrag\n        cdkDragLockAxis=\"x\"\n        cdkDragBoundary=\".gantt\"\n        (cdkDragMoved)=\"onResizeMoved($event, column)\"\n        (cdkDragStarted)=\"onResizeStarted($event)\"\n        (cdkDragEnded)=\"onResizeEnded($event, column)\"\n      ></div>\n    </div>\n  }\n  <div class=\"gantt-table-column\"></div>\n</div>\n\n@if (gantt?.table?.settingsSlot) {\n  <ng-template [ngTemplateOutlet]=\"gantt?.table?.settingsSlot\"></ng-template>\n}\n\n<div\n  class=\"table-resize-handle\"\n  cdkDrag\n  cdkDragLockAxis=\"x\"\n  cdkDragBoundary=\".gantt\"\n  (cdkDragMoved)=\"onResizeMoved($event)\"\n  (cdkDragStarted)=\"onResizeStarted($event)\"\n  (cdkDragEnded)=\"onOverallResizeEnded($event)\"\n></div>\n\n<div #resizeLine class=\"table-resize-auxiliary-line\"></div>\n" }]
+            args: [{ selector: 'gantt-table-header', imports: [NgTemplateOutlet, CdkDrag], template: "<div class=\"gantt-table-header-container\" [style.width.px]=\"tableWidth\" cdkScrollable>\n  @for (column of columns; track $index) {\n    <div class=\"gantt-table-column\" [style.width]=\"column.columnWidth\">\n      @if (column.headerTemplateRef) {\n        <ng-container [ngTemplateOutlet]=\"column.headerTemplateRef\"> </ng-container>\n      } @else {\n        {{ column.name }}\n      }\n      <div\n        class=\"column-resize-handle\"\n        cdkDrag\n        cdkDragLockAxis=\"x\"\n        cdkDragBoundary=\".gantt\"\n        (cdkDragMoved)=\"onResizeMoved($event, column)\"\n        (cdkDragStarted)=\"onResizeStarted($event)\"\n        (cdkDragEnded)=\"onResizeEnded($event, column)\"\n      ></div>\n    </div>\n  }\n  <div class=\"gantt-table-column gantt-table-column-placeholder\"></div>\n</div>\n\n@if (gantt?.table?.settingsSlot) {\n  <ng-template [ngTemplateOutlet]=\"gantt?.table?.settingsSlot\"></ng-template>\n}\n\n<div\n  class=\"table-resize-handle\"\n  cdkDrag\n  cdkDragLockAxis=\"x\"\n  cdkDragBoundary=\".gantt\"\n  (cdkDragMoved)=\"onResizeMoved($event)\"\n  (cdkDragStarted)=\"onResizeStarted($event)\"\n  (cdkDragEnded)=\"onOverallResizeEnded($event)\"\n></div>\n\n<div #resizeLine class=\"table-resize-auxiliary-line\"></div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [GANTT_ABSTRACT_TOKEN]
@@ -3788,11 +3788,12 @@ class GanttTableBodyComponent {
     get viewportItems() {
         return this._viewportItems;
     }
-    constructor(gantt, ganttUpper, cdr, document, ngZone) {
+    constructor(gantt, ganttUpper, cdr, document, elementRef, ngZone) {
         this.gantt = gantt;
         this.ganttUpper = ganttUpper;
         this.cdr = cdr;
         this.document = document;
+        this.elementRef = elementRef;
         this.ngZone = ngZone;
         this.draggable = false;
         this.dragDropped = new EventEmitter();
@@ -3847,26 +3848,23 @@ class GanttTableBodyComponent {
         this.sideContainer = this.document.getElementsByClassName('gantt-side-container')[0];
         this.headerContainer = this.document.getElementsByClassName('gantt-table-header-container')[0];
         this.footerContainer = this.document.getElementsByClassName('gantt-table-footer')[0];
+        this.tableScrollbarContainer = this.document.getElementsByClassName('gantt-table-scrollbar')[0];
         this.monitorScrollChange();
     }
     monitorScrollChange() {
         const scrollObservers = [
             fromEvent(this.sideContainer, 'scroll', passiveListenerOptions),
-            fromEvent(this.headerContainer, 'scroll', passiveListenerOptions)
+            fromEvent(this.headerContainer, 'scroll', passiveListenerOptions),
+            fromEvent(this.tableScrollbarContainer, 'scroll', passiveListenerOptions)
         ];
         this.ngZone.runOutsideAngular(() => merge(...scrollObservers)
             .pipe(takeUntil$1(this.destroy$))
             .subscribe((event) => {
             const target = event.currentTarget;
-            const classList = target.classList;
-            if (classList.contains('gantt-table-header-container')) {
-                this.sideContainer && (this.sideContainer.scrollLeft = target.scrollLeft);
-                this.footerContainer && (this.footerContainer.scrollLeft = target.scrollLeft);
-            }
-            else {
-                this.headerContainer && (this.headerContainer.scrollLeft = target.scrollLeft);
-                this.footerContainer && (this.footerContainer.scrollLeft = target.scrollLeft);
-            }
+            this.headerContainer && (this.headerContainer.scrollLeft = target.scrollLeft);
+            this.sideContainer && (this.sideContainer.scrollLeft = target.scrollLeft);
+            this.tableScrollbarContainer && (this.tableScrollbarContainer.scrollLeft = target.scrollLeft);
+            this.footerContainer && (this.footerContainer.scrollLeft = target.scrollLeft);
         }));
     }
     expandGroup(group) {
@@ -4063,12 +4061,12 @@ class GanttTableBodyComponent {
         this.document.querySelectorAll('.drop-position-after').forEach((element) => element.classList.remove('drop-position-after'));
         this.document.querySelectorAll('.drop-position-inside').forEach((element) => element.classList.remove('drop-position-inside'));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttTableBodyComponent, deps: [{ token: GANTT_ABSTRACT_TOKEN }, { token: GANTT_UPPER_TOKEN }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: GanttTableBodyComponent, isStandalone: true, selector: "gantt-table-body", inputs: { viewportItems: "viewportItems", flatItems: "flatItems", columns: "columns", groupTemplate: "groupTemplate", emptyTemplate: "emptyTemplate", rowBeforeTemplate: "rowBeforeTemplate", rowAfterTemplate: "rowAfterTemplate", draggable: "draggable", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", dragStarted: "dragStarted", dragEnded: "dragEnded", itemClick: "itemClick" }, host: { properties: { "class.gantt-table-draggable": "this.draggable", "class.gantt-table-body": "this.ganttTableClass", "class.gantt-table-empty": "this.ganttTableEmptyClass", "class.gantt-table-dragging": "this.ganttTableDragging" } }, viewQueries: [{ propertyName: "cdkDrags", predicate: (CdkDrag), descendants: true }], ngImport: i0, template: "<div\n  class=\"gantt-table-body-container\"\n  cdkDropList\n  [cdkDropListAutoScrollStep]=\"6\"\n  [cdkDropListData]=\"viewportItems\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\"\n>\n  @if (!viewportItems?.length) {\n    @if (!emptyTemplate) {\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    }\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  }\n\n  @if (viewportItems && viewportItems.length > 0) {\n    @for (item of viewportItems; track trackBy($index, item)) {\n      @if (item | isGanttGroup) {\n        <div class=\"gantt-table-group\" [style.height.px]=\"gantt.styles.lineHeight\" [ngClass]=\"item.class\">\n          <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n            <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n            @if (groupTemplate) {\n              <ng-template\n                [ngTemplateOutlet]=\"groupTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n              ></ng-template>\n            } @else {\n              <span class=\"group-title\">{{ item.title }}</span>\n            }\n          </div>\n        </div>\n      }\n      @if (!(item | isGanttGroup)) {\n        <div\n          (click)=\"itemClick.emit({ event: $event, current: item.origin, selectedValue: item.origin })\"\n          cdkDrag\n          [cdkDragData]=\"item\"\n          [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n          (cdkDragStarted)=\"onItemDragStarted($event)\"\n          (cdkDragEnded)=\"onItemDragEnded($event)\"\n          (cdkDragMoved)=\"emitItemDragMoved($event)\"\n          class=\"gantt-table-item\"\n          [class.gantt-table-item-with-group]=\"hasGroup\"\n          [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n          [style.height.px]=\"gantt.styles.lineHeight\"\n          [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n          [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"rowBeforeTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n          ></ng-template>\n          @for (column of columns; track $index; let first = $first) {\n            <div [classList]=\"column.classList\" [style.width]=\"column.columnWidth\">\n              <!-- drag icon -->\n              @if (first && draggable) {\n                <gantt-icon\n                  class=\"gantt-drag-handle\"\n                  iconName=\"drag\"\n                  cdkDragHandle\n                  [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n                ></gantt-icon>\n              }\n              <!-- expand icon -->\n              @if (column?.showExpandIcon || (!hasExpandIcon && first)) {\n                <div class=\"gantt-expand-icon\" [style.marginLeft.px]=\"item.level * 20\">\n                  @if (item.level < gantt.maxLevel - 1 && ((gantt.async && item.expandable) || item.children?.length > 0)) {\n                    @if (!item.loading) {\n                      <gantt-icon\n                        class=\"expand-icon\"\n                        [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n                        (click)=\"expandChildren($event, item)\"\n                      >\n                      </gantt-icon>\n                    }\n                    @if (item.loading) {\n                      <gantt-icon [iconName]=\"'loading'\"></gantt-icon>\n                    }\n                  }\n                </div>\n              }\n              <!-- column content -->\n              <div class=\"gantt-table-column-content\">\n                <ng-template\n                  [ngTemplateOutlet]=\"column.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n                ></ng-template>\n              </div>\n            </div>\n          }\n          <div class=\"gantt-table-column\"></div>\n          <ng-template\n            [ngTemplateOutlet]=\"rowAfterTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n          ></ng-template>\n        </div>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }, { kind: "pipe", type: IsGanttGroupPipe, name: "isGanttGroup" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttTableBodyComponent, deps: [{ token: GANTT_ABSTRACT_TOKEN }, { token: GANTT_UPPER_TOKEN }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: GanttTableBodyComponent, isStandalone: true, selector: "gantt-table-body", inputs: { viewportItems: "viewportItems", flatItems: "flatItems", columns: "columns", groupTemplate: "groupTemplate", emptyTemplate: "emptyTemplate", rowBeforeTemplate: "rowBeforeTemplate", rowAfterTemplate: "rowAfterTemplate", draggable: "draggable", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", dragStarted: "dragStarted", dragEnded: "dragEnded", itemClick: "itemClick" }, host: { properties: { "class.gantt-table-draggable": "this.draggable", "class.gantt-table-body": "this.ganttTableClass", "class.gantt-table-empty": "this.ganttTableEmptyClass", "class.gantt-table-dragging": "this.ganttTableDragging" } }, viewQueries: [{ propertyName: "cdkDrags", predicate: (CdkDrag), descendants: true }], ngImport: i0, template: "<div\n  class=\"gantt-table-body-container\"\n  cdkDropList\n  [cdkDropListAutoScrollStep]=\"6\"\n  [cdkDropListData]=\"viewportItems\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\"\n>\n  @if (!viewportItems?.length) {\n    @if (!emptyTemplate) {\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    }\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  }\n\n  @if (viewportItems && viewportItems.length > 0) {\n    @for (item of viewportItems; track trackBy($index, item)) {\n      @if (item | isGanttGroup) {\n        <div class=\"gantt-table-group\" [style.height.px]=\"gantt.styles.lineHeight\" [ngClass]=\"item.class\">\n          <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n            <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n            @if (groupTemplate) {\n              <ng-template\n                [ngTemplateOutlet]=\"groupTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n              ></ng-template>\n            } @else {\n              <span class=\"group-title\">{{ item.title }}</span>\n            }\n          </div>\n        </div>\n      }\n      @if (!(item | isGanttGroup)) {\n        <div\n          (click)=\"itemClick.emit({ event: $event, current: item.origin, selectedValue: item.origin })\"\n          cdkDrag\n          [cdkDragData]=\"item\"\n          [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n          (cdkDragStarted)=\"onItemDragStarted($event)\"\n          (cdkDragEnded)=\"onItemDragEnded($event)\"\n          (cdkDragMoved)=\"emitItemDragMoved($event)\"\n          class=\"gantt-table-item\"\n          [class.gantt-table-item-with-group]=\"hasGroup\"\n          [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n          [style.height.px]=\"gantt.styles.lineHeight\"\n          [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n          [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"rowBeforeTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n          ></ng-template>\n          @for (column of columns; track $index; let first = $first) {\n            <div [classList]=\"column.classList\" [style.width]=\"column.columnWidth\">\n              <!-- drag icon -->\n              @if (first && draggable) {\n                <gantt-icon\n                  class=\"gantt-drag-handle\"\n                  iconName=\"drag\"\n                  cdkDragHandle\n                  [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n                ></gantt-icon>\n              }\n              <!-- expand icon -->\n              @if (column?.showExpandIcon || (!hasExpandIcon && first)) {\n                <div class=\"gantt-expand-icon\" [style.marginLeft.px]=\"item.level * 20\">\n                  @if (item.level < gantt.maxLevel - 1 && ((gantt.async && item.expandable) || item.children?.length > 0)) {\n                    @if (!item.loading) {\n                      <gantt-icon\n                        class=\"expand-icon\"\n                        [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n                        (click)=\"expandChildren($event, item)\"\n                      >\n                      </gantt-icon>\n                    }\n                    @if (item.loading) {\n                      <gantt-icon [iconName]=\"'loading'\"></gantt-icon>\n                    }\n                  }\n                </div>\n              }\n              <!-- column content -->\n              <div class=\"gantt-table-column-content\">\n                <ng-template\n                  [ngTemplateOutlet]=\"column.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n                ></ng-template>\n              </div>\n            </div>\n          }\n          <div class=\"gantt-table-column gantt-table-column-placeholder\"></div>\n          <ng-template\n            [ngTemplateOutlet]=\"rowAfterTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n          ></ng-template>\n        </div>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }, { kind: "pipe", type: IsGanttGroupPipe, name: "isGanttGroup" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttTableBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gantt-table-body', imports: [CdkDropList, GanttIconComponent, NgTemplateOutlet, NgClass, CdkDrag, CdkDragHandle, IsGanttRangeItemPipe, IsGanttGroupPipe], template: "<div\n  class=\"gantt-table-body-container\"\n  cdkDropList\n  [cdkDropListAutoScrollStep]=\"6\"\n  [cdkDropListData]=\"viewportItems\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\"\n>\n  @if (!viewportItems?.length) {\n    @if (!emptyTemplate) {\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    }\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  }\n\n  @if (viewportItems && viewportItems.length > 0) {\n    @for (item of viewportItems; track trackBy($index, item)) {\n      @if (item | isGanttGroup) {\n        <div class=\"gantt-table-group\" [style.height.px]=\"gantt.styles.lineHeight\" [ngClass]=\"item.class\">\n          <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n            <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n            @if (groupTemplate) {\n              <ng-template\n                [ngTemplateOutlet]=\"groupTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n              ></ng-template>\n            } @else {\n              <span class=\"group-title\">{{ item.title }}</span>\n            }\n          </div>\n        </div>\n      }\n      @if (!(item | isGanttGroup)) {\n        <div\n          (click)=\"itemClick.emit({ event: $event, current: item.origin, selectedValue: item.origin })\"\n          cdkDrag\n          [cdkDragData]=\"item\"\n          [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n          (cdkDragStarted)=\"onItemDragStarted($event)\"\n          (cdkDragEnded)=\"onItemDragEnded($event)\"\n          (cdkDragMoved)=\"emitItemDragMoved($event)\"\n          class=\"gantt-table-item\"\n          [class.gantt-table-item-with-group]=\"hasGroup\"\n          [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n          [style.height.px]=\"gantt.styles.lineHeight\"\n          [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n          [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"rowBeforeTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n          ></ng-template>\n          @for (column of columns; track $index; let first = $first) {\n            <div [classList]=\"column.classList\" [style.width]=\"column.columnWidth\">\n              <!-- drag icon -->\n              @if (first && draggable) {\n                <gantt-icon\n                  class=\"gantt-drag-handle\"\n                  iconName=\"drag\"\n                  cdkDragHandle\n                  [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n                ></gantt-icon>\n              }\n              <!-- expand icon -->\n              @if (column?.showExpandIcon || (!hasExpandIcon && first)) {\n                <div class=\"gantt-expand-icon\" [style.marginLeft.px]=\"item.level * 20\">\n                  @if (item.level < gantt.maxLevel - 1 && ((gantt.async && item.expandable) || item.children?.length > 0)) {\n                    @if (!item.loading) {\n                      <gantt-icon\n                        class=\"expand-icon\"\n                        [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n                        (click)=\"expandChildren($event, item)\"\n                      >\n                      </gantt-icon>\n                    }\n                    @if (item.loading) {\n                      <gantt-icon [iconName]=\"'loading'\"></gantt-icon>\n                    }\n                  }\n                </div>\n              }\n              <!-- column content -->\n              <div class=\"gantt-table-column-content\">\n                <ng-template\n                  [ngTemplateOutlet]=\"column.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n                ></ng-template>\n              </div>\n            </div>\n          }\n          <div class=\"gantt-table-column\"></div>\n          <ng-template\n            [ngTemplateOutlet]=\"rowAfterTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n          ></ng-template>\n        </div>\n      }\n    }\n  }\n</div>\n" }]
+            args: [{ selector: 'gantt-table-body', imports: [CdkDropList, GanttIconComponent, NgTemplateOutlet, NgClass, CdkDrag, CdkDragHandle, IsGanttRangeItemPipe, IsGanttGroupPipe], template: "<div\n  class=\"gantt-table-body-container\"\n  cdkDropList\n  [cdkDropListAutoScrollStep]=\"6\"\n  [cdkDropListData]=\"viewportItems\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\"\n>\n  @if (!viewportItems?.length) {\n    @if (!emptyTemplate) {\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    }\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  }\n\n  @if (viewportItems && viewportItems.length > 0) {\n    @for (item of viewportItems; track trackBy($index, item)) {\n      @if (item | isGanttGroup) {\n        <div class=\"gantt-table-group\" [style.height.px]=\"gantt.styles.lineHeight\" [ngClass]=\"item.class\">\n          <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n            <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n            @if (groupTemplate) {\n              <ng-template\n                [ngTemplateOutlet]=\"groupTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n              ></ng-template>\n            } @else {\n              <span class=\"group-title\">{{ item.title }}</span>\n            }\n          </div>\n        </div>\n      }\n      @if (!(item | isGanttGroup)) {\n        <div\n          (click)=\"itemClick.emit({ event: $event, current: item.origin, selectedValue: item.origin })\"\n          cdkDrag\n          [cdkDragData]=\"item\"\n          [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n          (cdkDragStarted)=\"onItemDragStarted($event)\"\n          (cdkDragEnded)=\"onItemDragEnded($event)\"\n          (cdkDragMoved)=\"emitItemDragMoved($event)\"\n          class=\"gantt-table-item\"\n          [class.gantt-table-item-with-group]=\"hasGroup\"\n          [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n          [style.height.px]=\"gantt.styles.lineHeight\"\n          [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n          [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"rowBeforeTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n          ></ng-template>\n          @for (column of columns; track $index; let first = $first) {\n            <div [classList]=\"column.classList\" [style.width]=\"column.columnWidth\">\n              <!-- drag icon -->\n              @if (first && draggable) {\n                <gantt-icon\n                  class=\"gantt-drag-handle\"\n                  iconName=\"drag\"\n                  cdkDragHandle\n                  [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n                ></gantt-icon>\n              }\n              <!-- expand icon -->\n              @if (column?.showExpandIcon || (!hasExpandIcon && first)) {\n                <div class=\"gantt-expand-icon\" [style.marginLeft.px]=\"item.level * 20\">\n                  @if (item.level < gantt.maxLevel - 1 && ((gantt.async && item.expandable) || item.children?.length > 0)) {\n                    @if (!item.loading) {\n                      <gantt-icon\n                        class=\"expand-icon\"\n                        [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n                        (click)=\"expandChildren($event, item)\"\n                      >\n                      </gantt-icon>\n                    }\n                    @if (item.loading) {\n                      <gantt-icon [iconName]=\"'loading'\"></gantt-icon>\n                    }\n                  }\n                </div>\n              }\n              <!-- column content -->\n              <div class=\"gantt-table-column-content\">\n                <ng-template\n                  [ngTemplateOutlet]=\"column.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n                ></ng-template>\n              </div>\n            </div>\n          }\n          <div class=\"gantt-table-column gantt-table-column-placeholder\"></div>\n          <ng-template\n            [ngTemplateOutlet]=\"rowAfterTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n          ></ng-template>\n        </div>\n      }\n    }\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [GANTT_ABSTRACT_TOKEN]
@@ -4078,7 +4076,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                 }] }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.NgZone }], propDecorators: { viewportItems: [{
+                }] }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { viewportItems: [{
                 type: Input
             }], flatItems: [{
                 type: Input
@@ -4155,24 +4153,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
 class GanttScrollbarComponent {
     constructor(ganttUpper) {
         this.ganttUpper = ganttUpper;
-        this.hasFooter = false;
+        this.hasFooter = input(false);
+        this.tableWidth = input();
+        this.ganttRoot = input();
+        this.tableScrollWidth = input(0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttScrollbarComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: GanttScrollbarComponent, isStandalone: true, selector: "gantt-scrollbar", inputs: { hasFooter: "hasFooter", tableWidth: "tableWidth", ganttRoot: "ganttRoot" }, ngImport: i0, template: "<div\n  class=\"gantt-scrollbar\"\n  [ngClass]=\"{ 'gantt-scrollbar-bg': hasFooter }\"\n  [style.height.px]=\"ganttRoot?.horizontalScrollbarHeight + 1\"\n  [style.right.px]=\"ganttRoot?.verticalScrollbarWidth\"\n>\n  <div class=\"gantt-table-scrollbar\" [class.with-scrollbar]=\"ganttRoot?.horizontalScrollbarHeight\" [style.width.px]=\"tableWidth\"></div>\n  <div class=\"gantt-main-scrollbar\">\n    <div class=\"h-100\" [style.width.px]=\"ganttRoot['view']?.width\"></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.3", type: GanttScrollbarComponent, isStandalone: true, selector: "gantt-scrollbar", inputs: { hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null }, tableWidth: { classPropertyName: "tableWidth", publicName: "tableWidth", isSignal: true, isRequired: false, transformFunction: null }, ganttRoot: { classPropertyName: "ganttRoot", publicName: "ganttRoot", isSignal: true, isRequired: false, transformFunction: null }, tableScrollWidth: { classPropertyName: "tableScrollWidth", publicName: "tableScrollWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"gantt-scrollbar\"\n  [ngClass]=\"{ 'gantt-scrollbar-bg': hasFooter() }\"\n  [style.height.px]=\"ganttRoot()?.horizontalScrollbarHeight + 1\"\n  [style.right.px]=\"ganttRoot()?.verticalScrollbarWidth\"\n>\n  <div class=\"gantt-table-scrollbar\" [class.with-scrollbar]=\"ganttRoot()?.horizontalScrollbarHeight\" [style.width.px]=\"tableWidth()\">\n    <div class=\"h-100\" [style.width.px]=\"tableScrollWidth() - 1\"></div>\n  </div>\n  <div class=\"gantt-main-scrollbar\">\n    <div class=\"h-100\" [style.width.px]=\"ganttRoot()['view']?.width\"></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttScrollbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gantt-scrollbar', imports: [NgClass], template: "<div\n  class=\"gantt-scrollbar\"\n  [ngClass]=\"{ 'gantt-scrollbar-bg': hasFooter }\"\n  [style.height.px]=\"ganttRoot?.horizontalScrollbarHeight + 1\"\n  [style.right.px]=\"ganttRoot?.verticalScrollbarWidth\"\n>\n  <div class=\"gantt-table-scrollbar\" [class.with-scrollbar]=\"ganttRoot?.horizontalScrollbarHeight\" [style.width.px]=\"tableWidth\"></div>\n  <div class=\"gantt-main-scrollbar\">\n    <div class=\"h-100\" [style.width.px]=\"ganttRoot['view']?.width\"></div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'gantt-scrollbar', imports: [NgClass], template: "<div\n  class=\"gantt-scrollbar\"\n  [ngClass]=\"{ 'gantt-scrollbar-bg': hasFooter() }\"\n  [style.height.px]=\"ganttRoot()?.horizontalScrollbarHeight + 1\"\n  [style.right.px]=\"ganttRoot()?.verticalScrollbarWidth\"\n>\n  <div class=\"gantt-table-scrollbar\" [class.with-scrollbar]=\"ganttRoot()?.horizontalScrollbarHeight\" [style.width.px]=\"tableWidth()\">\n    <div class=\"h-100\" [style.width.px]=\"tableScrollWidth() - 1\"></div>\n  </div>\n  <div class=\"gantt-main-scrollbar\">\n    <div class=\"h-100\" [style.width.px]=\"ganttRoot()['view']?.width\"></div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: GanttUpper, decorators: [{
                     type: Inject,
                     args: [GANTT_UPPER_TOKEN]
-                }] }], propDecorators: { hasFooter: [{
-                type: Input
-            }], tableWidth: [{
-                type: Input
-            }], ganttRoot: [{
-                type: Input
-            }] } });
+                }] }] });
 
 class GanttPrintService {
     constructor() { }
@@ -4550,6 +4545,7 @@ class NgxGanttComponent extends GanttUpper {
         this.lineClick = new EventEmitter();
         this.selectedChange = new EventEmitter();
         this.virtualScrolledIndexChange = new EventEmitter();
+        this.tableScrollWidth = signal(0);
         this.flatItems = [];
         this.viewportItems = [];
         this._loading = false;
@@ -4609,6 +4605,7 @@ class NgxGanttComponent extends GanttUpper {
                 this.computeTempDataRefs();
             });
         }
+        this.initScrollContainerObserver();
     }
     ngAfterViewChecked() {
         if (this.virtualScrollEnabled && this.viewportRuler && this.virtualScroll.getRenderedRange().end > 0) {
@@ -4774,6 +4771,27 @@ class NgxGanttComponent extends GanttUpper {
         this.table.dragEnded.emit(event);
         this.draggingItem = null;
     }
+    initScrollContainerObserver() {
+        if (this.ganttTableBody && this.ganttTableBody['elementRef']?.nativeElement) {
+            this.tableScrollWidth.set(this.ganttTableBody['elementRef'].nativeElement.clientWidth);
+            if (typeof ResizeObserver !== 'undefined') {
+                this.resizeObserver = new ResizeObserver((entries) => {
+                    const newWidth = entries[0].target.clientWidth;
+                    if (this.tableScrollWidth() !== newWidth) {
+                        this.tableScrollWidth.set(newWidth);
+                        this.cdr.markForCheck();
+                    }
+                });
+                this.resizeObserver.observe(this.ganttTableBody['elementRef'].nativeElement);
+            }
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$1.ViewportRuler }, { token: GANTT_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: NgxGanttComponent, isStandalone: true, selector: "ngx-gantt", inputs: { maxLevel: "maxLevel", async: "async", childrenResolve: "childrenResolve", linkable: "linkable", loading: "loading", virtualScrollEnabled: "virtualScrollEnabled", loadingDelay: "loadingDelay" }, outputs: { linkDragStarted: "linkDragStarted", linkDragEnded: "linkDragEnded", lineClick: "lineClick", selectedChange: "selectedChange", virtualScrolledIndexChange: "virtualScrolledIndexChange" }, providers: [
             {
@@ -4784,7 +4802,7 @@ class NgxGanttComponent extends GanttUpper {
                 provide: GANTT_ABSTRACT_TOKEN,
                 useExisting: forwardRef(() => NgxGanttComponent)
             }
-        ], queries: [{ propertyName: "table", first: true, predicate: NgxGanttTableComponent, descendants: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, static: true }, { propertyName: "columns", predicate: NgxGanttTableColumnComponent, descendants: true }], viewQueries: [{ propertyName: "ganttRoot", first: true, predicate: ["ganttRoot"], descendants: true }, { propertyName: "virtualScroll", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ngx-gantt-root #ganttRoot>\n  <div class=\"gantt-header\">\n    <gantt-table-header #tableHeader [columns]=\"columns\"></gantt-table-header>\n    <div class=\"gantt-container-header\">\n      <gantt-calendar-header [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"></gantt-calendar-header>\n    </div>\n  </div>\n  @if (loading) {\n    <gantt-loader></gantt-loader>\n  }\n\n  <cdk-virtual-scroll-viewport\n    class=\"gantt-virtual-scroll-viewport\"\n    [ngClass]=\"{\n      'gantt-normal-viewport': !virtualScrollEnabled,\n      'gantt-scroll-container': virtualScrollEnabled,\n      'with-footer': table?.tableFooterTemplate || footerTemplate\n    }\"\n    [style.top.px]=\"styles.headerHeight\"\n    [itemSize]=\"styles.lineHeight\"\n    [minBufferPx]=\"styles.lineHeight * 10\"\n    [maxBufferPx]=\"styles.lineHeight * 20\"\n    (scrolledIndexChange)=\"scrolledIndexChange($event)\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of flatItems; trackBy: trackBy\"></ng-container>\n    <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\" [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\n      <div class=\"gantt-side-container\">\n        <div class=\"gantt-table\">\n          <gantt-table-body\n            [flatItems]=\"flatItems\"\n            [viewportItems]=\"viewportItems\"\n            [columns]=\"columns\"\n            [groupTemplate]=\"groupTemplate\"\n            [emptyTemplate]=\"table.tableEmptyTemplate || tableEmptyTemplate\"\n            [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n            [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n            [draggable]=\"table.draggable\"\n            [dropEnterPredicate]=\"table.dropEnterPredicate\"\n            (dragDropped)=\"table.dragDropped.emit($event)\"\n            (dragStarted)=\"itemDragStarted($event)\"\n            (dragEnded)=\"itemDragEnded($event)\"\n            (itemClick)=\"selectItem($event)\"\n          >\n          </gantt-table-body>\n        </div>\n      </div>\n    </div>\n    <div class=\"gantt-container\">\n      <gantt-calendar-grid\n        [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"\n        [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n      ></gantt-calendar-grid>\n      <div class=\"gantt-main\">\n        <gantt-main\n          [ganttRoot]=\"ganttRoot\"\n          [flatItems]=\"flatItems\"\n          [viewportItems]=\"viewportItems\"\n          [groupHeaderTemplate]=\"groupHeaderTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [barTemplate]=\"barTemplate\"\n          [rangeTemplate]=\"rangeTemplate\"\n          [baselineTemplate]=\"baselineTemplate\"\n          [quickTimeFocus]=\"quickTimeFocus\"\n          (barClick)=\"barClick.emit($event)\"\n          (lineClick)=\"lineClick.emit($event)\"\n        >\n        </gantt-main>\n      </div>\n    </div>\n  </cdk-virtual-scroll-viewport>\n\n  <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n\n  <gantt-scrollbar\n    [ganttRoot]=\"ganttRoot\"\n    [hasFooter]=\"!!table?.tableFooterTemplate\"\n    [tableWidth]=\"tableHeader.tableWidth\"\n  ></gantt-scrollbar>\n\n  @if (table?.tableFooterTemplate || footerTemplate) {\n    <div\n      class=\"gantt-footer\"\n      cdkScrollable\n      [style.right.px]=\"ganttRoot.verticalScrollbarWidth\"\n      [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n    >\n      @if (table?.tableFooterTemplate) {\n        <div class=\"gantt-table-footer\" [style.width.px]=\"tableHeader.tableWidth + 1\">\n          <ng-template [ngTemplateOutlet]=\"table?.tableFooterTemplate\" [ngTemplateOutletContext]=\"{ columns: columns }\"> </ng-template>\n        </div>\n      }\n      @if (footerTemplate) {\n        <div class=\"gantt-container-footer\">\n          <ng-template [ngTemplateOutlet]=\"footerTemplate\"> </ng-template>\n        </div>\n      }\n    </div>\n  }\n</ngx-gantt-root>\n", dependencies: [{ kind: "component", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: ["sideWidth"] }, { kind: "component", type: GanttTableHeaderComponent, selector: "gantt-table-header", inputs: ["columns"] }, { kind: "component", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header" }, { kind: "component", type: GanttLoaderComponent, selector: "gantt-loader" }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: GanttTableBodyComponent, selector: "gantt-table-body", inputs: ["viewportItems", "flatItems", "columns", "groupTemplate", "emptyTemplate", "rowBeforeTemplate", "rowAfterTemplate", "draggable", "dropEnterPredicate"], outputs: ["dragDropped", "dragStarted", "dragEnded", "itemClick"] }, { kind: "component", type: GanttCalendarGridComponent, selector: "gantt-calendar-grid" }, { kind: "component", type: GanttMainComponent, selector: "gantt-main", inputs: ["viewportItems", "flatItems", "groupHeaderTemplate", "itemTemplate", "barTemplate", "rangeTemplate", "baselineTemplate", "ganttRoot", "quickTimeFocus"], outputs: ["barClick", "lineClick"] }, { kind: "component", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }, { kind: "component", type: GanttScrollbarComponent, selector: "gantt-scrollbar", inputs: ["hasFooter", "tableWidth", "ganttRoot"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "table", first: true, predicate: NgxGanttTableComponent, descendants: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, static: true }, { propertyName: "columns", predicate: NgxGanttTableColumnComponent, descendants: true }], viewQueries: [{ propertyName: "ganttRoot", first: true, predicate: ["ganttRoot"], descendants: true }, { propertyName: "virtualScroll", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "ganttTableBody", first: true, predicate: ["ganttTableBody"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ngx-gantt-root #ganttRoot>\n  <div class=\"gantt-header\">\n    <gantt-table-header #tableHeader [columns]=\"columns\"></gantt-table-header>\n    <div class=\"gantt-container-header\">\n      <gantt-calendar-header [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"></gantt-calendar-header>\n    </div>\n  </div>\n  @if (loading) {\n    <gantt-loader></gantt-loader>\n  }\n\n  <cdk-virtual-scroll-viewport\n    class=\"gantt-virtual-scroll-viewport\"\n    [ngClass]=\"{\n      'gantt-normal-viewport': !virtualScrollEnabled,\n      'gantt-scroll-container': virtualScrollEnabled,\n      'with-footer': table?.tableFooterTemplate || footerTemplate\n    }\"\n    [style.top.px]=\"styles.headerHeight\"\n    [itemSize]=\"styles.lineHeight\"\n    [minBufferPx]=\"styles.lineHeight * 10\"\n    [maxBufferPx]=\"styles.lineHeight * 20\"\n    (scrolledIndexChange)=\"scrolledIndexChange($event)\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of flatItems; trackBy: trackBy\"></ng-container>\n    <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\" [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\n      <div class=\"gantt-side-container\">\n        <div class=\"gantt-table\">\n          <gantt-table-body\n            #ganttTableBody\n            [flatItems]=\"flatItems\"\n            [viewportItems]=\"viewportItems\"\n            [columns]=\"columns\"\n            [groupTemplate]=\"groupTemplate\"\n            [emptyTemplate]=\"table.tableEmptyTemplate || tableEmptyTemplate\"\n            [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n            [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n            [draggable]=\"table.draggable\"\n            [dropEnterPredicate]=\"table.dropEnterPredicate\"\n            (dragDropped)=\"table.dragDropped.emit($event)\"\n            (dragStarted)=\"itemDragStarted($event)\"\n            (dragEnded)=\"itemDragEnded($event)\"\n            (itemClick)=\"selectItem($event)\"\n          >\n          </gantt-table-body>\n        </div>\n      </div>\n    </div>\n    <div class=\"gantt-container\">\n      <gantt-calendar-grid\n        [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"\n        [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n      ></gantt-calendar-grid>\n      <div class=\"gantt-main\">\n        <gantt-main\n          [ganttRoot]=\"ganttRoot\"\n          [flatItems]=\"flatItems\"\n          [viewportItems]=\"viewportItems\"\n          [groupHeaderTemplate]=\"groupHeaderTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [barTemplate]=\"barTemplate\"\n          [rangeTemplate]=\"rangeTemplate\"\n          [baselineTemplate]=\"baselineTemplate\"\n          [quickTimeFocus]=\"quickTimeFocus\"\n          (barClick)=\"barClick.emit($event)\"\n          (lineClick)=\"lineClick.emit($event)\"\n        >\n        </gantt-main>\n      </div>\n    </div>\n  </cdk-virtual-scroll-viewport>\n\n  <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n\n  <gantt-scrollbar\n    [ganttRoot]=\"ganttRoot\"\n    [hasFooter]=\"!!table?.tableFooterTemplate\"\n    [tableWidth]=\"tableHeader.tableWidth\"\n    [tableScrollWidth]=\"tableScrollWidth()\"\n  ></gantt-scrollbar>\n\n  @if (table?.tableFooterTemplate || footerTemplate) {\n    <div\n      class=\"gantt-footer\"\n      cdkScrollable\n      [style.right.px]=\"ganttRoot.verticalScrollbarWidth\"\n      [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n    >\n      @if (table?.tableFooterTemplate) {\n        <div class=\"gantt-table-footer\" [style.width.px]=\"tableHeader.tableWidth + 1\">\n          <ng-template [ngTemplateOutlet]=\"table?.tableFooterTemplate\" [ngTemplateOutletContext]=\"{ columns: columns }\"> </ng-template>\n        </div>\n      }\n      @if (footerTemplate) {\n        <div class=\"gantt-container-footer\">\n          <ng-template [ngTemplateOutlet]=\"footerTemplate\"> </ng-template>\n        </div>\n      }\n    </div>\n  }\n</ngx-gantt-root>\n", dependencies: [{ kind: "component", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: ["sideWidth"] }, { kind: "component", type: GanttTableHeaderComponent, selector: "gantt-table-header", inputs: ["columns"] }, { kind: "component", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header" }, { kind: "component", type: GanttLoaderComponent, selector: "gantt-loader" }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: GanttTableBodyComponent, selector: "gantt-table-body", inputs: ["viewportItems", "flatItems", "columns", "groupTemplate", "emptyTemplate", "rowBeforeTemplate", "rowAfterTemplate", "draggable", "dropEnterPredicate"], outputs: ["dragDropped", "dragStarted", "dragEnded", "itemClick"] }, { kind: "component", type: GanttCalendarGridComponent, selector: "gantt-calendar-grid" }, { kind: "component", type: GanttMainComponent, selector: "gantt-main", inputs: ["viewportItems", "flatItems", "groupHeaderTemplate", "itemTemplate", "barTemplate", "rangeTemplate", "baselineTemplate", "ganttRoot", "quickTimeFocus"], outputs: ["barClick", "lineClick"] }, { kind: "component", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }, { kind: "component", type: GanttScrollbarComponent, selector: "gantt-scrollbar", inputs: ["hasFooter", "tableWidth", "ganttRoot", "tableScrollWidth"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttComponent, decorators: [{
             type: Component,
@@ -4812,7 +4830,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                         GanttDragBackdropComponent,
                         GanttScrollbarComponent,
                         NgTemplateOutlet
-                    ], template: "<ngx-gantt-root #ganttRoot>\n  <div class=\"gantt-header\">\n    <gantt-table-header #tableHeader [columns]=\"columns\"></gantt-table-header>\n    <div class=\"gantt-container-header\">\n      <gantt-calendar-header [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"></gantt-calendar-header>\n    </div>\n  </div>\n  @if (loading) {\n    <gantt-loader></gantt-loader>\n  }\n\n  <cdk-virtual-scroll-viewport\n    class=\"gantt-virtual-scroll-viewport\"\n    [ngClass]=\"{\n      'gantt-normal-viewport': !virtualScrollEnabled,\n      'gantt-scroll-container': virtualScrollEnabled,\n      'with-footer': table?.tableFooterTemplate || footerTemplate\n    }\"\n    [style.top.px]=\"styles.headerHeight\"\n    [itemSize]=\"styles.lineHeight\"\n    [minBufferPx]=\"styles.lineHeight * 10\"\n    [maxBufferPx]=\"styles.lineHeight * 20\"\n    (scrolledIndexChange)=\"scrolledIndexChange($event)\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of flatItems; trackBy: trackBy\"></ng-container>\n    <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\" [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\n      <div class=\"gantt-side-container\">\n        <div class=\"gantt-table\">\n          <gantt-table-body\n            [flatItems]=\"flatItems\"\n            [viewportItems]=\"viewportItems\"\n            [columns]=\"columns\"\n            [groupTemplate]=\"groupTemplate\"\n            [emptyTemplate]=\"table.tableEmptyTemplate || tableEmptyTemplate\"\n            [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n            [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n            [draggable]=\"table.draggable\"\n            [dropEnterPredicate]=\"table.dropEnterPredicate\"\n            (dragDropped)=\"table.dragDropped.emit($event)\"\n            (dragStarted)=\"itemDragStarted($event)\"\n            (dragEnded)=\"itemDragEnded($event)\"\n            (itemClick)=\"selectItem($event)\"\n          >\n          </gantt-table-body>\n        </div>\n      </div>\n    </div>\n    <div class=\"gantt-container\">\n      <gantt-calendar-grid\n        [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"\n        [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n      ></gantt-calendar-grid>\n      <div class=\"gantt-main\">\n        <gantt-main\n          [ganttRoot]=\"ganttRoot\"\n          [flatItems]=\"flatItems\"\n          [viewportItems]=\"viewportItems\"\n          [groupHeaderTemplate]=\"groupHeaderTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [barTemplate]=\"barTemplate\"\n          [rangeTemplate]=\"rangeTemplate\"\n          [baselineTemplate]=\"baselineTemplate\"\n          [quickTimeFocus]=\"quickTimeFocus\"\n          (barClick)=\"barClick.emit($event)\"\n          (lineClick)=\"lineClick.emit($event)\"\n        >\n        </gantt-main>\n      </div>\n    </div>\n  </cdk-virtual-scroll-viewport>\n\n  <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n\n  <gantt-scrollbar\n    [ganttRoot]=\"ganttRoot\"\n    [hasFooter]=\"!!table?.tableFooterTemplate\"\n    [tableWidth]=\"tableHeader.tableWidth\"\n  ></gantt-scrollbar>\n\n  @if (table?.tableFooterTemplate || footerTemplate) {\n    <div\n      class=\"gantt-footer\"\n      cdkScrollable\n      [style.right.px]=\"ganttRoot.verticalScrollbarWidth\"\n      [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n    >\n      @if (table?.tableFooterTemplate) {\n        <div class=\"gantt-table-footer\" [style.width.px]=\"tableHeader.tableWidth + 1\">\n          <ng-template [ngTemplateOutlet]=\"table?.tableFooterTemplate\" [ngTemplateOutletContext]=\"{ columns: columns }\"> </ng-template>\n        </div>\n      }\n      @if (footerTemplate) {\n        <div class=\"gantt-container-footer\">\n          <ng-template [ngTemplateOutlet]=\"footerTemplate\"> </ng-template>\n        </div>\n      }\n    </div>\n  }\n</ngx-gantt-root>\n" }]
+                    ], template: "<ngx-gantt-root #ganttRoot>\n  <div class=\"gantt-header\">\n    <gantt-table-header #tableHeader [columns]=\"columns\"></gantt-table-header>\n    <div class=\"gantt-container-header\">\n      <gantt-calendar-header [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"></gantt-calendar-header>\n    </div>\n  </div>\n  @if (loading) {\n    <gantt-loader></gantt-loader>\n  }\n\n  <cdk-virtual-scroll-viewport\n    class=\"gantt-virtual-scroll-viewport\"\n    [ngClass]=\"{\n      'gantt-normal-viewport': !virtualScrollEnabled,\n      'gantt-scroll-container': virtualScrollEnabled,\n      'with-footer': table?.tableFooterTemplate || footerTemplate\n    }\"\n    [style.top.px]=\"styles.headerHeight\"\n    [itemSize]=\"styles.lineHeight\"\n    [minBufferPx]=\"styles.lineHeight * 10\"\n    [maxBufferPx]=\"styles.lineHeight * 20\"\n    (scrolledIndexChange)=\"scrolledIndexChange($event)\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of flatItems; trackBy: trackBy\"></ng-container>\n    <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\" [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\n      <div class=\"gantt-side-container\">\n        <div class=\"gantt-table\">\n          <gantt-table-body\n            #ganttTableBody\n            [flatItems]=\"flatItems\"\n            [viewportItems]=\"viewportItems\"\n            [columns]=\"columns\"\n            [groupTemplate]=\"groupTemplate\"\n            [emptyTemplate]=\"table.tableEmptyTemplate || tableEmptyTemplate\"\n            [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n            [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n            [draggable]=\"table.draggable\"\n            [dropEnterPredicate]=\"table.dropEnterPredicate\"\n            (dragDropped)=\"table.dragDropped.emit($event)\"\n            (dragStarted)=\"itemDragStarted($event)\"\n            (dragEnded)=\"itemDragEnded($event)\"\n            (itemClick)=\"selectItem($event)\"\n          >\n          </gantt-table-body>\n        </div>\n      </div>\n    </div>\n    <div class=\"gantt-container\">\n      <gantt-calendar-grid\n        [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"\n        [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n      ></gantt-calendar-grid>\n      <div class=\"gantt-main\">\n        <gantt-main\n          [ganttRoot]=\"ganttRoot\"\n          [flatItems]=\"flatItems\"\n          [viewportItems]=\"viewportItems\"\n          [groupHeaderTemplate]=\"groupHeaderTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [barTemplate]=\"barTemplate\"\n          [rangeTemplate]=\"rangeTemplate\"\n          [baselineTemplate]=\"baselineTemplate\"\n          [quickTimeFocus]=\"quickTimeFocus\"\n          (barClick)=\"barClick.emit($event)\"\n          (lineClick)=\"lineClick.emit($event)\"\n        >\n        </gantt-main>\n      </div>\n    </div>\n  </cdk-virtual-scroll-viewport>\n\n  <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n\n  <gantt-scrollbar\n    [ganttRoot]=\"ganttRoot\"\n    [hasFooter]=\"!!table?.tableFooterTemplate\"\n    [tableWidth]=\"tableHeader.tableWidth\"\n    [tableScrollWidth]=\"tableScrollWidth()\"\n  ></gantt-scrollbar>\n\n  @if (table?.tableFooterTemplate || footerTemplate) {\n    <div\n      class=\"gantt-footer\"\n      cdkScrollable\n      [style.right.px]=\"ganttRoot.verticalScrollbarWidth\"\n      [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n    >\n      @if (table?.tableFooterTemplate) {\n        <div class=\"gantt-table-footer\" [style.width.px]=\"tableHeader.tableWidth + 1\">\n          <ng-template [ngTemplateOutlet]=\"table?.tableFooterTemplate\" [ngTemplateOutletContext]=\"{ columns: columns }\"> </ng-template>\n        </div>\n      }\n      @if (footerTemplate) {\n        <div class=\"gantt-container-footer\">\n          <ng-template [ngTemplateOutlet]=\"footerTemplate\"> </ng-template>\n        </div>\n      }\n    </div>\n  }\n</ngx-gantt-root>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$1.ViewportRuler }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [GANTT_GLOBAL_CONFIG]
@@ -4858,6 +4876,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
             }], virtualScroll: [{
                 type: ViewChild,
                 args: [CdkVirtualScrollViewport]
+            }], ganttTableBody: [{
+                type: ViewChild,
+                args: ['ganttTableBody', { static: true }]
             }] } });
 
 class NgxGanttModule {