@masterteam/timeline 0.0.9 → 0.0.11

package/fesm2022/masterteam-timeline.mjs

@@ -9,15 +9,14 @@ import { Tooltip } from 'primeng/tooltip';
 import { Icon } from '@masterteam/icons';
 import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { Button } from '@masterteam/components/button';
 import { SelectField } from '@masterteam/components/select-field';
 
 class TimelineGanttTemplateDirective {
     templateRef = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineGanttTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: TimelineGanttTemplateDirective, isStandalone: true, selector: "ng-template[mtTimelineGantt]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TimelineGanttTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: TimelineGanttTemplateDirective, isStandalone: true, selector: "ng-template[mtTimelineGantt]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineGanttTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TimelineGanttTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[mtTimelineGantt]',
@@ -28,10 +27,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
 class TimelineColumnTemplateDirective {
     key = '';
     templateRef = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineColumnTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: TimelineColumnTemplateDirective, isStandalone: true, selector: "ng-template[mtTimelineColumn]", inputs: { key: ["mtTimelineColumn", "key"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TimelineColumnTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: TimelineColumnTemplateDirective, isStandalone: true, selector: "ng-template[mtTimelineColumn]", inputs: { key: ["mtTimelineColumn", "key"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineColumnTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TimelineColumnTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[mtTimelineColumn]',
@@ -44,10 +43,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
 
 class TimelinePopoverTemplateDirective {
     templateRef = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelinePopoverTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: TimelinePopoverTemplateDirective, isStandalone: true, selector: "ng-template[mtTimelinePopover]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TimelinePopoverTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: TimelinePopoverTemplateDirective, isStandalone: true, selector: "ng-template[mtTimelinePopover]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelinePopoverTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TimelinePopoverTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[mtTimelinePopover]',
@@ -57,10 +56,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
 
 class TimelineProgressTemplateDirective {
     templateRef = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineProgressTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: TimelineProgressTemplateDirective, isStandalone: true, selector: "ng-template[mtTimelineProgress]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TimelineProgressTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: TimelineProgressTemplateDirective, isStandalone: true, selector: "ng-template[mtTimelineProgress]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineProgressTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TimelineProgressTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[mtTimelineProgress]',
@@ -77,13 +76,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
  */
 class TimelineDefaultPopover {
     // Resolved timeline row currently selected by user.
-    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
     // Requests parent popover host to close.
     requestClose = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineDefaultPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: TimelineDefaultPopover, isStandalone: true, selector: "mt-timeline-default-popover", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { requestClose: "requestClose" }, ngImport: i0, template: "<!-- Default details view shown inside PrimeNG popover. -->\r\n<div class=\"w-[22.5rem]\" *transloco=\"let t; prefix: 'timeline'\">\r\n  <div class=\"mb-3 flex items-center justify-between\">\r\n    <h4 class=\"text-sm font-semibold\">{{ t(\"level-details\") }}</h4>\r\n    <button\r\n      type=\"button\"\r\n      class=\"rounded border border-surface px-2 py-1 text-xs\"\r\n      (click)=\"requestClose.emit()\"\r\n    >\r\n      {{ t(\"close\") }}\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"grid gap-2 text-sm sm:grid-cols-2\">\r\n    <div>\r\n      <span class=\"font-semibold\">{{ t(\"name\") }}:</span> {{ item().title }}\r\n    </div>\r\n    <div>\r\n      <span class=\"font-semibold\">{{ t(\"level\") }}:</span>\r\n      {{ item().levelDescription }}\r\n    </div>\r\n    <div>\r\n      <span class=\"font-semibold\">{{ t(\"owner\") }}:</span> {{ item().owner }}\r\n    </div>\r\n    <div>\r\n      <span class=\"font-semibold\">{{ t(\"status\") }}:</span>\r\n      <span [style.color]=\"item().statusColor\">{{ item().statusName }}</span>\r\n    </div>\r\n    <div>\r\n      <span class=\"font-semibold\">{{ t(\"progress\") }}:</span>\r\n      {{ item().progressLabel }}\r\n    </div>\r\n    <div>\r\n      <span class=\"font-semibold\">{{ t(\"range\") }}:</span> {{ item().phase }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TimelineDefaultPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: TimelineDefaultPopover, isStandalone: true, selector: "mt-timeline-default-popover", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { requestClose: "requestClose" }, ngImport: i0, template: "<!-- Default details view shown inside PrimeNG popover. -->\r\n<div class=\"w-[22.5rem]\" *transloco=\"let t; prefix: 'timeline'\">\r\n  <div class=\"mb-3 flex items-center justify-between\">\r\n    <h4 class=\"text-sm font-semibold\">{{ t(\"level-details\") }}</h4>\r\n    <button\r\n      type=\"button\"\r\n      class=\"rounded border border-surface px-2 py-1 text-xs\"\r\n      (click)=\"requestClose.emit()\"\r\n    >\r\n      {{ t(\"close\") }}\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"grid gap-2 text-sm sm:grid-cols-2\">\r\n    <div>\r\n      <span class=\"font-semibold\">{{ t(\"name\") }}:</span> {{ item().title }}\r\n    </div>\r\n    <div>\r\n      <span class=\"font-semibold\">{{ t(\"level\") }}:</span>\r\n      {{ item().levelDescription }}\r\n    </div>\r\n    <div>\r\n      <span class=\"font-semibold\">{{ t(\"owner\") }}:</span> {{ item().owner }}\r\n    </div>\r\n    <div>\r\n      <span class=\"font-semibold\">{{ t(\"status\") }}:</span>\r\n      <span [style.color]=\"item().statusColor\">{{ item().statusName }}</span>\r\n    </div>\r\n    <div>\r\n      <span class=\"font-semibold\">{{ t(\"progress\") }}:</span>\r\n      {{ item().progressLabel }}\r\n    </div>\r\n    <div>\r\n      <span class=\"font-semibold\">{{ t(\"range\") }}:</span> {{ item().phase }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineDefaultPopover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TimelineDefaultPopover, decorators: [{
             type: Component,
             args: [{ selector: 'mt-timeline-default-popover', standalone: true, imports: [TranslocoDirective], template: "<!-- Default details view shown inside PrimeNG popover. -->\r\n<div class=\"w-[22.5rem]\" *transloco=\"let t; prefix: 'timeline'\">\r\n  <div class=\"mb-3 flex items-center justify-between\">\r\n    <h4 class=\"text-sm font-semibold\">{{ t(\"level-details\") }}</h4>\r\n    <button\r\n      type=\"button\"\r\n      class=\"rounded border border-surface px-2 py-1 text-xs\"\r\n      (click)=\"requestClose.emit()\"\r\n    >\r\n      {{ t(\"close\") }}\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"grid gap-2 text-sm sm:grid-cols-2\">\r\n    <div>\r\n      <span class=\"font-semibold\">{{ t(\"name\") }}:</span> {{ item().title }}\r\n    </div>\r\n    <div>\r\n      <span class=\"font-semibold\">{{ t(\"level\") }}:</span>\r\n      {{ item().levelDescription }}\r\n    </div>\r\n    <div>\r\n      <span class=\"font-semibold\">{{ t(\"owner\") }}:</span> {{ item().owner }}\r\n    </div>\r\n    <div>\r\n      <span class=\"font-semibold\">{{ t(\"status\") }}:</span>\r\n      <span [style.color]=\"item().statusColor\">{{ item().statusName }}</span>\r\n    </div>\r\n    <div>\r\n      <span class=\"font-semibold\">{{ t(\"progress\") }}:</span>\r\n      {{ item().progressLabel }}\r\n    </div>\r\n    <div>\r\n      <span class=\"font-semibold\">{{ t(\"range\") }}:</span> {{ item().phase }}\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], requestClose: [{ type: i0.Output, args: ["requestClose"] }] } });
@@ -110,14 +109,14 @@ class TimelineGanttHeader {
         'Nov',
         'Dec',
     ];
-    timelineMode = input('quarterly', ...(ngDevMode ? [{ debugName: "timelineMode" }] : []));
-    resolvedColumns = input([], ...(ngDevMode ? [{ debugName: "resolvedColumns" }] : []));
-    orderedGanttSegments = input([], ...(ngDevMode ? [{ debugName: "orderedGanttSegments" }] : []));
-    ganttCanvasWidth = input(0, ...(ngDevMode ? [{ debugName: "ganttCanvasWidth" }] : []));
-    effectiveGanttSegmentWidthPx = input(96, ...(ngDevMode ? [{ debugName: "effectiveGanttSegmentWidthPx" }] : []));
-    zoomToFit = input(false, ...(ngDevMode ? [{ debugName: "zoomToFit" }] : []));
-    renderColumns = input(true, ...(ngDevMode ? [{ debugName: "renderColumns" }] : []));
-    renderTimeline = input(true, ...(ngDevMode ? [{ debugName: "renderTimeline" }] : []));
+    timelineMode = input('quarterly', ...(ngDevMode ? [{ debugName: "timelineMode" }] : /* istanbul ignore next */ []));
+    resolvedColumns = input([], ...(ngDevMode ? [{ debugName: "resolvedColumns" }] : /* istanbul ignore next */ []));
+    orderedGanttSegments = input([], ...(ngDevMode ? [{ debugName: "orderedGanttSegments" }] : /* istanbul ignore next */ []));
+    ganttCanvasWidth = input(0, ...(ngDevMode ? [{ debugName: "ganttCanvasWidth" }] : /* istanbul ignore next */ []));
+    effectiveGanttSegmentWidthPx = input(96, ...(ngDevMode ? [{ debugName: "effectiveGanttSegmentWidthPx" }] : /* istanbul ignore next */ []));
+    zoomToFit = input(false, ...(ngDevMode ? [{ debugName: "zoomToFit" }] : /* istanbul ignore next */ []));
+    renderColumns = input(true, ...(ngDevMode ? [{ debugName: "renderColumns" }] : /* istanbul ignore next */ []));
+    renderTimeline = input(true, ...(ngDevMode ? [{ debugName: "renderTimeline" }] : /* istanbul ignore next */ []));
     // Converts monthly segments from "M N" to calendar abbreviations.
     resolveSegmentTitle(segment) {
         if (this.timelineMode() !== 'monthly') {
@@ -140,10 +139,10 @@ class TimelineGanttHeader {
     resolveSegmentTooltip(segment) {
         return this.resolveSegmentTitleAttr(segment);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineGanttHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: TimelineGanttHeader, isStandalone: true, selector: "mt-timeline-gantt-header", inputs: { timelineMode: { classPropertyName: "timelineMode", publicName: "timelineMode", isSignal: true, isRequired: false, transformFunction: null }, resolvedColumns: { classPropertyName: "resolvedColumns", publicName: "resolvedColumns", isSignal: true, isRequired: false, transformFunction: null }, orderedGanttSegments: { classPropertyName: "orderedGanttSegments", publicName: "orderedGanttSegments", isSignal: true, isRequired: false, transformFunction: null }, ganttCanvasWidth: { classPropertyName: "ganttCanvasWidth", publicName: "ganttCanvasWidth", isSignal: true, isRequired: false, transformFunction: null }, effectiveGanttSegmentWidthPx: { classPropertyName: "effectiveGanttSegmentWidthPx", publicName: "effectiveGanttSegmentWidthPx", isSignal: true, isRequired: false, transformFunction: null }, zoomToFit: { classPropertyName: "zoomToFit", publicName: "zoomToFit", isSignal: true, isRequired: false, transformFunction: null }, renderColumns: { classPropertyName: "renderColumns", publicName: "renderColumns", isSignal: true, isRequired: false, transformFunction: null }, renderTimeline: { classPropertyName: "renderTimeline", publicName: "renderTimeline", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block min-w-0" }, ngImport: i0, template: "<!-- Sticky metadata columns + timeline period header. -->\r\n<div class=\"flex border-b border-surface bg-surface-50\">\r\n  <!-- Left sticky columns (title/status/custom columns). -->\r\n  @if (renderColumns()) {\r\n    @for (column of resolvedColumns(); track $index) {\r\n      <div\r\n        class=\"shrink-0 border-e border-surface bg-surface-50 p-3 text-xs font-semibold uppercase text-surface-600\"\r\n        [style.width.px]=\"column.widthPx\"\r\n        [class.text-start]=\"column.position === 'start'\"\r\n        [class.text-center]=\"column.position === 'center'\"\r\n        [class.text-end]=\"column.position === 'end'\"\r\n      >\r\n        {{ column.header }}\r\n      </div>\r\n    }\r\n  }\r\n\r\n  <!-- Time scale columns (month/quarter/half/year). -->\r\n  @if (renderTimeline()) {\r\n    <div\r\n      class=\"flex shrink-0 items-center bg-surface-50\"\r\n      [style.width.px]=\"ganttCanvasWidth()\"\r\n    >\r\n      @for (column of orderedGanttSegments(); track $index) {\r\n        <div\r\n          class=\"shrink-0 overflow-hidden border-e border-surface px-2 py-3 text-center text-xs font-semibold uppercase text-surface-600 whitespace-nowrap\"\r\n          [style.width.px]=\"effectiveGanttSegmentWidthPx()\"\r\n          [pTooltip]=\"resolveSegmentTooltip(column)\"\r\n          tooltipPosition=\"top\"\r\n          [tooltipDisabled]=\"!zoomToFit()\"\r\n        >\r\n          {{ resolveSegmentTitle(column) }}\r\n          @if (\r\n            shouldRenderSegmentYear() &&\r\n            column.year !== undefined &&\r\n            column.year !== null\r\n          ) {\r\n            {{ column.year }}\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TimelineGanttHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TimelineGanttHeader, isStandalone: true, selector: "mt-timeline-gantt-header", inputs: { timelineMode: { classPropertyName: "timelineMode", publicName: "timelineMode", isSignal: true, isRequired: false, transformFunction: null }, resolvedColumns: { classPropertyName: "resolvedColumns", publicName: "resolvedColumns", isSignal: true, isRequired: false, transformFunction: null }, orderedGanttSegments: { classPropertyName: "orderedGanttSegments", publicName: "orderedGanttSegments", isSignal: true, isRequired: false, transformFunction: null }, ganttCanvasWidth: { classPropertyName: "ganttCanvasWidth", publicName: "ganttCanvasWidth", isSignal: true, isRequired: false, transformFunction: null }, effectiveGanttSegmentWidthPx: { classPropertyName: "effectiveGanttSegmentWidthPx", publicName: "effectiveGanttSegmentWidthPx", isSignal: true, isRequired: false, transformFunction: null }, zoomToFit: { classPropertyName: "zoomToFit", publicName: "zoomToFit", isSignal: true, isRequired: false, transformFunction: null }, renderColumns: { classPropertyName: "renderColumns", publicName: "renderColumns", isSignal: true, isRequired: false, transformFunction: null }, renderTimeline: { classPropertyName: "renderTimeline", publicName: "renderTimeline", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block min-w-0" }, ngImport: i0, template: "<!-- Sticky metadata columns + timeline period header. -->\r\n<div class=\"flex border-b border-surface bg-surface-50\">\r\n  <!-- Left sticky columns (title/status/custom columns). -->\r\n  @if (renderColumns()) {\r\n    @for (column of resolvedColumns(); track $index) {\r\n      <div\r\n        class=\"shrink-0 border-e border-surface bg-surface-50 p-3 text-xs font-semibold uppercase text-surface-600\"\r\n        [style.width.px]=\"column.widthPx\"\r\n        [class.text-start]=\"column.position === 'start'\"\r\n        [class.text-center]=\"column.position === 'center'\"\r\n        [class.text-end]=\"column.position === 'end'\"\r\n      >\r\n        {{ column.header }}\r\n      </div>\r\n    }\r\n  }\r\n\r\n  <!-- Time scale columns (month/quarter/half/year). -->\r\n  @if (renderTimeline()) {\r\n    <div\r\n      class=\"flex shrink-0 items-center bg-surface-50\"\r\n      [style.width.px]=\"ganttCanvasWidth()\"\r\n    >\r\n      @for (column of orderedGanttSegments(); track $index) {\r\n        <div\r\n          class=\"shrink-0 overflow-hidden border-e border-surface px-2 py-3 text-center text-xs font-semibold uppercase text-surface-600 whitespace-nowrap\"\r\n          [style.width.px]=\"effectiveGanttSegmentWidthPx()\"\r\n          [pTooltip]=\"resolveSegmentTooltip(column)\"\r\n          tooltipPosition=\"top\"\r\n          [tooltipDisabled]=\"!zoomToFit()\"\r\n        >\r\n          {{ resolveSegmentTitle(column) }}\r\n          @if (\r\n            shouldRenderSegmentYear() &&\r\n            column.year !== undefined &&\r\n            column.year !== null\r\n          ) {\r\n            {{ column.year }}\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineGanttHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TimelineGanttHeader, decorators: [{
             type: Component,
             args: [{ selector: 'mt-timeline-gantt-header', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, Tooltip], host: { class: 'block min-w-0' }, template: "<!-- Sticky metadata columns + timeline period header. -->\r\n<div class=\"flex border-b border-surface bg-surface-50\">\r\n  <!-- Left sticky columns (title/status/custom columns). -->\r\n  @if (renderColumns()) {\r\n    @for (column of resolvedColumns(); track $index) {\r\n      <div\r\n        class=\"shrink-0 border-e border-surface bg-surface-50 p-3 text-xs font-semibold uppercase text-surface-600\"\r\n        [style.width.px]=\"column.widthPx\"\r\n        [class.text-start]=\"column.position === 'start'\"\r\n        [class.text-center]=\"column.position === 'center'\"\r\n        [class.text-end]=\"column.position === 'end'\"\r\n      >\r\n        {{ column.header }}\r\n      </div>\r\n    }\r\n  }\r\n\r\n  <!-- Time scale columns (month/quarter/half/year). -->\r\n  @if (renderTimeline()) {\r\n    <div\r\n      class=\"flex shrink-0 items-center bg-surface-50\"\r\n      [style.width.px]=\"ganttCanvasWidth()\"\r\n    >\r\n      @for (column of orderedGanttSegments(); track $index) {\r\n        <div\r\n          class=\"shrink-0 overflow-hidden border-e border-surface px-2 py-3 text-center text-xs font-semibold uppercase text-surface-600 whitespace-nowrap\"\r\n          [style.width.px]=\"effectiveGanttSegmentWidthPx()\"\r\n          [pTooltip]=\"resolveSegmentTooltip(column)\"\r\n          tooltipPosition=\"top\"\r\n          [tooltipDisabled]=\"!zoomToFit()\"\r\n        >\r\n          {{ resolveSegmentTitle(column) }}\r\n          @if (\r\n            shouldRenderSegmentYear() &&\r\n            column.year !== undefined &&\r\n            column.year !== null\r\n          ) {\r\n            {{ column.year }}\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n" }]
         }], propDecorators: { timelineMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "timelineMode", required: false }] }], resolvedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "resolvedColumns", required: false }] }], orderedGanttSegments: [{ type: i0.Input, args: [{ isSignal: true, alias: "orderedGanttSegments", required: false }] }], ganttCanvasWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttCanvasWidth", required: false }] }], effectiveGanttSegmentWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "effectiveGanttSegmentWidthPx", required: false }] }], zoomToFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomToFit", required: false }] }], renderColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderColumns", required: false }] }], renderTimeline: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderTimeline", required: false }] }] } });
