@worktile/gantt 19.0.5 → 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/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';
@@ -4153,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\">\n    <div class=\"h-100\" [style.width.px]=\"ganttRoot.ganttUpper['ganttTableBody']?.elementRef?.nativeElement?.offsetWidth - 1 || 0\"></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"] }] }); }
+    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\">\n    <div class=\"h-100\" [style.width.px]=\"ganttRoot.ganttUpper['ganttTableBody']?.elementRef?.nativeElement?.offsetWidth - 1 || 0\"></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" }]
+            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() { }
@@ -4548,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;
@@ -4607,6 +4605,7 @@ class NgxGanttComponent extends GanttUpper {
                 this.computeTempDataRefs();
             });
         }
+        this.initScrollContainerObserver();
     }
     ngAfterViewChecked() {
         if (this.virtualScrollEnabled && this.viewportRuler && this.virtualScroll.getRenderedRange().end > 0) {
@@ -4772,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: [
             {
@@ -4782,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 }, { 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  ></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,
@@ -4810,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            #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  ></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]