@masterteam/timeline 0.0.8 → 0.0.10

package/fesm2022/masterteam-timeline.mjs

@@ -1,8 +1,11 @@
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, Directive, Input, input, output, Component, signal, computed, ViewChild, model, contentChild, contentChildren } from '@angular/core';
+import { inject, TemplateRef, Directive, Input, input, output, Component, ChangeDetectionStrategy, signal, computed, ViewChild, DestroyRef, model, contentChild, contentChildren } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import { Popover } from 'primeng/popover';
+import { Tooltip } from 'primeng/tooltip';
 import { Icon } from '@masterteam/icons';
 import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -77,11 +80,11 @@ class TimelineDefaultPopover {
     // 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]\">\r\n  <div class=\"mb-3 flex items-center justify-between\">\r\n    <h4 class=\"text-sm font-semibold\">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      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><span class=\"font-semibold\">Name:</span> {{ item().title }}</div>\r\n    <div>\r\n      <span class=\"font-semibold\">Level:</span>\r\n      {{ item().levelDescription }}\r\n    </div>\r\n    <div><span class=\"font-semibold\">Owner:</span> {{ item().owner }}</div>\r\n    <div>\r\n      <span class=\"font-semibold\">Status:</span>\r\n      <span [style.color]=\"item().statusColor\">{{ item().statusName }}</span>\r\n    </div>\r\n    <div>\r\n      <span class=\"font-semibold\">Progress:</span>\r\n      {{ item().progressLabel }}\r\n    </div>\r\n    <div><span class=\"font-semibold\">Range:</span> {{ item().phase }}</div>\r\n  </div>\r\n</div>\r\n" });
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineDefaultPopover, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-timeline-default-popover', standalone: true, template: "<!-- Default details view shown inside PrimeNG popover. -->\r\n<div class=\"w-[22.5rem]\">\r\n  <div class=\"mb-3 flex items-center justify-between\">\r\n    <h4 class=\"text-sm font-semibold\">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      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><span class=\"font-semibold\">Name:</span> {{ item().title }}</div>\r\n    <div>\r\n      <span class=\"font-semibold\">Level:</span>\r\n      {{ item().levelDescription }}\r\n    </div>\r\n    <div><span class=\"font-semibold\">Owner:</span> {{ item().owner }}</div>\r\n    <div>\r\n      <span class=\"font-semibold\">Status:</span>\r\n      <span [style.color]=\"item().statusColor\">{{ item().statusName }}</span>\r\n    </div>\r\n    <div>\r\n      <span class=\"font-semibold\">Progress:</span>\r\n      {{ item().progressLabel }}\r\n    </div>\r\n    <div><span class=\"font-semibold\">Range:</span> {{ item().phase }}</div>\r\n  </div>\r\n</div>\r\n" }]
+            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"] }] } });
 
 /**
@@ -111,6 +114,7 @@ class TimelineGanttHeader {
     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" }] : []));
     // Converts monthly segments from "M N" to calendar abbreviations.
@@ -123,20 +127,25 @@ class TimelineGanttHeader {
             ? this.monthLabels[month - 1]
             : segment.title;
     }
-    resolveHeaderAlignClass(column) {
-        return {
-            'text-start': column.position === 'start',
-            'text-center': column.position === 'center',
-            'text-end': column.position === 'end',
-        };
+    shouldRenderSegmentYear() {
+        return this.effectiveGanttSegmentWidthPx() >= 84;
+    }
+    resolveSegmentTitleAttr(segment) {
+        if (segment.year === undefined || segment.year === null) {
+            return this.resolveSegmentTitle(segment);
+        }
+        return `${this.resolveSegmentTitle(segment)} ${segment.year}`;
+    }
+    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 }, 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        [ngClass]=\"resolveHeaderAlignClass(column)\"\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 border-e border-surface px-2 py-3 text-center text-xs font-semibold uppercase text-surface-600\"\r\n          [style.width.px]=\"effectiveGanttSegmentWidthPx()\"\r\n        >\r\n          {{ resolveSegmentTitle(column) }}\r\n          @if (column.year !== undefined && column.year !== null) {\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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineGanttHeader, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-timeline-gantt-header', standalone: true, imports: [CommonModule], 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        [ngClass]=\"resolveHeaderAlignClass(column)\"\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 border-e border-surface px-2 py-3 text-center text-xs font-semibold uppercase text-surface-600\"\r\n          [style.width.px]=\"effectiveGanttSegmentWidthPx()\"\r\n        >\r\n          {{ resolveSegmentTitle(column) }}\r\n          @if (column.year !== undefined && column.year !== null) {\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 }] }], renderColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderColumns", required: false }] }], renderTimeline: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderTimeline", required: false }] }] } });
+            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 }] }] } });
 
 /**
  * Single-row renderer for the Gantt body.
@@ -204,13 +213,6 @@ class TimelineGanttRow {
         }
         return this.path(item, column.key);
     }
-    resolveColumnAlignClass(column) {
-        return {
-            'justify-start': column.position === 'start',
-            'justify-center': column.position === 'center',
-            'justify-end': column.position === 'end',
-        };
-    }
     getColumnTemplateContext(column, item) {
         const source = item.source ?? item;
         return {
@@ -241,6 +243,12 @@ class TimelineGanttRow {
             onSelect: (event) => this.onProgressClick(item, event),
         };
     }
+    shouldRenderProgressLabel(item) {
+        return item.trackWidthPx >= 72;
+    }
+    resolveProgressFillMinWidthPx(item) {
+        return item.trackWidthPx > 0 ? Math.min(54, item.trackWidthPx) : 0;
+    }
     // Reads document direction to support sticky offsets and progress alignment.
     isRtl() {
         if (typeof document === 'undefined') {
@@ -270,11 +278,11 @@ class TimelineGanttRow {
         }, 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        [ngClass]=\"resolveColumnAlignClass(column)\"\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 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]=\"54\"\r\n              [style.background-color]=\"item().statusColor\"\r\n            ></div>\r\n          }\r\n\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        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }] });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineGanttRow, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-timeline-gantt-row', standalone: true, 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        [ngClass]=\"resolveColumnAlignClass(column)\"\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 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]=\"54\"\r\n              [style.background-color]=\"item().statusColor\"\r\n            ></div>\r\n          }\r\n\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        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+            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"] }] } });
 
 /**
@@ -299,8 +307,16 @@ 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.
@@ -309,13 +325,18 @@ class TimelineGantt {
     splitterWidthPx = 10;
     timelineLaneInsetPx = 12;
     adaptiveSegmentMaxWidthPx = 320;
-    laneInsetPx = this.timelineLaneInsetPx;
+    ganttRowHeightPx = 64;
+    virtualScrollOverscanRows = 6;
     columnsPaneUserWidthPx = signal(null, ...(ngDevMode ? [{ debugName: "columnsPaneUserWidthPx" }] : []));
     lastExpandedColumnsPaneWidthPx = signal(null, ...(ngDevMode ? [{ debugName: "lastExpandedColumnsPaneWidthPx" }] : []));
+    ganttBodyScrollTopPx = signal(0, ...(ngDevMode ? [{ debugName: "ganttBodyScrollTopPx" }] : []));
     isColumnsResizing = signal(false, ...(ngDevMode ? [{ debugName: "isColumnsResizing" }] : []));
     canResizeColumnsPane = computed(() => this.baseResolvedColumns().length > 0, ...(ngDevMode ? [{ debugName: "canResizeColumnsPane" }] : []));
     resizeStartClientX = 0;
     resizeStartColumnsPaneWidthPx = 0;
+    isSyncingColumnsScroll = false;
+    isSyncingTimelineScroll = false;
+    isSyncingVerticalScroll = false;
     timelineMode = input('quarterly', ...(ngDevMode ? [{ debugName: "timelineMode" }] : []));
     columns = input(null, ...(ngDevMode ? [{ debugName: "columns" }] : []));
     ganttTitleColumnLabel = input('Portfolio Name', ...(ngDevMode ? [{ debugName: "ganttTitleColumnLabel" }] : []));
@@ -327,6 +348,10 @@ class TimelineGantt {
     defaultVisibleColumns = input(4, ...(ngDevMode ? [{ debugName: "defaultVisibleColumns" }] : []));
     columnsPaneMinWidthPx = input(0, ...(ngDevMode ? [{ debugName: "columnsPaneMinWidthPx" }] : []));
     columnsPaneMaxWidthPx = input(null, ...(ngDevMode ? [{ debugName: "columnsPaneMaxWidthPx" }] : []));
+    enableVirtualScroll = input(true, ...(ngDevMode ? [{ debugName: "enableVirtualScroll" }] : []));
+    virtualScrollThreshold = input(120, ...(ngDevMode ? [{ debugName: "virtualScrollThreshold" }] : []));
+    virtualScrollBodyHeightPx = input(640, ...(ngDevMode ? [{ debugName: "virtualScrollBodyHeightPx" }] : []));
+    zoomToFit = input(false, ...(ngDevMode ? [{ debugName: "zoomToFit" }] : []));
     mappedGanttNodes = input([], ...(ngDevMode ? [{ debugName: "mappedGanttNodes" }] : []));
     orderedGanttSegments = input([], ...(ngDevMode ? [{ debugName: "orderedGanttSegments" }] : []));
     collapsedGanttIds = input(new Set(), ...(ngDevMode ? [{ debugName: "collapsedGanttIds" }] : []));
@@ -334,6 +359,7 @@ class TimelineGantt {
     progressTemplateDirective = input(null, ...(ngDevMode ? [{ debugName: "progressTemplateDirective" }] : []));
     toggleCollapse = output();
     progressClick = output();
+    timelineViewportWidthChange = output();
     // Resolves the base columns contract before splitter-specific layout is applied.
     baseResolvedColumns = computed(() => {
         const providedColumns = this.columns();
@@ -399,9 +425,18 @@ class TimelineGantt {
         if (availableWidth <= 0) {
             return baseWidth;
         }
-        const candidateWidth = Math.floor(availableWidth / segmentCount);
-        return Math.max(baseWidth, Math.min(candidateWidth, this.adaptiveSegmentMaxWidthPx));
+        const candidateWidth = availableWidth / segmentCount;
+        if (this.zoomToFit()) {
+            return Math.max(0, Math.min(candidateWidth, this.adaptiveSegmentMaxWidthPx));
+        }
+        return Math.max(baseWidth, Math.min(Math.floor(candidateWidth), this.adaptiveSegmentMaxWidthPx));
     }, ...(ngDevMode ? [{ debugName: "effectiveGanttSegmentWidthPx" }] : []));
+    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" }] : []));
     // Flattens the mapped hierarchy into rows using current collapse state.
     resolvedGanttItems = computed(() => {
@@ -415,6 +450,36 @@ class TimelineGantt {
         this.flattenMapped(this.mappedGanttNodes(), 0, segments, firstSeq, lastSeq, this.collapsedGanttIds(), out);
         return out;
     }, ...(ngDevMode ? [{ debugName: "resolvedGanttItems" }] : []));
+    resolvedVirtualScrollBodyHeightPx = computed(() => Math.max(this.ganttRowHeightPx, Math.floor(this.virtualScrollBodyHeightPx())), ...(ngDevMode ? [{ debugName: "resolvedVirtualScrollBodyHeightPx" }] : []));
+    isVirtualScrollActive = computed(() => {
+        const threshold = Math.max(0, Math.floor(this.virtualScrollThreshold()));
+        return (this.enableVirtualScroll() &&
+            this.resolvedGanttItems().length >= threshold &&
+            this.resolvedVirtualScrollBodyHeightPx() > 0);
+    }, ...(ngDevMode ? [{ debugName: "isVirtualScrollActive" }] : []));
+    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" }] : []));
+    visibleResolvedGanttItems = computed(() => {
+        const { startIndex, endIndex } = this.virtualScrollWindow();
+        return this.resolvedGanttItems().slice(startIndex, endIndex);
+    }, ...(ngDevMode ? [{ debugName: "visibleResolvedGanttItems" }] : []));
+    virtualScrollTopSpacerHeightPx = computed(() => this.virtualScrollWindow().startIndex * this.ganttRowHeightPx, ...(ngDevMode ? [{ debugName: "virtualScrollTopSpacerHeightPx" }] : []));
+    virtualScrollBottomSpacerHeightPx = computed(() => {
+        const { endIndex } = this.virtualScrollWindow();
+        return Math.max(0, (this.resolvedGanttItems().length - endIndex) * this.ganttRowHeightPx);
+    }, ...(ngDevMode ? [{ debugName: "virtualScrollBottomSpacerHeightPx" }] : []));
     ngAfterViewInit() {
         this.bindResizeObserver();
     }
@@ -430,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;
@@ -499,6 +582,7 @@ class TimelineGantt {
             return;
         }
         this.ganttViewportWidth.set(viewport.clientWidth);
+        this.timelineViewportWidthChange.emit(viewport.clientWidth);
         if (typeof ResizeObserver === 'undefined') {
             return;
         }
@@ -508,6 +592,7 @@ class TimelineGantt {
                 this.ganttScrollViewport?.nativeElement.clientWidth ??
                 0;
             this.ganttViewportWidth.set(width);
+            this.timelineViewportWidthChange.emit(width);
         });
         this.resizeObserver.observe(viewport);
     }
@@ -551,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);
@@ -616,7 +740,8 @@ class TimelineGantt {
         const normalizedEndSeq = Math.min(lastSeq, Math.max(startSeq, endSeq));
         const widthSegments = normalizedEndSeq - normalizedStartSeq + 1;
         const widthPx = Math.max(this.effectiveGanttSegmentWidthPx(), widthSegments * this.effectiveGanttSegmentWidthPx());
-        const trackWidthPx = Math.max(0, widthPx - this.timelineLaneInsetPx * 2);
+        const laneInsetPx = this.laneInsetPx();
+        const trackWidthPx = Math.max(0, widthPx - laneInsetPx * 2);
         const progressValue = this.clampProgress(node.progress.value);
         const statusColor = this.resolveBaseColor(node.color ?? node.progress.color ?? null);
         return {
@@ -720,18 +845,35 @@ class TimelineGantt {
         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 }, 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. -->\n<div class=\"min-h-56 min-w-0 overflow-hidden py-2\">\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 class=\"mt-timeline-scroll h-full overflow-x-auto overflow-y-hidden\">\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            [renderTimeline]=\"false\"\n          />\n\n          <div>\n            @for (item of resolvedGanttItems(); track $index) {\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        aria-label=\"Resize columns pane\"\n        title=\"Drag to resize. Double-click to collapse/restore.\"\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          [renderColumns]=\"false\"\n        />\n\n        <div>\n          @for (item of resolvedGanttItems(); track $index) {\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</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-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: "component", type: TimelineGanttHeader, selector: "mt-timeline-gantt-header", inputs: ["timelineMode", "resolvedColumns", "orderedGanttSegments", "ganttCanvasWidth", "effectiveGanttSegmentWidthPx", "renderColumns", "renderTimeline"] }, { kind: "component", type: TimelineGanttRow, selector: "mt-timeline-gantt-row", inputs: ["item", "resolvedColumns", "ganttCanvasWidth", "laneInsetPx", "renderColumns", "renderTimeline", "columnTemplatesByKey", "progressTemplateDirective"], outputs: ["toggleCollapse", "progressClick"] }] });
+    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 }, 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: [{
             type: Component,
-            args: [{ selector: 'mt-timeline-gantt', standalone: true, imports: [CommonModule, TimelineGanttHeader, TimelineGanttRow], template: "<!-- Gantt view shell: scroll viewport + sized timeline table. -->\n<div class=\"min-h-56 min-w-0 overflow-hidden py-2\">\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 class=\"mt-timeline-scroll h-full overflow-x-auto overflow-y-hidden\">\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            [renderTimeline]=\"false\"\n          />\n\n          <div>\n            @for (item of resolvedGanttItems(); track $index) {\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        aria-label=\"Resize columns pane\"\n        title=\"Drag to resize. Double-click to collapse/restore.\"\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          [renderColumns]=\"false\"\n        />\n\n        <div>\n          @for (item of resolvedGanttItems(); track $index) {\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</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-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"] }]
+            args: [{ selector: 'mt-timeline-gantt', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        TranslocoDirective,
+                        TimelineGanttHeader,
+                        TimelineGanttRow,
+                    ], 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 }] }], 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.
@@ -745,7 +887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
  *   the parent timeline container.
  */
 class TimelineHeader {
-    title = input('Timeline', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
     timelineMode = input('quarterly', ...(ngDevMode ? [{ debugName: "timelineMode" }] : []));
     timelineModeOptions = input([], ...(ngDevMode ? [{ debugName: "timelineModeOptions" }] : []));
     timelineModeChange = output();
@@ -754,20 +896,27 @@ class TimelineHeader {
         this.timelineModeChange.emit(mode);
     }
     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.1.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 } }, outputs: { timelineModeChange: "timelineModeChange" }, ngImport: i0, template: "<!-- Timeline title + scale mode selector. -->\r\n<div class=\"flex flex-wrap items-center justify-between gap-3\">\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() }}</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    <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=\"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: 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.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 } }, 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: [{
             type: Component,
-            args: [{ selector: 'mt-timeline-header', standalone: true, imports: [FormsModule, SelectField, Icon], template: "<!-- Timeline title + scale mode selector. -->\r\n<div class=\"flex flex-wrap items-center justify-between gap-3\">\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() }}</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    <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=\"Timeline mode\"\r\n        [ngModel]=\"timelineMode()\"\r\n        (onChange)=\"onTimelineModeChange($event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+            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 options shown in the timeline mode dropdown.
-const DEFAULT_TIMELINE_MODES = [
-    { label: 'Monthly', value: 'monthly' },
-    { label: 'Quarterly', value: 'quarterly' },
-    { label: 'Semi Annual', value: 'biannually' },
-    { label: 'Annually', value: 'annually' },
+// Default scale mode values (labels are resolved at runtime via i18n).
+const DEFAULT_TIMELINE_MODE_VALUES = [
+    'monthly',
+    'quarterly',
+    '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.
  *
@@ -787,14 +936,44 @@ class Timeline {
     detailsPopover;
     // Invisible anchor used to position popover at exact mouse click coordinates.
     detailsPopoverClickAnchor;
-    title = input('Timeline', ...(ngDevMode ? [{ debugName: "title" }] : []));
-    emptyMessage = input('No data to display', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
+    transloco = inject(TranslocoService);
+    destroyRef = inject(DestroyRef);
+    activeLang = signal(this.transloco.getActiveLang(), ...(ngDevMode ? [{ debugName: "activeLang" }] : []));
+    timelineViewportWidthPx = signal(0, ...(ngDevMode ? [{ debugName: "timelineViewportWidthPx" }] : []));
+    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([
-        ...DEFAULT_TIMELINE_MODES,
-    ], ...(ngDevMode ? [{ debugName: "timelineModeOptions" }] : []));
+    timelineModeOptions = input([], ...(ngDevMode ? [{ debugName: "timelineModeOptions" }] : []));
+    resolvedTimelineModeOptions = computed(() => {
+        const options = this.timelineModeOptions();
+        this.activeLang(); // reactive dependency for language changes
+        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" }] : []));
+    zoomToFit = model(false, ...(ngDevMode ? [{ debugName: "zoomToFit" }] : []));
     ganttData = input([], ...(ngDevMode ? [{ debugName: "ganttData" }] : []));
     ganttMapping = input(null, ...(ngDevMode ? [{ debugName: "ganttMapping" }] : []));
     // Null means "legacy defaults". Empty array means "progress-only" mode.
@@ -803,9 +982,12 @@ class Timeline {
     defaultVisibleColumns = input(4, ...(ngDevMode ? [{ debugName: "defaultVisibleColumns" }] : []));
     columnsPaneMinWidthPx = input(0, ...(ngDevMode ? [{ debugName: "columnsPaneMinWidthPx" }] : []));
     columnsPaneMaxWidthPx = input(null, ...(ngDevMode ? [{ debugName: "columnsPaneMaxWidthPx" }] : []));
+    enableVirtualScroll = input(true, ...(ngDevMode ? [{ debugName: "enableVirtualScroll" }] : []));
+    virtualScrollThreshold = input(120, ...(ngDevMode ? [{ debugName: "virtualScrollThreshold" }] : []));
+    virtualScrollBodyHeightPx = input(640, ...(ngDevMode ? [{ debugName: "virtualScrollBodyHeightPx" }] : []));
     // Backward-compatible defaults when `columns` is null.
-    ganttTitleColumnLabel = input('Portfolio Name', ...(ngDevMode ? [{ debugName: "ganttTitleColumnLabel" }] : []));
-    ganttStatusColumnLabel = input('Status', ...(ngDevMode ? [{ debugName: "ganttStatusColumnLabel" }] : []));
+    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" }] : []));
@@ -844,26 +1026,54 @@ class Timeline {
             .map((item) => this.mapNode(item, mapping, state))
             .filter((item) => item !== null);
     }, ...(ngDevMode ? [{ debugName: "mappedGanttNodes" }] : []));
+    selectedTimelineView = computed(() => {
+        if (this.timelineMode() === ZOOM_TO_FIT_VIEW || this.zoomToFit()) {
+            return ZOOM_TO_FIT_VIEW;
+        }
+        return this.timelineMode();
+    }, ...(ngDevMode ? [{ debugName: "selectedTimelineView" }] : []));
+    resolvedTimelineRange = computed(() => this.resolveDateRange(this.mappedGanttNodes()), ...(ngDevMode ? [{ debugName: "resolvedTimelineRange" }] : []));
+    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" }] : []));
     // 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());
+        return this.buildSegments(range.startAt, range.endAt, this.resolvedRenderTimelineMode());
     }, ...(ngDevMode ? [{ debugName: "orderedGanttSegments" }] : []));
+    isZoomToFitActive = computed(() => this.selectedTimelineView() === ZOOM_TO_FIT_VIEW, ...(ngDevMode ? [{ debugName: "isZoomToFitActive" }] : []));
+    constructor() {
+        this.transloco.langChanges$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((lang) => this.activeLang.set(lang));
+    }
     // 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);
     }
+    onTimelineViewportWidthChange(widthPx) {
+        if (!Number.isFinite(widthPx) || widthPx <= 0) {
+            return;
+        }
+        this.timelineViewportWidthPx.set(widthPx);
+    }
     // Handles row progress clicks: emits public event and opens details popover.
     onGanttProgressClick(item, event) {
         event.stopPropagation();
@@ -920,7 +1130,8 @@ class Timeline {
     }
     // Recursively maps consumer item shape using accessors from `ganttMapping`.
     mapNode(source, mapping, state) {
-        const title = this.resolveString(source, mapping.title) ?? 'Untitled';
+        const title = this.resolveString(source, mapping.title) ??
+            this.transloco.translate('timeline.untitled');
         const idRaw = this.resolveAccessor(source, mapping.id);
         const id = idRaw !== null && idRaw !== undefined && String(idRaw).length
             ? idRaw
@@ -984,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 = [];
@@ -1136,25 +1361,26 @@ class Timeline {
         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 }, timelineMode: { classPropertyName: "timelineMode", publicName: "timelineMode", isSignal: true, isRequired: false, transformFunction: null }, timelineModeOptions: { classPropertyName: "timelineModeOptions", publicName: "timelineModeOptions", 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", 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\">\n  <!-- Optional top header (title + timeline mode selector). -->\n  @if (showHeader()) {\n    <mt-timeline-header\n      [title]=\"title()\"\n      [timelineMode]=\"timelineMode()\"\n      [timelineModeOptions]=\"timelineModeOptions()\"\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]=\"timelineMode()\"\n      [columns]=\"columns()\"\n      [ganttTitleColumnLabel]=\"ganttTitleColumnLabel()\"\n      [ganttStatusColumnLabel]=\"ganttStatusColumnLabel()\"\n      [ganttInitiativeColumnWidthPx]=\"ganttInitiativeColumnWidthPx()\"\n      [ganttStatusColumnWidthPx]=\"ganttStatusColumnWidthPx()\"\n      [showGanttStatusColumn]=\"showGanttStatusColumn()\"\n      [ganttSegmentWidthPx]=\"ganttSegmentWidthPx()\"\n      [defaultVisibleColumns]=\"defaultVisibleColumns()\"\n      [columnsPaneMinWidthPx]=\"columnsPaneMinWidthPx()\"\n      [columnsPaneMaxWidthPx]=\"columnsPaneMaxWidthPx()\"\n      [mappedGanttNodes]=\"mappedGanttNodes()\"\n      [orderedGanttSegments]=\"orderedGanttSegments()\"\n      [collapsedGanttIds]=\"collapsedGanttIds()\"\n      [columnTemplatesByKey]=\"columnTemplatesByKey()\"\n      [progressTemplateDirective]=\"progressTemplate()\"\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() }}\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: "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", "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"] }] });
+    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 }, 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: [{
             type: Component,
-            args: [{ selector: 'mt-timeline', standalone: true, imports: [
+            args: [{ selector: 'mt-timeline', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
+                        TranslocoDirective,
                         TimelineHeader,
                         TimelineGantt,
                         TimelineDefaultPopover,
                         Popover,
                         NgTemplateOutlet,
-                    ], host: { class: 'block' }, template: "<div class=\"mt-3 block overflow-hidden\">\n  <!-- Optional top header (title + timeline mode selector). -->\n  @if (showHeader()) {\n    <mt-timeline-header\n      [title]=\"title()\"\n      [timelineMode]=\"timelineMode()\"\n      [timelineModeOptions]=\"timelineModeOptions()\"\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]=\"timelineMode()\"\n      [columns]=\"columns()\"\n      [ganttTitleColumnLabel]=\"ganttTitleColumnLabel()\"\n      [ganttStatusColumnLabel]=\"ganttStatusColumnLabel()\"\n      [ganttInitiativeColumnWidthPx]=\"ganttInitiativeColumnWidthPx()\"\n      [ganttStatusColumnWidthPx]=\"ganttStatusColumnWidthPx()\"\n      [showGanttStatusColumn]=\"showGanttStatusColumn()\"\n      [ganttSegmentWidthPx]=\"ganttSegmentWidthPx()\"\n      [defaultVisibleColumns]=\"defaultVisibleColumns()\"\n      [columnsPaneMinWidthPx]=\"columnsPaneMinWidthPx()\"\n      [columnsPaneMaxWidthPx]=\"columnsPaneMaxWidthPx()\"\n      [mappedGanttNodes]=\"mappedGanttNodes()\"\n      [orderedGanttSegments]=\"orderedGanttSegments()\"\n      [collapsedGanttIds]=\"collapsedGanttIds()\"\n      [columnTemplatesByKey]=\"columnTemplatesByKey()\"\n      [progressTemplateDirective]=\"progressTemplate()\"\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() }}\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"] }]
-        }], propDecorators: { detailsPopover: [{
+                    ], 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 }] }], 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 }] }], 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.