@@ -160,14 +159,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
  * already-resolved row geometry and style values.
  */
 class TimelineGanttRow {
-    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
-    resolvedColumns = input([], ...(ngDevMode ? [{ debugName: "resolvedColumns" }] : []));
-    ganttCanvasWidth = input(0, ...(ngDevMode ? [{ debugName: "ganttCanvasWidth" }] : []));
-    laneInsetPx = input(12, ...(ngDevMode ? [{ debugName: "laneInsetPx" }] : []));
-    renderColumns = input(true, ...(ngDevMode ? [{ debugName: "renderColumns" }] : []));
-    renderTimeline = input(true, ...(ngDevMode ? [{ debugName: "renderTimeline" }] : []));
-    columnTemplatesByKey = input(new Map(), ...(ngDevMode ? [{ debugName: "columnTemplatesByKey" }] : []));
-    progressTemplateDirective = input(null, ...(ngDevMode ? [{ debugName: "progressTemplateDirective" }] : []));
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+    resolvedColumns = input([], ...(ngDevMode ? [{ debugName: "resolvedColumns" }] : /* istanbul ignore next */ []));
+    ganttCanvasWidth = input(0, ...(ngDevMode ? [{ debugName: "ganttCanvasWidth" }] : /* istanbul ignore next */ []));
+    laneInsetPx = input(12, ...(ngDevMode ? [{ debugName: "laneInsetPx" }] : /* istanbul ignore next */ []));
+    renderColumns = input(true, ...(ngDevMode ? [{ debugName: "renderColumns" }] : /* istanbul ignore next */ []));
+    renderTimeline = input(true, ...(ngDevMode ? [{ debugName: "renderTimeline" }] : /* istanbul ignore next */ []));
+    columnTemplatesByKey = input(new Map(), ...(ngDevMode ? [{ debugName: "columnTemplatesByKey" }] : /* istanbul ignore next */ []));
+    progressTemplateDirective = input(null, ...(ngDevMode ? [{ debugName: "progressTemplateDirective" }] : /* istanbul ignore next */ []));
     toggleCollapse = output();
     progressClick = output();
     // Forwards collapse toggles to container component.
@@ -278,10 +277,10 @@ class TimelineGanttRow {
             return current[key];
         }, item);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineGanttRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: TimelineGanttRow, isStandalone: true, selector: "mt-timeline-gantt-row", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, resolvedColumns: { classPropertyName: "resolvedColumns", publicName: "resolvedColumns", isSignal: true, isRequired: false, transformFunction: null }, ganttCanvasWidth: { classPropertyName: "ganttCanvasWidth", publicName: "ganttCanvasWidth", isSignal: true, isRequired: false, transformFunction: null }, laneInsetPx: { classPropertyName: "laneInsetPx", publicName: "laneInsetPx", isSignal: true, isRequired: false, transformFunction: null }, renderColumns: { classPropertyName: "renderColumns", publicName: "renderColumns", isSignal: true, isRequired: false, transformFunction: null }, renderTimeline: { classPropertyName: "renderTimeline", publicName: "renderTimeline", isSignal: true, isRequired: false, transformFunction: null }, columnTemplatesByKey: { classPropertyName: "columnTemplatesByKey", publicName: "columnTemplatesByKey", isSignal: true, isRequired: false, transformFunction: null }, progressTemplateDirective: { classPropertyName: "progressTemplateDirective", publicName: "progressTemplateDirective", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleCollapse: "toggleCollapse", progressClick: "progressClick" }, host: { classAttribute: "block min-w-0" }, ngImport: i0, template: "<!-- One gantt data row: sticky metadata cells + progress lane. -->\r\n<div class=\"relative flex\">\r\n  <!-- Left sticky metadata cells. -->\r\n  @if (renderColumns()) {\r\n    @for (column of resolvedColumns(); track $index) {\r\n      <div\r\n        class=\"flex h-16 shrink-0 items-center overflow-hidden border-e border-b border-surface bg-content p-3\"\r\n        [style.width.px]=\"column.widthPx\"\r\n        [class.justify-start]=\"column.position === 'start'\"\r\n        [class.justify-center]=\"column.position === 'center'\"\r\n        [class.justify-end]=\"column.position === 'end'\"\r\n      >\r\n        <!-- Per-column custom template, when provided by consumer. -->\r\n        @if (resolveColumnTemplate(column); as template) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"template\"\r\n            [ngTemplateOutletContext]=\"getColumnTemplateContext(column, item())\"\r\n          ></ng-container>\r\n        } @else {\r\n          <!-- Built-in fallback renderers by column configuration. -->\r\n          @if (column.isTreeColumn) {\r\n            <div\r\n              class=\"flex min-w-0 items-center gap-2\"\r\n              [style.padding-inline-start.px]=\"item().levelDepth * 16\"\r\n            >\r\n              @if (item().hasChildren) {\r\n                <mt-icon\r\n                  class=\"cursor-pointer\"\r\n                  (click)=\"onToggleCollapse(item())\"\r\n                  [icon]=\"collapseIcon(item())\"\r\n                ></mt-icon>\r\n              } @else {\r\n                <span class=\"inline-block w-5\"></span>\r\n              }\r\n              <span class=\"truncate text-sm font-semibold\">\r\n                {{ resolveColumnText(column, item()) }}\r\n              </span>\r\n            </div>\r\n          } @else {\r\n            <span class=\"truncate text-sm\">\r\n              {{ resolveColumnText(column, item()) }}\r\n            </span>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  }\r\n\r\n  <!-- Right timeline canvas cell for progress track/fill. -->\r\n  @if (renderTimeline()) {\r\n    <div\r\n      class=\"relative z-0 h-16 shrink-0 overflow-hidden border-b border-surface py-4\"\r\n      [style.width.px]=\"ganttCanvasWidth()\"\r\n      [style.z-index]=\"1\"\r\n    >\r\n      <div class=\"h-8\"></div>\r\n      <!-- Consumer custom progress template. -->\r\n      @if (progressTemplateDirective(); as template) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"template.templateRef\"\r\n          [ngTemplateOutletContext]=\"getProgressTemplateContext(item())\"\r\n        ></ng-container>\r\n      } @else {\r\n        <!-- Built-in progress renderer. -->\r\n        <div\r\n          class=\"absolute top-1/2 h-7 -translate-y-1/2 cursor-pointer overflow-hidden rounded-full\"\r\n          [style.left.px]=\"\r\n            isRtl() ? null : item().startOffsetPx + laneInsetPx()\r\n          \"\r\n          [style.right.px]=\"\r\n            isRtl() ? item().startOffsetPx + laneInsetPx() : null\r\n          \"\r\n          [style.width.px]=\"item().trackWidthPx\"\r\n          [style.background-color]=\"item().progressTrackColor\"\r\n          [style.z-index]=\"1\"\r\n          [attr.title]=\"item().progressLabel\"\r\n          (click)=\"onProgressClick(item(), $event)\"\r\n        >\r\n          @if (item().progressFillWidthPx > 0) {\r\n            <div\r\n              class=\"h-full rounded-full\"\r\n              [style.width.px]=\"item().progressFillWidthPx\"\r\n              [style.min-width.px]=\"resolveProgressFillMinWidthPx(item())\"\r\n              [style.background-color]=\"item().statusColor\"\r\n            ></div>\r\n          }\r\n\r\n          @if (shouldRenderProgressLabel(item())) {\r\n            <span\r\n              class=\"pointer-events-none absolute top-1/2 z-[1] -translate-y-1/2 rounded-full bg-white px-2 py-0.5 text-[10px] font-semibold text-black shadow-sm\"\r\n              [style.left.px]=\"isRtl() ? null : 8\"\r\n              [style.right.px]=\"isRtl() ? 8 : null\"\r\n              [attr.title]=\"item().progressLabel\"\r\n            >\r\n              {{ item().progressLabel }}\r\n            </span>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TimelineGanttRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TimelineGanttRow, isStandalone: true, selector: "mt-timeline-gantt-row", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, resolvedColumns: { classPropertyName: "resolvedColumns", publicName: "resolvedColumns", isSignal: true, isRequired: false, transformFunction: null }, ganttCanvasWidth: { classPropertyName: "ganttCanvasWidth", publicName: "ganttCanvasWidth", isSignal: true, isRequired: false, transformFunction: null }, laneInsetPx: { classPropertyName: "laneInsetPx", publicName: "laneInsetPx", isSignal: true, isRequired: false, transformFunction: null }, renderColumns: { classPropertyName: "renderColumns", publicName: "renderColumns", isSignal: true, isRequired: false, transformFunction: null }, renderTimeline: { classPropertyName: "renderTimeline", publicName: "renderTimeline", isSignal: true, isRequired: false, transformFunction: null }, columnTemplatesByKey: { classPropertyName: "columnTemplatesByKey", publicName: "columnTemplatesByKey", isSignal: true, isRequired: false, transformFunction: null }, progressTemplateDirective: { classPropertyName: "progressTemplateDirective", publicName: "progressTemplateDirective", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleCollapse: "toggleCollapse", progressClick: "progressClick" }, host: { classAttribute: "block min-w-0" }, ngImport: i0, template: "<!-- One gantt data row: sticky metadata cells + progress lane. -->\r\n<div class=\"relative flex\">\r\n  <!-- Left sticky metadata cells. -->\r\n  @if (renderColumns()) {\r\n    @for (column of resolvedColumns(); track $index) {\r\n      <div\r\n        class=\"flex h-16 shrink-0 items-center overflow-hidden border-e border-b border-surface bg-content p-3\"\r\n        [style.width.px]=\"column.widthPx\"\r\n        [class.justify-start]=\"column.position === 'start'\"\r\n        [class.justify-center]=\"column.position === 'center'\"\r\n        [class.justify-end]=\"column.position === 'end'\"\r\n      >\r\n        <!-- Per-column custom template, when provided by consumer. -->\r\n        @if (resolveColumnTemplate(column); as template) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"template\"\r\n            [ngTemplateOutletContext]=\"getColumnTemplateContext(column, item())\"\r\n          ></ng-container>\r\n        } @else {\r\n          <!-- Built-in fallback renderers by column configuration. -->\r\n          @if (column.isTreeColumn) {\r\n            <div\r\n              class=\"flex min-w-0 items-center gap-2\"\r\n              [style.padding-inline-start.px]=\"item().levelDepth * 16\"\r\n            >\r\n              @if (item().hasChildren) {\r\n                <mt-icon\r\n                  class=\"cursor-pointer\"\r\n                  (click)=\"onToggleCollapse(item())\"\r\n                  [icon]=\"collapseIcon(item())\"\r\n                ></mt-icon>\r\n              } @else {\r\n                <span class=\"inline-block w-5\"></span>\r\n              }\r\n              <span class=\"truncate text-sm font-semibold\">\r\n                {{ resolveColumnText(column, item()) }}\r\n              </span>\r\n            </div>\r\n          } @else {\r\n            <span class=\"truncate text-sm\">\r\n              {{ resolveColumnText(column, item()) }}\r\n            </span>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  }\r\n\r\n  <!-- Right timeline canvas cell for progress track/fill. -->\r\n  @if (renderTimeline()) {\r\n    <div\r\n      class=\"relative z-0 h-16 shrink-0 overflow-hidden border-b border-surface py-4\"\r\n      [style.width.px]=\"ganttCanvasWidth()\"\r\n      [style.z-index]=\"1\"\r\n    >\r\n      <div class=\"h-8\"></div>\r\n      <!-- Consumer custom progress template. -->\r\n      @if (progressTemplateDirective(); as template) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"template.templateRef\"\r\n          [ngTemplateOutletContext]=\"getProgressTemplateContext(item())\"\r\n        ></ng-container>\r\n      } @else {\r\n        <!-- Built-in progress renderer. -->\r\n        <div\r\n          class=\"absolute top-1/2 h-7 -translate-y-1/2 cursor-pointer overflow-hidden rounded-full\"\r\n          [style.left.px]=\"\r\n            isRtl() ? null : item().startOffsetPx + laneInsetPx()\r\n          \"\r\n          [style.right.px]=\"\r\n            isRtl() ? item().startOffsetPx + laneInsetPx() : null\r\n          \"\r\n          [style.width.px]=\"item().trackWidthPx\"\r\n          [style.background-color]=\"item().progressTrackColor\"\r\n          [style.z-index]=\"1\"\r\n          [attr.title]=\"item().progressLabel\"\r\n          (click)=\"onProgressClick(item(), $event)\"\r\n        >\r\n          @if (item().progressFillWidthPx > 0) {\r\n            <div\r\n              class=\"h-full rounded-full\"\r\n              [style.width.px]=\"item().progressFillWidthPx\"\r\n              [style.min-width.px]=\"resolveProgressFillMinWidthPx(item())\"\r\n              [style.background-color]=\"item().statusColor\"\r\n            ></div>\r\n          }\r\n\r\n          @if (shouldRenderProgressLabel(item())) {\r\n            <span\r\n              class=\"pointer-events-none absolute top-1/2 z-[1] -translate-y-1/2 rounded-full bg-white px-2 py-0.5 text-[10px] font-semibold text-black shadow-sm\"\r\n              [style.left.px]=\"isRtl() ? null : 8\"\r\n              [style.right.px]=\"isRtl() ? 8 : null\"\r\n              [attr.title]=\"item().progressLabel\"\r\n            >\r\n              {{ item().progressLabel }}\r\n            </span>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineGanttRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TimelineGanttRow, decorators: [{
             type: Component,
             args: [{ selector: 'mt-timeline-gantt-row', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, Icon, NgTemplateOutlet], host: { class: 'block min-w-0' }, template: "<!-- One gantt data row: sticky metadata cells + progress lane. -->\r\n<div class=\"relative flex\">\r\n  <!-- Left sticky metadata cells. -->\r\n  @if (renderColumns()) {\r\n    @for (column of resolvedColumns(); track $index) {\r\n      <div\r\n        class=\"flex h-16 shrink-0 items-center overflow-hidden border-e border-b border-surface bg-content p-3\"\r\n        [style.width.px]=\"column.widthPx\"\r\n        [class.justify-start]=\"column.position === 'start'\"\r\n        [class.justify-center]=\"column.position === 'center'\"\r\n        [class.justify-end]=\"column.position === 'end'\"\r\n      >\r\n        <!-- Per-column custom template, when provided by consumer. -->\r\n        @if (resolveColumnTemplate(column); as template) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"template\"\r\n            [ngTemplateOutletContext]=\"getColumnTemplateContext(column, item())\"\r\n          ></ng-container>\r\n        } @else {\r\n          <!-- Built-in fallback renderers by column configuration. -->\r\n          @if (column.isTreeColumn) {\r\n            <div\r\n              class=\"flex min-w-0 items-center gap-2\"\r\n              [style.padding-inline-start.px]=\"item().levelDepth * 16\"\r\n            >\r\n              @if (item().hasChildren) {\r\n                <mt-icon\r\n                  class=\"cursor-pointer\"\r\n                  (click)=\"onToggleCollapse(item())\"\r\n                  [icon]=\"collapseIcon(item())\"\r\n                ></mt-icon>\r\n              } @else {\r\n                <span class=\"inline-block w-5\"></span>\r\n              }\r\n              <span class=\"truncate text-sm font-semibold\">\r\n                {{ resolveColumnText(column, item()) }}\r\n              </span>\r\n            </div>\r\n          } @else {\r\n            <span class=\"truncate text-sm\">\r\n              {{ resolveColumnText(column, item()) }}\r\n            </span>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  }\r\n\r\n  <!-- Right timeline canvas cell for progress track/fill. -->\r\n  @if (renderTimeline()) {\r\n    <div\r\n      class=\"relative z-0 h-16 shrink-0 overflow-hidden border-b border-surface py-4\"\r\n      [style.width.px]=\"ganttCanvasWidth()\"\r\n      [style.z-index]=\"1\"\r\n    >\r\n      <div class=\"h-8\"></div>\r\n      <!-- Consumer custom progress template. -->\r\n      @if (progressTemplateDirective(); as template) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"template.templateRef\"\r\n          [ngTemplateOutletContext]=\"getProgressTemplateContext(item())\"\r\n        ></ng-container>\r\n      } @else {\r\n        <!-- Built-in progress renderer. -->\r\n        <div\r\n          class=\"absolute top-1/2 h-7 -translate-y-1/2 cursor-pointer overflow-hidden rounded-full\"\r\n          [style.left.px]=\"\r\n            isRtl() ? null : item().startOffsetPx + laneInsetPx()\r\n          \"\r\n          [style.right.px]=\"\r\n            isRtl() ? item().startOffsetPx + laneInsetPx() : null\r\n          \"\r\n          [style.width.px]=\"item().trackWidthPx\"\r\n          [style.background-color]=\"item().progressTrackColor\"\r\n          [style.z-index]=\"1\"\r\n          [attr.title]=\"item().progressLabel\"\r\n          (click)=\"onProgressClick(item(), $event)\"\r\n        >\r\n          @if (item().progressFillWidthPx > 0) {\r\n            <div\r\n              class=\"h-full rounded-full\"\r\n              [style.width.px]=\"item().progressFillWidthPx\"\r\n              [style.min-width.px]=\"resolveProgressFillMinWidthPx(item())\"\r\n              [style.background-color]=\"item().statusColor\"\r\n            ></div>\r\n          }\r\n\r\n          @if (shouldRenderProgressLabel(item())) {\r\n            <span\r\n              class=\"pointer-events-none absolute top-1/2 z-[1] -translate-y-1/2 rounded-full bg-white px-2 py-0.5 text-[10px] font-semibold text-black shadow-sm\"\r\n              [style.left.px]=\"isRtl() ? null : 8\"\r\n              [style.right.px]=\"isRtl() ? 8 : null\"\r\n              [attr.title]=\"item().progressLabel\"\r\n            >\r\n              {{ item().progressLabel }}\r\n            </span>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n" }]
         }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], resolvedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "resolvedColumns", required: false }] }], ganttCanvasWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttCanvasWidth", required: false }] }], laneInsetPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "laneInsetPx", required: false }] }], renderColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderColumns", required: false }] }], renderTimeline: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderTimeline", required: false }] }], columnTemplatesByKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnTemplatesByKey", required: false }] }], progressTemplateDirective: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressTemplateDirective", required: false }] }], toggleCollapse: [{ type: i0.Output, args: ["toggleCollapse"] }], progressClick: [{ type: i0.Output, args: ["progressClick"] }] } });
@@ -308,41 +307,59 @@ class TimelineGantt {
         this.ganttScrollViewport = value;
         this.bindResizeObserver();
     }
+    columnsHeaderScrollViewport;
+    set columnsBodyScrollViewportRef(value) {
+        this.columnsBodyScrollViewport = value;
+        this.ganttBodyScrollTopPx.set(value?.nativeElement.scrollTop ?? 0);
+    }
+    timelineHeaderScrollViewport;
+    timelineBodyScrollViewport;
     ganttSplitContainer;
     ganttScrollViewport;
+    columnsBodyScrollViewport;
     resizeObserver;
     splitResizeObserver;
     // Width of the visible horizontal viewport used for adaptive segment sizing.
-    ganttViewportWidth = signal(0, ...(ngDevMode ? [{ debugName: "ganttViewportWidth" }] : []));
-    ganttContainerWidth = signal(0, ...(ngDevMode ? [{ debugName: "ganttContainerWidth" }] : []));
+    ganttViewportWidth = signal(0, ...(ngDevMode ? [{ debugName: "ganttViewportWidth" }] : /* istanbul ignore next */ []));
+    ganttContainerWidth = signal(0, ...(ngDevMode ? [{ debugName: "ganttContainerWidth" }] : /* istanbul ignore next */ []));
     splitterWidthPx = 10;
     timelineLaneInsetPx = 12;
     adaptiveSegmentMaxWidthPx = 320;
-    columnsPaneUserWidthPx = signal(null, ...(ngDevMode ? [{ debugName: "columnsPaneUserWidthPx" }] : []));
-    lastExpandedColumnsPaneWidthPx = signal(null, ...(ngDevMode ? [{ debugName: "lastExpandedColumnsPaneWidthPx" }] : []));
-    isColumnsResizing = signal(false, ...(ngDevMode ? [{ debugName: "isColumnsResizing" }] : []));
-    canResizeColumnsPane = computed(() => this.baseResolvedColumns().length > 0, ...(ngDevMode ? [{ debugName: "canResizeColumnsPane" }] : []));
+    ganttRowHeightPx = 64;
+    virtualScrollOverscanRows = 6;
+    columnsPaneUserWidthPx = signal(null, ...(ngDevMode ? [{ debugName: "columnsPaneUserWidthPx" }] : /* istanbul ignore next */ []));
+    lastExpandedColumnsPaneWidthPx = signal(null, ...(ngDevMode ? [{ debugName: "lastExpandedColumnsPaneWidthPx" }] : /* istanbul ignore next */ []));
+    ganttBodyScrollTopPx = signal(0, ...(ngDevMode ? [{ debugName: "ganttBodyScrollTopPx" }] : /* istanbul ignore next */ []));
+    isColumnsResizing = signal(false, ...(ngDevMode ? [{ debugName: "isColumnsResizing" }] : /* istanbul ignore next */ []));
+    canResizeColumnsPane = computed(() => this.baseResolvedColumns().length > 0, ...(ngDevMode ? [{ debugName: "canResizeColumnsPane" }] : /* istanbul ignore next */ []));
     resizeStartClientX = 0;
     resizeStartColumnsPaneWidthPx = 0;
