@worktile/gantt 19.0.0 → 19.0.1

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

@@ -1,15 +1,16 @@
-import { TemplateRef, QueryList, OnInit, EventEmitter, OnDestroy, ChangeDetectorRef, AfterViewInit } from '@angular/core';
-import { GanttItemInternal, GanttGroupInternal, GanttSelectedEvent, GanttTableDragEnterPredicateContext, GanttTableDragDroppedEvent, GanttTableDragStartedEvent, GanttTableDragEndedEvent } from '../../../class';
-import { NgxGanttTableColumnComponent } from '../../../table/gantt-column.component';
+import { CdkDrag, CdkDragDrop, CdkDragEnd, CdkDragMove, CdkDragStart } from '@angular/cdk/drag-drop';
+import { AfterViewInit, ChangeDetectorRef, 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';
-import { CdkDrag, CdkDragDrop, CdkDragEnd, CdkDragMove, CdkDragStart } from '@angular/cdk/drag-drop';
+import { NgxGanttTableColumnComponent } from '../../../table/gantt-column.component';
 import * as i0 from "@angular/core";
 export declare class GanttTableBodyComponent implements OnInit, OnDestroy, AfterViewInit {
     gantt: GanttAbstractComponent;
     ganttUpper: GanttUpper;
     private cdr;
     private document;
+    private ngZone;
     private _viewportItems;
     set viewportItems(data: (GanttGroupInternal | GanttItemInternal)[]);
     get viewportItems(): (GanttGroupInternal | GanttItemInternal)[];
@@ -35,9 +36,14 @@ export declare class GanttTableBodyComponent implements OnInit, OnDestroy, After
     private itemDragMoved;
     private itemDropTarget;
     private destroy$;
-    constructor(gantt: GanttAbstractComponent, ganttUpper: GanttUpper, cdr: ChangeDetectorRef, document: Document);
+    sideContainer: Element;
+    headerContainer: Element;
+    footerContainer: Element;
+    constructor(gantt: GanttAbstractComponent, ganttUpper: GanttUpper, cdr: ChangeDetectorRef, document: Document, ngZone: NgZone);
     ngOnInit(): void;
     ngAfterViewInit(): void;
+    initialize(): void;
+    private monitorScrollChange;
     expandGroup(group: GanttGroupInternal): void;
     expandChildren(event: MouseEvent, item: GanttItemInternal): void;
     onItemDragStarted(event: CdkDragStart<GanttItemInternal>): void;

package/components/table/gantt-table.scss

@@ -10,8 +10,15 @@
     border-right: 1px solid variables.$gantt-border-color;
     box-sizing: border-box;
     position: relative;
+    flex-shrink: 0;
+
+    &:nth-last-child(2) {
+      border-right: none;
+    }
 
     &:last-child {
+      padding: 0;
+      border: 1px solid variables.$gantt-border-color;
       border-right: none;
     }
   }
@@ -60,7 +67,12 @@
     display: flex;
     padding: variables.$gantt-table-td-padding;
 
+    &:nth-last-child(2) {
+      border-right: none;
+    }
     &:last-child {
+      padding: 0;
+      border: 1px solid variables.$gantt-border-color;
       border-right: none;
     }
   }
