@masterteam/timeline 0.0.1

package/fesm2022/masterteam-timeline.mjs

@@ -0,0 +1,1101 @@
+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 { Card } from '@masterteam/components/card';
+import { Popover } from 'primeng/popover';
+import { Icon } from '@masterteam/icons';
+import * as i1$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { SelectField } from '@masterteam/components/select-field';
+
+class TimelineGanttTemplateDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineGanttTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: TimelineGanttTemplateDirective, isStandalone: true, selector: "ng-template[mtTimelineGantt]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineGanttTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[mtTimelineGantt]',
+                    standalone: true,
+                }]
+        }] });
+
+class TimelineColumnTemplateDirective {
+    key = '';
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineColumnTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: TimelineColumnTemplateDirective, isStandalone: true, selector: "ng-template[mtTimelineColumn]", inputs: { key: ["mtTimelineColumn", "key"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineColumnTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[mtTimelineColumn]',
+                    standalone: true,
+                }]
+        }], propDecorators: { key: [{
+                type: Input,
+                args: ['mtTimelineColumn']
+            }] } });
+
+class TimelinePopoverTemplateDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelinePopoverTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: TimelinePopoverTemplateDirective, isStandalone: true, selector: "ng-template[mtTimelinePopover]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelinePopoverTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[mtTimelinePopover]',
+                    standalone: true,
+                }]
+        }] });
+
+class TimelineProgressTemplateDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineProgressTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: TimelineProgressTemplateDirective, isStandalone: true, selector: "ng-template[mtTimelineProgress]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineProgressTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[mtTimelineProgress]',
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * Built-in details popover body used when no custom `mtTimelinePopover`
+ * template is provided by the consumer.
+ *
+ * This component is intentionally dumb/presentational: it only receives a
+ * resolved row item and exposes a close event.
+ */
+class TimelineDefaultPopover {
+    // Resolved timeline row currently selected by user.
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
+    // 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" });
+}
+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" }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], requestClose: [{ type: i0.Output, args: ["requestClose"] }] } });
+
+/**
+ * Header renderer for the Gantt table:
+ * - left sticky metadata columns
+ * - right timeline segment columns
+ *
+ * Kept separate to reduce template and logic noise in the Gantt container.
+ */
+class TimelineGanttHeader {
+    monthLabels = [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec',
+    ];
+    timelineMode = input('quarterly', ...(ngDevMode ? [{ debugName: "timelineMode" }] : []));
+    resolvedColumns = input([], ...(ngDevMode ? [{ debugName: "resolvedColumns" }] : []));
+    orderedGanttSegments = input([], ...(ngDevMode ? [{ debugName: "orderedGanttSegments" }] : []));
+    ganttCanvasWidth = input(0, ...(ngDevMode ? [{ debugName: "ganttCanvasWidth" }] : []));
+    effectiveGanttSegmentWidthPx = input(96, ...(ngDevMode ? [{ debugName: "effectiveGanttSegmentWidthPx" }] : []));
+    renderColumns = input(true, ...(ngDevMode ? [{ debugName: "renderColumns" }] : []));
+    renderTimeline = input(true, ...(ngDevMode ? [{ debugName: "renderTimeline" }] : []));
+    // Converts monthly segments from "M N" to calendar abbreviations.
+    resolveSegmentTitle(segment) {
+        if (this.timelineMode() !== 'monthly') {
+            return segment.title;
+        }
+        const month = Number(String(segment.title).replace(/\D/g, ''));
+        return Number.isFinite(month) && month >= 1 && month <= 12
+            ? this.monthLabels[month - 1]
+            : segment.title;
+    }
+    resolveHeaderAlignClass(column) {
+        return {
+            'text-start': column.position === 'start',
+            'text-center': column.position === 'center',
+            'text-end': column.position === 'end',
+        };
+    }
+    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 } }, 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"] }] });
+}
+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], 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 }] }] } });
+
+/**
+ * Single-row renderer for the Gantt body.
+ *
+ * Responsibilities:
+ * - Render sticky metadata cells for one row.
+ * - Render progress lane (default or custom progress template).
+ * - Emit row-level events (collapse + progress selection).
+ *
+ * Keep heavy computations out of this component. Parent components should pass
+ * already-resolved row geometry and style values.
+ */
+class TimelineGanttRow {
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
+    resolvedColumns = input([], ...(ngDevMode ? [{ debugName: "resolvedColumns" }] : []));
+    ganttCanvasWidth = input(0, ...(ngDevMode ? [{ debugName: "ganttCanvasWidth" }] : []));
+    renderColumns = input(true, ...(ngDevMode ? [{ debugName: "renderColumns" }] : []));
+    renderTimeline = input(true, ...(ngDevMode ? [{ debugName: "renderTimeline" }] : []));
+    columnTemplatesByKey = input(new Map(), ...(ngDevMode ? [{ debugName: "columnTemplatesByKey" }] : []));
+    progressTemplateDirective = input(null, ...(ngDevMode ? [{ debugName: "progressTemplateDirective" }] : []));
+    toggleCollapse = output();
+    progressClick = output();
+    // Forwards collapse toggles to container component.
+    onToggleCollapse(item) {
+        this.toggleCollapse.emit(item);
+    }
+    // Forwards progress-bar click with original mouse event for popover anchoring.
+    onProgressClick(item, event) {
+        this.progressClick.emit({ item, event });
+    }
+    collapseIcon(item) {
+        if (!item.isCollapsed) {
+            return 'arrow.chevron-down';
+        }
+        return this.isRtl() ? 'arrow.chevron-left' : 'arrow.chevron-right';
+    }
+    resolveColumnTemplate(column) {
+        return this.columnTemplatesByKey().get(column.key)?.templateRef ?? null;
+    }
+    resolveColumnText(column, item) {
+        const value = this.resolveColumnValue(column, item);
+        if (value === null || value === undefined || value === '') {
+            if (column.isTreeColumn) {
+                return item.title;
+            }
+            return '-';
+        }
+        return String(value);
+    }
+    resolveColumnValue(column, item) {
+        const source = item.source ?? item;
+        if (column.value) {
+            if (typeof column.value === 'function') {
+                return column.value({ item: source, resolved: item });
+            }
+            return this.path(source, column.value);
+        }
+        if (column.isTreeColumn) {
+            return item.title;
+        }
+        const sourceValue = this.path(source, column.key);
+        if (sourceValue !== undefined && sourceValue !== null) {
+            return sourceValue;
+        }
+        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 {
+            $implicit: source,
+            item: source,
+            resolved: item,
+            column,
+            value: this.resolveColumnValue(column, item),
+            canToggle: item.hasChildren,
+            isCollapsed: item.isCollapsed,
+            toggle: () => this.onToggleCollapse(item),
+        };
+    }
+    getProgressTemplateContext(item) {
+        const source = item.source ?? item;
+        return {
+            $implicit: source,
+            item: source,
+            resolved: item,
+            startOffsetPx: item.startOffsetPx + 12,
+            trackWidthPx: item.trackWidthPx,
+            fillWidthPx: item.progressFillWidthPx,
+            progressValue: item.progressValue,
+            progressLabel: item.progressLabel,
+            color: item.statusColor,
+            trackColor: item.progressTrackColor,
+            isRtl: this.isRtl(),
+            onSelect: (event) => this.onProgressClick(item, event),
+        };
+    }
+    // Reads document direction to support sticky offsets and progress alignment.
+    isRtl() {
+        if (typeof document === 'undefined') {
+            return false;
+        }
+        const dir = document.documentElement.getAttribute('dir') ??
+            document.body?.getAttribute('dir') ??
+            'ltr';
+        return dir.toLowerCase() === 'rtl';
+    }
+    // Local safe deep accessor used by dynamic column value path mapping.
+    path(item, value) {
+        if (!value) {
+            return undefined;
+        }
+        return value
+            .replace(/\[(\d+)\]/g, '.$1')
+            .split('.')
+            .filter(Boolean)
+            .reduce((current, key) => {
+            if (current === null ||
+                current === undefined ||
+                typeof current !== 'object') {
+                return undefined;
+            }
+            return current[key];
+        }, item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineGanttRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: TimelineGanttRow, isStandalone: true, selector: "mt-timeline-gantt-row", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, resolvedColumns: { classPropertyName: "resolvedColumns", publicName: "resolvedColumns", isSignal: true, isRequired: false, transformFunction: null }, ganttCanvasWidth: { classPropertyName: "ganttCanvasWidth", publicName: "ganttCanvasWidth", isSignal: true, isRequired: false, transformFunction: null }, 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" }, 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 px-3 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]=\"isRtl() ? null : item().startOffsetPx + 12\"\r\n          [style.right.px]=\"isRtl() ? item().startOffsetPx + 12 : null\"\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          <div\r\n            class=\"relative h-full overflow-hidden rounded-full\"\r\n            [style.width.px]=\"item().progressFillWidthPx\"\r\n            [style.background-color]=\"item().statusColor\"\r\n          >\r\n            @if (item().progressFillWidthPx > 0) {\r\n              <span\r\n                class=\"pointer-events-none absolute top-1/2 rounded-full bg-white px-2 py-0.5 text-[10px] font-semibold text-black shadow-sm -translate-y-1/2\"\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        </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"] }] });
+}
+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], 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 px-3 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]=\"isRtl() ? null : item().startOffsetPx + 12\"\r\n          [style.right.px]=\"isRtl() ? item().startOffsetPx + 12 : null\"\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          <div\r\n            class=\"relative h-full overflow-hidden rounded-full\"\r\n            [style.width.px]=\"item().progressFillWidthPx\"\r\n            [style.background-color]=\"item().statusColor\"\r\n          >\r\n            @if (item().progressFillWidthPx > 0) {\r\n              <span\r\n                class=\"pointer-events-none absolute top-1/2 rounded-full bg-white px-2 py-0.5 text-[10px] font-semibold text-black shadow-sm -translate-y-1/2\"\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        </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 }] }], 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"] }] } });
+
+/**
+ * Gantt view orchestrator.
+ *
+ * Responsibilities:
+ * - Resolve dynamic/legacy columns.
+ * - Compute table/canvas geometry based on viewport width + segment count.
+ * - Flatten mapped tree data into render-ready rows.
+ * - Coordinate child header/row components and re-emit row events.
+ *
+ * Non-responsibilities:
+ * - Raw data mapping from consumer models (handled by parent timeline component).
+ * - Popover state and selection management (handled by parent timeline component).
+ */
+class TimelineGantt {
+    set ganttSplitContainerRef(value) {
+        this.ganttSplitContainer = value;
+        this.bindSplitResizeObserver();
+    }
+    set ganttScrollViewportRef(value) {
+        this.ganttScrollViewport = value;
+        this.bindResizeObserver();
+    }
+    ganttSplitContainer;
+    ganttScrollViewport;
+    resizeObserver;
+    splitResizeObserver;
+    // Width of the visible horizontal viewport used for adaptive segment sizing.
+    ganttViewportWidth = signal(0, ...(ngDevMode ? [{ debugName: "ganttViewportWidth" }] : []));
+    ganttContainerWidth = signal(0, ...(ngDevMode ? [{ debugName: "ganttContainerWidth" }] : []));
+    splitterWidthPx = 10;
+    columnsPaneUserWidthPx = signal(null, ...(ngDevMode ? [{ debugName: "columnsPaneUserWidthPx" }] : []));
+    lastExpandedColumnsPaneWidthPx = signal(null, ...(ngDevMode ? [{ debugName: "lastExpandedColumnsPaneWidthPx" }] : []));
+    isColumnsResizing = signal(false, ...(ngDevMode ? [{ debugName: "isColumnsResizing" }] : []));
+    canResizeColumnsPane = computed(() => this.resolvedColumns().length > 0, ...(ngDevMode ? [{ debugName: "canResizeColumnsPane" }] : []));
+    resizeStartClientX = 0;
+    resizeStartColumnsPaneWidthPx = 0;
+    timelineMode = input('quarterly', ...(ngDevMode ? [{ debugName: "timelineMode" }] : []));
+    columns = input(null, ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    ganttTitleColumnLabel = input('Portfolio Name', ...(ngDevMode ? [{ debugName: "ganttTitleColumnLabel" }] : []));
+    ganttStatusColumnLabel = input('Status', ...(ngDevMode ? [{ debugName: "ganttStatusColumnLabel" }] : []));
+    ganttInitiativeColumnWidthPx = input(288, ...(ngDevMode ? [{ debugName: "ganttInitiativeColumnWidthPx" }] : []));
+    ganttStatusColumnWidthPx = input(160, ...(ngDevMode ? [{ debugName: "ganttStatusColumnWidthPx" }] : []));
+    showGanttStatusColumn = input(false, ...(ngDevMode ? [{ debugName: "showGanttStatusColumn" }] : []));
+    ganttSegmentWidthPx = input(96, ...(ngDevMode ? [{ debugName: "ganttSegmentWidthPx" }] : []));
+    columnsPaneMinWidthPx = input(0, ...(ngDevMode ? [{ debugName: "columnsPaneMinWidthPx" }] : []));
+    columnsPaneMaxWidthPx = input(null, ...(ngDevMode ? [{ debugName: "columnsPaneMaxWidthPx" }] : []));
+    mappedGanttNodes = input([], ...(ngDevMode ? [{ debugName: "mappedGanttNodes" }] : []));
+    orderedGanttSegments = input([], ...(ngDevMode ? [{ debugName: "orderedGanttSegments" }] : []));
+    collapsedGanttIds = input(new Set(), ...(ngDevMode ? [{ debugName: "collapsedGanttIds" }] : []));
+    columnTemplatesByKey = input(new Map(), ...(ngDevMode ? [{ debugName: "columnTemplatesByKey" }] : []));
+    progressTemplateDirective = input(null, ...(ngDevMode ? [{ debugName: "progressTemplateDirective" }] : []));
+    toggleCollapse = output();
+    progressClick = output();
+    // Builds sticky metadata columns and computes their sticky offsets.
+    resolvedColumns = computed(() => {
+        const providedColumns = this.columns();
+        const baseColumns = providedColumns === null ? this.buildLegacyColumns() : providedColumns;
+        const resolvedTreeColumnIndex = Math.max(0, baseColumns.findIndex((column) => column.tree === true));
+        return baseColumns.map((column, index) => {
+            const widthPx = Math.max(0, Math.floor(column.widthPx ?? this.ganttInitiativeColumnWidthPx()));
+            const resolvedColumn = {
+                ...column,
+                header: column.header ?? column.key,
+                widthPx,
+                position: column.position ?? 'start',
+                isTreeColumn: index === resolvedTreeColumnIndex,
+            };
+            return resolvedColumn;
+        });
+    }, ...(ngDevMode ? [{ debugName: "resolvedColumns" }] : []));
+    stickyColumnsWidth = computed(() => this.resolvedColumns().reduce((total, column) => total + column.widthPx, 0), ...(ngDevMode ? [{ debugName: "stickyColumnsWidth" }] : []));
+    resolvedColumnsPaneWidthPx = computed(() => {
+        const userWidth = this.columnsPaneUserWidthPx();
+        const preferredWidth = userWidth ?? this.stickyColumnsWidth();
+        return this.clampColumnsPaneWidth(preferredWidth);
+    }, ...(ngDevMode ? [{ debugName: "resolvedColumnsPaneWidthPx" }] : []));
+    // Segment width expands to fill viewport when possible but never goes below base width.
+    effectiveGanttSegmentWidthPx = computed(() => {
+        const segmentCount = this.orderedGanttSegments().length;
+        const baseWidth = this.ganttSegmentWidthPx();
+        if (!segmentCount) {
+            return baseWidth;
+        }
+        const availableWidth = this.ganttViewportWidth();
+        if (availableWidth <= 0) {
+            return baseWidth;
+        }
+        return Math.max(baseWidth, Math.floor(availableWidth / segmentCount));
+    }, ...(ngDevMode ? [{ debugName: "effectiveGanttSegmentWidthPx" }] : []));
+    ganttCanvasWidth = computed(() => this.orderedGanttSegments().length * this.effectiveGanttSegmentWidthPx(), ...(ngDevMode ? [{ debugName: "ganttCanvasWidth" }] : []));
+    // Flattens the mapped hierarchy into rows using current collapse state.
+    resolvedGanttItems = computed(() => {
+        const segments = this.orderedGanttSegments();
+        if (!segments.length) {
+            return [];
+        }
+        const firstSeq = segments[0].seq;
+        const lastSeq = segments[segments.length - 1].seq;
+        const out = [];
+        this.flattenMapped(this.mappedGanttNodes(), 0, segments, firstSeq, lastSeq, this.collapsedGanttIds(), out);
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "resolvedGanttItems" }] : []));
+    ngAfterViewInit() {
+        this.bindResizeObserver();
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        this.splitResizeObserver?.disconnect();
+        this.detachResizeListeners();
+    }
+    onToggleCollapse(item) {
+        this.toggleCollapse.emit(item);
+    }
+    // Bridges row-level click event to parent timeline component.
+    onRowProgressClick(payload) {
+        this.progressClick.emit(payload);
+    }
+    onSplitterPointerDown(event) {
+        if (event.button !== 0 || !this.canResizeColumnsPane()) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.isColumnsResizing.set(true);
+        this.resizeStartClientX = event.clientX;
+        this.resizeStartColumnsPaneWidthPx = this.resolvedColumnsPaneWidthPx();
+        const target = event.currentTarget;
+        target?.setPointerCapture?.(event.pointerId);
+        window.addEventListener('pointermove', this.onSplitterPointerMove, {
+            passive: true,
+        });
+        window.addEventListener('pointerup', this.onSplitterPointerUp);
+        window.addEventListener('pointercancel', this.onSplitterPointerUp);
+    }
+    onSplitterKeyDown(event) {
+        if (!this.canResizeColumnsPane()) {
+            return;
+        }
+        const currentWidth = this.resolvedColumnsPaneWidthPx();
+        const direction = this.isRtl() ? -1 : 1;
+        const stepPx = event.shiftKey ? 48 : 16;
+        switch (event.key) {
+            case 'ArrowLeft': {
+                event.preventDefault();
+                this.applyColumnsPaneWidth(currentWidth - direction * stepPx);
+                return;
+            }
+            case 'ArrowRight': {
+                event.preventDefault();
+                this.applyColumnsPaneWidth(currentWidth + direction * stepPx);
+                return;
+            }
+            case 'Home': {
+                event.preventDefault();
+                this.applyColumnsPaneWidth(0);
+                return;
+            }
+            case 'End': {
+                event.preventDefault();
+                this.applyColumnsPaneWidth(this.columnsPaneMaxAllowedWidthPx());
+                return;
+            }
+            case 'Enter':
+            case ' ': {
+                event.preventDefault();
+                this.toggleColumnsPaneCollapsed();
+                return;
+            }
+            default:
+                return;
+        }
+    }
+    onSplitterDoubleClick() {
+        if (!this.canResizeColumnsPane()) {
+            return;
+        }
+        this.toggleColumnsPaneCollapsed();
+    }
+    // Observes viewport size changes so timeline columns can adapt width.
+    bindResizeObserver() {
+        const viewport = this.ganttScrollViewport?.nativeElement;
+        if (!viewport) {
+            this.resizeObserver?.disconnect();
+            return;
+        }
+        this.ganttViewportWidth.set(viewport.clientWidth);
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = new ResizeObserver((entries) => {
+            const width = entries[0]?.contentRect.width ??
+                this.ganttScrollViewport?.nativeElement.clientWidth ??
+                0;
+            this.ganttViewportWidth.set(width);
+        });
+        this.resizeObserver.observe(viewport);
+    }
+    bindSplitResizeObserver() {
+        const container = this.ganttSplitContainer?.nativeElement;
+        if (!container) {
+            this.splitResizeObserver?.disconnect();
+            return;
+        }
+        this.ganttContainerWidth.set(container.clientWidth);
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.splitResizeObserver?.disconnect();
+        this.splitResizeObserver = new ResizeObserver((entries) => {
+            const width = entries[0]?.contentRect.width ??
+                this.ganttSplitContainer?.nativeElement.clientWidth ??
+                0;
+            this.ganttContainerWidth.set(width);
+        });
+        this.splitResizeObserver.observe(container);
+    }
+    onSplitterPointerMove = (event) => {
+        if (!this.isColumnsResizing()) {
+            return;
+        }
+        const deltaPx = this.isRtl()
+            ? this.resizeStartClientX - event.clientX
+            : event.clientX - this.resizeStartClientX;
+        this.applyColumnsPaneWidth(this.resizeStartColumnsPaneWidthPx + deltaPx);
+    };
+    onSplitterPointerUp = () => {
+        if (!this.isColumnsResizing()) {
+            return;
+        }
+        this.isColumnsResizing.set(false);
+        this.detachResizeListeners();
+    };
+    detachResizeListeners() {
+        window.removeEventListener('pointermove', this.onSplitterPointerMove);
+        window.removeEventListener('pointerup', this.onSplitterPointerUp);
+        window.removeEventListener('pointercancel', this.onSplitterPointerUp);
+    }
+    applyColumnsPaneWidth(widthPx) {
+        const clampedWidthPx = this.clampColumnsPaneWidth(widthPx);
+        this.columnsPaneUserWidthPx.set(clampedWidthPx);
+        if (clampedWidthPx > 0) {
+            this.lastExpandedColumnsPaneWidthPx.set(clampedWidthPx);
+        }
+    }
+    toggleColumnsPaneCollapsed() {
+        const currentWidth = this.resolvedColumnsPaneWidthPx();
+        if (currentWidth > 0) {
+            this.lastExpandedColumnsPaneWidthPx.set(currentWidth);
+            this.applyColumnsPaneWidth(0);
+            return;
+        }
+        const restoreWidth = this.lastExpandedColumnsPaneWidthPx() ?? this.stickyColumnsWidth();
+        this.applyColumnsPaneWidth(restoreWidth);
+    }
+    // Legacy fallback columns when consumer does not provide `columns`.
+    buildLegacyColumns() {
+        const columns = [
+            {
+                key: 'title',
+                header: this.ganttTitleColumnLabel(),
+                widthPx: this.ganttInitiativeColumnWidthPx(),
+                tree: true,
+            },
+        ];
+        if (this.showGanttStatusColumn()) {
+            columns.push({
+                key: 'status',
+                header: this.ganttStatusColumnLabel(),
+                widthPx: this.ganttStatusColumnWidthPx(),
+                position: 'center',
+            });
+        }
+        return columns;
+    }
+    flattenMapped(nodes, levelDepth, segments, firstSeq, lastSeq, collapsed, out) {
+        // Pre-order flatten preserves parent-child visual grouping.
+        for (const node of nodes) {
+            const startSegment = this.segmentByTime(node.startAt ?? node.endAt, segments) ?? segments[0];
+            const endSegment = this.segmentByTime(node.endAt ?? node.startAt, segments) ??
+                segments[segments.length - 1];
+            const startLabel = startSegment.year !== undefined
+                ? `${startSegment.title} ${startSegment.year}`
+                : startSegment.title;
+            const endLabel = endSegment.year !== undefined
+                ? `${endSegment.title} ${endSegment.year}`
+                : endSegment.title;
+            const resolved = this.createResolvedItem(node, startSegment.seq, endSegment.seq, `${startLabel} - ${endLabel}`, levelDepth, collapsed, firstSeq, lastSeq);
+            out.push(resolved);
+            if (node.children.length && !resolved.isCollapsed) {
+                this.flattenMapped(node.children, levelDepth + 1, segments, firstSeq, lastSeq, collapsed, out);
+            }
+        }
+    }
+    // Converts one mapped node into a fully resolved row model.
+    createResolvedItem(node, startSeqRaw, endSeqRaw, phaseFallback, levelDepth, collapsed, firstSeq, lastSeq) {
+        const startSeq = Number.isFinite(startSeqRaw) ? startSeqRaw : firstSeq;
+        const endSeq = Number.isFinite(endSeqRaw) ? endSeqRaw : lastSeq;
+        const normalizedStartSeq = Math.max(firstSeq, Math.min(startSeq, endSeq));
+        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 - 24);
+        const progressValue = this.clampProgress(node.progress.value);
+        const statusColor = this.resolveBaseColor(node.color ?? node.progress.color ?? null);
+        return {
+            id: node.id,
+            source: node.source,
+            title: node.title,
+            startSeq: normalizedStartSeq,
+            endSeq: normalizedEndSeq,
+            progressValue,
+            progressLabel: node.progress.label ?? `${Math.round(progressValue)}%`,
+            statusKey: node.statusKey ?? undefined,
+            statusName: node.statusName ?? node.statusKey ?? '-',
+            statusColor,
+            progressTrackColor: this.resolveTrackColor(statusColor),
+            owner: node.owner ?? '-',
+            phase: node.phase ?? phaseFallback,
+            levelDescription: node.levelDescription ?? 'Level',
+            levelColor: node.levelColor ?? '#94a3b8',
+            levelDepth,
+            hasChildren: node.children.length > 0,
+            isCollapsed: collapsed.has(node.id),
+            startOffsetPx: (normalizedStartSeq - firstSeq) * this.effectiveGanttSegmentWidthPx(),
+            trackWidthPx,
+            progressFillWidthPx: (trackWidthPx * progressValue) / 100,
+        };
+    }
+    segmentByTime(value, segments) {
+        if (value === null) {
+            return undefined;
+        }
+        return segments.find((segment) => value >= segment.startAt && value <= segment.endAt);
+    }
+    // Applies fallback theme color when item does not specify one.
+    resolveBaseColor(color) {
+        return color ?? 'var(--p-primary-color)';
+    }
+    // Generates lighter track color from fill color for visual contrast.
+    resolveTrackColor(color) {
+        return `color-mix(in srgb, ${color} 22%, white)`;
+    }
+    clampProgress(value) {
+        if (!Number.isFinite(value)) {
+            return 0;
+        }
+        return Math.max(0, Math.min(100, value));
+    }
+    columnsPaneMaxAllowedWidthPx() {
+        const containerWidth = this.ganttContainerWidth();
+        if (containerWidth <= 0) {
+            return Number.POSITIVE_INFINITY;
+        }
+        const maxByContainer = Math.max(0, containerWidth - this.splitterWidthPx);
+        const configuredMax = this.columnsPaneMaxWidthPx();
+        if (configuredMax === null || configuredMax === undefined) {
+            return maxByContainer;
+        }
+        return Math.max(0, Math.min(maxByContainer, configuredMax));
+    }
+    clampColumnsPaneWidth(widthPx) {
+        if (!Number.isFinite(widthPx)) {
+            return 0;
+        }
+        const maxWidth = this.columnsPaneMaxAllowedWidthPx();
+        const minWidth = Math.max(0, this.columnsPaneMinWidthPx());
+        const effectiveMin = Math.min(minWidth, maxWidth);
+        return Math.max(effectiveMin, Math.min(widthPx, maxWidth));
+    }
+    isRtl() {
+        if (typeof document === 'undefined') {
+            return false;
+        }
+        const dir = document.documentElement.getAttribute('dir') ??
+            document.body?.getAttribute('dir') ??
+            'ltr';
+        return dir.toLowerCase() === 'rtl';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimelineGantt, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: TimelineGantt, isStandalone: true, selector: "mt-timeline-gantt", inputs: { timelineMode: { classPropertyName: "timelineMode", publicName: "timelineMode", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, ganttTitleColumnLabel: { classPropertyName: "ganttTitleColumnLabel", publicName: "ganttTitleColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, ganttStatusColumnLabel: { classPropertyName: "ganttStatusColumnLabel", publicName: "ganttStatusColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, ganttInitiativeColumnWidthPx: { classPropertyName: "ganttInitiativeColumnWidthPx", publicName: "ganttInitiativeColumnWidthPx", isSignal: true, isRequired: false, transformFunction: null }, ganttStatusColumnWidthPx: { classPropertyName: "ganttStatusColumnWidthPx", publicName: "ganttStatusColumnWidthPx", isSignal: true, isRequired: false, transformFunction: null }, showGanttStatusColumn: { classPropertyName: "showGanttStatusColumn", publicName: "showGanttStatusColumn", isSignal: true, isRequired: false, transformFunction: null }, ganttSegmentWidthPx: { classPropertyName: "ganttSegmentWidthPx", publicName: "ganttSegmentWidthPx", isSignal: true, isRequired: false, transformFunction: null }, 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. -->\r\n<div class=\"min-h-56 min-w-0 overflow-hidden p-4\">\r\n  <div\r\n    class=\"flex min-w-0 border border-surface bg-content\"\r\n    #ganttSplitContainer\r\n  >\r\n    <!-- Fixed metadata columns pane. -->\r\n    <div\r\n      class=\"shrink-0 overflow-hidden\"\r\n      [style.width.px]=\"resolvedColumnsPaneWidthPx()\"\r\n    >\r\n      <mt-timeline-gantt-header\r\n        [timelineMode]=\"timelineMode()\"\r\n        [resolvedColumns]=\"resolvedColumns()\"\r\n        [orderedGanttSegments]=\"orderedGanttSegments()\"\r\n        [ganttCanvasWidth]=\"0\"\r\n        [effectiveGanttSegmentWidthPx]=\"effectiveGanttSegmentWidthPx()\"\r\n        [renderTimeline]=\"false\"\r\n      />\r\n\r\n      <div>\r\n        @for (item of resolvedGanttItems(); track $index) {\r\n          <mt-timeline-gantt-row\r\n            [item]=\"item\"\r\n            [resolvedColumns]=\"resolvedColumns()\"\r\n            [ganttCanvasWidth]=\"0\"\r\n            [columnTemplatesByKey]=\"columnTemplatesByKey()\"\r\n            [progressTemplateDirective]=\"progressTemplateDirective()\"\r\n            [renderTimeline]=\"false\"\r\n            (toggleCollapse)=\"onToggleCollapse($event)\"\r\n            (progressClick)=\"onRowProgressClick($event)\"\r\n          />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    @if (canResizeColumnsPane()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"mt-timeline-splitter shrink-0\"\r\n        [class.mt-timeline-splitter-active]=\"isColumnsResizing()\"\r\n        (pointerdown)=\"onSplitterPointerDown($event)\"\r\n        (dblclick)=\"onSplitterDoubleClick()\"\r\n        (keydown)=\"onSplitterKeyDown($event)\"\r\n        aria-label=\"Resize columns pane\"\r\n        title=\"Drag to resize. Double-click to collapse/restore.\"\r\n      ></button>\r\n    }\r\n\r\n    <!-- Scrollable timeline pane (horizontal scroll is limited to this area). -->\r\n    <div\r\n      class=\"mt-timeline-scroll min-w-0 flex-1 overflow-x-auto overflow-y-hidden\"\r\n      #ganttScrollViewport\r\n    >\r\n      <div class=\"min-w-full\" [style.width.px]=\"ganttCanvasWidth()\">\r\n        <mt-timeline-gantt-header\r\n          [timelineMode]=\"timelineMode()\"\r\n          [resolvedColumns]=\"resolvedColumns()\"\r\n          [orderedGanttSegments]=\"orderedGanttSegments()\"\r\n          [ganttCanvasWidth]=\"ganttCanvasWidth()\"\r\n          [effectiveGanttSegmentWidthPx]=\"effectiveGanttSegmentWidthPx()\"\r\n          [renderColumns]=\"false\"\r\n        />\r\n\r\n        <div>\r\n          @for (item of resolvedGanttItems(); track $index) {\r\n            <mt-timeline-gantt-row\r\n              [item]=\"item\"\r\n              [resolvedColumns]=\"[]\"\r\n              [ganttCanvasWidth]=\"ganttCanvasWidth()\"\r\n              [columnTemplatesByKey]=\"columnTemplatesByKey()\"\r\n              [progressTemplateDirective]=\"progressTemplateDirective()\"\r\n              [renderColumns]=\"false\"\r\n              (toggleCollapse)=\"onToggleCollapse($event)\"\r\n              (progressClick)=\"onRowProgressClick($event)\"\r\n            />\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;min-width:0;max-width:100%}.mt-timeline-scroll{width:100%;max-width:100%;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;border-inline:1px solid color-mix(in srgb,var(--p-surface-300) 60%,transparent);background:color-mix(in srgb,var(--p-surface-50) 50%,transparent);cursor:col-resize;touch-action:none;transition:background-color .12s ease}.mt-timeline-splitter:before{content:\"\";position:absolute;top:8px;bottom:8px;inset-inline-start:50%;width:2px;transform:translate(-50%);border-radius:9999px;background:color-mix(in srgb,var(--p-surface-500) 45%,transparent);transition:background-color .12s ease}.mt-timeline-splitter:hover:before,.mt-timeline-splitter-active:before{background:color-mix(in srgb,var(--p-primary-color) 70%,var(--p-surface-400))}.mt-timeline-splitter:hover{background:color-mix(in srgb,var(--p-surface-100) 60%,transparent)}.mt-timeline-splitter:focus-visible{outline:2px solid color-mix(in srgb,var(--p-primary-color) 60%,transparent);outline-offset:-1px}\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", "renderColumns", "renderTimeline", "columnTemplatesByKey", "progressTemplateDirective"], outputs: ["toggleCollapse", "progressClick"] }] });
+}
+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. -->\r\n<div class=\"min-h-56 min-w-0 overflow-hidden p-4\">\r\n  <div\r\n    class=\"flex min-w-0 border border-surface bg-content\"\r\n    #ganttSplitContainer\r\n  >\r\n    <!-- Fixed metadata columns pane. -->\r\n    <div\r\n      class=\"shrink-0 overflow-hidden\"\r\n      [style.width.px]=\"resolvedColumnsPaneWidthPx()\"\r\n    >\r\n      <mt-timeline-gantt-header\r\n        [timelineMode]=\"timelineMode()\"\r\n        [resolvedColumns]=\"resolvedColumns()\"\r\n        [orderedGanttSegments]=\"orderedGanttSegments()\"\r\n        [ganttCanvasWidth]=\"0\"\r\n        [effectiveGanttSegmentWidthPx]=\"effectiveGanttSegmentWidthPx()\"\r\n        [renderTimeline]=\"false\"\r\n      />\r\n\r\n      <div>\r\n        @for (item of resolvedGanttItems(); track $index) {\r\n          <mt-timeline-gantt-row\r\n            [item]=\"item\"\r\n            [resolvedColumns]=\"resolvedColumns()\"\r\n            [ganttCanvasWidth]=\"0\"\r\n            [columnTemplatesByKey]=\"columnTemplatesByKey()\"\r\n            [progressTemplateDirective]=\"progressTemplateDirective()\"\r\n            [renderTimeline]=\"false\"\r\n            (toggleCollapse)=\"onToggleCollapse($event)\"\r\n            (progressClick)=\"onRowProgressClick($event)\"\r\n          />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    @if (canResizeColumnsPane()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"mt-timeline-splitter shrink-0\"\r\n        [class.mt-timeline-splitter-active]=\"isColumnsResizing()\"\r\n        (pointerdown)=\"onSplitterPointerDown($event)\"\r\n        (dblclick)=\"onSplitterDoubleClick()\"\r\n        (keydown)=\"onSplitterKeyDown($event)\"\r\n        aria-label=\"Resize columns pane\"\r\n        title=\"Drag to resize. Double-click to collapse/restore.\"\r\n      ></button>\r\n    }\r\n\r\n    <!-- Scrollable timeline pane (horizontal scroll is limited to this area). -->\r\n    <div\r\n      class=\"mt-timeline-scroll min-w-0 flex-1 overflow-x-auto overflow-y-hidden\"\r\n      #ganttScrollViewport\r\n    >\r\n      <div class=\"min-w-full\" [style.width.px]=\"ganttCanvasWidth()\">\r\n        <mt-timeline-gantt-header\r\n          [timelineMode]=\"timelineMode()\"\r\n          [resolvedColumns]=\"resolvedColumns()\"\r\n          [orderedGanttSegments]=\"orderedGanttSegments()\"\r\n          [ganttCanvasWidth]=\"ganttCanvasWidth()\"\r\n          [effectiveGanttSegmentWidthPx]=\"effectiveGanttSegmentWidthPx()\"\r\n          [renderColumns]=\"false\"\r\n        />\r\n\r\n        <div>\r\n          @for (item of resolvedGanttItems(); track $index) {\r\n            <mt-timeline-gantt-row\r\n              [item]=\"item\"\r\n              [resolvedColumns]=\"[]\"\r\n              [ganttCanvasWidth]=\"ganttCanvasWidth()\"\r\n              [columnTemplatesByKey]=\"columnTemplatesByKey()\"\r\n              [progressTemplateDirective]=\"progressTemplateDirective()\"\r\n              [renderColumns]=\"false\"\r\n              (toggleCollapse)=\"onToggleCollapse($event)\"\r\n              (progressClick)=\"onRowProgressClick($event)\"\r\n            />\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;min-width:0;max-width:100%}.mt-timeline-scroll{width:100%;max-width:100%;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;border-inline:1px solid color-mix(in srgb,var(--p-surface-300) 60%,transparent);background:color-mix(in srgb,var(--p-surface-50) 50%,transparent);cursor:col-resize;touch-action:none;transition:background-color .12s ease}.mt-timeline-splitter:before{content:\"\";position:absolute;top:8px;bottom:8px;inset-inline-start:50%;width:2px;transform:translate(-50%);border-radius:9999px;background:color-mix(in srgb,var(--p-surface-500) 45%,transparent);transition:background-color .12s ease}.mt-timeline-splitter:hover:before,.mt-timeline-splitter-active:before{background:color-mix(in srgb,var(--p-primary-color) 70%,var(--p-surface-400))}.mt-timeline-splitter:hover{background:color-mix(in srgb,var(--p-surface-100) 60%,transparent)}.mt-timeline-splitter:focus-visible{outline:2px solid color-mix(in srgb,var(--p-primary-color) 60%,transparent);outline-offset:-1px}\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 }] }], 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"] }] } });
+
+/**
+ * Shared timeline header.
+ *
+ * Responsibilities:
+ * - Render title + mode picker UI.
+ * - Emit the selected scale mode to parent orchestration.
+ *
+ * Notes for maintainers:
+ * - Keep this component presentation-focused. Business logic should remain in
+ *   the parent timeline container.
+ */
+class TimelineHeader {
+    title = input('Timeline', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    timelineMode = input('quarterly', ...(ngDevMode ? [{ debugName: "timelineMode" }] : []));
+    timelineModeOptions = input([], ...(ngDevMode ? [{ debugName: "timelineModeOptions" }] : []));
+    timelineModeChange = output();
+    // Re-emits selector changes so parent owns state updates.
+    onTimelineModeChange(mode) {
+        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"], outputs: ["onChange"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }] });
+}
+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" }]
+        }], 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' },
+];
+/**
+ * Dynamic Gantt timeline component.
+ *
+ * Data flow:
+ * 1) Raw input nodes are mapped via `ganttMapping` to `TimelineMappedNode`.
+ * 2) Timeline range is derived from min start/max end across the mapped tree.
+ * 3) Time segments are generated from range + selected scale.
+ * 4) Tree nodes are flattened into render-ready rows with pixel geometry.
+ *
+ * Column system:
+ * - `columns = null` uses legacy defaults (title + optional status).
+ * - `columns = []` renders progress-only mode with no leading columns.
+ * - `columns = [...]` renders provided columns and supports per-column templates.
+ */
+class Timeline {
+    // PrimeNG popover instance controlling row details overlay.
+    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" }] : []));
+    isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    showHeader = input(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : []));
+    timelineMode = model('quarterly', ...(ngDevMode ? [{ debugName: "timelineMode" }] : []));
+    timelineModeOptions = input([
+        ...DEFAULT_TIMELINE_MODES,
+    ], ...(ngDevMode ? [{ debugName: "timelineModeOptions" }] : []));
+    ganttData = input([], ...(ngDevMode ? [{ debugName: "ganttData" }] : []));
+    ganttMapping = input(null, ...(ngDevMode ? [{ debugName: "ganttMapping" }] : []));
+    // Null means "legacy defaults". Empty array means "progress-only" mode.
+    columns = input(null, ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    ganttSegmentWidthPx = input(96, ...(ngDevMode ? [{ debugName: "ganttSegmentWidthPx" }] : []));
+    columnsPaneMinWidthPx = input(0, ...(ngDevMode ? [{ debugName: "columnsPaneMinWidthPx" }] : []));
+    columnsPaneMaxWidthPx = input(null, ...(ngDevMode ? [{ debugName: "columnsPaneMaxWidthPx" }] : []));
+    // Backward-compatible defaults when `columns` is null.
+    ganttTitleColumnLabel = input('Portfolio Name', ...(ngDevMode ? [{ debugName: "ganttTitleColumnLabel" }] : []));
+    ganttStatusColumnLabel = input('Status', ...(ngDevMode ? [{ debugName: "ganttStatusColumnLabel" }] : []));
+    ganttInitiativeColumnWidthPx = input(288, ...(ngDevMode ? [{ debugName: "ganttInitiativeColumnWidthPx" }] : []));
+    ganttStatusColumnWidthPx = input(160, ...(ngDevMode ? [{ debugName: "ganttStatusColumnWidthPx" }] : []));
+    showGanttStatusColumn = input(false, ...(ngDevMode ? [{ debugName: "showGanttStatusColumn" }] : []));
+    showGanttDetailsPopup = input(true, ...(ngDevMode ? [{ debugName: "showGanttDetailsPopup" }] : []));
+    // Public events exposed to consumers.
+    timelineModeChangeEvent = output();
+    ganttItemClick = output();
+    // Optional full-template override for the Gantt body.
+    ganttTemplate = contentChild(TimelineGanttTemplateDirective, ...(ngDevMode ? [{ debugName: "ganttTemplate" }] : []));
+    // Optional cell template override for a specific column key.
+    columnTemplates = contentChildren((TimelineColumnTemplateDirective), ...(ngDevMode ? [{ debugName: "columnTemplates" }] : []));
+    // Optional popup content override (clicked progress item details).
+    popoverTemplate = contentChild((TimelinePopoverTemplateDirective), ...(ngDevMode ? [{ debugName: "popoverTemplate" }] : []));
+    // Optional progress bar renderer override.
+    progressTemplate = contentChild((TimelineProgressTemplateDirective), ...(ngDevMode ? [{ debugName: "progressTemplate" }] : []));
+    collapsedGanttIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "collapsedGanttIds" }] : []));
+    selectedGanttItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedGanttItem" }] : []));
+    // Maps `mtTimelineColumn` templates by key for fast lookup in row rendering.
+    columnTemplatesByKey = computed(() => {
+        const map = new Map();
+        for (const template of this.columnTemplates()) {
+            if (template.key) {
+                map.set(template.key, template);
+            }
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "columnTemplatesByKey" }] : []));
+    mappedGanttNodes = computed(() => {
+        const mapping = this.ganttMapping();
+        const data = this.ganttData();
+        if (!mapping || !data.length) {
+            return [];
+        }
+        const state = { nextId: 1 };
+        return data
+            .map((item) => this.mapNode(item, mapping, state))
+            .filter((item) => item !== null);
+    }, ...(ngDevMode ? [{ debugName: "mappedGanttNodes" }] : []));
+    // 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);
+        if (!range) {
+            return [];
+        }
+        return this.buildSegments(range.startAt, range.endAt, this.timelineMode());
+    }, ...(ngDevMode ? [{ debugName: "orderedGanttSegments" }] : []));
+    // Timeline mode is controlled by parent model signal to keep it externally bindable.
+    onTimelineModeChange(mode) {
+        if (!mode || this.timelineMode() === mode) {
+            return;
+        }
+        this.timelineMode.set(mode);
+        this.timelineModeChangeEvent.emit(mode);
+    }
+    // Handles row progress clicks: emits public event and opens details popover.
+    onGanttProgressClick(item, event) {
+        event.stopPropagation();
+        this.ganttItemClick.emit(item.source ?? item);
+        if (!this.showGanttDetailsPopup()) {
+            return;
+        }
+        this.selectedGanttItem.set(item);
+        const popover = this.detailsPopover;
+        if (!popover) {
+            return;
+        }
+        const clickTarget = this.positionPopoverClickAnchor(event);
+        // If popover is already open, reopen it at the new anchor event.
+        if (popover.overlayVisible) {
+            popover.hide();
+            setTimeout(() => popover.show(event, clickTarget), 0);
+            return;
+        }
+        popover.show(event, clickTarget);
+    }
+    onDetailsPopoverHide() {
+        this.selectedGanttItem.set(null);
+    }
+    // Closes popover and clears selected row context.
+    hideDetailsPopover() {
+        this.detailsPopover?.hide();
+        this.selectedGanttItem.set(null);
+    }
+    // Maintains collapse state for hierarchical rows.
+    toggleGanttCollapse(item) {
+        if (!item.hasChildren) {
+            return;
+        }
+        this.collapsedGanttIds.update((current) => {
+            const next = new Set(current);
+            if (next.has(item.id)) {
+                next.delete(item.id);
+            }
+            else {
+                next.add(item.id);
+            }
+            return next;
+        });
+    }
+    getPopoverTemplateContext(item) {
+        const source = item.source ?? item;
+        return {
+            $implicit: source,
+            item: source,
+            resolved: item,
+            close: () => this.hideDetailsPopover(),
+        };
+    }
+    // Recursively maps consumer item shape using accessors from `ganttMapping`.
+    mapNode(source, mapping, state) {
+        const title = this.resolveString(source, mapping.title) ?? 'Untitled';
+        const idRaw = this.resolveAccessor(source, mapping.id);
+        const id = idRaw !== null && idRaw !== undefined && String(idRaw).length
+            ? idRaw
+            : `item-${state.nextId++}`;
+        const progress = this.normalizeProgress(this.resolveAccessor(source, mapping.progress));
+        const childrenValue = this.resolveAccessor(source, mapping.children) ??
+            this.path(source, 'children');
+        const children = (Array.isArray(childrenValue) ? childrenValue : [])
+            .map((child) => this.mapNode(child, mapping, state))
+            .filter((item) => item !== null);
+        return {
+            source,
+            id,
+            title,
+            startAt: this.toTime(this.resolveAccessor(source, mapping.dateFrom)),
+            endAt: this.toTime(this.resolveAccessor(source, mapping.dateTo)),
+            progress,
+            color: this.resolveColor(source, mapping.color),
+            statusKey: this.resolveString(source, mapping.statusKey),
+            statusName: this.resolveString(source, mapping.statusName),
+            owner: this.resolveString(source, mapping.owner),
+            phase: this.resolveString(source, mapping.phase),
+            levelDescription: this.resolveString(source, mapping.levelDescription),
+            levelColor: this.resolveString(source, mapping.levelColor),
+            children,
+        };
+    }
+    // Finds min/max timestamps in the mapped tree to define timeline bounds.
+    resolveDateRange(nodes) {
+        let min = Number.POSITIVE_INFINITY;
+        let max = Number.NEGATIVE_INFINITY;
+        const visit = (items) => {
+            for (const item of items) {
+                if (item.startAt !== null) {
+                    min = Math.min(min, item.startAt);
+                    max = Math.max(max, item.startAt);
+                }
+                if (item.endAt !== null) {
+                    min = Math.min(min, item.endAt);
+                    max = Math.max(max, item.endAt);
+                }
+                if (item.children.length) {
+                    visit(item.children);
+                }
+            }
+        };
+        visit(nodes);
+        if (!Number.isFinite(min) || !Number.isFinite(max)) {
+            return null;
+        }
+        return { startAt: min, endAt: max };
+    }
+    // Dispatcher for segment generation by selected scale mode.
+    buildSegments(startAt, endAt, mode) {
+        switch (mode) {
+            case 'monthly':
+                return this.genSegments(startAt, endAt, 1, (month) => `M ${month + 1}`, 'M');
+            case 'quarterly':
+                return this.genSegments(startAt, endAt, 3, (month) => `Q ${Math.floor(month / 3) + 1}`, 'Q');
+            case 'biannually':
+                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');
+        }
+    }
+    // Generates contiguous segments between range boundaries.
+    genSegments(startAt, endAt, stepMonths, title, prefix) {
+        const segments = [];
+        const start = new Date(startAt);
+        const end = new Date(endAt);
+        let year = start.getUTCFullYear();
+        let month = start.getUTCMonth();
+        let seq = 0;
+        if (stepMonths > 1) {
+            month = Math.floor(month / stepMonths) * stepMonths;
+        }
+        while (year < end.getUTCFullYear() ||
+            (year === end.getUTCFullYear() && month <= end.getUTCMonth())) {
+            segments.push({
+                id: `${prefix}${month + 1}_${year}`,
+                title: title(month),
+                seq,
+                year,
+                startAt: Date.UTC(year, month, 1),
+                endAt: Date.UTC(year, month + stepMonths, 0, 23, 59, 59, 999),
+            });
+            seq += 1;
+            month += stepMonths;
+            if (month > 11) {
+                year += Math.floor(month / 12);
+                month %= 12;
+            }
+        }
+        return segments;
+    }
+    // Supports both dot-path accessors and function accessors.
+    resolveAccessor(item, accessor) {
+        if (!accessor) {
+            return undefined;
+        }
+        if (typeof accessor === 'function') {
+            return accessor(item);
+        }
+        return this.path(item, accessor);
+    }
+    resolveString(item, accessor) {
+        const value = this.resolveAccessor(item, accessor);
+        if (value === null || value === undefined) {
+            return null;
+        }
+        return String(value);
+    }
+    // Robust color resolution for string/object return shapes.
+    resolveColor(item, accessor) {
+        const value = this.resolveAccessor(item, accessor);
+        if (value === null || value === undefined) {
+            return null;
+        }
+        if (typeof value === 'string') {
+            return value;
+        }
+        if (typeof value === 'object') {
+            const color = value['color'];
+            if (typeof color === 'string') {
+                return color;
+            }
+            const detailsColor = this.path(value, 'details.color');
+            if (typeof detailsColor === 'string') {
+                return detailsColor;
+            }
+        }
+        return String(value);
+    }
+    // Safe deep property accessor (supports bracket and dot notation).
+    path(item, value) {
+        if (!value) {
+            return undefined;
+        }
+        return value
+            .replace(/\[(\d+)\]/g, '.$1')
+            .split('.')
+            .filter(Boolean)
+            .reduce((current, key) => {
+            if (current === null ||
+                current === undefined ||
+                typeof current !== 'object') {
+                return undefined;
+            }
+            return current[key];
+        }, item);
+    }
+    // Normalizes all supported progress input shapes into a single object model.
+    normalizeProgress(value) {
+        if (value === null || value === undefined) {
+            return { value: 0, label: '0%' };
+        }
+        if (typeof value === 'number') {
+            const safeValue = this.clampProgress(value);
+            return { value: safeValue, label: `${Math.round(safeValue)}%` };
+        }
+        if (typeof value === 'string') {
+            const safeValue = this.clampProgress(Number(value.replace(/[^\d.-]/g, '')));
+            return {
+                value: safeValue,
+                label: value.trim().length ? value : `${Math.round(safeValue)}%`,
+            };
+        }
+        const safeValue = this.clampProgress(value.value);
+        return {
+            value: safeValue,
+            label: value.label ?? `${Math.round(safeValue)}%`,
+            color: value.color,
+        };
+    }
+    // Accepts date values as Date, timestamp, ISO string, or `{ actualValue }`.
+    toTime(value) {
+        if (value === null || value === undefined) {
+            return null;
+        }
+        if (value instanceof Date) {
+            return Number.isFinite(value.getTime()) ? value.getTime() : null;
+        }
+        if (typeof value === 'number') {
+            return Number.isFinite(value) ? value : null;
+        }
+        if (typeof value === 'string') {
+            const time = new Date(value).getTime();
+            return Number.isFinite(time) ? time : null;
+        }
+        if (typeof value === 'object') {
+            const actualValue = value['actualValue'];
+            if (actualValue !== undefined) {
+                return this.toTime(actualValue);
+            }
+        }
+        return null;
+    }
+    clampProgress(value) {
+        if (!Number.isFinite(value)) {
+            return 0;
+        }
+        return Math.max(0, Math.min(100, value));
+    }
+    positionPopoverClickAnchor(event) {
+        const anchor = this.detailsPopoverClickAnchor?.nativeElement;
+        if (!anchor) {
+            return undefined;
+        }
+        anchor.style.left = `${event.clientX}px`;
+        anchor.style.top = `${event.clientY}px`;
+        return anchor;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Timeline, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Timeline, isStandalone: true, selector: "mt-timeline", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, 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 }, 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: "<mt-card class=\"mt-3 block overflow-hidden\">\r\n  <!-- Optional top header (title + timeline mode selector). -->\r\n  @if (showHeader()) {\r\n    <mt-timeline-header\r\n      [title]=\"title()\"\r\n      [timelineMode]=\"timelineMode()\"\r\n      [timelineModeOptions]=\"timelineModeOptions()\"\r\n      (timelineModeChange)=\"onTimelineModeChange($event)\"\r\n    />\r\n  }\r\n\r\n  <!-- Loading state. -->\r\n  @if (isLoading()) {\r\n    <div class=\"flex min-h-56 items-center justify-center p-8\">\r\n      <div\r\n        class=\"h-8 w-8 animate-spin rounded-full border-2 border-surface-200\"\r\n        style=\"border-top-color: var(--p-primary-color)\"\r\n      ></div>\r\n    </div>\r\n  } @else if (ganttTemplate(); as template) {\r\n    <!-- Full custom gantt-body override. -->\r\n    <div class=\"min-h-56 p-4\">\r\n      <ng-container [ngTemplateOutlet]=\"template.templateRef\"></ng-container>\r\n    </div>\r\n  } @else if (\r\n    mappedGanttNodes().length > 0 && orderedGanttSegments().length > 0\r\n  ) {\r\n    <!-- Built-in gantt renderer. -->\r\n    <mt-timeline-gantt\r\n      [timelineMode]=\"timelineMode()\"\r\n      [columns]=\"columns()\"\r\n      [ganttTitleColumnLabel]=\"ganttTitleColumnLabel()\"\r\n      [ganttStatusColumnLabel]=\"ganttStatusColumnLabel()\"\r\n      [ganttInitiativeColumnWidthPx]=\"ganttInitiativeColumnWidthPx()\"\r\n      [ganttStatusColumnWidthPx]=\"ganttStatusColumnWidthPx()\"\r\n      [showGanttStatusColumn]=\"showGanttStatusColumn()\"\r\n      [ganttSegmentWidthPx]=\"ganttSegmentWidthPx()\"\r\n      [columnsPaneMinWidthPx]=\"columnsPaneMinWidthPx()\"\r\n      [columnsPaneMaxWidthPx]=\"columnsPaneMaxWidthPx()\"\r\n      [mappedGanttNodes]=\"mappedGanttNodes()\"\r\n      [orderedGanttSegments]=\"orderedGanttSegments()\"\r\n      [collapsedGanttIds]=\"collapsedGanttIds()\"\r\n      [columnTemplatesByKey]=\"columnTemplatesByKey()\"\r\n      [progressTemplateDirective]=\"progressTemplate()\"\r\n      (toggleCollapse)=\"toggleGanttCollapse($event)\"\r\n      (progressClick)=\"onGanttProgressClick($event.item, $event.event)\"\r\n    />\r\n  } @else {\r\n    <!-- Empty state. -->\r\n    <div\r\n      class=\"flex min-h-56 items-center justify-center p-8 text-sm text-surface-500\"\r\n    >\r\n      {{ emptyMessage() }}\r\n    </div>\r\n  }\r\n\r\n  <!-- Details popover host (custom template or built-in fallback). -->\r\n  <p-popover #detailsPopover appendTo=\"body\" (onHide)=\"onDetailsPopoverHide()\">\r\n    @if (showGanttDetailsPopup() && selectedGanttItem(); as item) {\r\n      @if (popoverTemplate(); as template) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"template.templateRef\"\r\n          [ngTemplateOutletContext]=\"getPopoverTemplateContext(item)\"\r\n        ></ng-container>\r\n      } @else {\r\n        <mt-timeline-default-popover\r\n          [item]=\"item\"\r\n          (requestClose)=\"hideDetailsPopover()\"\r\n        />\r\n      }\r\n    }\r\n  </p-popover>\r\n\r\n  <!-- Point anchor used to place the popover exactly where user clicked. -->\r\n  <span\r\n    #detailsPopoverClickAnchor\r\n    class=\"pointer-events-none fixed h-0 w-0\"\r\n    [style.left.px]=\"-9999\"\r\n    [style.top.px]=\"-9999\"\r\n    aria-hidden=\"true\"\r\n  ></span>\r\n</mt-card>\r\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: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { 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", "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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Timeline, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-timeline', standalone: true, imports: [
+                        CommonModule,
+                        Card,
+                        TimelineHeader,
+                        TimelineGantt,
+                        TimelineDefaultPopover,
+                        Popover,
+                        NgTemplateOutlet,
+                    ], host: { class: 'block' }, template: "<mt-card class=\"mt-3 block overflow-hidden\">\r\n  <!-- Optional top header (title + timeline mode selector). -->\r\n  @if (showHeader()) {\r\n    <mt-timeline-header\r\n      [title]=\"title()\"\r\n      [timelineMode]=\"timelineMode()\"\r\n      [timelineModeOptions]=\"timelineModeOptions()\"\r\n      (timelineModeChange)=\"onTimelineModeChange($event)\"\r\n    />\r\n  }\r\n\r\n  <!-- Loading state. -->\r\n  @if (isLoading()) {\r\n    <div class=\"flex min-h-56 items-center justify-center p-8\">\r\n      <div\r\n        class=\"h-8 w-8 animate-spin rounded-full border-2 border-surface-200\"\r\n        style=\"border-top-color: var(--p-primary-color)\"\r\n      ></div>\r\n    </div>\r\n  } @else if (ganttTemplate(); as template) {\r\n    <!-- Full custom gantt-body override. -->\r\n    <div class=\"min-h-56 p-4\">\r\n      <ng-container [ngTemplateOutlet]=\"template.templateRef\"></ng-container>\r\n    </div>\r\n  } @else if (\r\n    mappedGanttNodes().length > 0 && orderedGanttSegments().length > 0\r\n  ) {\r\n    <!-- Built-in gantt renderer. -->\r\n    <mt-timeline-gantt\r\n      [timelineMode]=\"timelineMode()\"\r\n      [columns]=\"columns()\"\r\n      [ganttTitleColumnLabel]=\"ganttTitleColumnLabel()\"\r\n      [ganttStatusColumnLabel]=\"ganttStatusColumnLabel()\"\r\n      [ganttInitiativeColumnWidthPx]=\"ganttInitiativeColumnWidthPx()\"\r\n      [ganttStatusColumnWidthPx]=\"ganttStatusColumnWidthPx()\"\r\n      [showGanttStatusColumn]=\"showGanttStatusColumn()\"\r\n      [ganttSegmentWidthPx]=\"ganttSegmentWidthPx()\"\r\n      [columnsPaneMinWidthPx]=\"columnsPaneMinWidthPx()\"\r\n      [columnsPaneMaxWidthPx]=\"columnsPaneMaxWidthPx()\"\r\n      [mappedGanttNodes]=\"mappedGanttNodes()\"\r\n      [orderedGanttSegments]=\"orderedGanttSegments()\"\r\n      [collapsedGanttIds]=\"collapsedGanttIds()\"\r\n      [columnTemplatesByKey]=\"columnTemplatesByKey()\"\r\n      [progressTemplateDirective]=\"progressTemplate()\"\r\n      (toggleCollapse)=\"toggleGanttCollapse($event)\"\r\n      (progressClick)=\"onGanttProgressClick($event.item, $event.event)\"\r\n    />\r\n  } @else {\r\n    <!-- Empty state. -->\r\n    <div\r\n      class=\"flex min-h-56 items-center justify-center p-8 text-sm text-surface-500\"\r\n    >\r\n      {{ emptyMessage() }}\r\n    </div>\r\n  }\r\n\r\n  <!-- Details popover host (custom template or built-in fallback). -->\r\n  <p-popover #detailsPopover appendTo=\"body\" (onHide)=\"onDetailsPopoverHide()\">\r\n    @if (showGanttDetailsPopup() && selectedGanttItem(); as item) {\r\n      @if (popoverTemplate(); as template) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"template.templateRef\"\r\n          [ngTemplateOutletContext]=\"getPopoverTemplateContext(item)\"\r\n        ></ng-container>\r\n      } @else {\r\n        <mt-timeline-default-popover\r\n          [item]=\"item\"\r\n          (requestClose)=\"hideDetailsPopover()\"\r\n        />\r\n      }\r\n    }\r\n  </p-popover>\r\n\r\n  <!-- Point anchor used to place the popover exactly where user clicked. -->\r\n  <span\r\n    #detailsPopoverClickAnchor\r\n    class=\"pointer-events-none fixed h-0 w-0\"\r\n    [style.left.px]=\"-9999\"\r\n    [style.top.px]=\"-9999\"\r\n    aria-hidden=\"true\"\r\n  ></span>\r\n</mt-card>\r\n", styles: [":host{display:block}\n"] }]
+        }], 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 }] }], 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 }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Timeline, TimelineColumnTemplateDirective, TimelineGanttTemplateDirective, TimelinePopoverTemplateDirective, TimelineProgressTemplateDirective };
+//# sourceMappingURL=masterteam-timeline.mjs.map