@progress/kendo-angular-gantt 21.4.1-develop.1 → 22.0.0-develop.1

package/esm2022/timeline/gantt-timeline.component.mjs

@@ -1,624 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, ElementRef, EventEmitter, Input, NgZone, Optional, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { filter, map, switchMap, take } from 'rxjs/operators';
-import { DraggableDirective, isDocumentAvailable } from '@progress/kendo-angular-common';
-import { ScrollSyncService } from '../scrolling/scroll-sync.service';
-import { DependencyDomService } from '../dependencies/dependency-dom.service';
-import { isPresent } from '../utils';
-import { CurrentTimeMarkerService } from './current-time-marker.service';
-import { GanttDependencyDirective } from '../dependencies/gantt-dependency.directive';
-import { GanttTasksTableBodyComponent } from '../rendering/gantt-tasks-table-body.component';
-import { NgTemplateOutlet } from '@angular/common';
-import { TimelineScrollableDirective } from '../scrolling/timeline-scroll.directive';
-import { GanttHeaderTableBodyComponent } from '../rendering/gantt-header-table-body.component';
-import { TaskDragService } from '../dragging/task-drag.service';
-import { KENDO_TOOLTIP, TooltipDirective } from '@progress/kendo-angular-tooltip';
-import { DatePipe, NumberPipe } from '@progress/kendo-angular-intl';
-import { GanttTaskTooltipTemplateDirective } from '../template-directives/task-tooltip-template.directive';
-import { GanttLocalizationService } from '../localization/gantt-localization.service';
-import { GanttTaskDragTooltipTemplateDirective } from '../template-directives/task-drag-tooltip-template.directive';
-import * as i0 from "@angular/core";
-import * as i1 from "../scrolling/scroll-sync.service";
-import * as i2 from "../dependencies/dependency-dom.service";
-import * as i3 from "./current-time-marker.service";
-import * as i4 from "../localization/gantt-localization.service";
-import * as i5 from "../dragging/task-drag.service";
-import * as i6 from "@progress/kendo-angular-tooltip";
-/**
- * @hidden
- */
-export class GanttTimelineComponent {
-    scrollSyncService;
-    dependencyDomService;
-    renderer;
-    zone;
-    currentTimeMarkerService;
-    localization;
-    taskDragService;
-    /**
-     * Represents the scrollable container of the timeline content.
-     * Used externally by the DependencyDragCreateDirective.
-     */
-    timelineContent;
-    timelineColumns;
-    timelineHeaderWrap;
-    tasksContainer;
-    tooltip;
-    /**
-     * Represents the view container ref used for rendering the dependency drag popop.
-     * Used externally by the DependencyDragCreateDirective.
-     */
-    dragPopupContainer;
-    /**
-     * Represents the polyline element used for rendering the dependency drag editing interaction.
-     * Used externally by the DependencyDragCreateDirective.
-     */
-    dependencyDragCreatePolyline;
-    rows;
-    slots;
-    groupSlots;
-    tableWidth;
-    activeView;
-    taskContentTemplate;
-    taskTemplate;
-    summaryTaskTemplate;
-    taskClass;
-    renderDependencyDragClues;
-    dragScrollSettings;
-    currentTimeMarker;
-    customTooltipTemplate;
-    customDragTooltipTemplate;
-    tooltipOptions;
-    selectable;
-    isTaskSelected;
-    isExpanded;
-    dependencies = [];
-    // as all drag-and-drop operations are on the timeline container, use a single draggable instance
-    timelineContainerPress = new EventEmitter();
-    timelineContainerDrag = new EventEmitter();
-    timelineContainerRelease = new EventEmitter();
-    /**
-     * Specifies whether the draggable will attach or detach its pointer event listeners.
-     */
-    get draggableEnabled() {
-        return this.renderDependencyDragClues;
-    }
-    task;
-    dragResult;
-    dragging = false;
-    completion = false;
-    marquee = {
-        show: false,
-        left: 0,
-        width: 0
-    };
-    dragOffset;
-    subscriptions = new Subscription();
-    popupRef;
-    constructor(scrollSyncService, dependencyDomService, renderer, zone, currentTimeMarkerService, localization, taskDragService) {
-        this.scrollSyncService = scrollSyncService;
-        this.dependencyDomService = dependencyDomService;
-        this.renderer = renderer;
-        this.zone = zone;
-        this.currentTimeMarkerService = currentTimeMarkerService;
-        this.localization = localization;
-        this.taskDragService = taskDragService;
-        this.subscriptions.add(
-        // task changes indicates change in row content, number, height, etc.
-        this.dependencyDomService.taskChanges
-            .pipe(filter(args => isPresent(args.timelineRow)), switchMap(args => this.zone.onStable.pipe(take(1), map(() => args))) // ensure the content is rendered
-        )
-            .subscribe(({ timelineRow }) => {
-            const timelineRowHeight = isDocumentAvailable() ? timelineRow.getBoundingClientRect().height : 0;
-            this.currentTimeMarkerService.rowHeight = timelineRowHeight;
-            this.currentTimeMarkerService.currentTimeMarker = this.currentTimeMarker;
-            this.currentTimeMarkerService.slots = this.slots;
-            this.currentTimeMarkerService.rows = this.rows;
-            this.currentTimeMarkerService.activeView = this.activeView;
-            this.createTimeMarker();
-            this.renderer.setStyle(this.timelineColumns.nativeElement, 'height', `${(this.rows || []).length * timelineRowHeight}px`);
-        }));
-        if (!taskDragService) {
-            return;
-        }
-        this.subscriptions.add(taskDragService.dragStart.subscribe((e) => {
-            if (e.dragTarget.classList.contains('k-task-draghandle')) {
-                this.completion = true;
-                const taskRect = this.taskDragService.currentDragTaskRect;
-                this.tooltip.position = 'top';
-                this.tooltip.callout = true;
-                this.tooltip.offset = taskRect.height + 6;
-                this.tooltip.collision = {
-                    horizontal: 'fit',
-                    vertical: 'fit'
-                };
-            }
-            else {
-                this.dragging = true;
-            }
-        }));
-        this.subscriptions.add(taskDragService.drag.subscribe((e) => {
-            this.dragResult = {
-                start: e.start,
-                end: e.end,
-                completionRatio: e.completionRatio,
-                task: e.item
-            };
-            if (this.completion) {
-                const dragHandle = e.dragEvent.dragTarget;
-                this.tooltip.show(dragHandle);
-            }
-            else {
-                this.marquee.show = true;
-                this.marquee.left = e.offset;
-                this.marquee.width = e.width;
-                const taskEl = this.taskDragService.currentDragTask.taskElement;
-                const taskRect = this.taskDragService.currentDragTaskRect;
-                this.tooltip.hide();
-                this.tooltip.position = this.taskDragService.rightDragHandle ? 'right' : 'left';
-                this.tooltip.collision = {
-                    horizontal: 'fit',
-                    vertical: 'fit'
-                };
-                this.tooltip.show(taskEl);
-                this.popupRef = this.tooltip.popupRef;
-                const popup = this.popupRef?.popup.instance;
-                const popupEl = popup?.container.nativeElement;
-                const popupHeight = popupEl?.offsetHeight ?? 0;
-                const popupWidth = popupEl?.offsetWidth ?? 0;
-                const taskMove = !(this.taskDragService.leftDragHandle || this.taskDragService.rightDragHandle);
-                // the theme does not provide zIndex for the marquee tooltip, thus it is applied here as an intentional exception
-                this.popupRef && (this.popupRef.popupElement.style.zIndex += 1000000);
-                this.popupRef && (popup.margin = {
-                    horizontal: taskMove ? taskRect.left - e.offset - this.taskDragService.tasksContainerRect.left - popupWidth / 2 : e.width - taskEl.nativeElement.clientWidth - popupWidth / 2,
-                    vertical: (taskEl.nativeElement.clientHeight + popupHeight) / 2
-                });
-            }
-        }));
-        this.subscriptions.add(taskDragService.dragEnd.subscribe(() => {
-            this.marquee = {
-                show: false,
-                left: 0,
-                width: 0
-            };
-            this.dragging = this.completion = false;
-            this.tooltip.hide();
-            this.dragResult = null;
-            this.tooltip.position = this.tooltipOptions.position;
-            this.tooltip.offset = 6;
-        }));
-    }
-    ngOnChanges(changes) {
-        if (changes['currentTimeMarker']) {
-            this.createTimeMarker();
-        }
-    }
-    trackBySlotIndex(index, item) {
-        // Combine index with timestamp to ensure uniqueness
-        // even when multiple slots have the same start time
-        return `${index}-${item.start.getTime()}`;
-    }
-    ngAfterViewInit() {
-        this.currentTimeMarkerService.slots = this.slots;
-        this.currentTimeMarkerService.rows = this.rows;
-        this.currentTimeMarkerService.container = this.timelineContent;
-        const timelineHeader = this.timelineHeaderWrap.nativeElement;
-        const rightContainer = this.timelineContent.nativeElement;
-        this.scrollSyncService.registerElement(rightContainer, 'timeline');
-        this.scrollSyncService.registerElement(timelineHeader, 'header');
-        this.dependencyDomService.registerContentContainer(this.tasksContainer.nativeElement);
-        if (this.taskDragService && isDocumentAvailable()) {
-            this.zone.onStable.pipe(take(1)).subscribe(() => {
-                this.taskDragService.tasksContainer = this.tasksContainer.nativeElement;
-                this.taskDragService.scrollableContainer = this.tasksContainer.nativeElement.closest('.k-grid-content');
-                this.taskDragService.tasksContainerRect = this.tasksContainer.nativeElement.getBoundingClientRect();
-            });
-        }
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    isNonWorking(item) {
-        return item.hasOwnProperty('isWorking') && !item.isWorking;
-    }
-    messageFor(token) {
-        return this.localization.get(token);
-    }
-    createTimeMarker() {
-        this.zone.runOutsideAngular(() => {
-            this.currentTimeMarkerService.removeTimeMarker();
-            if ((typeof this.currentTimeMarker === 'boolean' && this.currentTimeMarker) || this.currentTimeMarker?.enabled) {
-                this.currentTimeMarkerService.createTimeMarker();
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GanttTimelineComponent, deps: [{ token: i1.ScrollSyncService }, { token: i2.DependencyDomService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.CurrentTimeMarkerService }, { token: i4.GanttLocalizationService }, { token: i5.TaskDragService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GanttTimelineComponent, isStandalone: true, selector: "kendo-gantt-timeline", inputs: { rows: "rows", slots: "slots", groupSlots: "groupSlots", tableWidth: "tableWidth", activeView: "activeView", taskContentTemplate: "taskContentTemplate", taskTemplate: "taskTemplate", summaryTaskTemplate: "summaryTaskTemplate", taskClass: "taskClass", renderDependencyDragClues: "renderDependencyDragClues", dragScrollSettings: "dragScrollSettings", currentTimeMarker: "currentTimeMarker", customTooltipTemplate: "customTooltipTemplate", customDragTooltipTemplate: "customDragTooltipTemplate", tooltipOptions: "tooltipOptions", selectable: "selectable", isTaskSelected: "isTaskSelected", isExpanded: "isExpanded", dependencies: "dependencies" }, outputs: { timelineContainerPress: "timelineContainerPress", timelineContainerDrag: "timelineContainerDrag", timelineContainerRelease: "timelineContainerRelease" }, viewQueries: [{ propertyName: "timelineContent", first: true, predicate: ["timelineContent"], descendants: true, static: true }, { propertyName: "timelineColumns", first: true, predicate: ["timelineColumns"], descendants: true, static: true }, { propertyName: "timelineHeaderWrap", first: true, predicate: ["timelineHeaderWrap"], descendants: true, static: true }, { propertyName: "tasksContainer", first: true, predicate: ["tasksContainer"], descendants: true, static: true }, { propertyName: "tooltip", first: true, predicate: TooltipDirective, descendants: true }, { propertyName: "dragPopupContainer", first: true, predicate: ["dragPopupContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "dependencyDragCreatePolyline", first: true, predicate: ["dependencyDragCreatePolyline"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-        <div class="k-gantt-timeline k-grid k-grid-md">
-          <div class="k-grid-header">
-            <div #timelineHeaderWrap class="k-grid-header-wrap">
-              <table
-                class="k-table k-table-md k-grid-header-table"
-                role="presentation"
-                [style.width.px]="tableWidth"
-                >
-                <tbody
-                  kendoGanttHeaderTableBody
-                  [groupSlots]="groupSlots"
-                  [slots]="slots">
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <!-- tabindex="-1" required for https://bugzilla.mozilla.org/show_bug.cgi?id=1069739 -->
-          <div
-            #timelineContent
-            class="k-grid-content"
-            tabindex="-1"
-            role="tree"
-            aria-roledescription="Timeline"
-            kendoGanttTimelineScrollable
-            [scrollSettings]="dragScrollSettings"
-            kendoDraggable
-            [enableDrag]="draggableEnabled"
-            (kendoPress)="timelineContainerPress.emit($event)"
-            (kendoDrag)="timelineContainerDrag.emit($event)"
-            (kendoRelease)="timelineContainerRelease.emit($event)"
-            >
-            <div class="k-gantt-tables">
-              <table
-                class="k-table k-table-md k-grid-table k-gantt-rows"
-                [style.width.px]="tableWidth"
-                role="presentation"
-                >
-                <tbody class="k-table-tbody">
-                  @for (item of rows; track $index; let i = $index) {
-                    <tr
-                      class="k-table-row{{i % 2 ? ' k-table-alt-row' : ''}}">
-                      <td class="k-table-td"></td>
-                    </tr>
-                  }
-                </tbody>
-              </table>
-
-              <table
-                #timelineColumns
-                class="k-table k-table-md k-gantt-columns"
-                role="presentation"
-                [style.width.px]="tableWidth"
-                >
-                <colgroup>
-                @for (item of slots; track trackBySlotIndex($index, item)) {
-                  <col>
-                }
-                </colgroup>
-
-                <tbody class="k-table-tbody">
-                  <tr class="k-table-row">
-                    @for (item of slots; track trackBySlotIndex($index, item)) {
-                      <td
-                        class="k-table-td"
-                      [class.k-nonwork-hour]="isNonWorking(item)"></td>
-                    }
-                  </tr>
-                </tbody>
-              </table>
-
-              <table kendoTooltip
-                #tooltip="kendoTooltip"
-                [tooltipTemplate]="completion ? completionRatioTooltip : dragging ? (customDragTooltipTemplate ? customDragTooltip : resizingTooltip) : customTooltipTemplate ? customTooltip : tooltipTemplate"
-                [position]="tooltipOptions.position"
-                [callout]="!dragging"
-                [tooltipClass]="dragging ? 'k-gantt-resize-hint' : undefined"
-                filter=".k-task"
-                [showOn]="dragging || completion ? 'none' : 'hover'"
-                #tasksContainer
-                class="k-table k-table-md k-gantt-tasks"
-                role="presentation"
-                [style.border-collapse]="'collapse'"
-                [style.width.px]="tableWidth"
-                >
-                <tbody
-                  class="k-table-tbody"
-                  kendoGanttTasksTableBody
-                  [rows]="rows"
-                  [activeView]="activeView"
-                  [taskContentTemplate]="taskContentTemplate"
-                  [taskTemplate]="taskTemplate"
-                  [summaryTaskTemplate]="summaryTaskTemplate"
-                  [taskClass]="taskClass"
-                  [isExpanded]="isExpanded"
-                  [selectable]="selectable"
-                  [isTaskSelected]="isTaskSelected"
-                  [renderDependencyDragClues]="renderDependencyDragClues"
-                  (taskPointerEnter)="task = $event"
-                  (taskPointerLeave)="task = null"
-                  >
-                </tbody>
-              </table>
-            </div>
-            <ng-template #tooltipTemplate>
-              <div class="k-task-content">
-                <div class="k-task-details">
-                  <strong>{{task?.title}}</strong>
-                  <div class="k-task-pct">{{task?.completionRatio | kendoNumber: 'p'}}</div>
-                  <ul class="k-reset">
-                    <li>{{messageFor('tooltipStartDateText')}}: {{task?.start | kendoDate: 'HH:mm a EEE, MMM d'}}</li>
-                    <li>{{messageFor('tooltipEndDateText')}}: {{task?.end | kendoDate: 'HH:mm a EEE, MMM d'}}</li>
-                  </ul>
-                </div>
-              </div>
-            </ng-template>
-            <ng-template #customTooltip>
-              <ng-container *ngTemplateOutlet="customTooltipTemplate.templateRef; context: { $implicit: task, task }"></ng-container>
-            </ng-template>
-            <ng-template #resizingTooltip>
-              <div class="k-tooltip-content">
-                <div>{{messageFor('tooltipStartDateText')}}: {{dragResult?.start | kendoDate: 'HH:mm a EEE, MMM d'}}</div>
-                <div>{{messageFor('tooltipEndDateText')}}: {{dragResult?.end | kendoDate: 'HH:mm a EEE, MMM d'}}</div>
-              </div>
-            </ng-template>
-            <ng-template #customDragTooltip>
-              <ng-container *ngTemplateOutlet="customDragTooltipTemplate.templateRef; context: { $implicit: dragResult }"></ng-container>
-            </ng-template>
-            <ng-template #completionRatioTooltip>
-              <div class="k-tooltip-content">
-                <div>{{dragResult?.completionRatio | kendoNumber: 'p'}}</div>
-              </div>
-            </ng-template>
-
-            <svg class="k-gantt-dependencies-svg">
-              @for (dependency of dependencies; track dependency.id) {
-                <polyline
-                  kendoGanttDependency
-                  [dependency]="dependency"
-                  />
-              }
-              <polyline #dependencyDragCreatePolyline />
-            </svg>
-            @if (marquee.show) {
-              <div class="k-marquee k-gantt-marquee" style="top: 0px; height: {{tasksContainer.offsetHeight}}px; left: {{marquee.left}}px; width: {{marquee.width}}px;">
-                <div class="k-marquee-color"></div>
-              </div>
-            }
-            <!-- placeholder for the dependency drag popup; its position is not arbitrary - the popup is intended to be absolutely positioned inside the .k-grid-content element -->
-            <ng-container #dragPopupContainer></ng-container>
-          </div>
-        </div>
-
-        `, isInline: true, dependencies: [{ kind: "component", type: GanttHeaderTableBodyComponent, selector: "[kendoGanttHeaderTableBody]", inputs: ["groupSlots", "slots"] }, { kind: "directive", type: TimelineScrollableDirective, selector: "[kendoGanttTimelineScrollable]", inputs: ["scrollSettings"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: GanttTasksTableBodyComponent, selector: "[kendoGanttTasksTableBody]", inputs: ["selectable", "rows", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "isExpanded", "isTaskSelected", "renderDependencyDragClues"], outputs: ["taskPointerEnter", "taskPointerLeave"] }, { kind: "directive", type: GanttDependencyDirective, selector: "[kendoGanttDependency]", inputs: ["dependency"] }, { kind: "directive", type: i6.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "tooltipContentClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { kind: "pipe", type: DatePipe, name: "kendoDate" }, { kind: "pipe", type: NumberPipe, name: "kendoNumber" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GanttTimelineComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-gantt-timeline',
-                    template: `
-        <div class="k-gantt-timeline k-grid k-grid-md">
-          <div class="k-grid-header">
-            <div #timelineHeaderWrap class="k-grid-header-wrap">
-              <table
-                class="k-table k-table-md k-grid-header-table"
-                role="presentation"
-                [style.width.px]="tableWidth"
-                >
-                <tbody
-                  kendoGanttHeaderTableBody
-                  [groupSlots]="groupSlots"
-                  [slots]="slots">
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <!-- tabindex="-1" required for https://bugzilla.mozilla.org/show_bug.cgi?id=1069739 -->
-          <div
-            #timelineContent
-            class="k-grid-content"
-            tabindex="-1"
-            role="tree"
-            aria-roledescription="Timeline"
-            kendoGanttTimelineScrollable
-            [scrollSettings]="dragScrollSettings"
-            kendoDraggable
-            [enableDrag]="draggableEnabled"
-            (kendoPress)="timelineContainerPress.emit($event)"
-            (kendoDrag)="timelineContainerDrag.emit($event)"
-            (kendoRelease)="timelineContainerRelease.emit($event)"
-            >
-            <div class="k-gantt-tables">
-              <table
-                class="k-table k-table-md k-grid-table k-gantt-rows"
-                [style.width.px]="tableWidth"
-                role="presentation"
-                >
-                <tbody class="k-table-tbody">
-                  @for (item of rows; track $index; let i = $index) {
-                    <tr
-                      class="k-table-row{{i % 2 ? ' k-table-alt-row' : ''}}">
-                      <td class="k-table-td"></td>
-                    </tr>
-                  }
-                </tbody>
-              </table>
-
-              <table
-                #timelineColumns
-                class="k-table k-table-md k-gantt-columns"
-                role="presentation"
-                [style.width.px]="tableWidth"
-                >
-                <colgroup>
-                @for (item of slots; track trackBySlotIndex($index, item)) {
-                  <col>
-                }
-                </colgroup>
-
-                <tbody class="k-table-tbody">
-                  <tr class="k-table-row">
-                    @for (item of slots; track trackBySlotIndex($index, item)) {
-                      <td
-                        class="k-table-td"
-                      [class.k-nonwork-hour]="isNonWorking(item)"></td>
-                    }
-                  </tr>
-                </tbody>
-              </table>
-
-              <table kendoTooltip
-                #tooltip="kendoTooltip"
-                [tooltipTemplate]="completion ? completionRatioTooltip : dragging ? (customDragTooltipTemplate ? customDragTooltip : resizingTooltip) : customTooltipTemplate ? customTooltip : tooltipTemplate"
-                [position]="tooltipOptions.position"
-                [callout]="!dragging"
-                [tooltipClass]="dragging ? 'k-gantt-resize-hint' : undefined"
-                filter=".k-task"
-                [showOn]="dragging || completion ? 'none' : 'hover'"
-                #tasksContainer
-                class="k-table k-table-md k-gantt-tasks"
-                role="presentation"
-                [style.border-collapse]="'collapse'"
-                [style.width.px]="tableWidth"
-                >
-                <tbody
-                  class="k-table-tbody"
-                  kendoGanttTasksTableBody
-                  [rows]="rows"
-                  [activeView]="activeView"
-                  [taskContentTemplate]="taskContentTemplate"
-                  [taskTemplate]="taskTemplate"
-                  [summaryTaskTemplate]="summaryTaskTemplate"
-                  [taskClass]="taskClass"
-                  [isExpanded]="isExpanded"
-                  [selectable]="selectable"
-                  [isTaskSelected]="isTaskSelected"
-                  [renderDependencyDragClues]="renderDependencyDragClues"
-                  (taskPointerEnter)="task = $event"
-                  (taskPointerLeave)="task = null"
-                  >
-                </tbody>
-              </table>
-            </div>
-            <ng-template #tooltipTemplate>
-              <div class="k-task-content">
-                <div class="k-task-details">
-                  <strong>{{task?.title}}</strong>
-                  <div class="k-task-pct">{{task?.completionRatio | kendoNumber: 'p'}}</div>
-                  <ul class="k-reset">
-                    <li>{{messageFor('tooltipStartDateText')}}: {{task?.start | kendoDate: 'HH:mm a EEE, MMM d'}}</li>
-                    <li>{{messageFor('tooltipEndDateText')}}: {{task?.end | kendoDate: 'HH:mm a EEE, MMM d'}}</li>
-                  </ul>
-                </div>
-              </div>
-            </ng-template>
-            <ng-template #customTooltip>
-              <ng-container *ngTemplateOutlet="customTooltipTemplate.templateRef; context: { $implicit: task, task }"></ng-container>
-            </ng-template>
-            <ng-template #resizingTooltip>
-              <div class="k-tooltip-content">
-                <div>{{messageFor('tooltipStartDateText')}}: {{dragResult?.start | kendoDate: 'HH:mm a EEE, MMM d'}}</div>
-                <div>{{messageFor('tooltipEndDateText')}}: {{dragResult?.end | kendoDate: 'HH:mm a EEE, MMM d'}}</div>
-              </div>
-            </ng-template>
-            <ng-template #customDragTooltip>
-              <ng-container *ngTemplateOutlet="customDragTooltipTemplate.templateRef; context: { $implicit: dragResult }"></ng-container>
-            </ng-template>
-            <ng-template #completionRatioTooltip>
-              <div class="k-tooltip-content">
-                <div>{{dragResult?.completionRatio | kendoNumber: 'p'}}</div>
-              </div>
-            </ng-template>
-
-            <svg class="k-gantt-dependencies-svg">
-              @for (dependency of dependencies; track dependency.id) {
-                <polyline
-                  kendoGanttDependency
-                  [dependency]="dependency"
-                  />
-              }
-              <polyline #dependencyDragCreatePolyline />
-            </svg>
-            @if (marquee.show) {
-              <div class="k-marquee k-gantt-marquee" style="top: 0px; height: {{tasksContainer.offsetHeight}}px; left: {{marquee.left}}px; width: {{marquee.width}}px;">
-                <div class="k-marquee-color"></div>
-              </div>
-            }
-            <!-- placeholder for the dependency drag popup; its position is not arbitrary - the popup is intended to be absolutely positioned inside the .k-grid-content element -->
-            <ng-container #dragPopupContainer></ng-container>
-          </div>
-        </div>
-
-        `,
-                    standalone: true,
-                    encapsulation: ViewEncapsulation.None,
-                    imports: [GanttHeaderTableBodyComponent, TimelineScrollableDirective, DraggableDirective, GanttTasksTableBodyComponent, GanttDependencyDirective, KENDO_TOOLTIP, DatePipe, NumberPipe, NgTemplateOutlet],
-                }]
-        }], ctorParameters: () => [{ type: i1.ScrollSyncService }, { type: i2.DependencyDomService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.CurrentTimeMarkerService }, { type: i4.GanttLocalizationService }, { type: i5.TaskDragService, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { timelineContent: [{
-                type: ViewChild,
-                args: ['timelineContent', { static: true }]
-            }], timelineColumns: [{
-                type: ViewChild,
-                args: ['timelineColumns', { static: true }]
-            }], timelineHeaderWrap: [{
-                type: ViewChild,
-                args: ['timelineHeaderWrap', { static: true }]
-            }], tasksContainer: [{
-                type: ViewChild,
-                args: ['tasksContainer', { static: true }]
-            }], tooltip: [{
-                type: ViewChild,
-                args: [TooltipDirective]
-            }], dragPopupContainer: [{
-                type: ViewChild,
-                args: ['dragPopupContainer', { static: false, read: ViewContainerRef }]
-            }], dependencyDragCreatePolyline: [{
-                type: ViewChild,
-                args: ['dependencyDragCreatePolyline']
-            }], rows: [{
-                type: Input
-            }], slots: [{
-                type: Input
-            }], groupSlots: [{
-                type: Input
-            }], tableWidth: [{
-                type: Input
-            }], activeView: [{
-                type: Input
-            }], taskContentTemplate: [{
-                type: Input
-            }], taskTemplate: [{
-                type: Input
-            }], summaryTaskTemplate: [{
-                type: Input
-            }], taskClass: [{
-                type: Input
-            }], renderDependencyDragClues: [{
-                type: Input
-            }], dragScrollSettings: [{
-                type: Input
-            }], currentTimeMarker: [{
-                type: Input
-            }], customTooltipTemplate: [{
-                type: Input
-            }], customDragTooltipTemplate: [{
-                type: Input
-            }], tooltipOptions: [{
-                type: Input
-            }], selectable: [{
-                type: Input
-            }], isTaskSelected: [{
-                type: Input
-            }], isExpanded: [{
-                type: Input
-            }], dependencies: [{
-                type: Input
-            }], timelineContainerPress: [{
-                type: Output
-            }], timelineContainerDrag: [{
-                type: Output
-            }], timelineContainerRelease: [{
-                type: Output
-            }] } });