@@ -174,6 +186,13 @@
 
   .gantt-table-header-container {
     display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
   @include gantt-table-item();
@@ -247,6 +266,7 @@
   bottom: 0;
   cursor: ew-resize;
   height: 5000px;
+  z-index: 2;
 
   &:hover {
     background: variables.$gantt-table-header-drag-line-color;
@@ -255,7 +275,7 @@
 
 .column-resize-handle {
   height: unset;
-  z-index: 1;
+  z-index: 2;
 }
 
 .table-resize-auxiliary-line {

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

@@ -1,16 +1,17 @@
-import { QueryList, OnInit, ElementRef, OnDestroy, ChangeDetectorRef } from '@angular/core';
-import { NgxGanttTableColumnComponent } from '../../../table/gantt-column.component';
 import { CdkDragEnd, CdkDragMove, CdkDragStart } from '@angular/cdk/drag-drop';
+import { ChangeDetectorRef, ElementRef, OnDestroy, OnInit, QueryList } from '@angular/core';
 import { GanttAbstractComponent } from '../../../gantt-abstract';
+import { NgxGanttTableColumnComponent } from '../../../table/gantt-column.component';
 import * as i0 from "@angular/core";
 export declare const defaultColumnWidth = 100;
 export declare const minColumnWidth = 80;
 export declare class GanttTableHeaderComponent implements OnInit, OnDestroy {
     private elementRef;
-    private gantt;
+    gantt: GanttAbstractComponent;
     private cdr;
     dragStartLeft: number;
     tableWidth: number;
+    customWidth: number;
     private unsubscribe$;
     columns: QueryList<NgxGanttTableColumnComponent>;
     resizeLineElementRef: ElementRef<HTMLElement>;
@@ -27,6 +28,7 @@ export declare class GanttTableHeaderComponent implements OnInit, OnDestroy {
     onOverallResizeEnded(event: CdkDragEnd): void;
     private showAuxiliaryLine;
     private hideAuxiliaryLine;
+    private getCalcWidth;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GanttTableHeaderComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<GanttTableHeaderComponent, "gantt-table-header", never, { "columns": { "alias": "columns"; "required": false; }; }, {}, never, never, true, never>;

package/fesm2022/worktile-gantt.mjs

@@ -2043,7 +2043,7 @@ function createSvgElement(qualifiedName, className) {
 }
 class GanttBarDrag {
     get dragDisabled() {
-        return !this.item().draggable || !this.ganttUpper.draggable;
+        return !this.item()?.draggable || !this.ganttUpper.draggable;
     }
     get linkDragDisabled() {
         return !this.item().linkable || !this.ganttUpper.linkable;
@@ -3647,8 +3647,9 @@ class GanttTableHeaderComponent {
     ngOnInit() {
         this.columnsChange();
         this.columns.changes.pipe(takeUntil$1(this.unsubscribe$)).subscribe(() => {
-            this.columnsChange();
-            this.gantt.cdr.detectChanges();
+            if (!this.gantt?.table?.width && !this.customWidth) {
+                this.columnsChange();
+            }
         });
     }
     columnsChange() {
@@ -3659,7 +3660,8 @@ class GanttTableHeaderComponent {
             }
             tableWidth += Number(column.columnWidth.replace('px', ''));
         });
-        this.tableWidth = tableWidth;
+        this.tableWidth = this.gantt?.table?.width ?? this.customWidth ?? this.getCalcWidth(tableWidth);
+        this.gantt.cdr.detectChanges();
     }
     dragFixed(config) {
         if (config.movedWidth < config.minWidth) {
@@ -3708,7 +3710,7 @@ class GanttTableHeaderComponent {
         if (this.gantt.table) {
             this.gantt.table.columnChanges.emit({ columns: this.columns });
         }
-        this.tableWidth = this.tableWidth - beforeWidth + columnWidth;
+        this.tableWidth = this.gantt?.table?.width ?? this.customWidth ?? this.getCalcWidth(this.tableWidth - beforeWidth + columnWidth);
         this.hideAuxiliaryLine();
         event.source.reset();
     }
@@ -3717,17 +3719,10 @@ class GanttTableHeaderComponent {
         const left = target.getBoundingClientRect().left;
         const tableWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
         const dragWidth = left - this.dragStartLeft;
-        let tempWidth = 0;
-        this.columns.forEach((column) => {
-            const lastColumnWidth = parseInt(column.columnWidth, 10);
-            const distributeWidth = parseInt(String(dragWidth * (lastColumnWidth / tableWidth)), 10);
-            const columnWidth = Math.max(lastColumnWidth + distributeWidth || 0, minColumnWidth);
-            column.columnWidth = coerceCssPixelValue(columnWidth);
-            tempWidth += columnWidth;
-        });
-        this.tableWidth = tempWidth;
+        this.tableWidth = this.getCalcWidth(parseInt(tableWidth + dragWidth, 10));
+        this.customWidth = this.tableWidth;
         if (this.gantt.table) {
-            this.gantt.table.columnChanges.emit({ columns: this.columns });
+            this.gantt.table.resizeChange.emit(this.tableWidth);
         }
         this.hideAuxiliaryLine();
         event.source.reset();
@@ -3742,16 +3737,19 @@ class GanttTableHeaderComponent {
     hideAuxiliaryLine() {
         this.resizeLineElementRef.nativeElement.style.display = 'none';
     }
+    getCalcWidth(width) {
+        return this.gantt.table?.maxWidth && width > this.gantt.table?.maxWidth ? this.gantt.table?.maxWidth : width;
+    }
     ngOnDestroy() {
         this.unsubscribe$.next();
         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\">\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>\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\"></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\">\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>\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\"></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]
@@ -3783,11 +3781,12 @@ class GanttTableBodyComponent {
     get viewportItems() {
         return this._viewportItems;
     }
-    constructor(gantt, ganttUpper, cdr, document) {
+    constructor(gantt, ganttUpper, cdr, document, ngZone) {
         this.gantt = gantt;
         this.ganttUpper = ganttUpper;
         this.cdr = cdr;
         this.document = document;
+        this.ngZone = ngZone;
         this.draggable = false;
         this.dragDropped = new EventEmitter();
         this.dragStarted = new EventEmitter();
@@ -3817,6 +3816,7 @@ class GanttTableBodyComponent {
         });
     }
     ngAfterViewInit() {
+        this.initialize();
         this.cdkDrags.changes
             .pipe(startWith$1(this.cdkDrags), takeUntil$1(this.destroy$))
             .subscribe((drags) => {
@@ -3836,6 +3836,32 @@ class GanttTableBodyComponent {
             this.onItemDragMoved(event);
         });
     }
+    initialize() {
+        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.monitorScrollChange();
+    }
+    monitorScrollChange() {
+        const scrollObservers = [
+            fromEvent(this.sideContainer, 'scroll', passiveListenerOptions),
+            fromEvent(this.headerContainer, '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);
+            }
+        }));
+    }
     expandGroup(group) {
         this.gantt.expandGroup(group);
     }
@@ -4030,12 +4056,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 }], 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          <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.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" }] }); }
 }
 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          <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\"></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]
@@ -4045,7 +4071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                 }] }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }], propDecorators: { viewportItems: [{
+                }] }, { type: i0.NgZone }], propDecorators: { viewportItems: [{
                 type: Input
             }], flatItems: [{
                 type: Input
@@ -4119,6 +4145,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                 args: ['style.top']
             }] } });
 