-    timelineMode = input('quarterly', ...(ngDevMode ? [{ debugName: "timelineMode" }] : []));
-    columns = input(null, ...(ngDevMode ? [{ debugName: "columns" }] : []));
-    ganttTitleColumnLabel = input('Portfolio Name', ...(ngDevMode ? [{ debugName: "ganttTitleColumnLabel" }] : []));
-    ganttStatusColumnLabel = input('Status', ...(ngDevMode ? [{ debugName: "ganttStatusColumnLabel" }] : []));
-    ganttInitiativeColumnWidthPx = input(288, ...(ngDevMode ? [{ debugName: "ganttInitiativeColumnWidthPx" }] : []));
-    ganttStatusColumnWidthPx = input(160, ...(ngDevMode ? [{ debugName: "ganttStatusColumnWidthPx" }] : []));
-    showGanttStatusColumn = input(false, ...(ngDevMode ? [{ debugName: "showGanttStatusColumn" }] : []));
-    ganttSegmentWidthPx = input(96, ...(ngDevMode ? [{ debugName: "ganttSegmentWidthPx" }] : []));
-    defaultVisibleColumns = input(4, ...(ngDevMode ? [{ debugName: "defaultVisibleColumns" }] : []));
-    columnsPaneMinWidthPx = input(0, ...(ngDevMode ? [{ debugName: "columnsPaneMinWidthPx" }] : []));
-    columnsPaneMaxWidthPx = input(null, ...(ngDevMode ? [{ debugName: "columnsPaneMaxWidthPx" }] : []));
-    zoomToFit = input(false, ...(ngDevMode ? [{ debugName: "zoomToFit" }] : []));
-    mappedGanttNodes = input([], ...(ngDevMode ? [{ debugName: "mappedGanttNodes" }] : []));
-    orderedGanttSegments = input([], ...(ngDevMode ? [{ debugName: "orderedGanttSegments" }] : []));
-    collapsedGanttIds = input(new Set(), ...(ngDevMode ? [{ debugName: "collapsedGanttIds" }] : []));
-    columnTemplatesByKey = input(new Map(), ...(ngDevMode ? [{ debugName: "columnTemplatesByKey" }] : []));
-    progressTemplateDirective = input(null, ...(ngDevMode ? [{ debugName: "progressTemplateDirective" }] : []));
+    isSyncingColumnsScroll = false;
+    isSyncingTimelineScroll = false;
+    isSyncingVerticalScroll = false;
+    timelineMode = input('quarterly', ...(ngDevMode ? [{ debugName: "timelineMode" }] : /* istanbul ignore next */ []));
+    columns = input(null, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    ganttTitleColumnLabel = input('Portfolio Name', ...(ngDevMode ? [{ debugName: "ganttTitleColumnLabel" }] : /* istanbul ignore next */ []));
+    ganttStatusColumnLabel = input('Status', ...(ngDevMode ? [{ debugName: "ganttStatusColumnLabel" }] : /* istanbul ignore next */ []));
+    ganttInitiativeColumnWidthPx = input(288, ...(ngDevMode ? [{ debugName: "ganttInitiativeColumnWidthPx" }] : /* istanbul ignore next */ []));
+    ganttStatusColumnWidthPx = input(160, ...(ngDevMode ? [{ debugName: "ganttStatusColumnWidthPx" }] : /* istanbul ignore next */ []));
+    showGanttStatusColumn = input(false, ...(ngDevMode ? [{ debugName: "showGanttStatusColumn" }] : /* istanbul ignore next */ []));
+    ganttSegmentWidthPx = input(96, ...(ngDevMode ? [{ debugName: "ganttSegmentWidthPx" }] : /* istanbul ignore next */ []));
+    defaultVisibleColumns = input(4, ...(ngDevMode ? [{ debugName: "defaultVisibleColumns" }] : /* istanbul ignore next */ []));
+    columnsPaneMinWidthPx = input(0, ...(ngDevMode ? [{ debugName: "columnsPaneMinWidthPx" }] : /* istanbul ignore next */ []));
+    columnsPaneMaxWidthPx = input(null, ...(ngDevMode ? [{ debugName: "columnsPaneMaxWidthPx" }] : /* istanbul ignore next */ []));
+    enableVirtualScroll = input(true, ...(ngDevMode ? [{ debugName: "enableVirtualScroll" }] : /* istanbul ignore next */ []));
+    virtualScrollThreshold = input(120, ...(ngDevMode ? [{ debugName: "virtualScrollThreshold" }] : /* istanbul ignore next */ []));
+    virtualScrollBodyHeightPx = input(640, ...(ngDevMode ? [{ debugName: "virtualScrollBodyHeightPx" }] : /* istanbul ignore next */ []));
+    zoomToFit = input(false, ...(ngDevMode ? [{ debugName: "zoomToFit" }] : /* istanbul ignore next */ []));
+    mappedGanttNodes = input([], ...(ngDevMode ? [{ debugName: "mappedGanttNodes" }] : /* istanbul ignore next */ []));
+    orderedGanttSegments = input([], ...(ngDevMode ? [{ debugName: "orderedGanttSegments" }] : /* istanbul ignore next */ []));
+    collapsedGanttIds = input(new Set(), ...(ngDevMode ? [{ debugName: "collapsedGanttIds" }] : /* istanbul ignore next */ []));
+    columnTemplatesByKey = input(new Map(), ...(ngDevMode ? [{ debugName: "columnTemplatesByKey" }] : /* istanbul ignore next */ []));
+    progressTemplateDirective = input(null, ...(ngDevMode ? [{ debugName: "progressTemplateDirective" }] : /* istanbul ignore next */ []));
     toggleCollapse = output();
     progressClick = output();
+    timelineViewportWidthChange = output();
     // Resolves the base columns contract before splitter-specific layout is applied.
     baseResolvedColumns = computed(() => {
         const providedColumns = this.columns();
@@ -360,8 +377,8 @@ class TimelineGantt {
             };
             return resolvedColumn;
         });
-    }, ...(ngDevMode ? [{ debugName: "baseResolvedColumns" }] : []));
-    baseColumnsWidthPx = computed(() => this.baseResolvedColumns().reduce((total, column) => total + column.baseWidthPx, 0), ...(ngDevMode ? [{ debugName: "baseColumnsWidthPx" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "baseResolvedColumns" }] : /* istanbul ignore next */ []));
+    baseColumnsWidthPx = computed(() => this.baseResolvedColumns().reduce((total, column) => total + column.baseWidthPx, 0), ...(ngDevMode ? [{ debugName: "baseColumnsWidthPx" }] : /* istanbul ignore next */ []));
     preferredDefaultColumnsPaneWidthPx = computed(() => {
         const columns = this.baseResolvedColumns();
         if (!columns.length) {
@@ -378,7 +395,7 @@ class TimelineGantt {
         return columns
             .slice(0, Math.min(normalizedVisibleColumns, columns.length))
             .reduce((total, column) => total + column.baseWidthPx, 0);
-    }, ...(ngDevMode ? [{ debugName: "preferredDefaultColumnsPaneWidthPx" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "preferredDefaultColumnsPaneWidthPx" }] : /* istanbul ignore next */ []));
     // Column viewport and column content width are treated separately:
     // - splitter controls the viewport width
     // - columns keep base widths until there is extra space to relax into
@@ -390,13 +407,13 @@ class TimelineGantt {
             return columns;
         }
         return this.stretchColumnsToWidth(columns, paneWidthPx);
-    }, ...(ngDevMode ? [{ debugName: "resolvedColumns" }] : []));
-    columnsContentWidthPx = computed(() => this.resolvedColumns().reduce((total, column) => total + column.widthPx, 0), ...(ngDevMode ? [{ debugName: "columnsContentWidthPx" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "resolvedColumns" }] : /* istanbul ignore next */ []));
+    columnsContentWidthPx = computed(() => this.resolvedColumns().reduce((total, column) => total + column.widthPx, 0), ...(ngDevMode ? [{ debugName: "columnsContentWidthPx" }] : /* istanbul ignore next */ []));
     resolvedColumnsPaneWidthPx = computed(() => {
         const userWidth = this.columnsPaneUserWidthPx();
         const preferredWidth = userWidth ?? this.preferredDefaultColumnsPaneWidthPx();
         return this.clampColumnsPaneWidth(preferredWidth);
-    }, ...(ngDevMode ? [{ debugName: "resolvedColumnsPaneWidthPx" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "resolvedColumnsPaneWidthPx" }] : /* istanbul ignore next */ []));
     // Segment width expands to fill viewport when possible but never goes below base width.
     effectiveGanttSegmentWidthPx = computed(() => {
         const segmentCount = this.orderedGanttSegments().length;
@@ -413,14 +430,14 @@ class TimelineGantt {
             return Math.max(0, Math.min(candidateWidth, this.adaptiveSegmentMaxWidthPx));
         }
         return Math.max(baseWidth, Math.min(Math.floor(candidateWidth), this.adaptiveSegmentMaxWidthPx));
-    }, ...(ngDevMode ? [{ debugName: "effectiveGanttSegmentWidthPx" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "effectiveGanttSegmentWidthPx" }] : /* istanbul ignore next */ []));
     laneInsetPx = computed(() => {
         if (!this.zoomToFit()) {
             return this.timelineLaneInsetPx;
         }
         return Math.min(this.timelineLaneInsetPx, Math.max(0, this.effectiveGanttSegmentWidthPx() / 4));
-    }, ...(ngDevMode ? [{ debugName: "laneInsetPx" }] : []));
-    ganttCanvasWidth = computed(() => this.orderedGanttSegments().length * this.effectiveGanttSegmentWidthPx(), ...(ngDevMode ? [{ debugName: "ganttCanvasWidth" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "laneInsetPx" }] : /* istanbul ignore next */ []));
+    ganttCanvasWidth = computed(() => this.orderedGanttSegments().length * this.effectiveGanttSegmentWidthPx(), ...(ngDevMode ? [{ debugName: "ganttCanvasWidth" }] : /* istanbul ignore next */ []));
     // Flattens the mapped hierarchy into rows using current collapse state.
     resolvedGanttItems = computed(() => {
         const segments = this.orderedGanttSegments();
@@ -432,7 +449,37 @@ class TimelineGantt {
         const out = [];
         this.flattenMapped(this.mappedGanttNodes(), 0, segments, firstSeq, lastSeq, this.collapsedGanttIds(), out);
         return out;
-    }, ...(ngDevMode ? [{ debugName: "resolvedGanttItems" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "resolvedGanttItems" }] : /* istanbul ignore next */ []));
+    resolvedVirtualScrollBodyHeightPx = computed(() => Math.max(this.ganttRowHeightPx, Math.floor(this.virtualScrollBodyHeightPx())), ...(ngDevMode ? [{ debugName: "resolvedVirtualScrollBodyHeightPx" }] : /* istanbul ignore next */ []));
+    isVirtualScrollActive = computed(() => {
+        const threshold = Math.max(0, Math.floor(this.virtualScrollThreshold()));
+        return (this.enableVirtualScroll() &&
+            this.resolvedGanttItems().length >= threshold &&
+            this.resolvedVirtualScrollBodyHeightPx() > 0);
+    }, ...(ngDevMode ? [{ debugName: "isVirtualScrollActive" }] : /* istanbul ignore next */ []));
+    virtualScrollWindow = computed(() => {
+        const totalItems = this.resolvedGanttItems().length;
+        if (!this.isVirtualScrollActive()) {
+            return { startIndex: 0, endIndex: totalItems };
+        }
+        const visibleRows = Math.max(1, Math.ceil(this.resolvedVirtualScrollBodyHeightPx() / this.ganttRowHeightPx));
+        const renderCount = visibleRows + this.virtualScrollOverscanRows * 2;
+        const maxStartIndex = Math.max(0, totalItems - renderCount);
+        const requestedStartIndex = Math.max(0, Math.floor(this.ganttBodyScrollTopPx() / this.ganttRowHeightPx) -
+            this.virtualScrollOverscanRows);
+        const startIndex = Math.min(requestedStartIndex, maxStartIndex);
+        const endIndex = Math.min(totalItems, startIndex + renderCount);
+        return { startIndex, endIndex };
+    }, ...(ngDevMode ? [{ debugName: "virtualScrollWindow" }] : /* istanbul ignore next */ []));
+    visibleResolvedGanttItems = computed(() => {
+        const { startIndex, endIndex } = this.virtualScrollWindow();
+        return this.resolvedGanttItems().slice(startIndex, endIndex);
+    }, ...(ngDevMode ? [{ debugName: "visibleResolvedGanttItems" }] : /* istanbul ignore next */ []));
+    virtualScrollTopSpacerHeightPx = computed(() => this.virtualScrollWindow().startIndex * this.ganttRowHeightPx, ...(ngDevMode ? [{ debugName: "virtualScrollTopSpacerHeightPx" }] : /* istanbul ignore next */ []));
+    virtualScrollBottomSpacerHeightPx = computed(() => {
+        const { endIndex } = this.virtualScrollWindow();
+        return Math.max(0, (this.resolvedGanttItems().length - endIndex) * this.ganttRowHeightPx);
+    }, ...(ngDevMode ? [{ debugName: "virtualScrollBottomSpacerHeightPx" }] : /* istanbul ignore next */ []));
     ngAfterViewInit() {
         this.bindResizeObserver();
     }
@@ -448,6 +495,24 @@ class TimelineGantt {
     onRowProgressClick(payload) {
         this.progressClick.emit(payload);
     }
+    onColumnsHeaderScroll(event) {
+        this.syncColumnsScroll(event.target, this.columnsBodyScrollViewport?.nativeElement);
+    }
+    onColumnsBodyScroll(event) {
+        const target = event.target;
+        this.ganttBodyScrollTopPx.set(target?.scrollTop ?? 0);
+        this.syncColumnsScroll(target, this.columnsHeaderScrollViewport?.nativeElement);
+        this.syncVerticalScroll(target, this.timelineBodyScrollViewport?.nativeElement);
+    }
+    onTimelineHeaderScroll(event) {
+        this.syncTimelineScroll(event.target, this.timelineBodyScrollViewport?.nativeElement);
+    }
+    onTimelineBodyScroll(event) {
+        const target = event.target;
+        this.ganttBodyScrollTopPx.set(target?.scrollTop ?? 0);
+        this.syncTimelineScroll(target, this.timelineHeaderScrollViewport?.nativeElement);
+        this.syncVerticalScroll(target, this.columnsBodyScrollViewport?.nativeElement);
+    }
     onSplitterPointerDown(event) {
         if (event.button !== 0 || !this.canResizeColumnsPane()) {
             return;
@@ -517,6 +582,7 @@ class TimelineGantt {
             return;
         }
         this.ganttViewportWidth.set(viewport.clientWidth);
+        this.timelineViewportWidthChange.emit(viewport.clientWidth);
         if (typeof ResizeObserver === 'undefined') {
             return;
         }
@@ -526,6 +592,7 @@ class TimelineGantt {
                 this.ganttScrollViewport?.nativeElement.clientWidth ??
                 0;
             this.ganttViewportWidth.set(width);
+            this.timelineViewportWidthChange.emit(width);
         });
         this.resizeObserver.observe(viewport);
     }
@@ -569,6 +636,45 @@ class TimelineGantt {
         window.removeEventListener('pointerup', this.onSplitterPointerUp);
         window.removeEventListener('pointercancel', this.onSplitterPointerUp);
     }
+    syncColumnsScroll(source, target) {
+        if (!source || !target || this.isSyncingColumnsScroll) {
+            return;
+        }
+        if (target.scrollLeft === source.scrollLeft) {
+            return;
+        }
+        this.isSyncingColumnsScroll = true;
+        target.scrollLeft = source.scrollLeft;
+        queueMicrotask(() => {
+            this.isSyncingColumnsScroll = false;
+        });
+    }
+    syncTimelineScroll(source, target) {
+        if (!source || !target || this.isSyncingTimelineScroll) {
+            return;
+        }
+        if (target.scrollLeft === source.scrollLeft) {
+            return;
+        }
+        this.isSyncingTimelineScroll = true;
+        target.scrollLeft = source.scrollLeft;
+        queueMicrotask(() => {
+            this.isSyncingTimelineScroll = false;
+        });
+    }
+    syncVerticalScroll(source, target) {
+        if (!source || !target || this.isSyncingVerticalScroll) {
+            return;
+        }
+        if (target.scrollTop === source.scrollTop) {
+            return;
+        }
+        this.isSyncingVerticalScroll = true;
+        target.scrollTop = source.scrollTop;
+        queueMicrotask(() => {
+            this.isSyncingVerticalScroll = false;
+        });
+    }
     applyColumnsPaneWidth(widthPx) {
         const clampedWidthPx = this.clampColumnsPaneWidth(widthPx);
         this.columnsPaneUserWidthPx.set(clampedWidthPx);
@@ -738,24 +844,36 @@ class TimelineGantt {
             'ltr';
         return dir.toLowerCase() === 'rtl';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineGantt, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: TimelineGantt, isStandalone: true, selector: "mt-timeline-gantt", inputs: { timelineMode: { classPropertyName: "timelineMode", publicName: "timelineMode", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, ganttTitleColumnLabel: { classPropertyName: "ganttTitleColumnLabel", publicName: "ganttTitleColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, ganttStatusColumnLabel: { classPropertyName: "ganttStatusColumnLabel", publicName: "ganttStatusColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, ganttInitiativeColumnWidthPx: { classPropertyName: "ganttInitiativeColumnWidthPx", publicName: "ganttInitiativeColumnWidthPx", isSignal: true, isRequired: false, transformFunction: null }, ganttStatusColumnWidthPx: { classPropertyName: "ganttStatusColumnWidthPx", publicName: "ganttStatusColumnWidthPx", isSignal: true, isRequired: false, transformFunction: null }, showGanttStatusColumn: { classPropertyName: "showGanttStatusColumn", publicName: "showGanttStatusColumn", isSignal: true, isRequired: false, transformFunction: null }, ganttSegmentWidthPx: { classPropertyName: "ganttSegmentWidthPx", publicName: "ganttSegmentWidthPx", isSignal: true, isRequired: false, transformFunction: null }, defaultVisibleColumns: { classPropertyName: "defaultVisibleColumns", publicName: "defaultVisibleColumns", isSignal: true, isRequired: false, transformFunction: null }, columnsPaneMinWidthPx: { classPropertyName: "columnsPaneMinWidthPx", publicName: "columnsPaneMinWidthPx", isSignal: true, isRequired: false, transformFunction: null }, columnsPaneMaxWidthPx: { classPropertyName: "columnsPaneMaxWidthPx", publicName: "columnsPaneMaxWidthPx", isSignal: true, isRequired: false, transformFunction: null }, zoomToFit: { classPropertyName: "zoomToFit", publicName: "zoomToFit", isSignal: true, isRequired: false, transformFunction: null }, mappedGanttNodes: { classPropertyName: "mappedGanttNodes", publicName: "mappedGanttNodes", isSignal: true, isRequired: false, transformFunction: null }, orderedGanttSegments: { classPropertyName: "orderedGanttSegments", publicName: "orderedGanttSegments", isSignal: true, isRequired: false, transformFunction: null }, collapsedGanttIds: { classPropertyName: "collapsedGanttIds", publicName: "collapsedGanttIds", isSignal: true, isRequired: false, transformFunction: null }, columnTemplatesByKey: { classPropertyName: "columnTemplatesByKey", publicName: "columnTemplatesByKey", isSignal: true, isRequired: false, transformFunction: null }, progressTemplateDirective: { classPropertyName: "progressTemplateDirective", publicName: "progressTemplateDirective", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleCollapse: "toggleCollapse", progressClick: "progressClick" }, viewQueries: [{ propertyName: "ganttSplitContainerRef", first: true, predicate: ["ganttSplitContainer"], descendants: true }, { propertyName: "ganttScrollViewportRef", first: true, predicate: ["ganttScrollViewport"], descendants: true }], ngImport: i0, template: "<!-- Gantt view shell: scroll viewport + sized timeline table. -->\r\n<div\r\n  class=\"min-h-56 min-w-0 overflow-hidden py-2\"\r\n  *transloco=\"let t; prefix: 'timeline'\"\r\n>\r\n  <div\r\n    class=\"flex min-w-0 border border-surface bg-content\"\r\n    #ganttSplitContainer\r\n  >\r\n    <!-- Fixed metadata columns pane. -->\r\n    <div\r\n      class=\"shrink-0 overflow-hidden\"\r\n      [style.width.px]=\"resolvedColumnsPaneWidthPx()\"\r\n    >\r\n      <div class=\"mt-timeline-scroll h-full overflow-x-auto overflow-y-hidden\">\r\n        <div class=\"min-w-full\" [style.width.px]=\"columnsContentWidthPx()\">\r\n          <mt-timeline-gantt-header\r\n            [timelineMode]=\"timelineMode()\"\r\n            [resolvedColumns]=\"resolvedColumns()\"\r\n            [orderedGanttSegments]=\"orderedGanttSegments()\"\r\n            [ganttCanvasWidth]=\"0\"\r\n            [effectiveGanttSegmentWidthPx]=\"effectiveGanttSegmentWidthPx()\"\r\n            [zoomToFit]=\"zoomToFit()\"\r\n            [renderTimeline]=\"false\"\r\n          />\r\n\r\n          <div>\r\n            @for (item of resolvedGanttItems(); track $index) {\r\n              <mt-timeline-gantt-row\r\n                [item]=\"item\"\r\n                [resolvedColumns]=\"resolvedColumns()\"\r\n                [ganttCanvasWidth]=\"0\"\r\n                [laneInsetPx]=\"laneInsetPx()\"\r\n                [columnTemplatesByKey]=\"columnTemplatesByKey()\"\r\n                [progressTemplateDirective]=\"progressTemplateDirective()\"\r\n                [renderTimeline]=\"false\"\r\n                (toggleCollapse)=\"onToggleCollapse($event)\"\r\n                (progressClick)=\"onRowProgressClick($event)\"\r\n              />\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    @if (canResizeColumnsPane()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"mt-timeline-splitter shrink-0\"\r\n        [class.mt-timeline-splitter-active]=\"isColumnsResizing()\"\r\n        (pointerdown)=\"onSplitterPointerDown($event)\"\r\n        (dblclick)=\"onSplitterDoubleClick()\"\r\n        (keydown)=\"onSplitterKeyDown($event)\"\r\n        [attr.aria-label]=\"t('resize-columns')\"\r\n        [title]=\"t('resize-columns-hint')\"\r\n      ></button>\r\n    }\r\n\r\n    <!-- Scrollable timeline pane (horizontal scroll is limited to this area). -->\r\n    <div\r\n      class=\"mt-timeline-scroll min-w-0 flex-1 overflow-x-auto overflow-y-hidden\"\r\n      #ganttScrollViewport\r\n    >\r\n      <div class=\"min-w-full\" [style.width.px]=\"ganttCanvasWidth()\">\r\n        <mt-timeline-gantt-header\r\n          [timelineMode]=\"timelineMode()\"\r\n          [resolvedColumns]=\"resolvedColumns()\"\r\n          [orderedGanttSegments]=\"orderedGanttSegments()\"\r\n          [ganttCanvasWidth]=\"ganttCanvasWidth()\"\r\n          [effectiveGanttSegmentWidthPx]=\"effectiveGanttSegmentWidthPx()\"\r\n          [zoomToFit]=\"zoomToFit()\"\r\n          [renderColumns]=\"false\"\r\n        />\r\n\r\n        <div>\r\n          @for (item of resolvedGanttItems(); track $index) {\r\n            <mt-timeline-gantt-row\r\n              [item]=\"item\"\r\n              [resolvedColumns]=\"[]\"\r\n              [ganttCanvasWidth]=\"ganttCanvasWidth()\"\r\n              [laneInsetPx]=\"laneInsetPx()\"\r\n              [columnTemplatesByKey]=\"columnTemplatesByKey()\"\r\n              [progressTemplateDirective]=\"progressTemplateDirective()\"\r\n              [renderColumns]=\"false\"\r\n              (toggleCollapse)=\"onToggleCollapse($event)\"\r\n              (progressClick)=\"onRowProgressClick($event)\"\r\n            />\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;min-width:0;max-width:100%}.mt-timeline-scroll{min-width:0;scrollbar-width:thin;scrollbar-color:var(--p-surface-400) transparent}.mt-timeline-scroll::-webkit-scrollbar{height:10px}.mt-timeline-scroll::-webkit-scrollbar-track{background:color-mix(in srgb,var(--p-surface-200) 30%,transparent);border-radius:9999px}.mt-timeline-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p-surface-500) 60%,transparent);border-radius:9999px;border:2px solid transparent;background-clip:content-box}.mt-timeline-scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--p-surface-600) 65%,transparent);background-clip:content-box}.mt-timeline-splitter{position:relative;width:10px;min-width:10px;border:0;overflow:visible;background:linear-gradient(90deg,transparent 0,transparent calc(50% - 4px),color-mix(in srgb,var(--p-surface-300) 45%,transparent) calc(50% - 4px),color-mix(in srgb,var(--p-surface-300) 45%,transparent) calc(50% + 4px),transparent calc(50% + 4px),transparent 100%),linear-gradient(90deg,transparent 0,transparent calc(50% - 1px),color-mix(in srgb,var(--p-surface-500) 72%,white 28%) calc(50% - 1px),color-mix(in srgb,var(--p-surface-500) 72%,white 28%) calc(50% + 1px),transparent calc(50% + 1px),transparent 100%);cursor:col-resize;touch-action:none;transition:background .14s ease,opacity .14s ease,filter .14s ease}.mt-timeline-splitter:hover,.mt-timeline-splitter-active,.mt-timeline-splitter:focus-visible{background:linear-gradient(90deg,transparent 0,transparent calc(50% - 4px),color-mix(in srgb,var(--p-primary-color) 22%,transparent) calc(50% - 4px),color-mix(in srgb,var(--p-primary-color) 22%,transparent) calc(50% + 4px),transparent calc(50% + 4px),transparent 100%),linear-gradient(90deg,transparent 0,transparent calc(50% - 1px),color-mix(in srgb,var(--p-primary-color) 88%,white 12%) calc(50% - 1px),color-mix(in srgb,var(--p-primary-color) 88%,white 12%) calc(50% + 1px),transparent calc(50% + 1px),transparent 100%)}.mt-timeline-splitter:before{content:\"\";position:absolute;top:50%;inset-inline-start:50%;width:16px;height:42px;transform:translate(-50%,-50%) scale(1);opacity:1;border-radius:9999px;border:1px solid color-mix(in srgb,var(--p-surface-300) 72%,transparent);background:var(--p-surface-0);box-shadow:0 6px 16px -14px color-mix(in srgb,var(--p-surface-400) 18%,transparent),0 2px 6px -4px color-mix(in srgb,black 16%,transparent);pointer-events:none;transition:opacity .14s ease,transform .14s ease,border-color .14s ease,box-shadow .14s ease}.mt-timeline-splitter:after{content:\"\";position:absolute;top:50%;inset-inline-start:50%;width:6px;height:16px;transform:translate(-50%,-50%) scale(1);opacity:1;border-radius:9999px;background:linear-gradient(90deg,color-mix(in srgb,var(--p-surface-500) 78%,white 22%) 0,color-mix(in srgb,var(--p-surface-500) 78%,white 22%) 2px,transparent 2px,transparent 4px,color-mix(in srgb,var(--p-surface-500) 78%,white 22%) 4px,color-mix(in srgb,var(--p-surface-500) 78%,white 22%) 6px);pointer-events:none;transition:opacity .14s ease,transform .14s ease,background .14s ease}.mt-timeline-splitter:hover:before,.mt-timeline-splitter-active:before,.mt-timeline-splitter:focus-visible:before{border-color:color-mix(in srgb,var(--p-primary-color) 18%,var(--p-surface-200));box-shadow:0 8px 18px -16px color-mix(in srgb,var(--p-primary-color) 28%,transparent),0 4px 8px -6px color-mix(in srgb,black 18%,transparent)}.mt-timeline-splitter:hover:after,.mt-timeline-splitter-active:after,.mt-timeline-splitter:focus-visible:after{background:linear-gradient(90deg,color-mix(in srgb,var(--p-primary-color) 88%,white 12%) 0,color-mix(in srgb,var(--p-primary-color) 88%,white 12%) 2px,transparent 2px,transparent 4px,color-mix(in srgb,var(--p-primary-color) 88%,white 12%) 4px,color-mix(in srgb,var(--p-primary-color) 88%,white 12%) 6px)}.mt-timeline-splitter:hover{filter:saturate(1.03)}.mt-timeline-splitter:focus-visible{outline:none}.mt-timeline-splitter:focus-visible:before{box-shadow:0 0 0 3px color-mix(in srgb,var(--p-primary-color) 14%,transparent),0 8px 18px -16px color-mix(in srgb,var(--p-primary-color) 28%,transparent),0 4px 8px -6px color-mix(in srgb,black 18%,transparent)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: TimelineGanttHeader, selector: "mt-timeline-gantt-header", inputs: ["timelineMode", "resolvedColumns", "orderedGanttSegments", "ganttCanvasWidth", "effectiveGanttSegmentWidthPx", "zoomToFit", "renderColumns", "renderTimeline"] }, { kind: "component", type: TimelineGanttRow, selector: "mt-timeline-gantt-row", inputs: ["item", "resolvedColumns", "ganttCanvasWidth", "laneInsetPx", "renderColumns", "renderTimeline", "columnTemplatesByKey", "progressTemplateDirective"], outputs: ["toggleCollapse", "progressClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TimelineGantt, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TimelineGantt, isStandalone: true, selector: "mt-timeline-gantt", inputs: { timelineMode: { classPropertyName: "timelineMode", publicName: "timelineMode", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, ganttTitleColumnLabel: { classPropertyName: "ganttTitleColumnLabel", publicName: "ganttTitleColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, ganttStatusColumnLabel: { classPropertyName: "ganttStatusColumnLabel", publicName: "ganttStatusColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, ganttInitiativeColumnWidthPx: { classPropertyName: "ganttInitiativeColumnWidthPx", publicName: "ganttInitiativeColumnWidthPx", isSignal: true, isRequired: false, transformFunction: null }, ganttStatusColumnWidthPx: { classPropertyName: "ganttStatusColumnWidthPx", publicName: "ganttStatusColumnWidthPx", isSignal: true, isRequired: false, transformFunction: null }, showGanttStatusColumn: { classPropertyName: "showGanttStatusColumn", publicName: "showGanttStatusColumn", isSignal: true, isRequired: false, transformFunction: null }, ganttSegmentWidthPx: { classPropertyName: "ganttSegmentWidthPx", publicName: "ganttSegmentWidthPx", isSignal: true, isRequired: false, transformFunction: null }, defaultVisibleColumns: { classPropertyName: "defaultVisibleColumns", publicName: "defaultVisibleColumns", isSignal: true, isRequired: false, transformFunction: null }, columnsPaneMinWidthPx: { classPropertyName: "columnsPaneMinWidthPx", publicName: "columnsPaneMinWidthPx", isSignal: true, isRequired: false, transformFunction: null }, columnsPaneMaxWidthPx: { classPropertyName: "columnsPaneMaxWidthPx", publicName: "columnsPaneMaxWidthPx", isSignal: true, isRequired: false, transformFunction: null }, enableVirtualScroll: { classPropertyName: "enableVirtualScroll", publicName: "enableVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollThreshold: { classPropertyName: "virtualScrollThreshold", publicName: "virtualScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollBodyHeightPx: { classPropertyName: "virtualScrollBodyHeightPx", publicName: "virtualScrollBodyHeightPx", isSignal: true, isRequired: false, transformFunction: null }, zoomToFit: { classPropertyName: "zoomToFit", publicName: "zoomToFit", isSignal: true, isRequired: false, transformFunction: null }, mappedGanttNodes: { classPropertyName: "mappedGanttNodes", publicName: "mappedGanttNodes", isSignal: true, isRequired: false, transformFunction: null }, orderedGanttSegments: { classPropertyName: "orderedGanttSegments", publicName: "orderedGanttSegments", isSignal: true, isRequired: false, transformFunction: null }, collapsedGanttIds: { classPropertyName: "collapsedGanttIds", publicName: "collapsedGanttIds", isSignal: true, isRequired: false, transformFunction: null }, columnTemplatesByKey: { classPropertyName: "columnTemplatesByKey", publicName: "columnTemplatesByKey", isSignal: true, isRequired: false, transformFunction: null }, progressTemplateDirective: { classPropertyName: "progressTemplateDirective", publicName: "progressTemplateDirective", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleCollapse: "toggleCollapse", progressClick: "progressClick", timelineViewportWidthChange: "timelineViewportWidthChange" }, viewQueries: [{ propertyName: "ganttSplitContainerRef", first: true, predicate: ["ganttSplitContainer"], descendants: true }, { propertyName: "ganttScrollViewportRef", first: true, predicate: ["ganttScrollViewport"], descendants: true }, { propertyName: "columnsHeaderScrollViewport", first: true, predicate: ["columnsHeaderScrollViewport"], descendants: true }, { propertyName: "columnsBodyScrollViewportRef", first: true, predicate: ["columnsBodyScrollViewport"], descendants: true }, { propertyName: "timelineHeaderScrollViewport", first: true, predicate: ["timelineHeaderScrollViewport"], descendants: true }, { propertyName: "timelineBodyScrollViewport", first: true, predicate: ["timelineBodyScrollViewport"], descendants: true }], ngImport: i0, template: "<!-- Gantt view shell: scroll viewport + sized timeline table. -->\n<div\n  class=\"min-h-56 min-w-0 overflow-hidden py-2\"\n  *transloco=\"let t; prefix: 'timeline'\"\n>\n  @if (isVirtualScrollActive()) {\n    <div\n      class=\"flex min-w-0 border border-surface bg-content\"\n      #ganttSplitContainer\n    >\n      <div\n        class=\"shrink-0 overflow-hidden\"\n        [style.width.px]=\"resolvedColumnsPaneWidthPx()\"\n      >\n        <div\n          #columnsHeaderScrollViewport\n          class=\"mt-timeline-scroll mt-timeline-scrollbar-hidden overflow-x-auto overflow-y-hidden\"\n          (scroll)=\"onColumnsHeaderScroll($event)\"\n        >\n          <div class=\"min-w-full\" [style.width.px]=\"columnsContentWidthPx()\">\n            <mt-timeline-gantt-header\n              [timelineMode]=\"timelineMode()\"\n              [resolvedColumns]=\"resolvedColumns()\"\n              [orderedGanttSegments]=\"orderedGanttSegments()\"\n              [ganttCanvasWidth]=\"0\"\n              [effectiveGanttSegmentWidthPx]=\"effectiveGanttSegmentWidthPx()\"\n              [zoomToFit]=\"zoomToFit()\"\n              [renderTimeline]=\"false\"\n            />\n          </div>\n        </div>\n      </div>\n\n      @if (canResizeColumnsPane()) {\n        <button\n          type=\"button\"\n          class=\"mt-timeline-splitter shrink-0\"\n          [class.mt-timeline-splitter-active]=\"isColumnsResizing()\"\n          (pointerdown)=\"onSplitterPointerDown($event)\"\n          (dblclick)=\"onSplitterDoubleClick()\"\n          (keydown)=\"onSplitterKeyDown($event)\"\n          [attr.aria-label]=\"t('resize-columns')\"\n          [title]=\"t('resize-columns-hint')\"\n        ></button>\n      }\n\n      <div class=\"min-w-0 flex-1 overflow-hidden\">\n        <div\n          #timelineHeaderScrollViewport\n          class=\"mt-timeline-scroll mt-timeline-scrollbar-hidden overflow-x-auto overflow-y-hidden\"\n          (scroll)=\"onTimelineHeaderScroll($event)\"\n        >\n          <div class=\"min-w-full\" [style.width.px]=\"ganttCanvasWidth()\">\n            <mt-timeline-gantt-header\n              [timelineMode]=\"timelineMode()\"\n              [resolvedColumns]=\"resolvedColumns()\"\n              [orderedGanttSegments]=\"orderedGanttSegments()\"\n              [ganttCanvasWidth]=\"ganttCanvasWidth()\"\n              [effectiveGanttSegmentWidthPx]=\"effectiveGanttSegmentWidthPx()\"\n              [zoomToFit]=\"zoomToFit()\"\n              [renderColumns]=\"false\"\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"flex min-w-0 border border-t-0 border-surface bg-content\">\n      <div\n        class=\"shrink-0 overflow-hidden\"\n        [style.width.px]=\"resolvedColumnsPaneWidthPx()\"\n      >\n        <div\n          #columnsBodyScrollViewport\n          class=\"mt-timeline-scroll overflow-auto\"\n          [style.height.px]=\"resolvedVirtualScrollBodyHeightPx()\"\n          (scroll)=\"onColumnsBodyScroll($event)\"\n        >\n          <div class=\"min-w-full\" [style.width.px]=\"columnsContentWidthPx()\">\n            @if (virtualScrollTopSpacerHeightPx() > 0) {\n              <div [style.height.px]=\"virtualScrollTopSpacerHeightPx()\"></div>\n            }\n\n            @for (item of visibleResolvedGanttItems(); track item.id) {\n              <mt-timeline-gantt-row\n                [item]=\"item\"\n                [resolvedColumns]=\"resolvedColumns()\"\n                [ganttCanvasWidth]=\"0\"\n                [laneInsetPx]=\"laneInsetPx()\"\n                [columnTemplatesByKey]=\"columnTemplatesByKey()\"\n                [progressTemplateDirective]=\"progressTemplateDirective()\"\n                [renderTimeline]=\"false\"\n                (toggleCollapse)=\"onToggleCollapse($event)\"\n                (progressClick)=\"onRowProgressClick($event)\"\n              />\n            }\n\n            @if (virtualScrollBottomSpacerHeightPx() > 0) {\n              <div\n                [style.height.px]=\"virtualScrollBottomSpacerHeightPx()\"\n              ></div>\n            }\n          </div>\n        </div>\n      </div>\n\n      @if (canResizeColumnsPane()) {\n        <div\n          class=\"w-[10px] min-w-[10px] shrink-0 border-e border-surface bg-surface-50\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n\n      <div class=\"min-w-0 flex-1 overflow-hidden\">\n        <div\n          #timelineBodyScrollViewport\n          #ganttScrollViewport\n          class=\"mt-timeline-scroll overflow-auto\"\n          [style.height.px]=\"resolvedVirtualScrollBodyHeightPx()\"\n          (scroll)=\"onTimelineBodyScroll($event)\"\n        >\n          <div class=\"min-w-full\" [style.width.px]=\"ganttCanvasWidth()\">\n            @if (virtualScrollTopSpacerHeightPx() > 0) {\n              <div [style.height.px]=\"virtualScrollTopSpacerHeightPx()\"></div>\n            }\n\n            @for (item of visibleResolvedGanttItems(); track item.id) {\n              <mt-timeline-gantt-row\n                [item]=\"item\"\n                [resolvedColumns]=\"[]\"\n                [ganttCanvasWidth]=\"ganttCanvasWidth()\"\n                [laneInsetPx]=\"laneInsetPx()\"\n                [columnTemplatesByKey]=\"columnTemplatesByKey()\"\n                [progressTemplateDirective]=\"progressTemplateDirective()\"\n                [renderColumns]=\"false\"\n                (toggleCollapse)=\"onToggleCollapse($event)\"\n                (progressClick)=\"onRowProgressClick($event)\"\n              />\n            }\n\n            @if (virtualScrollBottomSpacerHeightPx() > 0) {\n              <div\n                [style.height.px]=\"virtualScrollBottomSpacerHeightPx()\"\n              ></div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  } @else {\n    <div\n      class=\"flex min-w-0 border border-surface bg-content\"\n      #ganttSplitContainer\n    >\n      <!-- Fixed metadata columns pane. -->\n      <div\n        class=\"shrink-0 overflow-hidden\"\n        [style.width.px]=\"resolvedColumnsPaneWidthPx()\"\n      >\n        <div\n          class=\"mt-timeline-scroll h-full overflow-x-auto overflow-y-hidden\"\n        >\n          <div class=\"min-w-full\" [style.width.px]=\"columnsContentWidthPx()\">\n            <mt-timeline-gantt-header\n              [timelineMode]=\"timelineMode()\"\n              [resolvedColumns]=\"resolvedColumns()\"\n              [orderedGanttSegments]=\"orderedGanttSegments()\"\n              [ganttCanvasWidth]=\"0\"\n              [effectiveGanttSegmentWidthPx]=\"effectiveGanttSegmentWidthPx()\"\n              [zoomToFit]=\"zoomToFit()\"\n              [renderTimeline]=\"false\"\n            />\n\n            <div>\n              @for (item of resolvedGanttItems(); track item.id) {\n                <mt-timeline-gantt-row\n                  [item]=\"item\"\n                  [resolvedColumns]=\"resolvedColumns()\"\n                  [ganttCanvasWidth]=\"0\"\n                  [laneInsetPx]=\"laneInsetPx()\"\n                  [columnTemplatesByKey]=\"columnTemplatesByKey()\"\n                  [progressTemplateDirective]=\"progressTemplateDirective()\"\n                  [renderTimeline]=\"false\"\n                  (toggleCollapse)=\"onToggleCollapse($event)\"\n                  (progressClick)=\"onRowProgressClick($event)\"\n                />\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n\n      @if (canResizeColumnsPane()) {\n        <button\n          type=\"button\"\n          class=\"mt-timeline-splitter shrink-0\"\n          [class.mt-timeline-splitter-active]=\"isColumnsResizing()\"\n          (pointerdown)=\"onSplitterPointerDown($event)\"\n          (dblclick)=\"onSplitterDoubleClick()\"\n          (keydown)=\"onSplitterKeyDown($event)\"\n          [attr.aria-label]=\"t('resize-columns')\"\n          [title]=\"t('resize-columns-hint')\"\n        ></button>\n      }\n\n      <!-- Scrollable timeline pane (horizontal scroll is limited to this area). -->\n      <div\n        class=\"mt-timeline-scroll min-w-0 flex-1 overflow-x-auto overflow-y-hidden\"\n        #ganttScrollViewport\n      >\n        <div class=\"min-w-full\" [style.width.px]=\"ganttCanvasWidth()\">\n          <mt-timeline-gantt-header\n            [timelineMode]=\"timelineMode()\"\n            [resolvedColumns]=\"resolvedColumns()\"\n            [orderedGanttSegments]=\"orderedGanttSegments()\"\n            [ganttCanvasWidth]=\"ganttCanvasWidth()\"\n            [effectiveGanttSegmentWidthPx]=\"effectiveGanttSegmentWidthPx()\"\n            [zoomToFit]=\"zoomToFit()\"\n            [renderColumns]=\"false\"\n          />\n\n          <div>\n            @for (item of resolvedGanttItems(); track item.id) {\n              <mt-timeline-gantt-row\n                [item]=\"item\"\n                [resolvedColumns]=\"[]\"\n                [ganttCanvasWidth]=\"ganttCanvasWidth()\"\n                [laneInsetPx]=\"laneInsetPx()\"\n                [columnTemplatesByKey]=\"columnTemplatesByKey()\"\n                [progressTemplateDirective]=\"progressTemplateDirective()\"\n                [renderColumns]=\"false\"\n                (toggleCollapse)=\"onToggleCollapse($event)\"\n                (progressClick)=\"onRowProgressClick($event)\"\n              />\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;min-width:0;max-width:100%}.mt-timeline-scroll{min-width:0;scrollbar-width:thin;scrollbar-color:var(--p-surface-400) transparent}.mt-timeline-scroll::-webkit-scrollbar{height:10px}.mt-timeline-scroll::-webkit-scrollbar-track{background:color-mix(in srgb,var(--p-surface-200) 30%,transparent);border-radius:9999px}.mt-timeline-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p-surface-500) 60%,transparent);border-radius:9999px;border:2px solid transparent;background-clip:content-box}.mt-timeline-scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--p-surface-600) 65%,transparent);background-clip:content-box}.mt-timeline-scrollbar-hidden{scrollbar-width:none}.mt-timeline-scrollbar-hidden::-webkit-scrollbar{width:0;height:0}.mt-timeline-splitter{position:relative;width:10px;min-width:10px;border:0;overflow:visible;background:linear-gradient(90deg,transparent 0,transparent calc(50% - 4px),color-mix(in srgb,var(--p-surface-300) 45%,transparent) calc(50% - 4px),color-mix(in srgb,var(--p-surface-300) 45%,transparent) calc(50% + 4px),transparent calc(50% + 4px),transparent 100%),linear-gradient(90deg,transparent 0,transparent calc(50% - 1px),color-mix(in srgb,var(--p-surface-500) 72%,white 28%) calc(50% - 1px),color-mix(in srgb,var(--p-surface-500) 72%,white 28%) calc(50% + 1px),transparent calc(50% + 1px),transparent 100%);cursor:col-resize;touch-action:none;transition:background .14s ease,opacity .14s ease,filter .14s ease}.mt-timeline-splitter:hover,.mt-timeline-splitter-active,.mt-timeline-splitter:focus-visible{background:linear-gradient(90deg,transparent 0,transparent calc(50% - 4px),color-mix(in srgb,var(--p-primary-color) 22%,transparent) calc(50% - 4px),color-mix(in srgb,var(--p-primary-color) 22%,transparent) calc(50% + 4px),transparent calc(50% + 4px),transparent 100%),linear-gradient(90deg,transparent 0,transparent calc(50% - 1px),color-mix(in srgb,var(--p-primary-color) 88%,white 12%) calc(50% - 1px),color-mix(in srgb,var(--p-primary-color) 88%,white 12%) calc(50% + 1px),transparent calc(50% + 1px),transparent 100%)}.mt-timeline-splitter:before{content:\"\";position:absolute;top:50%;inset-inline-start:50%;width:16px;height:42px;transform:translate(-50%,-50%) scale(1);opacity:1;border-radius:9999px;border:1px solid color-mix(in srgb,var(--p-surface-300) 72%,transparent);background:var(--p-surface-0);box-shadow:0 6px 16px -14px color-mix(in srgb,var(--p-surface-400) 18%,transparent),0 2px 6px -4px color-mix(in srgb,black 16%,transparent);pointer-events:none;transition:opacity .14s ease,transform .14s ease,border-color .14s ease,box-shadow .14s ease}.mt-timeline-splitter:after{content:\"\";position:absolute;top:50%;inset-inline-start:50%;width:6px;height:16px;transform:translate(-50%,-50%) scale(1);opacity:1;border-radius:9999px;background:linear-gradient(90deg,color-mix(in srgb,var(--p-surface-500) 78%,white 22%) 0,color-mix(in srgb,var(--p-surface-500) 78%,white 22%) 2px,transparent 2px,transparent 4px,color-mix(in srgb,var(--p-surface-500) 78%,white 22%) 4px,color-mix(in srgb,var(--p-surface-500) 78%,white 22%) 6px);pointer-events:none;transition:opacity .14s ease,transform .14s ease,background .14s ease}.mt-timeline-splitter:hover:before,.mt-timeline-splitter-active:before,.mt-timeline-splitter:focus-visible:before{border-color:color-mix(in srgb,var(--p-primary-color) 18%,var(--p-surface-200));box-shadow:0 8px 18px -16px color-mix(in srgb,var(--p-primary-color) 28%,transparent),0 4px 8px -6px color-mix(in srgb,black 18%,transparent)}.mt-timeline-splitter:hover:after,.mt-timeline-splitter-active:after,.mt-timeline-splitter:focus-visible:after{background:linear-gradient(90deg,color-mix(in srgb,var(--p-primary-color) 88%,white 12%) 0,color-mix(in srgb,var(--p-primary-color) 88%,white 12%) 2px,transparent 2px,transparent 4px,color-mix(in srgb,var(--p-primary-color) 88%,white 12%) 4px,color-mix(in srgb,var(--p-primary-color) 88%,white 12%) 6px)}.mt-timeline-splitter:hover{filter:saturate(1.03)}.mt-timeline-splitter:focus-visible{outline:none}.mt-timeline-splitter:focus-visible:before{box-shadow:0 0 0 3px color-mix(in srgb,var(--p-primary-color) 14%,transparent),0 8px 18px -16px color-mix(in srgb,var(--p-primary-color) 28%,transparent),0 4px 8px -6px color-mix(in srgb,black 18%,transparent)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: TimelineGanttHeader, selector: "mt-timeline-gantt-header", inputs: ["timelineMode", "resolvedColumns", "orderedGanttSegments", "ganttCanvasWidth", "effectiveGanttSegmentWidthPx", "zoomToFit", "renderColumns", "renderTimeline"] }, { kind: "component", type: TimelineGanttRow, selector: "mt-timeline-gantt-row", inputs: ["item", "resolvedColumns", "ganttCanvasWidth", "laneInsetPx", "renderColumns", "renderTimeline", "columnTemplatesByKey", "progressTemplateDirective"], outputs: ["toggleCollapse", "progressClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineGantt, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TimelineGantt, decorators: [{
             type: Component,
             args: [{ selector: 'mt-timeline-gantt', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
                         TranslocoDirective,
                         TimelineGanttHeader,
                         TimelineGanttRow,
-                    ], template: "<!-- Gantt view shell: scroll viewport + sized timeline table. -->\r\n<div\r\n  class=\"min-h-56 min-w-0 overflow-hidden py-2\"\r\n  *transloco=\"let t; prefix: 'timeline'\"\r\n>\r\n  <div\r\n    class=\"flex min-w-0 border border-surface bg-content\"\r\n    #ganttSplitContainer\r\n  >\r\n    <!-- Fixed metadata columns pane. -->\r\n    <div\r\n      class=\"shrink-0 overflow-hidden\"\r\n      [style.width.px]=\"resolvedColumnsPaneWidthPx()\"\r\n    >\r\n      <div class=\"mt-timeline-scroll h-full overflow-x-auto overflow-y-hidden\">\r\n        <div class=\"min-w-full\" [style.width.px]=\"columnsContentWidthPx()\">\r\n          <mt-timeline-gantt-header\r\n            [timelineMode]=\"timelineMode()\"\r\n            [resolvedColumns]=\"resolvedColumns()\"\r\n            [orderedGanttSegments]=\"orderedGanttSegments()\"\r\n            [ganttCanvasWidth]=\"0\"\r\n            [effectiveGanttSegmentWidthPx]=\"effectiveGanttSegmentWidthPx()\"\r\n            [zoomToFit]=\"zoomToFit()\"\r\n            [renderTimeline]=\"false\"\r\n          />\r\n\r\n          <div>\r\n            @for (item of resolvedGanttItems(); track $index) {\r\n              <mt-timeline-gantt-row\r\n                [item]=\"item\"\r\n                [resolvedColumns]=\"resolvedColumns()\"\r\n                [ganttCanvasWidth]=\"0\"\r\n                [laneInsetPx]=\"laneInsetPx()\"\r\n                [columnTemplatesByKey]=\"columnTemplatesByKey()\"\r\n                [progressTemplateDirective]=\"progressTemplateDirective()\"\r\n                [renderTimeline]=\"false\"\r\n                (toggleCollapse)=\"onToggleCollapse($event)\"\r\n                (progressClick)=\"onRowProgressClick($event)\"\r\n              />\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    @if (canResizeColumnsPane()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"mt-timeline-splitter shrink-0\"\r\n        [class.mt-timeline-splitter-active]=\"isColumnsResizing()\"\r\n        (pointerdown)=\"onSplitterPointerDown($event)\"\r\n        (dblclick)=\"onSplitterDoubleClick()\"\r\n        (keydown)=\"onSplitterKeyDown($event)\"\r\n        [attr.aria-label]=\"t('resize-columns')\"\r\n        [title]=\"t('resize-columns-hint')\"\r\n      ></button>\r\n    }\r\n\r\n    <!-- Scrollable timeline pane (horizontal scroll is limited to this area). -->\r\n    <div\r\n      class=\"mt-timeline-scroll min-w-0 flex-1 overflow-x-auto overflow-y-hidden\"\r\n      #ganttScrollViewport\r\n    >\r\n      <div class=\"min-w-full\" [style.width.px]=\"ganttCanvasWidth()\">\r\n        <mt-timeline-gantt-header\r\n          [timelineMode]=\"timelineMode()\"\r\n          [resolvedColumns]=\"resolvedColumns()\"\r\n          [orderedGanttSegments]=\"orderedGanttSegments()\"\r\n          [ganttCanvasWidth]=\"ganttCanvasWidth()\"\r\n          [effectiveGanttSegmentWidthPx]=\"effectiveGanttSegmentWidthPx()\"\r\n          [zoomToFit]=\"zoomToFit()\"\r\n          [renderColumns]=\"false\"\r\n        />\r\n\r\n        <div>\r\n          @for (item of resolvedGanttItems(); track $index) {\r\n            <mt-timeline-gantt-row\r\n              [item]=\"item\"\r\n              [resolvedColumns]=\"[]\"\r\n              [ganttCanvasWidth]=\"ganttCanvasWidth()\"\r\n              [laneInsetPx]=\"laneInsetPx()\"\r\n              [columnTemplatesByKey]=\"columnTemplatesByKey()\"\r\n              [progressTemplateDirective]=\"progressTemplateDirective()\"\r\n              [renderColumns]=\"false\"\r\n              (toggleCollapse)=\"onToggleCollapse($event)\"\r\n              (progressClick)=\"onRowProgressClick($event)\"\r\n            />\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;min-width:0;max-width:100%}.mt-timeline-scroll{min-width:0;scrollbar-width:thin;scrollbar-color:var(--p-surface-400) transparent}.mt-timeline-scroll::-webkit-scrollbar{height:10px}.mt-timeline-scroll::-webkit-scrollbar-track{background:color-mix(in srgb,var(--p-surface-200) 30%,transparent);border-radius:9999px}.mt-timeline-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p-surface-500) 60%,transparent);border-radius:9999px;border:2px solid transparent;background-clip:content-box}.mt-timeline-scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--p-surface-600) 65%,transparent);background-clip:content-box}.mt-timeline-splitter{position:relative;width:10px;min-width:10px;border:0;overflow:visible;background:linear-gradient(90deg,transparent 0,transparent calc(50% - 4px),color-mix(in srgb,var(--p-surface-300) 45%,transparent) calc(50% - 4px),color-mix(in srgb,var(--p-surface-300) 45%,transparent) calc(50% + 4px),transparent calc(50% + 4px),transparent 100%),linear-gradient(90deg,transparent 0,transparent calc(50% - 1px),color-mix(in srgb,var(--p-surface-500) 72%,white 28%) calc(50% - 1px),color-mix(in srgb,var(--p-surface-500) 72%,white 28%) calc(50% + 1px),transparent calc(50% + 1px),transparent 100%);cursor:col-resize;touch-action:none;transition:background .14s ease,opacity .14s ease,filter .14s ease}.mt-timeline-splitter:hover,.mt-timeline-splitter-active,.mt-timeline-splitter:focus-visible{background:linear-gradient(90deg,transparent 0,transparent calc(50% - 4px),color-mix(in srgb,var(--p-primary-color) 22%,transparent) calc(50% - 4px),color-mix(in srgb,var(--p-primary-color) 22%,transparent) calc(50% + 4px),transparent calc(50% + 4px),transparent 100%),linear-gradient(90deg,transparent 0,transparent calc(50% - 1px),color-mix(in srgb,var(--p-primary-color) 88%,white 12%) calc(50% - 1px),color-mix(in srgb,var(--p-primary-color) 88%,white 12%) calc(50% + 1px),transparent calc(50% + 1px),transparent 100%)}.mt-timeline-splitter:before{content:\"\";position:absolute;top:50%;inset-inline-start:50%;width:16px;height:42px;transform:translate(-50%,-50%) scale(1);opacity:1;border-radius:9999px;border:1px solid color-mix(in srgb,var(--p-surface-300) 72%,transparent);background:var(--p-surface-0);box-shadow:0 6px 16px -14px color-mix(in srgb,var(--p-surface-400) 18%,transparent),0 2px 6px -4px color-mix(in srgb,black 16%,transparent);pointer-events:none;transition:opacity .14s ease,transform .14s ease,border-color .14s ease,box-shadow .14s ease}.mt-timeline-splitter:after{content:\"\";position:absolute;top:50%;inset-inline-start:50%;width:6px;height:16px;transform:translate(-50%,-50%) scale(1);opacity:1;border-radius:9999px;background:linear-gradient(90deg,color-mix(in srgb,var(--p-surface-500) 78%,white 22%) 0,color-mix(in srgb,var(--p-surface-500) 78%,white 22%) 2px,transparent 2px,transparent 4px,color-mix(in srgb,var(--p-surface-500) 78%,white 22%) 4px,color-mix(in srgb,var(--p-surface-500) 78%,white 22%) 6px);pointer-events:none;transition:opacity .14s ease,transform .14s ease,background .14s ease}.mt-timeline-splitter:hover:before,.mt-timeline-splitter-active:before,.mt-timeline-splitter:focus-visible:before{border-color:color-mix(in srgb,var(--p-primary-color) 18%,var(--p-surface-200));box-shadow:0 8px 18px -16px color-mix(in srgb,var(--p-primary-color) 28%,transparent),0 4px 8px -6px color-mix(in srgb,black 18%,transparent)}.mt-timeline-splitter:hover:after,.mt-timeline-splitter-active:after,.mt-timeline-splitter:focus-visible:after{background:linear-gradient(90deg,color-mix(in srgb,var(--p-primary-color) 88%,white 12%) 0,color-mix(in srgb,var(--p-primary-color) 88%,white 12%) 2px,transparent 2px,transparent 4px,color-mix(in srgb,var(--p-primary-color) 88%,white 12%) 4px,color-mix(in srgb,var(--p-primary-color) 88%,white 12%) 6px)}.mt-timeline-splitter:hover{filter:saturate(1.03)}.mt-timeline-splitter:focus-visible{outline:none}.mt-timeline-splitter:focus-visible:before{box-shadow:0 0 0 3px color-mix(in srgb,var(--p-primary-color) 14%,transparent),0 8px 18px -16px color-mix(in srgb,var(--p-primary-color) 28%,transparent),0 4px 8px -6px color-mix(in srgb,black 18%,transparent)}\n"] }]
+                    ], template: "<!-- Gantt view shell: scroll viewport + sized timeline table. -->\n<div\n  class=\"min-h-56 min-w-0 overflow-hidden py-2\"\n  *transloco=\"let t; prefix: 'timeline'\"\n>\n  @if (isVirtualScrollActive()) {\n    <div\n      class=\"flex min-w-0 border border-surface bg-content\"\n      #ganttSplitContainer\n    >\n      <div\n        class=\"shrink-0 overflow-hidden\"\n        [style.width.px]=\"resolvedColumnsPaneWidthPx()\"\n      >\n        <div\n          #columnsHeaderScrollViewport\n          class=\"mt-timeline-scroll mt-timeline-scrollbar-hidden overflow-x-auto overflow-y-hidden\"\n          (scroll)=\"onColumnsHeaderScroll($event)\"\n        >\n          <div class=\"min-w-full\" [style.width.px]=\"columnsContentWidthPx()\">\n            <mt-timeline-gantt-header\n              [timelineMode]=\"timelineMode()\"\n              [resolvedColumns]=\"resolvedColumns()\"\n              [orderedGanttSegments]=\"orderedGanttSegments()\"\n              [ganttCanvasWidth]=\"0\"\n              [effectiveGanttSegmentWidthPx]=\"effectiveGanttSegmentWidthPx()\"\n              [zoomToFit]=\"zoomToFit()\"\n              [renderTimeline]=\"false\"\n            />\n          </div>\n        </div>\n      </div>\n\n      @if (canResizeColumnsPane()) {\n        <button\n          type=\"button\"\n          class=\"mt-timeline-splitter shrink-0\"\n          [class.mt-timeline-splitter-active]=\"isColumnsResizing()\"\n          (pointerdown)=\"onSplitterPointerDown($event)\"\n          (dblclick)=\"onSplitterDoubleClick()\"\n          (keydown)=\"onSplitterKeyDown($event)\"\n          [attr.aria-label]=\"t('resize-columns')\"\n          [title]=\"t('resize-columns-hint')\"\n        ></button>\n      }\n\n      <div class=\"min-w-0 flex-1 overflow-hidden\">\n        <div\n          #timelineHeaderScrollViewport\n          class=\"mt-timeline-scroll mt-timeline-scrollbar-hidden overflow-x-auto overflow-y-hidden\"\n          (scroll)=\"onTimelineHeaderScroll($event)\"\n        >\n          <div class=\"min-w-full\" [style.width.px]=\"ganttCanvasWidth()\">\n            <mt-timeline-gantt-header\n              [timelineMode]=\"timelineMode()\"\n              [resolvedColumns]=\"resolvedColumns()\"\n              [orderedGanttSegments]=\"orderedGanttSegments()\"\n              [ganttCanvasWidth]=\"ganttCanvasWidth()\"\n              [effectiveGanttSegmentWidthPx]=\"effectiveGanttSegmentWidthPx()\"\n              [zoomToFit]=\"zoomToFit()\"\n              [renderColumns]=\"false\"\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"flex min-w-0 border border-t-0 border-surface bg-content\">\n      <div\n        class=\"shrink-0 overflow-hidden\"\n        [style.width.px]=\"resolvedColumnsPaneWidthPx()\"\n      >\n        <div\n          #columnsBodyScrollViewport\n          class=\"mt-timeline-scroll overflow-auto\"\n          [style.height.px]=\"resolvedVirtualScrollBodyHeightPx()\"\n          (scroll)=\"onColumnsBodyScroll($event)\"\n        >\n          <div class=\"min-w-full\" [style.width.px]=\"columnsContentWidthPx()\">\n            @if (virtualScrollTopSpacerHeightPx() > 0) {\n              <div [style.height.px]=\"virtualScrollTopSpacerHeightPx()\"></div>\n            }\n\n            @for (item of visibleResolvedGanttItems(); track item.id) {\n              <mt-timeline-gantt-row\n                [item]=\"item\"\n                [resolvedColumns]=\"resolvedColumns()\"\n                [ganttCanvasWidth]=\"0\"\n                [laneInsetPx]=\"laneInsetPx()\"\n                [columnTemplatesByKey]=\"columnTemplatesByKey()\"\n                [progressTemplateDirective]=\"progressTemplateDirective()\"\n                [renderTimeline]=\"false\"\n                (toggleCollapse)=\"onToggleCollapse($event)\"\n                (progressClick)=\"onRowProgressClick($event)\"\n              />\n            }\n\n            @if (virtualScrollBottomSpacerHeightPx() > 0) {\n              <div\n                [style.height.px]=\"virtualScrollBottomSpacerHeightPx()\"\n              ></div>\n            }\n          </div>\n        </div>\n      </div>\n\n      @if (canResizeColumnsPane()) {\n        <div\n          class=\"w-[10px] min-w-[10px] shrink-0 border-e border-surface bg-surface-50\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n\n      <div class=\"min-w-0 flex-1 overflow-hidden\">\n        <div\n          #timelineBodyScrollViewport\n          #ganttScrollViewport\n          class=\"mt-timeline-scroll overflow-auto\"\n          [style.height.px]=\"resolvedVirtualScrollBodyHeightPx()\"\n          (scroll)=\"onTimelineBodyScroll($event)\"\n        >\n          <div class=\"min-w-full\" [style.width.px]=\"ganttCanvasWidth()\">\n            @if (virtualScrollTopSpacerHeightPx() > 0) {\n              <div [style.height.px]=\"virtualScrollTopSpacerHeightPx()\"></div>\n            }\n\n            @for (item of visibleResolvedGanttItems(); track item.id) {\n              <mt-timeline-gantt-row\n                [item]=\"item\"\n                [resolvedColumns]=\"[]\"\n                [ganttCanvasWidth]=\"ganttCanvasWidth()\"\n                [laneInsetPx]=\"laneInsetPx()\"\n                [columnTemplatesByKey]=\"columnTemplatesByKey()\"\n                [progressTemplateDirective]=\"progressTemplateDirective()\"\n                [renderColumns]=\"false\"\n                (toggleCollapse)=\"onToggleCollapse($event)\"\n                (progressClick)=\"onRowProgressClick($event)\"\n              />\n            }\n\n            @if (virtualScrollBottomSpacerHeightPx() > 0) {\n              <div\n                [style.height.px]=\"virtualScrollBottomSpacerHeightPx()\"\n              ></div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  } @else {\n    <div\n      class=\"flex min-w-0 border border-surface bg-content\"\n      #ganttSplitContainer\n    >\n      <!-- Fixed metadata columns pane. -->\n      <div\n        class=\"shrink-0 overflow-hidden\"\n        [style.width.px]=\"resolvedColumnsPaneWidthPx()\"\n      >\n        <div\n          class=\"mt-timeline-scroll h-full overflow-x-auto overflow-y-hidden\"\n        >\n          <div class=\"min-w-full\" [style.width.px]=\"columnsContentWidthPx()\">\n            <mt-timeline-gantt-header\n              [timelineMode]=\"timelineMode()\"\n              [resolvedColumns]=\"resolvedColumns()\"\n              [orderedGanttSegments]=\"orderedGanttSegments()\"\n              [ganttCanvasWidth]=\"0\"\n              [effectiveGanttSegmentWidthPx]=\"effectiveGanttSegmentWidthPx()\"\n              [zoomToFit]=\"zoomToFit()\"\n              [renderTimeline]=\"false\"\n            />\n\n            <div>\n              @for (item of resolvedGanttItems(); track item.id) {\n                <mt-timeline-gantt-row\n                  [item]=\"item\"\n                  [resolvedColumns]=\"resolvedColumns()\"\n                  [ganttCanvasWidth]=\"0\"\n                  [laneInsetPx]=\"laneInsetPx()\"\n                  [columnTemplatesByKey]=\"columnTemplatesByKey()\"\n                  [progressTemplateDirective]=\"progressTemplateDirective()\"\n                  [renderTimeline]=\"false\"\n                  (toggleCollapse)=\"onToggleCollapse($event)\"\n                  (progressClick)=\"onRowProgressClick($event)\"\n                />\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n\n      @if (canResizeColumnsPane()) {\n        <button\n          type=\"button\"\n          class=\"mt-timeline-splitter shrink-0\"\n          [class.mt-timeline-splitter-active]=\"isColumnsResizing()\"\n          (pointerdown)=\"onSplitterPointerDown($event)\"\n          (dblclick)=\"onSplitterDoubleClick()\"\n          (keydown)=\"onSplitterKeyDown($event)\"\n          [attr.aria-label]=\"t('resize-columns')\"\n          [title]=\"t('resize-columns-hint')\"\n        ></button>\n      }\n\n      <!-- Scrollable timeline pane (horizontal scroll is limited to this area). -->\n      <div\n        class=\"mt-timeline-scroll min-w-0 flex-1 overflow-x-auto overflow-y-hidden\"\n        #ganttScrollViewport\n      >\n        <div class=\"min-w-full\" [style.width.px]=\"ganttCanvasWidth()\">\n          <mt-timeline-gantt-header\n            [timelineMode]=\"timelineMode()\"\n            [resolvedColumns]=\"resolvedColumns()\"\n            [orderedGanttSegments]=\"orderedGanttSegments()\"\n            [ganttCanvasWidth]=\"ganttCanvasWidth()\"\n            [effectiveGanttSegmentWidthPx]=\"effectiveGanttSegmentWidthPx()\"\n            [zoomToFit]=\"zoomToFit()\"\n            [renderColumns]=\"false\"\n          />\n\n          <div>\n            @for (item of resolvedGanttItems(); track item.id) {\n              <mt-timeline-gantt-row\n                [item]=\"item\"\n                [resolvedColumns]=\"[]\"\n                [ganttCanvasWidth]=\"ganttCanvasWidth()\"\n                [laneInsetPx]=\"laneInsetPx()\"\n                [columnTemplatesByKey]=\"columnTemplatesByKey()\"\n                [progressTemplateDirective]=\"progressTemplateDirective()\"\n                [renderColumns]=\"false\"\n                (toggleCollapse)=\"onToggleCollapse($event)\"\n                (progressClick)=\"onRowProgressClick($event)\"\n              />\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;min-width:0;max-width:100%}.mt-timeline-scroll{min-width:0;scrollbar-width:thin;scrollbar-color:var(--p-surface-400) transparent}.mt-timeline-scroll::-webkit-scrollbar{height:10px}.mt-timeline-scroll::-webkit-scrollbar-track{background:color-mix(in srgb,var(--p-surface-200) 30%,transparent);border-radius:9999px}.mt-timeline-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p-surface-500) 60%,transparent);border-radius:9999px;border:2px solid transparent;background-clip:content-box}.mt-timeline-scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--p-surface-600) 65%,transparent);background-clip:content-box}.mt-timeline-scrollbar-hidden{scrollbar-width:none}.mt-timeline-scrollbar-hidden::-webkit-scrollbar{width:0;height:0}.mt-timeline-splitter{position:relative;width:10px;min-width:10px;border:0;overflow:visible;background:linear-gradient(90deg,transparent 0,transparent calc(50% - 4px),color-mix(in srgb,var(--p-surface-300) 45%,transparent) calc(50% - 4px),color-mix(in srgb,var(--p-surface-300) 45%,transparent) calc(50% + 4px),transparent calc(50% + 4px),transparent 100%),linear-gradient(90deg,transparent 0,transparent calc(50% - 1px),color-mix(in srgb,var(--p-surface-500) 72%,white 28%) calc(50% - 1px),color-mix(in srgb,var(--p-surface-500) 72%,white 28%) calc(50% + 1px),transparent calc(50% + 1px),transparent 100%);cursor:col-resize;touch-action:none;transition:background .14s ease,opacity .14s ease,filter .14s ease}.mt-timeline-splitter:hover,.mt-timeline-splitter-active,.mt-timeline-splitter:focus-visible{background:linear-gradient(90deg,transparent 0,transparent calc(50% - 4px),color-mix(in srgb,var(--p-primary-color) 22%,transparent) calc(50% - 4px),color-mix(in srgb,var(--p-primary-color) 22%,transparent) calc(50% + 4px),transparent calc(50% + 4px),transparent 100%),linear-gradient(90deg,transparent 0,transparent calc(50% - 1px),color-mix(in srgb,var(--p-primary-color) 88%,white 12%) calc(50% - 1px),color-mix(in srgb,var(--p-primary-color) 88%,white 12%) calc(50% + 1px),transparent calc(50% + 1px),transparent 100%)}.mt-timeline-splitter:before{content:\"\";position:absolute;top:50%;inset-inline-start:50%;width:16px;height:42px;transform:translate(-50%,-50%) scale(1);opacity:1;border-radius:9999px;border:1px solid color-mix(in srgb,var(--p-surface-300) 72%,transparent);background:var(--p-surface-0);box-shadow:0 6px 16px -14px color-mix(in srgb,var(--p-surface-400) 18%,transparent),0 2px 6px -4px color-mix(in srgb,black 16%,transparent);pointer-events:none;transition:opacity .14s ease,transform .14s ease,border-color .14s ease,box-shadow .14s ease}.mt-timeline-splitter:after{content:\"\";position:absolute;top:50%;inset-inline-start:50%;width:6px;height:16px;transform:translate(-50%,-50%) scale(1);opacity:1;border-radius:9999px;background:linear-gradient(90deg,color-mix(in srgb,var(--p-surface-500) 78%,white 22%) 0,color-mix(in srgb,var(--p-surface-500) 78%,white 22%) 2px,transparent 2px,transparent 4px,color-mix(in srgb,var(--p-surface-500) 78%,white 22%) 4px,color-mix(in srgb,var(--p-surface-500) 78%,white 22%) 6px);pointer-events:none;transition:opacity .14s ease,transform .14s ease,background .14s ease}.mt-timeline-splitter:hover:before,.mt-timeline-splitter-active:before,.mt-timeline-splitter:focus-visible:before{border-color:color-mix(in srgb,var(--p-primary-color) 18%,var(--p-surface-200));box-shadow:0 8px 18px -16px color-mix(in srgb,var(--p-primary-color) 28%,transparent),0 4px 8px -6px color-mix(in srgb,black 18%,transparent)}.mt-timeline-splitter:hover:after,.mt-timeline-splitter-active:after,.mt-timeline-splitter:focus-visible:after{background:linear-gradient(90deg,color-mix(in srgb,var(--p-primary-color) 88%,white 12%) 0,color-mix(in srgb,var(--p-primary-color) 88%,white 12%) 2px,transparent 2px,transparent 4px,color-mix(in srgb,var(--p-primary-color) 88%,white 12%) 4px,color-mix(in srgb,var(--p-primary-color) 88%,white 12%) 6px)}.mt-timeline-splitter:hover{filter:saturate(1.03)}.mt-timeline-splitter:focus-visible{outline:none}.mt-timeline-splitter:focus-visible:before{box-shadow:0 0 0 3px color-mix(in srgb,var(--p-primary-color) 14%,transparent),0 8px 18px -16px color-mix(in srgb,var(--p-primary-color) 28%,transparent),0 4px 8px -6px color-mix(in srgb,black 18%,transparent)}\n"] }]
         }], propDecorators: { ganttSplitContainerRef: [{
                 type: ViewChild,
                 args: ['ganttSplitContainer']
             }], ganttScrollViewportRef: [{
                 type: ViewChild,
                 args: ['ganttScrollViewport']
-            }], timelineMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "timelineMode", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], ganttTitleColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttTitleColumnLabel", required: false }] }], ganttStatusColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttStatusColumnLabel", required: false }] }], ganttInitiativeColumnWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttInitiativeColumnWidthPx", required: false }] }], ganttStatusColumnWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttStatusColumnWidthPx", required: false }] }], showGanttStatusColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGanttStatusColumn", required: false }] }], ganttSegmentWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttSegmentWidthPx", required: false }] }], defaultVisibleColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultVisibleColumns", required: false }] }], columnsPaneMinWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsPaneMinWidthPx", required: false }] }], columnsPaneMaxWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsPaneMaxWidthPx", required: false }] }], zoomToFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomToFit", required: false }] }], mappedGanttNodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "mappedGanttNodes", required: false }] }], orderedGanttSegments: [{ type: i0.Input, args: [{ isSignal: true, alias: "orderedGanttSegments", required: false }] }], collapsedGanttIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedGanttIds", required: false }] }], columnTemplatesByKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnTemplatesByKey", required: false }] }], progressTemplateDirective: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressTemplateDirective", required: false }] }], toggleCollapse: [{ type: i0.Output, args: ["toggleCollapse"] }], progressClick: [{ type: i0.Output, args: ["progressClick"] }] } });
+            }], columnsHeaderScrollViewport: [{
+                type: ViewChild,
+                args: ['columnsHeaderScrollViewport']
+            }], columnsBodyScrollViewportRef: [{
+                type: ViewChild,
+                args: ['columnsBodyScrollViewport']
+            }], timelineHeaderScrollViewport: [{
+                type: ViewChild,
+                args: ['timelineHeaderScrollViewport']
+            }], timelineBodyScrollViewport: [{
+                type: ViewChild,
+                args: ['timelineBodyScrollViewport']
+            }], timelineMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "timelineMode", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], ganttTitleColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttTitleColumnLabel", required: false }] }], ganttStatusColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttStatusColumnLabel", required: false }] }], ganttInitiativeColumnWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttInitiativeColumnWidthPx", required: false }] }], ganttStatusColumnWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttStatusColumnWidthPx", required: false }] }], showGanttStatusColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGanttStatusColumn", required: false }] }], ganttSegmentWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttSegmentWidthPx", required: false }] }], defaultVisibleColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultVisibleColumns", required: false }] }], columnsPaneMinWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsPaneMinWidthPx", required: false }] }], columnsPaneMaxWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsPaneMaxWidthPx", required: false }] }], enableVirtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableVirtualScroll", required: false }] }], virtualScrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollThreshold", required: false }] }], virtualScrollBodyHeightPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollBodyHeightPx", required: false }] }], zoomToFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomToFit", required: false }] }], mappedGanttNodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "mappedGanttNodes", required: false }] }], orderedGanttSegments: [{ type: i0.Input, args: [{ isSignal: true, alias: "orderedGanttSegments", required: false }] }], collapsedGanttIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedGanttIds", required: false }] }], columnTemplatesByKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnTemplatesByKey", required: false }] }], progressTemplateDirective: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressTemplateDirective", required: false }] }], toggleCollapse: [{ type: i0.Output, args: ["toggleCollapse"] }], progressClick: [{ type: i0.Output, args: ["progressClick"] }], timelineViewportWidthChange: [{ type: i0.Output, args: ["timelineViewportWidthChange"] }] } });
 
 /**
  * Shared timeline header.
@@ -769,34 +887,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
  *   the parent timeline container.
  */
 class TimelineHeader {
-    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
-    timelineMode = input('quarterly', ...(ngDevMode ? [{ debugName: "timelineMode" }] : []));
-    timelineModeOptions = input([], ...(ngDevMode ? [{ debugName: "timelineModeOptions" }] : []));
-    showZoomToFitControl = input(false, ...(ngDevMode ? [{ debugName: "showZoomToFitControl" }] : []));
-    zoomToFit = input(false, ...(ngDevMode ? [{ debugName: "zoomToFit" }] : []));
-    zoomToFitDisabled = input(false, ...(ngDevMode ? [{ debugName: "zoomToFitDisabled" }] : []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    timelineMode = input('quarterly', ...(ngDevMode ? [{ debugName: "timelineMode" }] : /* istanbul ignore next */ []));
+    timelineModeOptions = input([], ...(ngDevMode ? [{ debugName: "timelineModeOptions" }] : /* istanbul ignore next */ []));
     timelineModeChange = output();
-    zoomToFitToggle = output();
     // Re-emits selector changes so parent owns state updates.
     onTimelineModeChange(mode) {
         this.timelineModeChange.emit(mode);
     }
-    onZoomToFitToggle() {
-        if (this.zoomToFitDisabled()) {
-            return;
-        }
-        this.zoomToFitToggle.emit();
-    }
-    getZoomToFitTooltip() {
-        return this.zoomToFit() ? 'Disable zoom to fit' : 'Zoom to fit';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: TimelineHeader, isStandalone: true, selector: "mt-timeline-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, timelineMode: { classPropertyName: "timelineMode", publicName: "timelineMode", isSignal: true, isRequired: false, transformFunction: null }, timelineModeOptions: { classPropertyName: "timelineModeOptions", publicName: "timelineModeOptions", isSignal: true, isRequired: false, transformFunction: null }, showZoomToFitControl: { classPropertyName: "showZoomToFitControl", publicName: "showZoomToFitControl", isSignal: true, isRequired: false, transformFunction: null }, zoomToFit: { classPropertyName: "zoomToFit", publicName: "zoomToFit", isSignal: true, isRequired: false, transformFunction: null }, zoomToFitDisabled: { classPropertyName: "zoomToFitDisabled", publicName: "zoomToFitDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { timelineModeChange: "timelineModeChange", zoomToFitToggle: "zoomToFitToggle" }, ngImport: i0, template: "<!-- Timeline title + scale mode selector. -->\r\n<div\r\n  class=\"flex flex-wrap items-center justify-between gap-3\"\r\n  *transloco=\"let t; prefix: 'timeline'\"\r\n>\r\n  <div class=\"flex items-center gap-2\">\r\n    <mt-icon icon=\"custom.timeline-point\" class=\"text-base\"></mt-icon>\r\n    <h3 class=\"text-base font-semibold\">{{ title() || t(\"timeline\") }}</h3>\r\n  </div>\r\n\r\n  <!-- Scale mode switcher (monthly/quarterly/etc.). -->\r\n  <div class=\"flex flex-wrap items-center justify-end gap-2\">\r\n    @if (showZoomToFitControl()) {\r\n      <mt-button\r\n        class=\"shrink-0\"\r\n        type=\"button\"\r\n        icon=\"layout.maximize-01\"\r\n        size=\"large\"\r\n        [tooltip]=\"getZoomToFitTooltip()\"\r\n        [severity]=\"zoomToFit() ? 'primary' : 'secondary'\"\r\n        [outlined]=\"!zoomToFit()\"\r\n        [disabled]=\"zoomToFitDisabled()\"\r\n        (onClick)=\"onZoomToFitToggle()\"\r\n      />\r\n    }\r\n\r\n    <div class=\"w-44\">\r\n      <mt-select-field\r\n        [field]=\"false\"\r\n        [options]=\"timelineModeOptions()\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [showClear]=\"false\"\r\n        [hasPlaceholderPrefix]=\"false\"\r\n        [placeholder]=\"t('timeline-mode')\"\r\n        [ngModel]=\"timelineMode()\"\r\n        (onChange)=\"onTimelineModeChange($event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TimelineHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: TimelineHeader, isStandalone: true, selector: "mt-timeline-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, timelineMode: { classPropertyName: "timelineMode", publicName: "timelineMode", isSignal: true, isRequired: false, transformFunction: null }, timelineModeOptions: { classPropertyName: "timelineModeOptions", publicName: "timelineModeOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { timelineModeChange: "timelineModeChange" }, ngImport: i0, template: "<!-- Timeline title + scale mode selector. -->\n<div\n  class=\"flex flex-wrap items-center justify-between gap-3\"\n  *transloco=\"let t; prefix: 'timeline'\"\n>\n  <div class=\"flex items-center gap-2\">\n    <mt-icon icon=\"custom.timeline-point\" class=\"text-base\"></mt-icon>\n    <h3 class=\"text-base font-semibold\">{{ title() || t(\"timeline\") }}</h3>\n  </div>\n\n  <!-- Scale mode switcher (monthly/quarterly/etc.). -->\n  <div class=\"flex flex-wrap items-center justify-end gap-2\">\n    <div class=\"w-44\">\n      <mt-select-field\n        [field]=\"false\"\n        [options]=\"timelineModeOptions()\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        optionIcon=\"icon\"\n        optionIconColor=\"color\"\n        optionAvatarShape=\"circle\"\n        [showClear]=\"false\"\n        [hasPlaceholderPrefix]=\"false\"\n        [placeholder]=\"t('view')\"\n        [ngModel]=\"timelineMode()\"\n        (onChange)=\"onTimelineModeChange($event)\"\n      />\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TimelineHeader, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-timeline-header', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, Button, TranslocoDirective, SelectField, Icon], template: "<!-- Timeline title + scale mode selector. -->\r\n<div\r\n  class=\"flex flex-wrap items-center justify-between gap-3\"\r\n  *transloco=\"let t; prefix: 'timeline'\"\r\n>\r\n  <div class=\"flex items-center gap-2\">\r\n    <mt-icon icon=\"custom.timeline-point\" class=\"text-base\"></mt-icon>\r\n    <h3 class=\"text-base font-semibold\">{{ title() || t(\"timeline\") }}</h3>\r\n  </div>\r\n\r\n  <!-- Scale mode switcher (monthly/quarterly/etc.). -->\r\n  <div class=\"flex flex-wrap items-center justify-end gap-2\">\r\n    @if (showZoomToFitControl()) {\r\n      <mt-button\r\n        class=\"shrink-0\"\r\n        type=\"button\"\r\n        icon=\"layout.maximize-01\"\r\n        size=\"large\"\r\n        [tooltip]=\"getZoomToFitTooltip()\"\r\n        [severity]=\"zoomToFit() ? 'primary' : 'secondary'\"\r\n        [outlined]=\"!zoomToFit()\"\r\n        [disabled]=\"zoomToFitDisabled()\"\r\n        (onClick)=\"onZoomToFitToggle()\"\r\n      />\r\n    }\r\n\r\n    <div class=\"w-44\">\r\n      <mt-select-field\r\n        [field]=\"false\"\r\n        [options]=\"timelineModeOptions()\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [showClear]=\"false\"\r\n        [hasPlaceholderPrefix]=\"false\"\r\n        [placeholder]=\"t('timeline-mode')\"\r\n        [ngModel]=\"timelineMode()\"\r\n        (onChange)=\"onTimelineModeChange($event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], timelineMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "timelineMode", required: false }] }], timelineModeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "timelineModeOptions", required: false }] }], showZoomToFitControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "showZoomToFitControl", required: false }] }], zoomToFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomToFit", required: false }] }], zoomToFitDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomToFitDisabled", required: false }] }], timelineModeChange: [{ type: i0.Output, args: ["timelineModeChange"] }], zoomToFitToggle: [{ type: i0.Output, args: ["zoomToFitToggle"] }] } });
+            args: [{ selector: 'mt-timeline-header', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, TranslocoDirective, SelectField, Icon], template: "<!-- Timeline title + scale mode selector. -->\n<div\n  class=\"flex flex-wrap items-center justify-between gap-3\"\n  *transloco=\"let t; prefix: 'timeline'\"\n>\n  <div class=\"flex items-center gap-2\">\n    <mt-icon icon=\"custom.timeline-point\" class=\"text-base\"></mt-icon>\n    <h3 class=\"text-base font-semibold\">{{ title() || t(\"timeline\") }}</h3>\n  </div>\n\n  <!-- Scale mode switcher (monthly/quarterly/etc.). -->\n  <div class=\"flex flex-wrap items-center justify-end gap-2\">\n    <div class=\"w-44\">\n      <mt-select-field\n        [field]=\"false\"\n        [options]=\"timelineModeOptions()\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        optionIcon=\"icon\"\n        optionIconColor=\"color\"\n        optionAvatarShape=\"circle\"\n        [showClear]=\"false\"\n        [hasPlaceholderPrefix]=\"false\"\n        [placeholder]=\"t('view')\"\n        [ngModel]=\"timelineMode()\"\n        (onChange)=\"onTimelineModeChange($event)\"\n      />\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], timelineMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "timelineMode", required: false }] }], timelineModeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "timelineModeOptions", required: false }] }], timelineModeChange: [{ type: i0.Output, args: ["timelineModeChange"] }] } });
 
 // Default scale mode values (labels are resolved at runtime via i18n).
 const DEFAULT_TIMELINE_MODE_VALUES = [
@@ -805,6 +910,13 @@ const DEFAULT_TIMELINE_MODE_VALUES = [
     'biannually',
     'annually',
 ];
+const ZOOM_TO_FIT_VIEW = 'zoom-to-fit';
+const ZOOM_TO_FIT_MIN_CELL_WIDTH_PX = {
+    monthly: 56,
+    quarterly: 72,
+    biannually: 84,
+    annually: 96,
+};
 /**
  * Dynamic Gantt timeline component.
  *
@@ -826,53 +938,73 @@ class Timeline {
     detailsPopoverClickAnchor;
     transloco = inject(TranslocoService);
     destroyRef = inject(DestroyRef);
-    activeLang = signal(this.transloco.getActiveLang(), ...(ngDevMode ? [{ debugName: "activeLang" }] : []));
-    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
-    emptyMessage = input('', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
-    isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    showHeader = input(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : []));
-    showZoomToFitControl = input(false, ...(ngDevMode ? [{ debugName: "showZoomToFitControl" }] : []));
-    timelineMode = model('quarterly', ...(ngDevMode ? [{ debugName: "timelineMode" }] : []));
-    timelineModeOptions = input([], ...(ngDevMode ? [{ debugName: "timelineModeOptions" }] : []));
+    activeLang = signal(this.transloco.getActiveLang(), ...(ngDevMode ? [{ debugName: "activeLang" }] : /* istanbul ignore next */ []));
+    timelineViewportWidthPx = signal(0, ...(ngDevMode ? [{ debugName: "timelineViewportWidthPx" }] : /* istanbul ignore next */ []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    emptyMessage = input('', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    showHeader = input(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
+    showZoomToFitControl = input(false, ...(ngDevMode ? [{ debugName: "showZoomToFitControl" }] : /* istanbul ignore next */ []));
+    timelineMode = model('quarterly', ...(ngDevMode ? [{ debugName: "timelineMode" }] : /* istanbul ignore next */ []));
+    timelineModeOptions = input([], ...(ngDevMode ? [{ debugName: "timelineModeOptions" }] : /* istanbul ignore next */ []));
     resolvedTimelineModeOptions = computed(() => {
         const options = this.timelineModeOptions();
-        if (options.length)
-            return options;
         this.activeLang(); // reactive dependency for language changes
-        return DEFAULT_TIMELINE_MODE_VALUES.map((value) => ({
-            label: this.transloco.translate(`timeline.mode-${value}`),
-            value,
-        }));
-    }, ...(ngDevMode ? [{ debugName: "resolvedTimelineModeOptions" }] : []));
-    zoomToFit = model(false, ...(ngDevMode ? [{ debugName: "zoomToFit" }] : []));
-    ganttData = input([], ...(ngDevMode ? [{ debugName: "ganttData" }] : []));
-    ganttMapping = input(null, ...(ngDevMode ? [{ debugName: "ganttMapping" }] : []));
+        const baseOptions = options.length
+            ? options
+            : DEFAULT_TIMELINE_MODE_VALUES.map((value) => ({
+                label: this.transloco.translate(`timeline.mode-${value}`),
+                value,
+            }));
+        if (!this.showZoomToFitControl()) {
+            return baseOptions;
+        }
+        const hasZoomToFitOption = baseOptions.some((option) => option.value === ZOOM_TO_FIT_VIEW);
+        if (hasZoomToFitOption) {
+            return baseOptions;
+        }
+        return [
+            ...baseOptions,
+            {
+                label: this.transloco.translate('timeline.mode-zoom-to-fit'),
+                value: ZOOM_TO_FIT_VIEW,
+                icon: 'layout.maximize-01',
+                color: 'primary',
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "resolvedTimelineModeOptions" }] : /* istanbul ignore next */ []));
+    zoomToFit = model(false, ...(ngDevMode ? [{ debugName: "zoomToFit" }] : /* istanbul ignore next */ []));
+    ganttData = input([], ...(ngDevMode ? [{ debugName: "ganttData" }] : /* istanbul ignore next */ []));
+    ganttMapping = input(null, ...(ngDevMode ? [{ debugName: "ganttMapping" }] : /* istanbul ignore next */ []));
     // Null means "legacy defaults". Empty array means "progress-only" mode.
-    columns = input(null, ...(ngDevMode ? [{ debugName: "columns" }] : []));
-    ganttSegmentWidthPx = input(96, ...(ngDevMode ? [{ debugName: "ganttSegmentWidthPx" }] : []));
-    defaultVisibleColumns = input(4, ...(ngDevMode ? [{ debugName: "defaultVisibleColumns" }] : []));
-    columnsPaneMinWidthPx = input(0, ...(ngDevMode ? [{ debugName: "columnsPaneMinWidthPx" }] : []));
-    columnsPaneMaxWidthPx = input(null, ...(ngDevMode ? [{ debugName: "columnsPaneMaxWidthPx" }] : []));
+    columns = input(null, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    ganttSegmentWidthPx = input(96, ...(ngDevMode ? [{ debugName: "ganttSegmentWidthPx" }] : /* istanbul ignore next */ []));
+    defaultVisibleColumns = input(4, ...(ngDevMode ? [{ debugName: "defaultVisibleColumns" }] : /* istanbul ignore next */ []));
+    columnsPaneMinWidthPx = input(0, ...(ngDevMode ? [{ debugName: "columnsPaneMinWidthPx" }] : /* istanbul ignore next */ []));
+    columnsPaneMaxWidthPx = input(null, ...(ngDevMode ? [{ debugName: "columnsPaneMaxWidthPx" }] : /* istanbul ignore next */ []));
+    enableVirtualScroll = input(true, ...(ngDevMode ? [{ debugName: "enableVirtualScroll" }] : /* istanbul ignore next */ []));
+    virtualScrollThreshold = input(120, ...(ngDevMode ? [{ debugName: "virtualScrollThreshold" }] : /* istanbul ignore next */ []));
+    virtualScrollBodyHeightPx = input(640, ...(ngDevMode ? [{ debugName: "virtualScrollBodyHeightPx" }] : /* istanbul ignore next */ []));
     // Backward-compatible defaults when `columns` is null.
-    ganttTitleColumnLabel = input('', ...(ngDevMode ? [{ debugName: "ganttTitleColumnLabel" }] : []));
-    ganttStatusColumnLabel = input('', ...(ngDevMode ? [{ debugName: "ganttStatusColumnLabel" }] : []));
-    ganttInitiativeColumnWidthPx = input(288, ...(ngDevMode ? [{ debugName: "ganttInitiativeColumnWidthPx" }] : []));
-    ganttStatusColumnWidthPx = input(160, ...(ngDevMode ? [{ debugName: "ganttStatusColumnWidthPx" }] : []));
-    showGanttStatusColumn = input(false, ...(ngDevMode ? [{ debugName: "showGanttStatusColumn" }] : []));
-    showGanttDetailsPopup = input(true, ...(ngDevMode ? [{ debugName: "showGanttDetailsPopup" }] : []));
+    ganttTitleColumnLabel = input('', ...(ngDevMode ? [{ debugName: "ganttTitleColumnLabel" }] : /* istanbul ignore next */ []));
+    ganttStatusColumnLabel = input('', ...(ngDevMode ? [{ debugName: "ganttStatusColumnLabel" }] : /* istanbul ignore next */ []));
+    ganttInitiativeColumnWidthPx = input(288, ...(ngDevMode ? [{ debugName: "ganttInitiativeColumnWidthPx" }] : /* istanbul ignore next */ []));
+    ganttStatusColumnWidthPx = input(160, ...(ngDevMode ? [{ debugName: "ganttStatusColumnWidthPx" }] : /* istanbul ignore next */ []));
+    showGanttStatusColumn = input(false, ...(ngDevMode ? [{ debugName: "showGanttStatusColumn" }] : /* istanbul ignore next */ []));
+    showGanttDetailsPopup = input(true, ...(ngDevMode ? [{ debugName: "showGanttDetailsPopup" }] : /* istanbul ignore next */ []));
     // Public events exposed to consumers.
     timelineModeChangeEvent = output();
     ganttItemClick = output();
     // Optional full-template override for the Gantt body.
-    ganttTemplate = contentChild(TimelineGanttTemplateDirective, ...(ngDevMode ? [{ debugName: "ganttTemplate" }] : []));
+    ganttTemplate = contentChild(TimelineGanttTemplateDirective, ...(ngDevMode ? [{ debugName: "ganttTemplate" }] : /* istanbul ignore next */ []));
     // Optional cell template override for a specific column key.
-    columnTemplates = contentChildren((TimelineColumnTemplateDirective), ...(ngDevMode ? [{ debugName: "columnTemplates" }] : []));
+    columnTemplates = contentChildren((TimelineColumnTemplateDirective), ...(ngDevMode ? [{ debugName: "columnTemplates" }] : /* istanbul ignore next */ []));
     // Optional popup content override (clicked progress item details).
-    popoverTemplate = contentChild((TimelinePopoverTemplateDirective), ...(ngDevMode ? [{ debugName: "popoverTemplate" }] : []));
+    popoverTemplate = contentChild((TimelinePopoverTemplateDirective), ...(ngDevMode ? [{ debugName: "popoverTemplate" }] : /* istanbul ignore next */ []));
     // Optional progress bar renderer override.
-    progressTemplate = contentChild((TimelineProgressTemplateDirective), ...(ngDevMode ? [{ debugName: "progressTemplate" }] : []));
-    collapsedGanttIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "collapsedGanttIds" }] : []));
-    selectedGanttItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedGanttItem" }] : []));
+    progressTemplate = contentChild((TimelineProgressTemplateDirective), ...(ngDevMode ? [{ debugName: "progressTemplate" }] : /* istanbul ignore next */ []));
+    collapsedGanttIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "collapsedGanttIds" }] : /* istanbul ignore next */ []));
+    selectedGanttItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedGanttItem" }] : /* istanbul ignore next */ []));
     // Maps `mtTimelineColumn` templates by key for fast lookup in row rendering.
     columnTemplatesByKey = computed(() => {
         const map = new Map();
@@ -882,7 +1014,7 @@ class Timeline {
             }
         }
         return map;
-    }, ...(ngDevMode ? [{ debugName: "columnTemplatesByKey" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "columnTemplatesByKey" }] : /* istanbul ignore next */ []));
     mappedGanttNodes = computed(() => {
         const mapping = this.ganttMapping();
         const data = this.ganttData();
@@ -893,20 +1025,34 @@ class Timeline {
         return data
             .map((item) => this.mapNode(item, mapping, state))
             .filter((item) => item !== null);
-    }, ...(ngDevMode ? [{ debugName: "mappedGanttNodes" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "mappedGanttNodes" }] : /* istanbul ignore next */ []));
+    selectedTimelineView = computed(() => {
+        if (this.timelineMode() === ZOOM_TO_FIT_VIEW || this.zoomToFit()) {
+            return ZOOM_TO_FIT_VIEW;
+        }
+        return this.timelineMode();
+    }, ...(ngDevMode ? [{ debugName: "selectedTimelineView" }] : /* istanbul ignore next */ []));
+    resolvedTimelineRange = computed(() => this.resolveDateRange(this.mappedGanttNodes()), ...(ngDevMode ? [{ debugName: "resolvedTimelineRange" }] : /* istanbul ignore next */ []));
+    resolvedRenderTimelineMode = computed(() => {
+        const selectedView = this.selectedTimelineView();
+        if (selectedView !== ZOOM_TO_FIT_VIEW) {
+            return selectedView;
+        }
+        const range = this.resolvedTimelineRange();
+        if (!range) {
+            return 'quarterly';
+        }
+        return this.resolveZoomToFitMode(range.startAt, range.endAt, this.timelineViewportWidthPx());
+    }, ...(ngDevMode ? [{ debugName: "resolvedRenderTimelineMode" }] : /* istanbul ignore next */ []));
     // Builds time columns from the mapped data date range and selected mode.
     orderedGanttSegments = computed(() => {
-        const nodes = this.mappedGanttNodes();
-        if (!nodes.length) {
-            return [];
-        }
-        const range = this.resolveDateRange(nodes);
+        const range = this.resolvedTimelineRange();
         if (!range) {
             return [];
         }
-        return this.buildSegments(range.startAt, range.endAt, this.timelineMode());
-    }, ...(ngDevMode ? [{ debugName: "orderedGanttSegments" }] : []));
-    canZoomToFit = computed(() => this.orderedGanttSegments().length > 0, ...(ngDevMode ? [{ debugName: "canZoomToFit" }] : []));
+        return this.buildSegments(range.startAt, range.endAt, this.resolvedRenderTimelineMode());
+    }, ...(ngDevMode ? [{ debugName: "orderedGanttSegments" }] : /* istanbul ignore next */ []));
+    isZoomToFitActive = computed(() => this.selectedTimelineView() === ZOOM_TO_FIT_VIEW, ...(ngDevMode ? [{ debugName: "isZoomToFitActive" }] : /* istanbul ignore next */ []));
     constructor() {
         this.transloco.langChanges$
             .pipe(takeUntilDestroyed(this.destroyRef))
@@ -914,17 +1060,19 @@ class Timeline {
     }
     // Timeline mode is controlled by parent model signal to keep it externally bindable.
     onTimelineModeChange(mode) {
-        if (!mode || this.timelineMode() === mode) {
+        if (!mode || this.selectedTimelineView() === mode) {
             return;
         }
+        const enableZoomToFit = mode === ZOOM_TO_FIT_VIEW;
+        this.zoomToFit.set(enableZoomToFit);
         this.timelineMode.set(mode);
         this.timelineModeChangeEvent.emit(mode);
     }
-    onZoomToFitToggle() {
-        if (!this.canZoomToFit()) {
+    onTimelineViewportWidthChange(widthPx) {
+        if (!Number.isFinite(widthPx) || widthPx <= 0) {
             return;
         }
-        this.zoomToFit.update((current) => !current);
+        this.timelineViewportWidthPx.set(widthPx);
     }
     // Handles row progress clicks: emits public event and opens details popover.
     onGanttProgressClick(item, event) {
@@ -1047,10 +1195,24 @@ class Timeline {
                 return this.genSegments(startAt, endAt, 6, (month) => `H ${month < 6 ? 1 : 2}`, 'H');
             case 'annually':
                 return this.genSegments(startAt, endAt, 12, () => 'Y', 'Y');
-            default:
-                return this.genSegments(startAt, endAt, 3, (month) => `Q ${Math.floor(month / 3) + 1}`, 'Q');
         }
     }
+    resolveZoomToFitMode(startAt, endAt, viewportWidthPx) {
+        const availableWidthPx = viewportWidthPx > 0
+            ? viewportWidthPx
+            : Math.max(this.ganttSegmentWidthPx() * 4, 320);
+        for (const mode of DEFAULT_TIMELINE_MODE_VALUES) {
+            const segments = this.buildSegments(startAt, endAt, mode);
+            if (!segments.length) {
+                continue;
+            }
+            const fittedCellWidthPx = availableWidthPx / segments.length;
+            if (fittedCellWidthPx >= ZOOM_TO_FIT_MIN_CELL_WIDTH_PX[mode]) {
+                return mode;
+            }
+        }
+        return 'annually';
+    }
     // Generates contiguous segments between range boundaries.
     genSegments(startAt, endAt, stepMonths, title, prefix) {
         const segments = [];
@@ -1198,10 +1360,10 @@ class Timeline {
         anchor.style.top = `${event.clientY}px`;
         return anchor;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Timeline, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Timeline, isStandalone: true, selector: "mt-timeline", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, showZoomToFitControl: { classPropertyName: "showZoomToFitControl", publicName: "showZoomToFitControl", isSignal: true, isRequired: false, transformFunction: null }, timelineMode: { classPropertyName: "timelineMode", publicName: "timelineMode", isSignal: true, isRequired: false, transformFunction: null }, timelineModeOptions: { classPropertyName: "timelineModeOptions", publicName: "timelineModeOptions", isSignal: true, isRequired: false, transformFunction: null }, zoomToFit: { classPropertyName: "zoomToFit", publicName: "zoomToFit", isSignal: true, isRequired: false, transformFunction: null }, ganttData: { classPropertyName: "ganttData", publicName: "ganttData", isSignal: true, isRequired: false, transformFunction: null }, ganttMapping: { classPropertyName: "ganttMapping", publicName: "ganttMapping", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, ganttSegmentWidthPx: { classPropertyName: "ganttSegmentWidthPx", publicName: "ganttSegmentWidthPx", isSignal: true, isRequired: false, transformFunction: null }, defaultVisibleColumns: { classPropertyName: "defaultVisibleColumns", publicName: "defaultVisibleColumns", isSignal: true, isRequired: false, transformFunction: null }, columnsPaneMinWidthPx: { classPropertyName: "columnsPaneMinWidthPx", publicName: "columnsPaneMinWidthPx", isSignal: true, isRequired: false, transformFunction: null }, columnsPaneMaxWidthPx: { classPropertyName: "columnsPaneMaxWidthPx", publicName: "columnsPaneMaxWidthPx", isSignal: true, isRequired: false, transformFunction: null }, ganttTitleColumnLabel: { classPropertyName: "ganttTitleColumnLabel", publicName: "ganttTitleColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, ganttStatusColumnLabel: { classPropertyName: "ganttStatusColumnLabel", publicName: "ganttStatusColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, ganttInitiativeColumnWidthPx: { classPropertyName: "ganttInitiativeColumnWidthPx", publicName: "ganttInitiativeColumnWidthPx", isSignal: true, isRequired: false, transformFunction: null }, ganttStatusColumnWidthPx: { classPropertyName: "ganttStatusColumnWidthPx", publicName: "ganttStatusColumnWidthPx", isSignal: true, isRequired: false, transformFunction: null }, showGanttStatusColumn: { classPropertyName: "showGanttStatusColumn", publicName: "showGanttStatusColumn", isSignal: true, isRequired: false, transformFunction: null }, showGanttDetailsPopup: { classPropertyName: "showGanttDetailsPopup", publicName: "showGanttDetailsPopup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { timelineMode: "timelineModeChange", zoomToFit: "zoomToFitChange", timelineModeChangeEvent: "timelineModeChangeEvent", ganttItemClick: "ganttItemClick" }, host: { classAttribute: "block" }, queries: [{ propertyName: "ganttTemplate", first: true, predicate: TimelineGanttTemplateDirective, descendants: true, isSignal: true }, { propertyName: "columnTemplates", predicate: (TimelineColumnTemplateDirective), isSignal: true }, { propertyName: "popoverTemplate", first: true, predicate: (TimelinePopoverTemplateDirective), descendants: true, isSignal: true }, { propertyName: "progressTemplate", first: true, predicate: (TimelineProgressTemplateDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "detailsPopover", first: true, predicate: ["detailsPopover"], descendants: true }, { propertyName: "detailsPopoverClickAnchor", first: true, predicate: ["detailsPopoverClickAnchor"], descendants: true }], ngImport: i0, template: "<div class=\"mt-3 block overflow-hidden\" *transloco=\"let t; prefix: 'timeline'\">\r\n  <!-- Optional top header (title + timeline mode selector). -->\r\n  @if (showHeader()) {\r\n    <mt-timeline-header\r\n      [title]=\"title() || t('timeline')\"\r\n      [timelineMode]=\"timelineMode()\"\r\n      [timelineModeOptions]=\"resolvedTimelineModeOptions()\"\r\n      [showZoomToFitControl]=\"showZoomToFitControl()\"\r\n      [zoomToFit]=\"zoomToFit()\"\r\n      [zoomToFitDisabled]=\"!canZoomToFit()\"\r\n      (timelineModeChange)=\"onTimelineModeChange($event)\"\r\n      (zoomToFitToggle)=\"onZoomToFitToggle()\"\r\n    />\r\n  }\r\n\r\n  <!-- Loading state. -->\r\n  @if (isLoading()) {\r\n    <div class=\"flex min-h-56 items-center justify-center p-8\">\r\n      <div\r\n        class=\"h-8 w-8 animate-spin rounded-full border-2 border-surface-200\"\r\n        style=\"border-top-color: var(--p-primary-color)\"\r\n      ></div>\r\n    </div>\r\n  } @else if (ganttTemplate(); as template) {\r\n    <!-- Full custom gantt-body override. -->\r\n    <div class=\"min-h-56 py-4\">\r\n      <ng-container [ngTemplateOutlet]=\"template.templateRef\"></ng-container>\r\n    </div>\r\n  } @else if (\r\n    mappedGanttNodes().length > 0 && orderedGanttSegments().length > 0\r\n  ) {\r\n    <!-- Built-in gantt renderer. -->\r\n    <mt-timeline-gantt\r\n      [timelineMode]=\"timelineMode()\"\r\n      [columns]=\"columns()\"\r\n      [ganttTitleColumnLabel]=\"ganttTitleColumnLabel() || t('portfolio-name')\"\r\n      [ganttStatusColumnLabel]=\"ganttStatusColumnLabel() || t('status')\"\r\n      [ganttInitiativeColumnWidthPx]=\"ganttInitiativeColumnWidthPx()\"\r\n      [ganttStatusColumnWidthPx]=\"ganttStatusColumnWidthPx()\"\r\n      [showGanttStatusColumn]=\"showGanttStatusColumn()\"\r\n      [ganttSegmentWidthPx]=\"ganttSegmentWidthPx()\"\r\n      [defaultVisibleColumns]=\"defaultVisibleColumns()\"\r\n      [columnsPaneMinWidthPx]=\"columnsPaneMinWidthPx()\"\r\n      [columnsPaneMaxWidthPx]=\"columnsPaneMaxWidthPx()\"\r\n      [zoomToFit]=\"zoomToFit()\"\r\n      [mappedGanttNodes]=\"mappedGanttNodes()\"\r\n      [orderedGanttSegments]=\"orderedGanttSegments()\"\r\n      [collapsedGanttIds]=\"collapsedGanttIds()\"\r\n      [columnTemplatesByKey]=\"columnTemplatesByKey()\"\r\n      [progressTemplateDirective]=\"progressTemplate()\"\r\n      (toggleCollapse)=\"toggleGanttCollapse($event)\"\r\n      (progressClick)=\"onGanttProgressClick($event.item, $event.event)\"\r\n    />\r\n  } @else {\r\n    <!-- Empty state. -->\r\n    <div\r\n      class=\"flex min-h-56 items-center justify-center p-8 text-sm text-surface-500\"\r\n    >\r\n      {{ emptyMessage() || t(\"empty-message\") }}\r\n    </div>\r\n  }\r\n\r\n  <!-- Details popover host (custom template or built-in fallback). -->\r\n  <p-popover #detailsPopover appendTo=\"body\" (onHide)=\"onDetailsPopoverHide()\">\r\n    @if (showGanttDetailsPopup() && selectedGanttItem(); as item) {\r\n      @if (popoverTemplate(); as template) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"template.templateRef\"\r\n          [ngTemplateOutletContext]=\"getPopoverTemplateContext(item)\"\r\n        ></ng-container>\r\n      } @else {\r\n        <mt-timeline-default-popover\r\n          [item]=\"item\"\r\n          (requestClose)=\"hideDetailsPopover()\"\r\n        />\r\n      }\r\n    }\r\n  </p-popover>\r\n\r\n  <!-- Point anchor used to place the popover exactly where user clicked. -->\r\n  <span\r\n    #detailsPopoverClickAnchor\r\n    class=\"pointer-events-none fixed h-0 w-0\"\r\n    [style.left.px]=\"-9999\"\r\n    [style.top.px]=\"-9999\"\r\n    aria-hidden=\"true\"\r\n  ></span>\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: TimelineHeader, selector: "mt-timeline-header", inputs: ["title", "timelineMode", "timelineModeOptions", "showZoomToFitControl", "zoomToFit", "zoomToFitDisabled"], outputs: ["timelineModeChange", "zoomToFitToggle"] }, { kind: "component", type: TimelineGantt, selector: "mt-timeline-gantt", inputs: ["timelineMode", "columns", "ganttTitleColumnLabel", "ganttStatusColumnLabel", "ganttInitiativeColumnWidthPx", "ganttStatusColumnWidthPx", "showGanttStatusColumn", "ganttSegmentWidthPx", "defaultVisibleColumns", "columnsPaneMinWidthPx", "columnsPaneMaxWidthPx", "zoomToFit", "mappedGanttNodes", "orderedGanttSegments", "collapsedGanttIds", "columnTemplatesByKey", "progressTemplateDirective"], outputs: ["toggleCollapse", "progressClick"] }, { kind: "component", type: TimelineDefaultPopover, selector: "mt-timeline-default-popover", inputs: ["item"], outputs: ["requestClose"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Timeline, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: Timeline, isStandalone: true, selector: "mt-timeline", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, showZoomToFitControl: { classPropertyName: "showZoomToFitControl", publicName: "showZoomToFitControl", isSignal: true, isRequired: false, transformFunction: null }, timelineMode: { classPropertyName: "timelineMode", publicName: "timelineMode", isSignal: true, isRequired: false, transformFunction: null }, timelineModeOptions: { classPropertyName: "timelineModeOptions", publicName: "timelineModeOptions", isSignal: true, isRequired: false, transformFunction: null }, zoomToFit: { classPropertyName: "zoomToFit", publicName: "zoomToFit", isSignal: true, isRequired: false, transformFunction: null }, ganttData: { classPropertyName: "ganttData", publicName: "ganttData", isSignal: true, isRequired: false, transformFunction: null }, ganttMapping: { classPropertyName: "ganttMapping", publicName: "ganttMapping", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, ganttSegmentWidthPx: { classPropertyName: "ganttSegmentWidthPx", publicName: "ganttSegmentWidthPx", isSignal: true, isRequired: false, transformFunction: null }, defaultVisibleColumns: { classPropertyName: "defaultVisibleColumns", publicName: "defaultVisibleColumns", isSignal: true, isRequired: false, transformFunction: null }, columnsPaneMinWidthPx: { classPropertyName: "columnsPaneMinWidthPx", publicName: "columnsPaneMinWidthPx", isSignal: true, isRequired: false, transformFunction: null }, columnsPaneMaxWidthPx: { classPropertyName: "columnsPaneMaxWidthPx", publicName: "columnsPaneMaxWidthPx", isSignal: true, isRequired: false, transformFunction: null }, enableVirtualScroll: { classPropertyName: "enableVirtualScroll", publicName: "enableVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollThreshold: { classPropertyName: "virtualScrollThreshold", publicName: "virtualScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollBodyHeightPx: { classPropertyName: "virtualScrollBodyHeightPx", publicName: "virtualScrollBodyHeightPx", isSignal: true, isRequired: false, transformFunction: null }, ganttTitleColumnLabel: { classPropertyName: "ganttTitleColumnLabel", publicName: "ganttTitleColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, ganttStatusColumnLabel: { classPropertyName: "ganttStatusColumnLabel", publicName: "ganttStatusColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, ganttInitiativeColumnWidthPx: { classPropertyName: "ganttInitiativeColumnWidthPx", publicName: "ganttInitiativeColumnWidthPx", isSignal: true, isRequired: false, transformFunction: null }, ganttStatusColumnWidthPx: { classPropertyName: "ganttStatusColumnWidthPx", publicName: "ganttStatusColumnWidthPx", isSignal: true, isRequired: false, transformFunction: null }, showGanttStatusColumn: { classPropertyName: "showGanttStatusColumn", publicName: "showGanttStatusColumn", isSignal: true, isRequired: false, transformFunction: null }, showGanttDetailsPopup: { classPropertyName: "showGanttDetailsPopup", publicName: "showGanttDetailsPopup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { timelineMode: "timelineModeChange", zoomToFit: "zoomToFitChange", timelineModeChangeEvent: "timelineModeChangeEvent", ganttItemClick: "ganttItemClick" }, host: { classAttribute: "block" }, queries: [{ propertyName: "ganttTemplate", first: true, predicate: TimelineGanttTemplateDirective, descendants: true, isSignal: true }, { propertyName: "columnTemplates", predicate: (TimelineColumnTemplateDirective), isSignal: true }, { propertyName: "popoverTemplate", first: true, predicate: (TimelinePopoverTemplateDirective), descendants: true, isSignal: true }, { propertyName: "progressTemplate", first: true, predicate: (TimelineProgressTemplateDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "detailsPopover", first: true, predicate: ["detailsPopover"], descendants: true }, { propertyName: "detailsPopoverClickAnchor", first: true, predicate: ["detailsPopoverClickAnchor"], descendants: true }], ngImport: i0, template: "<div class=\"mt-3 block overflow-hidden\" *transloco=\"let t; prefix: 'timeline'\">\n  <!-- Optional top header (title + timeline mode selector). -->\n  @if (showHeader()) {\n    <mt-timeline-header\n      [title]=\"title() || t('timeline')\"\n      [timelineMode]=\"selectedTimelineView()\"\n      [timelineModeOptions]=\"resolvedTimelineModeOptions()\"\n      (timelineModeChange)=\"onTimelineModeChange($event)\"\n    />\n  }\n\n  <!-- Loading state. -->\n  @if (isLoading()) {\n    <div class=\"flex min-h-56 items-center justify-center p-8\">\n      <div\n        class=\"h-8 w-8 animate-spin rounded-full border-2 border-surface-200\"\n        style=\"border-top-color: var(--p-primary-color)\"\n      ></div>\n    </div>\n  } @else if (ganttTemplate(); as template) {\n    <!-- Full custom gantt-body override. -->\n    <div class=\"min-h-56 py-4\">\n      <ng-container [ngTemplateOutlet]=\"template.templateRef\"></ng-container>\n    </div>\n  } @else if (\n    mappedGanttNodes().length > 0 && orderedGanttSegments().length > 0\n  ) {\n    <!-- Built-in gantt renderer. -->\n    <mt-timeline-gantt\n      [timelineMode]=\"resolvedRenderTimelineMode()\"\n      [columns]=\"columns()\"\n      [ganttTitleColumnLabel]=\"ganttTitleColumnLabel() || t('portfolio-name')\"\n      [ganttStatusColumnLabel]=\"ganttStatusColumnLabel() || t('status')\"\n      [ganttInitiativeColumnWidthPx]=\"ganttInitiativeColumnWidthPx()\"\n      [ganttStatusColumnWidthPx]=\"ganttStatusColumnWidthPx()\"\n      [showGanttStatusColumn]=\"showGanttStatusColumn()\"\n      [ganttSegmentWidthPx]=\"ganttSegmentWidthPx()\"\n      [defaultVisibleColumns]=\"defaultVisibleColumns()\"\n      [columnsPaneMinWidthPx]=\"columnsPaneMinWidthPx()\"\n      [columnsPaneMaxWidthPx]=\"columnsPaneMaxWidthPx()\"\n      [enableVirtualScroll]=\"enableVirtualScroll()\"\n      [virtualScrollThreshold]=\"virtualScrollThreshold()\"\n      [virtualScrollBodyHeightPx]=\"virtualScrollBodyHeightPx()\"\n      [zoomToFit]=\"isZoomToFitActive()\"\n      [mappedGanttNodes]=\"mappedGanttNodes()\"\n      [orderedGanttSegments]=\"orderedGanttSegments()\"\n      [collapsedGanttIds]=\"collapsedGanttIds()\"\n      [columnTemplatesByKey]=\"columnTemplatesByKey()\"\n      [progressTemplateDirective]=\"progressTemplate()\"\n      (timelineViewportWidthChange)=\"onTimelineViewportWidthChange($event)\"\n      (toggleCollapse)=\"toggleGanttCollapse($event)\"\n      (progressClick)=\"onGanttProgressClick($event.item, $event.event)\"\n    />\n  } @else {\n    <!-- Empty state. -->\n    <div\n      class=\"flex min-h-56 items-center justify-center p-8 text-sm text-surface-500\"\n    >\n      {{ emptyMessage() || t(\"empty-message\") }}\n    </div>\n  }\n\n  <!-- Details popover host (custom template or built-in fallback). -->\n  <p-popover #detailsPopover appendTo=\"body\" (onHide)=\"onDetailsPopoverHide()\">\n    @if (showGanttDetailsPopup() && selectedGanttItem(); as item) {\n      @if (popoverTemplate(); as template) {\n        <ng-container\n          [ngTemplateOutlet]=\"template.templateRef\"\n          [ngTemplateOutletContext]=\"getPopoverTemplateContext(item)\"\n        ></ng-container>\n      } @else {\n        <mt-timeline-default-popover\n          [item]=\"item\"\n          (requestClose)=\"hideDetailsPopover()\"\n        />\n      }\n    }\n  </p-popover>\n\n  <!-- Point anchor used to place the popover exactly where user clicked. -->\n  <span\n    #detailsPopoverClickAnchor\n    class=\"pointer-events-none fixed h-0 w-0\"\n    [style.left.px]=\"-9999\"\n    [style.top.px]=\"-9999\"\n    aria-hidden=\"true\"\n  ></span>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: TimelineHeader, selector: "mt-timeline-header", inputs: ["title", "timelineMode", "timelineModeOptions"], outputs: ["timelineModeChange"] }, { kind: "component", type: TimelineGantt, selector: "mt-timeline-gantt", inputs: ["timelineMode", "columns", "ganttTitleColumnLabel", "ganttStatusColumnLabel", "ganttInitiativeColumnWidthPx", "ganttStatusColumnWidthPx", "showGanttStatusColumn", "ganttSegmentWidthPx", "defaultVisibleColumns", "columnsPaneMinWidthPx", "columnsPaneMaxWidthPx", "enableVirtualScroll", "virtualScrollThreshold", "virtualScrollBodyHeightPx", "zoomToFit", "mappedGanttNodes", "orderedGanttSegments", "collapsedGanttIds", "columnTemplatesByKey", "progressTemplateDirective"], outputs: ["toggleCollapse", "progressClick", "timelineViewportWidthChange"] }, { kind: "component", type: TimelineDefaultPopover, selector: "mt-timeline-default-popover", inputs: ["item"], outputs: ["requestClose"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Timeline, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Timeline, decorators: [{
             type: Component,
             args: [{ selector: 'mt-timeline', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
@@ -1211,14 +1373,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         TimelineDefaultPopover,
                         Popover,
                         NgTemplateOutlet,
-                    ], host: { class: 'block' }, template: "<div class=\"mt-3 block overflow-hidden\" *transloco=\"let t; prefix: 'timeline'\">\r\n  <!-- Optional top header (title + timeline mode selector). -->\r\n  @if (showHeader()) {\r\n    <mt-timeline-header\r\n      [title]=\"title() || t('timeline')\"\r\n      [timelineMode]=\"timelineMode()\"\r\n      [timelineModeOptions]=\"resolvedTimelineModeOptions()\"\r\n      [showZoomToFitControl]=\"showZoomToFitControl()\"\r\n      [zoomToFit]=\"zoomToFit()\"\r\n      [zoomToFitDisabled]=\"!canZoomToFit()\"\r\n      (timelineModeChange)=\"onTimelineModeChange($event)\"\r\n      (zoomToFitToggle)=\"onZoomToFitToggle()\"\r\n    />\r\n  }\r\n\r\n  <!-- Loading state. -->\r\n  @if (isLoading()) {\r\n    <div class=\"flex min-h-56 items-center justify-center p-8\">\r\n      <div\r\n        class=\"h-8 w-8 animate-spin rounded-full border-2 border-surface-200\"\r\n        style=\"border-top-color: var(--p-primary-color)\"\r\n      ></div>\r\n    </div>\r\n  } @else if (ganttTemplate(); as template) {\r\n    <!-- Full custom gantt-body override. -->\r\n    <div class=\"min-h-56 py-4\">\r\n      <ng-container [ngTemplateOutlet]=\"template.templateRef\"></ng-container>\r\n    </div>\r\n  } @else if (\r\n    mappedGanttNodes().length > 0 && orderedGanttSegments().length > 0\r\n  ) {\r\n    <!-- Built-in gantt renderer. -->\r\n    <mt-timeline-gantt\r\n      [timelineMode]=\"timelineMode()\"\r\n      [columns]=\"columns()\"\r\n      [ganttTitleColumnLabel]=\"ganttTitleColumnLabel() || t('portfolio-name')\"\r\n      [ganttStatusColumnLabel]=\"ganttStatusColumnLabel() || t('status')\"\r\n      [ganttInitiativeColumnWidthPx]=\"ganttInitiativeColumnWidthPx()\"\r\n      [ganttStatusColumnWidthPx]=\"ganttStatusColumnWidthPx()\"\r\n      [showGanttStatusColumn]=\"showGanttStatusColumn()\"\r\n      [ganttSegmentWidthPx]=\"ganttSegmentWidthPx()\"\r\n      [defaultVisibleColumns]=\"defaultVisibleColumns()\"\r\n      [columnsPaneMinWidthPx]=\"columnsPaneMinWidthPx()\"\r\n      [columnsPaneMaxWidthPx]=\"columnsPaneMaxWidthPx()\"\r\n      [zoomToFit]=\"zoomToFit()\"\r\n      [mappedGanttNodes]=\"mappedGanttNodes()\"\r\n      [orderedGanttSegments]=\"orderedGanttSegments()\"\r\n      [collapsedGanttIds]=\"collapsedGanttIds()\"\r\n      [columnTemplatesByKey]=\"columnTemplatesByKey()\"\r\n      [progressTemplateDirective]=\"progressTemplate()\"\r\n      (toggleCollapse)=\"toggleGanttCollapse($event)\"\r\n      (progressClick)=\"onGanttProgressClick($event.item, $event.event)\"\r\n    />\r\n  } @else {\r\n    <!-- Empty state. -->\r\n    <div\r\n      class=\"flex min-h-56 items-center justify-center p-8 text-sm text-surface-500\"\r\n    >\r\n      {{ emptyMessage() || t(\"empty-message\") }}\r\n    </div>\r\n  }\r\n\r\n  <!-- Details popover host (custom template or built-in fallback). -->\r\n  <p-popover #detailsPopover appendTo=\"body\" (onHide)=\"onDetailsPopoverHide()\">\r\n    @if (showGanttDetailsPopup() && selectedGanttItem(); as item) {\r\n      @if (popoverTemplate(); as template) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"template.templateRef\"\r\n          [ngTemplateOutletContext]=\"getPopoverTemplateContext(item)\"\r\n        ></ng-container>\r\n      } @else {\r\n        <mt-timeline-default-popover\r\n          [item]=\"item\"\r\n          (requestClose)=\"hideDetailsPopover()\"\r\n        />\r\n      }\r\n    }\r\n  </p-popover>\r\n\r\n  <!-- Point anchor used to place the popover exactly where user clicked. -->\r\n  <span\r\n    #detailsPopoverClickAnchor\r\n    class=\"pointer-events-none fixed h-0 w-0\"\r\n    [style.left.px]=\"-9999\"\r\n    [style.top.px]=\"-9999\"\r\n    aria-hidden=\"true\"\r\n  ></span>\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
+                    ], host: { class: 'block' }, template: "<div class=\"mt-3 block overflow-hidden\" *transloco=\"let t; prefix: 'timeline'\">\n  <!-- Optional top header (title + timeline mode selector). -->\n  @if (showHeader()) {\n    <mt-timeline-header\n      [title]=\"title() || t('timeline')\"\n      [timelineMode]=\"selectedTimelineView()\"\n      [timelineModeOptions]=\"resolvedTimelineModeOptions()\"\n      (timelineModeChange)=\"onTimelineModeChange($event)\"\n    />\n  }\n\n  <!-- Loading state. -->\n  @if (isLoading()) {\n    <div class=\"flex min-h-56 items-center justify-center p-8\">\n      <div\n        class=\"h-8 w-8 animate-spin rounded-full border-2 border-surface-200\"\n        style=\"border-top-color: var(--p-primary-color)\"\n      ></div>\n    </div>\n  } @else if (ganttTemplate(); as template) {\n    <!-- Full custom gantt-body override. -->\n    <div class=\"min-h-56 py-4\">\n      <ng-container [ngTemplateOutlet]=\"template.templateRef\"></ng-container>\n    </div>\n  } @else if (\n    mappedGanttNodes().length > 0 && orderedGanttSegments().length > 0\n  ) {\n    <!-- Built-in gantt renderer. -->\n    <mt-timeline-gantt\n      [timelineMode]=\"resolvedRenderTimelineMode()\"\n      [columns]=\"columns()\"\n      [ganttTitleColumnLabel]=\"ganttTitleColumnLabel() || t('portfolio-name')\"\n      [ganttStatusColumnLabel]=\"ganttStatusColumnLabel() || t('status')\"\n      [ganttInitiativeColumnWidthPx]=\"ganttInitiativeColumnWidthPx()\"\n      [ganttStatusColumnWidthPx]=\"ganttStatusColumnWidthPx()\"\n      [showGanttStatusColumn]=\"showGanttStatusColumn()\"\n      [ganttSegmentWidthPx]=\"ganttSegmentWidthPx()\"\n      [defaultVisibleColumns]=\"defaultVisibleColumns()\"\n      [columnsPaneMinWidthPx]=\"columnsPaneMinWidthPx()\"\n      [columnsPaneMaxWidthPx]=\"columnsPaneMaxWidthPx()\"\n      [enableVirtualScroll]=\"enableVirtualScroll()\"\n      [virtualScrollThreshold]=\"virtualScrollThreshold()\"\n      [virtualScrollBodyHeightPx]=\"virtualScrollBodyHeightPx()\"\n      [zoomToFit]=\"isZoomToFitActive()\"\n      [mappedGanttNodes]=\"mappedGanttNodes()\"\n      [orderedGanttSegments]=\"orderedGanttSegments()\"\n      [collapsedGanttIds]=\"collapsedGanttIds()\"\n      [columnTemplatesByKey]=\"columnTemplatesByKey()\"\n      [progressTemplateDirective]=\"progressTemplate()\"\n      (timelineViewportWidthChange)=\"onTimelineViewportWidthChange($event)\"\n      (toggleCollapse)=\"toggleGanttCollapse($event)\"\n      (progressClick)=\"onGanttProgressClick($event.item, $event.event)\"\n    />\n  } @else {\n    <!-- Empty state. -->\n    <div\n      class=\"flex min-h-56 items-center justify-center p-8 text-sm text-surface-500\"\n    >\n      {{ emptyMessage() || t(\"empty-message\") }}\n    </div>\n  }\n\n  <!-- Details popover host (custom template or built-in fallback). -->\n  <p-popover #detailsPopover appendTo=\"body\" (onHide)=\"onDetailsPopoverHide()\">\n    @if (showGanttDetailsPopup() && selectedGanttItem(); as item) {\n      @if (popoverTemplate(); as template) {\n        <ng-container\n          [ngTemplateOutlet]=\"template.templateRef\"\n          [ngTemplateOutletContext]=\"getPopoverTemplateContext(item)\"\n        ></ng-container>\n      } @else {\n        <mt-timeline-default-popover\n          [item]=\"item\"\n          (requestClose)=\"hideDetailsPopover()\"\n        />\n      }\n    }\n  </p-popover>\n\n  <!-- Point anchor used to place the popover exactly where user clicked. -->\n  <span\n    #detailsPopoverClickAnchor\n    class=\"pointer-events-none fixed h-0 w-0\"\n    [style.left.px]=\"-9999\"\n    [style.top.px]=\"-9999\"\n    aria-hidden=\"true\"\n  ></span>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { detailsPopover: [{
                 type: ViewChild,
                 args: ['detailsPopover']
             }], detailsPopoverClickAnchor: [{
                 type: ViewChild,
                 args: ['detailsPopoverClickAnchor']
-            }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], showZoomToFitControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "showZoomToFitControl", required: false }] }], timelineMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "timelineMode", required: false }] }, { type: i0.Output, args: ["timelineModeChange"] }], timelineModeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "timelineModeOptions", required: false }] }], zoomToFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomToFit", required: false }] }, { type: i0.Output, args: ["zoomToFitChange"] }], ganttData: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttData", required: false }] }], ganttMapping: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttMapping", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], ganttSegmentWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttSegmentWidthPx", required: false }] }], defaultVisibleColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultVisibleColumns", required: false }] }], columnsPaneMinWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsPaneMinWidthPx", required: false }] }], columnsPaneMaxWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsPaneMaxWidthPx", required: false }] }], ganttTitleColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttTitleColumnLabel", required: false }] }], ganttStatusColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttStatusColumnLabel", required: false }] }], ganttInitiativeColumnWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttInitiativeColumnWidthPx", required: false }] }], ganttStatusColumnWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttStatusColumnWidthPx", required: false }] }], showGanttStatusColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGanttStatusColumn", required: false }] }], showGanttDetailsPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGanttDetailsPopup", required: false }] }], timelineModeChangeEvent: [{ type: i0.Output, args: ["timelineModeChangeEvent"] }], ganttItemClick: [{ type: i0.Output, args: ["ganttItemClick"] }], ganttTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TimelineGanttTemplateDirective), { isSignal: true }] }], columnTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TimelineColumnTemplateDirective), { isSignal: true }] }], popoverTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TimelinePopoverTemplateDirective), { isSignal: true }] }], progressTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TimelineProgressTemplateDirective), { isSignal: true }] }] } });
+            }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], showZoomToFitControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "showZoomToFitControl", required: false }] }], timelineMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "timelineMode", required: false }] }, { type: i0.Output, args: ["timelineModeChange"] }], timelineModeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "timelineModeOptions", required: false }] }], zoomToFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomToFit", required: false }] }, { type: i0.Output, args: ["zoomToFitChange"] }], ganttData: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttData", required: false }] }], ganttMapping: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttMapping", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], ganttSegmentWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttSegmentWidthPx", required: false }] }], defaultVisibleColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultVisibleColumns", required: false }] }], columnsPaneMinWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsPaneMinWidthPx", required: false }] }], columnsPaneMaxWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsPaneMaxWidthPx", required: false }] }], enableVirtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableVirtualScroll", required: false }] }], virtualScrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollThreshold", required: false }] }], virtualScrollBodyHeightPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollBodyHeightPx", required: false }] }], ganttTitleColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttTitleColumnLabel", required: false }] }], ganttStatusColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttStatusColumnLabel", required: false }] }], ganttInitiativeColumnWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttInitiativeColumnWidthPx", required: false }] }], ganttStatusColumnWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "ganttStatusColumnWidthPx", required: false }] }], showGanttStatusColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGanttStatusColumn", required: false }] }], showGanttDetailsPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGanttDetailsPopup", required: false }] }], timelineModeChangeEvent: [{ type: i0.Output, args: ["timelineModeChangeEvent"] }], ganttItemClick: [{ type: i0.Output, args: ["ganttItemClick"] }], ganttTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TimelineGanttTemplateDirective), { isSignal: true }] }], columnTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TimelineColumnTemplateDirective), { isSignal: true }] }], popoverTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TimelinePopoverTemplateDirective), { isSignal: true }] }], progressTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TimelineProgressTemplateDirective), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.