+class GanttScrollbarComponent {
+    constructor(ganttUpper) {
+        this.ganttUpper = ganttUpper;
+        this.hasFooter = false;
+    }
+    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"] }] }); }
+}
+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" }]
+        }], ctorParameters: () => [{ type: GanttUpper, decorators: [{
+                    type: Inject,
+                    args: [GANTT_UPPER_TOKEN]
+                }] }], propDecorators: { hasFooter: [{
+                type: Input
+            }], tableWidth: [{
+                type: Input
+            }], ganttRoot: [{
+                type: Input
+            }] } });
+
 class GanttPrintService {
     constructor() { }
     setInlineStyles(targetElem) {
@@ -4413,10 +4461,11 @@ class NgxGanttTableComponent {
         this.dragStarted = new EventEmitter();
         this.dragEnded = new EventEmitter();
         this.columnChanges = new EventEmitter();
+        this.resizeChange = new EventEmitter();
         this.itemClick = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: NgxGanttTableComponent, isStandalone: true, selector: "ngx-gantt-table", inputs: { draggable: "draggable", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", dragStarted: "dragStarted", dragEnded: "dragEnded", columnChanges: "columnChanges", itemClick: "itemClick" }, queries: [{ propertyName: "rowBeforeTemplate", first: true, predicate: ["rowBeforeSlot"], descendants: true, static: true }, { propertyName: "rowAfterTemplate", first: true, predicate: ["rowAfterSlot"], descendants: true, static: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "tableFooterTemplate", first: true, predicate: ["tableFooter"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: NgxGanttTableComponent, isStandalone: true, selector: "ngx-gantt-table", inputs: { draggable: "draggable", maxWidth: "maxWidth", width: "width", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", dragStarted: "dragStarted", dragEnded: "dragEnded", columnChanges: "columnChanges", resizeChange: "resizeChange", itemClick: "itemClick" }, queries: [{ propertyName: "rowBeforeTemplate", first: true, predicate: ["rowBeforeSlot"], descendants: true, static: true }, { propertyName: "rowAfterTemplate", first: true, predicate: ["rowAfterSlot"], descendants: true, static: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "tableFooterTemplate", first: true, predicate: ["tableFooter"], descendants: true, static: true }, { propertyName: "settingsSlot", first: true, predicate: ["settingsSlot"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttTableComponent, decorators: [{
             type: Component,
@@ -4427,6 +4476,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                 }]
         }], propDecorators: { draggable: [{
                 type: Input
+            }], maxWidth: [{
+                type: Input
+            }], width: [{
+                type: Input
             }], dropEnterPredicate: [{
                 type: Input
             }], dragDropped: [{
@@ -4437,6 +4490,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                 type: Output
             }], columnChanges: [{
                 type: Output
+            }], resizeChange: [{
+                type: Output
             }], itemClick: [{
                 type: Output
             }], rowBeforeTemplate: [{
@@ -4451,28 +4506,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
             }], tableFooterTemplate: [{
                 type: ContentChild,
                 args: ['tableFooter', { static: true }]
-            }] } });
-
-class GanttScrollbarComponent {
-    constructor(ganttUpper) {
-        this.ganttUpper = ganttUpper;
-        this.hasFooter = false;
-    }
-    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"] }] }); }
-}
-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" }]
-        }], ctorParameters: () => [{ type: GanttUpper, decorators: [{
-                    type: Inject,
-                    args: [GANTT_UPPER_TOKEN]
-                }] }], propDecorators: { hasFooter: [{
-                type: Input
-            }], tableWidth: [{
-                type: Input
-            }], ganttRoot: [{
-                type: Input
+            }], settingsSlot: [{
+                type: ContentChild,
+                args: ['settingsSlot', { static: true }]
             }] } });
 
 class NgxGanttComponent extends GanttUpper {
@@ -4704,6 +4740,11 @@ class NgxGanttComponent extends GanttUpper {
             count: this.flatItems.length
         });
     }
+    changeView(type) {
+        super.changeView(type);
+        this.viewportItems = this.flatItems.slice(this.rangeStart, this.rangeEnd);
+        this.computeTempDataRefs();
+    }
     expandGroups(expanded) {
         this.groups.forEach((group) => {
             group.setExpand(expanded);
@@ -4736,7 +4777,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 class=\"gantt-footer\" [style.right.px]=\"ganttRoot.verticalScrollbarWidth\" [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\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 }], 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttComponent, decorators: [{
             type: Component,
@@ -4764,7 +4805,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 class=\"gantt-footer\" [style.right.px]=\"ganttRoot.verticalScrollbarWidth\" [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\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            [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" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$1.ViewportRuler }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [GANTT_GLOBAL_CONFIG]