@progress/kendo-angular-gantt 16.5.0 → 16.6.0-develop.2

package/fesm2015/progress-kendo-angular-gantt.mjs

@@ -3,47 +3,35 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, Inject, LOCALE_ID, EventEmitter, Directive, HostBinding, ViewChild, Input, forwardRef, Component, ViewContainerRef, Output, Optional, QueryList, SkipSelf, Host, ContentChildren, ContentChild, HostListener, isDevMode, NgModule } from '@angular/core';
-import * as i14 from '@progress/kendo-angular-treelist';
-import { ColumnBase, ColumnComponent, ColumnGroupComponent, SpanColumnComponent, DataBoundTreeComponent, ExpandableTreeComponent, TreeListComponent, FlatBindingDirective, HierarchyBindingDirective, ExpandableDirective, TreeListModule } from '@progress/kendo-angular-treelist';
+import { Injectable, Directive, Input, InjectionToken, Inject, LOCALE_ID, EventEmitter, HostBinding, ViewChild, forwardRef, Component, ViewContainerRef, Output, Optional, QueryList, SkipSelf, Host, ContentChildren, ContentChild, HostListener, isDevMode, NgModule } from '@angular/core';
+import { TableDirective, ColumnBase, ColumnComponent, ColumnGroupComponent, SpanColumnComponent, TreeListSpacerComponent, DataBoundTreeComponent, ExpandableTreeComponent, TreeListComponent, CustomMessagesComponent as CustomMessagesComponent$2, FlatBindingDirective, HierarchyBindingDirective, ExpandableDirective, ColumnResizingService } from '@progress/kendo-angular-treelist';
 import { Subject, Subscription, fromEvent, forkJoin, EMPTY, isObservable, of } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
-import * as i11 from '@progress/kendo-angular-common';
-import { Keys, isDocumentAvailable, closestInScope, matchesClasses, PreventableEvent, anyChanged, closest, isFocusable, focusableSelector, isVisible, shouldShowValidationUI, hasObservers, EventsModule, DraggableModule, WatermarkModule } from '@progress/kendo-angular-common';
-import { map, distinctUntilChanged, take, expand, reduce, switchMap, filter } from 'rxjs/operators';
+import { Keys, isDocumentAvailable, closestInScope, matchesClasses, EventsOutsideAngularDirective, DraggableDirective, PreventableEvent, anyChanged, closest, isFocusable, focusableSelector, isVisible, shouldShowValidationUI, hasObservers, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
+import { switchMap, take, map, distinctUntilChanged, expand, reduce, filter } from 'rxjs/operators';
 import { cloneDate, addWeeks, firstDayInWeek, addDays, lastDayOfMonth, getDate, firstDayOfMonth, addMonths, lastMonthOfYear, MS_PER_HOUR, MS_PER_DAY, isEqual } from '@progress/kendo-date-math';
 import { getter, touchEnabled } from '@progress/kendo-common';
-import * as i6 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import { __decorate, __param, __metadata } from 'tslib';
 import * as i1 from '@progress/kendo-angular-intl';
-import { IntlService, IntlModule } from '@progress/kendo-angular-intl';
+import { IntlService } from '@progress/kendo-angular-intl';
 import { orderBy } from '@progress/kendo-data-query';
 import { xIcon, plusIcon, minusIcon, saveIcon, cancelOutlineIcon, trashIcon } from '@progress/kendo-svg-icons';
-import * as i9 from '@progress/kendo-angular-icons';
-import { IconsModule } from '@progress/kendo-angular-icons';
+import { NgClass, NgIf, NgTemplateOutlet, NgFor } from '@angular/common';
+import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
 import * as i1$1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import * as i4 from '@progress/kendo-angular-buttons';
-import { ButtonsModule } from '@progress/kendo-angular-buttons';
-import * as i8$1 from '@progress/kendo-angular-layout';
-import { SplitterModule, TabStripModule } from '@progress/kendo-angular-layout';
-import * as i7$2 from '@progress/kendo-angular-dialog';
-import { DialogModule } from '@progress/kendo-angular-dialog';
-import * as i5 from '@angular/forms';
+import * as i4 from '@angular/forms';
 import { FormArray, FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
-import * as i6$1 from '@progress/kendo-angular-grid';
-import { GridModule } from '@progress/kendo-angular-grid';
-import * as i7 from '@progress/kendo-angular-dropdowns';
-import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
-import * as i6$2 from '@progress/kendo-angular-label';
-import { LabelModule } from '@progress/kendo-angular-label';
-import * as i7$1 from '@progress/kendo-angular-inputs';
-import { InputsModule } from '@progress/kendo-angular-inputs';
-import * as i8 from '@progress/kendo-angular-dateinputs';
-import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
+import { GridComponent, SelectionDirective, ToolbarTemplateDirective as ToolbarTemplateDirective$1, ColumnComponent as ColumnComponent$1, CellTemplateDirective as CellTemplateDirective$1 } from '@progress/kendo-angular-grid';
+import { ButtonComponent, ButtonGroupComponent, DropDownButtonComponent } from '@progress/kendo-angular-buttons';
+import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
+import { FormFieldComponent, TextBoxDirective, NumericTextBoxComponent } from '@progress/kendo-angular-inputs';
+import { LabelComponent } from '@progress/kendo-angular-label';
+import { DateTimePickerComponent, CalendarDOMService, CenturyViewService, DecadeViewService, MonthViewService, YearViewService, WeekNamesService, NavigationService as NavigationService$1, TimePickerDOMService, HoursService, MinutesService, SecondsService, MillisecondsService, DayPeriodService } from '@progress/kendo-angular-dateinputs';
+import { DialogComponent, CustomMessagesComponent as CustomMessagesComponent$1, DialogActionsComponent, DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
+import { TabStripComponent, TabStripTabComponent, TabContentDirective, SplitterComponent, SplitterPaneComponent } from '@progress/kendo-angular-layout';
 import * as i3 from '@progress/kendo-angular-popup';
-import { PopupModule } from '@progress/kendo-angular-popup';
+import { PopupService } from '@progress/kendo-angular-popup';
 
 /**
  * @hidden
@@ -52,8 +40,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-gantt',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1721814434,
-    version: '16.5.0',
+    publishDate: 1721847330,
+    version: '16.6.0-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
@@ -446,76 +434,194 @@ const elementFromPoint = (clientX, clientY) => {
 
 /**
  * @hidden
+ *
+ * Gets the offset (top and left values) relative to a target element.
  */
-class ScrollSyncService {
-    constructor(ngZone) {
-        this.ngZone = ngZone;
-        this.changes = new Subject();
-        this.elements = [];
-        this.subscriptions = new Subscription();
-        this.subscriptions.add(this.changes.subscribe(args => {
-            this.scroll(args);
-        }));
-    }
-    registerElement(el, sourceType) {
-        this.elements.push({ element: el, sourceType });
-        if (sourceType === "timeline" || sourceType === "treelist") {
-            this.ngZone.runOutsideAngular(() => {
-                const obs = fromEvent(el, 'scroll').pipe(map(({ target: { scrollTop, scrollLeft } }) => ({
-                    scrollTop,
-                    scrollLeft,
-                    sourceType
-                })));
-                const comparisonFn = sourceType === 'timeline' ?
-                    (x, y) => (x.scrollTop === y.scrollTop) && (x.scrollLeft === y.scrollLeft) :
-                    (x, y) => (x.scrollTop === y.scrollTop);
-                this.subscriptions.add(obs.pipe(distinctUntilChanged(comparisonFn))
-                    .subscribe((event) => this.changes.next(event)));
-            });
-        }
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-        this.elements = null;
+const getOffsetRelativeToParent = (element, targetParent) => {
+    const offset = {
+        top: 0,
+        left: 0
+    };
+    if (!targetParent.contains(element)) {
+        return offset;
     }
-    syncScrollTop(sourceType, targetType) {
-        const source = this.elements.find(element => element.sourceType === sourceType);
-        const target = this.elements.find(element => element.sourceType === targetType);
-        // Need to wait for the splitter pane's content to be rendered
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => target.element.scrollTop = source.element.scrollTop);
+    let offsetParent = element;
+    while (offsetParent && offsetParent !== targetParent) {
+        offset.top += offsetParent.offsetTop;
+        offset.left += offsetParent.offsetLeft;
+        offsetParent = offsetParent.offsetParent;
     }
-    resetTimelineScrollLeft() {
-        const source = this.elements.find(element => element.sourceType === 'timeline');
-        source.element.scrollLeft = 0;
+    return offset;
+};
+/**
+ * @hidden
+ */
+const getElementRect = (element, relativeContainer) => {
+    const { top, left } = getOffsetRelativeToParent(element, relativeContainer);
+    return {
+        top: top + element.offsetHeight / 2,
+        left: left,
+        right: left + element.offsetWidth
+    };
+};
+/**
+ * @hidden
+ */
+const dependencyCoordinates = (from, to, rowHeight, type, minDistanceBeforeTurn, arrowSize) => {
+    const points = [];
+    const minTurnHeight = Math.floor(rowHeight / 2);
+    const drawingDown = from.top < to.top;
+    let top, left;
+    // FF and SS are composed of 4 connected polyline points (not counting the arrow)
+    /*
+        [[[]]]-       -[[[]]]
+              |       |
+        [[[]]]-       -[[[]]]
+     */
+    if (type === DependencyType.FF || type === DependencyType.SS) {
+        // polyline start from first task
+        const dir = type === DependencyType.SS ? 'left' : 'right';
+        top = from.top;
+        left = from[dir];
+        points.push({ top, left });
+        // first turn point
+        left = Math[dir === 'left' ? 'min' : 'max'](from[dir], to[dir]);
+        left = dir === 'left' ? left - minDistanceBeforeTurn : left + minDistanceBeforeTurn;
+        points.push({ top, left });
+        // second turn point
+        top = to.top;
+        points.push({ top, left });
+        // second task reached
+        left = dir === 'left' ? to[dir] - arrowSize : to[dir] + arrowSize;
+        points.push({ top, left });
+        // arrow pointing to the second task
+        points.push(...getArrow(top, left, dir !== 'left', arrowSize));
     }
-    scroll({ scrollTop, scrollLeft, sourceType }) {
-        this.ngZone.runOutsideAngular(() => {
-            if (sourceType === 'timeline') {
-                const header = this.elements.find(element => element.sourceType === 'header').element;
-                header.scrollLeft = scrollLeft;
-                if (!this.syncingTimeline) {
-                    this.syncingTreeList = true;
-                    const treelist = this.elements.find(element => element.sourceType === 'treelist').element;
-                    treelist.scrollTop = scrollTop;
-                }
-                this.syncingTimeline = false;
-            }
-            if (sourceType === 'treelist') {
-                if (!this.syncingTreeList) {
-                    this.syncingTimeline = true;
-                    const timeline = this.elements.find(element => element.sourceType === 'timeline').element;
-                    timeline.scrollTop = scrollTop;
-                }
-                this.syncingTreeList = false;
-            }
-        });
+    else {
+        // FS and SF are composed of 4 or 6 connected polyline points (not counting the arrow), depending on the position of the tasks
+        /*
+            [[[]]]-               [[[]]]-
+                  |                     |
+                  -[[[]]]           -----
+                                    |
+                                    -[[[]]]
+        */
+        const startDir = type === DependencyType.SF ? 'left' : 'right';
+        const endDir = type === DependencyType.SF ? 'right' : 'left';
+        const additionalTurn = type === DependencyType.SF
+            ? from[startDir] - minDistanceBeforeTurn * 2 < to[endDir]
+            : from[startDir] + minDistanceBeforeTurn * 2 > to[endDir];
+        // polyline start from first task
+        top = from.top;
+        left = from[startDir];
+        points.push({ top, left });
+        // first turn point
+        left = startDir === 'left'
+            ? left - minDistanceBeforeTurn
+            : left + minDistanceBeforeTurn;
+        points.push({ top, left });
+        // if second task start is before the first task end in FS
+        // if second task end is after the first task start in SF
+        if (additionalTurn) {
+            // additional turn start
+            top = drawingDown
+                ? top + minTurnHeight
+                : top - minTurnHeight;
+            points.push({ top, left });
+            // additional turn end
+            left = startDir === 'left'
+                ? to[endDir] + minDistanceBeforeTurn
+                : to[endDir] - minDistanceBeforeTurn;
+            points.push({ top, left });
+        }
+        // second task level reached
+        top = to.top;
+        points.push({ top, left });
+        // second task element reached
+        left = endDir === 'left' ? to[endDir] - arrowSize : to[endDir] + arrowSize;
+        points.push({ top, left });
+        // arrow pointing to the second task
+        points.push(...getArrow(top, left, endDir !== 'left', arrowSize));
     }
-}
-ScrollSyncService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollSyncService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-ScrollSyncService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollSyncService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollSyncService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
+    return points;
+};
+const getArrow = (top, left, isArrowWest, arrowSize) => {
+    const points = isArrowWest
+        ? getArrowWest(top, left, arrowSize)
+        : getArrowEast(top, left, arrowSize);
+    return points;
+};
+const getArrowWest = (top, left, arrowSize) => {
+    const points = [];
+    points.push({
+        top: top - arrowSize / 2,
+        left
+    });
+    points.push({
+        top,
+        left: left - arrowSize + 1
+    });
+    points.push({
+        top: top + arrowSize / 2,
+        left
+    });
+    points.push({
+        top,
+        left
+    });
+    return points;
+};
+const getArrowEast = (top, left, arrowSize) => {
+    const points = [];
+    points.push({
+        top: top + arrowSize / 2,
+        left
+    });
+    points.push({
+        top,
+        left: left + arrowSize - 1
+    });
+    points.push({
+        top: top - arrowSize / 2,
+        left
+    });
+    points.push({
+        top,
+        left
+    });
+    return points;
+};
+/**
+ * @hidden
+ *
+ * Translates the provided client `left` and `top` coords to coords relative to the provided container.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_View/Coordinate_systems#standard_cssom_coordinate_systems
+ */
+const clientToOffsetCoords = (clientLeft, clientTop, offsetContainer) => {
+    // client (viewport) coordinates of the target container
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#value
+    const offsetContainerClientRect = offsetContainer.getBoundingClientRect();
+    return {
+        left: clientLeft - offsetContainerClientRect.left + offsetContainer.scrollLeft,
+        top: clientTop - offsetContainerClientRect.top + offsetContainer.scrollTop
+    };
+};
+/**
+ * @hidden
+ *
+ * Retrieves the `left` and `top` values of the center of the provided element.
+ * The retrieved values are relative to the current viewport (client values).
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_View/Coordinate_systems#standard_cssom_coordinate_systems
+ */
+const getElementClientCenterCoords = (element) => {
+    // client (viewport) coordinates of the targeted element
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#value
+    const { left, top, width, height } = element.getBoundingClientRect();
+    return {
+        left: left + (width / 2),
+        top: top + (height / 2)
+    };
+};
 
 /**
  * @hidden
@@ -657,82 +763,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: MappingService }]; } });
 
-const MS_PER_SECOND = 1000;
-const MS_PER_MINUTE = 60 * MS_PER_SECOND;
 /**
- * @hidden
+ * Defines the size of the arrow that will be drawn at the end of each Gantt dependency.
  */
-class CurrentTimeMarkerService {
-    constructor(renderer, cdr) {
-        this.renderer = renderer;
-        this.cdr = cdr;
-        this.slots = [];
-        this.rows = [];
-        this.now = new Date(Date.now());
-        this.createTimeMarker = () => {
-            if (!isDocumentAvailable()) {
-                return;
-            }
-            this.removeTimeMarker();
-            if (this.slotIndex >= 0) {
-                this.now = new Date(Date.now());
-                this.timeMarkerDiv = this.renderer.createElement('div');
-                this.renderer.addClass(this.timeMarkerDiv, 'k-current-time');
-                this.renderer.setStyle(this.timeMarkerDiv, 'width', '1px');
-                this.renderer.setStyle(this.timeMarkerDiv, 'top', '0px');
-                this.renderer.setStyle(this.timeMarkerDiv, `${this.rtl ? 'right' : 'left'}`, this.deltaOffset + 'px');
-                this.renderer.appendChild(this.container.nativeElement, this.timeMarkerDiv);
-                this.renderer.setStyle(this.timeMarkerDiv, 'height', this.height + 'px');
-                this.currentTimeTimeout = setTimeout(this.createTimeMarker, this.interval || MS_PER_MINUTE);
-            }
-        };
-    }
-    get deltaOffset() {
-        if (this.slotIndex >= 0) {
-            const total = this.slots[this.slotIndex].end.getTime() - this.slots[this.slotIndex].start.getTime();
-            if (total > 0) {
-                const currentTimeValue = this.now.getTime() - this.slots[this.slotIndex].start.getTime();
-                const fractionInsideCell = currentTimeValue / total;
-                const deltaOffsetToSlot = this.slotIndex * this.slotWidth;
-                const deltaOffsetInsideSlot = fractionInsideCell * this.slotWidth;
-                return deltaOffsetToSlot + deltaOffsetInsideSlot;
-            }
-            return 0;
-        }
-    }
-    get slotWidth() {
-        var _a;
-        return (_a = this.slots[0]) === null || _a === void 0 ? void 0 : _a.slotWidth;
+const ARROW_SIZE = 4;
+/**
+ * Defines the distance the polyline will cover from the task element before making a turn.
+ */
+const MIN_DISTANCE_BEFORE_TURN = 10;
+/**
+ * @hidden
+ */
+class GanttDependencyDirective {
+    constructor(polyline, zone, renderer, mapper, dependencyDomService) {
+        this.polyline = polyline;
+        this.zone = zone;
+        this.renderer = renderer;
+        this.mapper = mapper;
+        this.dependencyDomService = dependencyDomService;
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(dependencyDomService.taskChanges
+            .pipe(switchMap(changes => 
+        // reacts only on the very last event emission,
+        // ensures that the tasks are drawn in the DOM
+        this.zone.onStable.pipe(take(1), map(() => changes))))
+            .subscribe(changes => this.updatePoints(changes)));
     }
-    get slotIndex() {
-        return this.slots.indexOf(this.slots.find((slot) => slot.start <= this.now && slot.end > this.now));
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
     }
-    get height() {
-        return this.rows.length * this.rowHeight;
+    ngOnChanges(changes) {
+        if (isPresent(changes['dependency'])) {
+            this.updatePoints(this.dependencyDomService.dependencyDomArgs);
+        }
     }
-    get interval() {
-        var _a;
-        if (typeof (this.currentTimeMarker) === 'boolean') {
-            return MS_PER_MINUTE;
+    updatePoints({ timelineRow, contentContainer, tasks }) {
+        if (!isPresent(timelineRow) || !isPresent(contentContainer) ||
+            !isPresent(tasks) || tasks.size === 0 ||
+            !tasks.has(this.mapper.extractFromDependency(this.dependency, 'fromId')) || !tasks.has(this.mapper.extractFromDependency(this.dependency, 'toId'))) {
+            this.clearPoints();
+            return;
         }
-        return ((_a = this.currentTimeMarker) === null || _a === void 0 ? void 0 : _a.updateInterval) || MS_PER_MINUTE;
+        const fromCoordinates = getElementRect(tasks.get(this.mapper.extractFromDependency(this.dependency, 'fromId')), contentContainer);
+        const toCoordinates = getElementRect(tasks.get(this.mapper.extractFromDependency(this.dependency, 'toId')), contentContainer);
+        const timelineRowHeight = isDocumentAvailable() ? timelineRow.getBoundingClientRect().height : 0;
+        const points = dependencyCoordinates(fromCoordinates, toCoordinates, timelineRowHeight, this.dependency.type, MIN_DISTANCE_BEFORE_TURN, ARROW_SIZE);
+        this.drawPoints(points);
     }
-    ngOnDestroy() {
-        clearTimeout(this.currentTimeTimeout);
+    clearPoints() {
+        this.renderer.setAttribute(this.polyline.nativeElement, 'points', '');
     }
-    removeTimeMarker() {
-        if (this.timeMarkerDiv) {
-            this.renderer.removeChild(this.container.nativeElement, this.timeMarkerDiv);
-            clearTimeout(this.currentTimeTimeout);
-            this.cdr.detectChanges();
+    drawPoints(points) {
+        if (!isPresent(points) || points.length === 0) {
+            this.clearPoints();
+            return;
         }
+        const parsedCoords = points.map(({ left, top }) => `${left},${top}`).join(' ');
+        this.renderer.setAttribute(this.polyline.nativeElement, 'points', parsedCoords);
     }
 }
-CurrentTimeMarkerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CurrentTimeMarkerService, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable });
-CurrentTimeMarkerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CurrentTimeMarkerService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CurrentTimeMarkerService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; } });
+GanttDependencyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttDependencyDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: MappingService }, { token: DependencyDomService }], target: i0.ɵɵFactoryTarget.Directive });
+GanttDependencyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: GanttDependencyDirective, isStandalone: true, selector: "[kendoGanttDependency]", inputs: { dependency: "dependency" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttDependencyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGanttDependency]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: MappingService }, { type: DependencyDomService }]; }, propDecorators: { dependency: [{
+                type: Input
+            }] } });
 
 /**
  * @hidden
@@ -1227,6 +1327,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             type: Injectable
         }] });
 
+/**
+ * @hidden
+ */
+class ScrollSyncService {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this.changes = new Subject();
+        this.elements = [];
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(this.changes.subscribe(args => {
+            this.scroll(args);
+        }));
+    }
+    registerElement(el, sourceType) {
+        this.elements.push({ element: el, sourceType });
+        if (sourceType === "timeline" || sourceType === "treelist") {
+            this.ngZone.runOutsideAngular(() => {
+                const obs = fromEvent(el, 'scroll').pipe(map(({ target: { scrollTop, scrollLeft } }) => ({
+                    scrollTop,
+                    scrollLeft,
+                    sourceType
+                })));
+                const comparisonFn = sourceType === 'timeline' ?
+                    (x, y) => (x.scrollTop === y.scrollTop) && (x.scrollLeft === y.scrollLeft) :
+                    (x, y) => (x.scrollTop === y.scrollTop);
+                this.subscriptions.add(obs.pipe(distinctUntilChanged(comparisonFn))
+                    .subscribe((event) => this.changes.next(event)));
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+        this.elements = null;
+    }
+    syncScrollTop(sourceType, targetType) {
+        const source = this.elements.find(element => element.sourceType === sourceType);
+        const target = this.elements.find(element => element.sourceType === targetType);
+        // Need to wait for the splitter pane's content to be rendered
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => target.element.scrollTop = source.element.scrollTop);
+    }
+    resetTimelineScrollLeft() {
+        const source = this.elements.find(element => element.sourceType === 'timeline');
+        source.element.scrollLeft = 0;
+    }
+    scroll({ scrollTop, scrollLeft, sourceType }) {
+        this.ngZone.runOutsideAngular(() => {
+            if (sourceType === 'timeline') {
+                const header = this.elements.find(element => element.sourceType === 'header').element;
+                header.scrollLeft = scrollLeft;
+                if (!this.syncingTimeline) {
+                    this.syncingTreeList = true;
+                    const treelist = this.elements.find(element => element.sourceType === 'treelist').element;
+                    treelist.scrollTop = scrollTop;
+                }
+                this.syncingTimeline = false;
+            }
+            if (sourceType === 'treelist') {
+                if (!this.syncingTreeList) {
+                    this.syncingTimeline = true;
+                    const timeline = this.elements.find(element => element.sourceType === 'timeline').element;
+                    timeline.scrollTop = scrollTop;
+                }
+                this.syncingTreeList = false;
+            }
+        });
+    }
+}
+ScrollSyncService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollSyncService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+ScrollSyncService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollSyncService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollSyncService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
+
 /**
  * @hidden
  */
@@ -1760,7 +1933,7 @@ class GanttTaskComponent extends GanttTaskBase {
     }
 }
 GanttTaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttTaskComponent, deps: [{ token: EditService }, { token: TOUCH_ENABLED }, { token: MappingService }, { token: TimelineViewService }, { token: DependencyDomService }, { token: OptionChangesService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-GanttTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GanttTaskComponent, selector: "kendo-gantt-task", inputs: { taskContentTemplate: "taskContentTemplate", taskTemplate: "taskTemplate" }, providers: [
+GanttTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GanttTaskComponent, isStandalone: true, selector: "kendo-gantt-task", inputs: { taskContentTemplate: "taskContentTemplate", taskTemplate: "taskTemplate" }, providers: [
         {
             provide: GanttTaskBase,
             useExisting: forwardRef(() => GanttTaskComponent)
@@ -1836,7 +2009,7 @@ GanttTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
             >
             </div>
         </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i11.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i9.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttTaskComponent, decorators: [{
             type: Component,
             args: [{
@@ -1918,7 +2091,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             >
             </div>
         </ng-container>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgClass, NgIf, NgTemplateOutlet, EventsOutsideAngularDirective, IconWrapperComponent]
                 }]
         }], ctorParameters: function () {
         return [{ type: EditService }, { type: undefined, decorators: [{
@@ -1948,7 +2123,7 @@ class GanttSummaryTaskComponent extends GanttTaskBase {
     }
 }
 GanttSummaryTaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttSummaryTaskComponent, deps: [{ token: TOUCH_ENABLED }, { token: MappingService }, { token: TimelineViewService }, { token: DependencyDomService }, { token: OptionChangesService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-GanttSummaryTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GanttSummaryTaskComponent, selector: "kendo-gantt-summary-task", inputs: { template: "template", isExpanded: "isExpanded" }, host: { properties: { "class.k-summary-wrap": "this.summaryWrapperClass" } }, providers: [
+GanttSummaryTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GanttSummaryTaskComponent, isStandalone: true, selector: "kendo-gantt-summary-task", inputs: { template: "template", isExpanded: "isExpanded" }, host: { properties: { "class.k-summary-wrap": "this.summaryWrapperClass" } }, providers: [
         {
             provide: GanttTaskBase,
             useExisting: forwardRef(() => GanttSummaryTaskComponent)
@@ -1997,7 +2172,7 @@ GanttSummaryTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             >
             </div>
         </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttSummaryTaskComponent, decorators: [{
             type: Component,
             args: [{
@@ -2052,7 +2227,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             >
             </div>
         </ng-container>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgClass, NgIf, NgTemplateOutlet]
                 }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
@@ -2079,7 +2256,7 @@ class GanttMilestoneTaskComponent extends GanttTaskBase {
     }
 }
 GanttMilestoneTaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttMilestoneTaskComponent, deps: [{ token: TOUCH_ENABLED }, { token: MappingService }, { token: TimelineViewService }, { token: DependencyDomService }, { token: OptionChangesService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-GanttMilestoneTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GanttMilestoneTaskComponent, selector: "kendo-gantt-milestone-task", host: { properties: { "class.k-milestone-wrap": "this.milestoneWrapperClass" } }, providers: [
+GanttMilestoneTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GanttMilestoneTaskComponent, isStandalone: true, selector: "kendo-gantt-milestone-task", host: { properties: { "class.k-milestone-wrap": "this.milestoneWrapperClass" } }, providers: [
         {
             provide: GanttTaskBase,
             useExisting: forwardRef(() => GanttMilestoneTaskComponent)
@@ -2108,7 +2285,7 @@ GanttMilestoneTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
             >
             </div>
         </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttMilestoneTaskComponent, decorators: [{
             type: Component,
             args: [{
@@ -2143,7 +2320,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             >
             </div>
         </ng-container>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgClass, NgIf]
                 }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
@@ -2175,7 +2354,7 @@ class GanttTasksTableBodyComponent {
     }
 }
 GanttTasksTableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttTasksTableBodyComponent, deps: [{ token: DependencyDomService }, { token: MappingService }], target: i0.ɵɵFactoryTarget.Component });
-GanttTasksTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GanttTasksTableBodyComponent, selector: "[kendoGanttTasksTableBody]", inputs: { selectable: "selectable", rows: "rows", activeView: "activeView", taskContentTemplate: "taskContentTemplate", taskTemplate: "taskTemplate", summaryTaskTemplate: "summaryTaskTemplate", taskClass: "taskClass", isExpanded: "isExpanded", isTaskSelected: "isTaskSelected", renderDependencyDragClues: "renderDependencyDragClues" }, viewQueries: [{ propertyName: "timelineRow", first: true, predicate: ["timelineRow"], descendants: true }], ngImport: i0, template: `
+GanttTasksTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GanttTasksTableBodyComponent, isStandalone: true, selector: "[kendoGanttTasksTableBody]", inputs: { selectable: "selectable", rows: "rows", activeView: "activeView", taskContentTemplate: "taskContentTemplate", taskTemplate: "taskTemplate", summaryTaskTemplate: "summaryTaskTemplate", taskClass: "taskClass", isExpanded: "isExpanded", isTaskSelected: "isTaskSelected", renderDependencyDragClues: "renderDependencyDragClues" }, viewQueries: [{ propertyName: "timelineRow", first: true, predicate: ["timelineRow"], descendants: true }], ngImport: i0, template: `
         <tr class="k-table-row" #timelineRow *ngFor="let item of rows; let index = index">
             <td class="k-table-td">
                 <kendo-gantt-milestone-task
@@ -2222,7 +2401,7 @@ GanttTasksTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
                 </ng-template>
             </td>
         </tr>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GanttTaskComponent, selector: "kendo-gantt-task", inputs: ["taskContentTemplate", "taskTemplate"] }, { kind: "component", type: GanttSummaryTaskComponent, selector: "kendo-gantt-summary-task", inputs: ["template", "isExpanded"] }, { kind: "component", type: GanttMilestoneTaskComponent, selector: "kendo-gantt-milestone-task" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GanttMilestoneTaskComponent, selector: "kendo-gantt-milestone-task" }, { kind: "component", type: GanttSummaryTaskComponent, selector: "kendo-gantt-summary-task", inputs: ["template", "isExpanded"] }, { kind: "component", type: GanttTaskComponent, selector: "kendo-gantt-task", inputs: ["taskContentTemplate", "taskTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttTasksTableBodyComponent, decorators: [{
             type: Component,
             args: [{
@@ -2275,7 +2454,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </ng-template>
             </td>
         </tr>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgFor, NgIf, GanttMilestoneTaskComponent, GanttSummaryTaskComponent, GanttTaskComponent]
                 }]
         }], ctorParameters: function () { return [{ type: DependencyDomService }, { type: MappingService }]; }, propDecorators: { timelineRow: [{
                 type: ViewChild,
@@ -2305,442 +2486,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 /**
  * @hidden
  */
-class GanttHeaderTableBodyComponent {
-    constructor() {
-        this.tbodyClass = true;
-    }
-}
-GanttHeaderTableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttHeaderTableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GanttHeaderTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GanttHeaderTableBodyComponent, selector: "[kendoGanttHeaderTableBody]", inputs: { groupSlots: "groupSlots", slots: "slots" }, host: { properties: { "class.k-table-tbody": "this.tbodyClass" } }, ngImport: i0, template: `
-        <tr class="k-table-row">
-            <td *ngFor="let item of groupSlots" [attr.colspan]="item.span" class="k-header k-table-td">{{ item.text }}</td>
-        </tr>
-
-        <tr class="k-table-row">
-            <td *ngFor="let item of slots" class="k-header k-table-td" [attr.colspan]="item.span === 7 ? item.span : 1" [attr.title]="item.text">{{ item.text }}</td>
-        </tr>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttHeaderTableBodyComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: '[kendoGanttHeaderTableBody]',
-                    template: `
-        <tr class="k-table-row">
-            <td *ngFor="let item of groupSlots" [attr.colspan]="item.span" class="k-header k-table-td">{{ item.text }}</td>
-        </tr>
-
-        <tr class="k-table-row">
-            <td *ngFor="let item of slots" class="k-header k-table-td" [attr.colspan]="item.span === 7 ? item.span : 1" [attr.title]="item.text">{{ item.text }}</td>
-        </tr>
-    `
-                }]
-        }], propDecorators: { tbodyClass: [{
-                type: HostBinding,
-                args: ['class.k-table-tbody']
-            }], groupSlots: [{
-                type: Input
-            }], slots: [{
-                type: Input
-            }] } });
+var ScrollDirection;
+(function (ScrollDirection) {
+    ScrollDirection[ScrollDirection["Backwards"] = -1] = "Backwards";
+    ScrollDirection[ScrollDirection["Forward"] = 1] = "Forward";
+})(ScrollDirection || (ScrollDirection = {}));
+/**
+ * @hidden
+ */
+var ScrollAxis;
+(function (ScrollAxis) {
+    ScrollAxis["Vertical"] = "scrollTop";
+    ScrollAxis["Horizontal"] = "scrollLeft";
+})(ScrollAxis || (ScrollAxis = {}));
 
 /**
  * @hidden
  *
- * Gets the offset (top and left values) relative to a target element.
+ * Checks if the beginning of the scrollable element is reached (top/left).
+ * Floors the top value.
  */
-const getOffsetRelativeToParent = (element, targetParent) => {
-    const offset = {
-        top: 0,
-        left: 0
-    };
-    if (!targetParent.contains(element)) {
-        return offset;
-    }
-    let offsetParent = element;
-    while (offsetParent && offsetParent !== targetParent) {
-        offset.top += offsetParent.offsetTop;
-        offset.left += offsetParent.offsetLeft;
-        offsetParent = offsetParent.offsetParent;
-    }
-    return offset;
-};
+const isUpperLimitReached = (element, axis) => Math.floor(element[axis]) <= 0;
 /**
  * @hidden
- */
-const getElementRect = (element, relativeContainer) => {
-    const { top, left } = getOffsetRelativeToParent(element, relativeContainer);
-    return {
-        top: top + element.offsetHeight / 2,
-        left: left,
-        right: left + element.offsetWidth
-    };
+ *
+ * Checks if the end of the scrollable element is reached (bottom/right).
+ * Ceils the top value.
+ */
+const isBottomLimitReached = (element, axis) => {
+    const elementSize = axis === ScrollAxis.Horizontal ?
+        element.scrollWidth - element.clientWidth :
+        element.scrollHeight - element.clientHeight;
+    return Math.ceil(element[axis]) >= elementSize;
 };
 /**
  * @hidden
+ *
+ * Scrolls the element in the given direction by the provided step in the provided scroll axis.
+ *
+ * If the targeted scroll incrementation doesn't yield any result due to device pixel ratio issues (https://github.com/dimitar-pechev/RenderingIndependentScrollOffsets#readme),
+ * increments the step with 1px and again attempts to change the scrollTop of the element, until the content is actually scrolled.
+ *
+ * Cuts the operation short after 20 unsuccessful attempts to prevent infinite loops in possible corner-case scenarios.
  */
-const dependencyCoordinates = (from, to, rowHeight, type, minDistanceBeforeTurn, arrowSize) => {
-    const points = [];
-    const minTurnHeight = Math.floor(rowHeight / 2);
-    const drawingDown = from.top < to.top;
-    let top, left;
-    // FF and SS are composed of 4 connected polyline points (not counting the arrow)
-    /*
-        [[[]]]-       -[[[]]]
-              |       |
-        [[[]]]-       -[[[]]]
-     */
-    if (type === DependencyType.FF || type === DependencyType.SS) {
-        // polyline start from first task
-        const dir = type === DependencyType.SS ? 'left' : 'right';
-        top = from.top;
-        left = from[dir];
-        points.push({ top, left });
-        // first turn point
-        left = Math[dir === 'left' ? 'min' : 'max'](from[dir], to[dir]);
-        left = dir === 'left' ? left - minDistanceBeforeTurn : left + minDistanceBeforeTurn;
-        points.push({ top, left });
-        // second turn point
-        top = to.top;
-        points.push({ top, left });
-        // second task reached
-        left = dir === 'left' ? to[dir] - arrowSize : to[dir] + arrowSize;
-        points.push({ top, left });
-        // arrow pointing to the second task
-        points.push(...getArrow(top, left, dir !== 'left', arrowSize));
+const scrollElement = (element, step, direction, scrollAxis) => {
+    if (!(isPresent(element) && isDocumentAvailable())) {
+        return;
     }
-    else {
-        // FS and SF are composed of 4 or 6 connected polyline points (not counting the arrow), depending on the position of the tasks
-        /*
-            [[[]]]-               [[[]]]-
-                  |                     |
-                  -[[[]]]           -----
-                                    |
-                                    -[[[]]]
-        */
-        const startDir = type === DependencyType.SF ? 'left' : 'right';
-        const endDir = type === DependencyType.SF ? 'right' : 'left';
-        const additionalTurn = type === DependencyType.SF
-            ? from[startDir] - minDistanceBeforeTurn * 2 < to[endDir]
-            : from[startDir] + minDistanceBeforeTurn * 2 > to[endDir];
-        // polyline start from first task
-        top = from.top;
-        left = from[startDir];
-        points.push({ top, left });
-        // first turn point
-        left = startDir === 'left'
-            ? left - minDistanceBeforeTurn
-            : left + minDistanceBeforeTurn;
-        points.push({ top, left });
-        // if second task start is before the first task end in FS
-        // if second task end is after the first task start in SF
-        if (additionalTurn) {
-            // additional turn start
-            top = drawingDown
-                ? top + minTurnHeight
-                : top - minTurnHeight;
-            points.push({ top, left });
-            // additional turn end
-            left = startDir === 'left'
-                ? to[endDir] + minDistanceBeforeTurn
-                : to[endDir] - minDistanceBeforeTurn;
-            points.push({ top, left });
-        }
-        // second task level reached
-        top = to.top;
-        points.push({ top, left });
-        // second task element reached
-        left = endDir === 'left' ? to[endDir] - arrowSize : to[endDir] + arrowSize;
-        points.push({ top, left });
-        // arrow pointing to the second task
-        points.push(...getArrow(top, left, endDir !== 'left', arrowSize));
+    const initialScrollPosition = element[scrollAxis];
+    let currentStep = step;
+    let iterations = 0;
+    while (initialScrollPosition === element[scrollAxis] &&
+        !(direction === ScrollDirection.Backwards && isUpperLimitReached(element, scrollAxis)) &&
+        !(direction === ScrollDirection.Forward && isBottomLimitReached(element, scrollAxis)) &&
+        iterations < 20 // cut the operation short in 20 attempts - in case of a wild corner case
+    ) {
+        element[scrollAxis] += (currentStep * direction);
+        // try with a larger step if the current one doesn't update the scroll position successfully
+        currentStep += 1;
+        iterations += 1;
     }
-    return points;
-};
-const getArrow = (top, left, isArrowWest, arrowSize) => {
-    const points = isArrowWest
-        ? getArrowWest(top, left, arrowSize)
-        : getArrowEast(top, left, arrowSize);
-    return points;
-};
-const getArrowWest = (top, left, arrowSize) => {
-    const points = [];
-    points.push({
-        top: top - arrowSize / 2,
-        left
-    });
-    points.push({
-        top,
-        left: left - arrowSize + 1
-    });
-    points.push({
-        top: top + arrowSize / 2,
-        left
-    });
-    points.push({
-        top,
-        left
-    });
-    return points;
-};
-const getArrowEast = (top, left, arrowSize) => {
-    const points = [];
-    points.push({
-        top: top + arrowSize / 2,
-        left
-    });
-    points.push({
-        top,
-        left: left + arrowSize - 1
-    });
-    points.push({
-        top: top - arrowSize / 2,
-        left
-    });
-    points.push({
-        top,
-        left
-    });
-    return points;
 };
 /**
  * @hidden
  *
- * Translates the provided client `left` and `top` coords to coords relative to the provided container.
- * https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_View/Coordinate_systems#standard_cssom_coordinate_systems
+ * As client coordinates are not restricted to the range 0px - {viewportSize}px, but can have negative starting values or ending values greater than the viewport size,
+ * this function extracts the visible boundaries of the provided element - fall-backing to 0 when the top/left are below 0,
+ * and fall-backing to the actual visible size of the container for bottom/right.
  */
-const clientToOffsetCoords = (clientLeft, clientTop, offsetContainer) => {
-    // client (viewport) coordinates of the target container
-    // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#value
-    const offsetContainerClientRect = offsetContainer.getBoundingClientRect();
+const getViewportBoundaries = (element) => {
+    const elementRect = element.getBoundingClientRect();
+    // if the beginning of the scrollable container is above/before the current viewport, fall-back to 0
+    const topLimit = Math.max(elementRect.top, 0);
+    const leftLimit = Math.max(elementRect.left, 0);
+    // if the end of the scrollable container is beneath/after the current viewport, fall-back to its client height
+    // add the distance from the start of the viewport to the beginning of the container to ensure scrolling bottom begins when the actual end of the container is reached
+    const bottomLimit = topLimit + Math.min(elementRect.bottom, element.clientHeight);
+    const rightLimit = leftLimit + Math.min(elementRect.right, element.clientWidth);
     return {
-        left: clientLeft - offsetContainerClientRect.left + offsetContainer.scrollLeft,
-        top: clientTop - offsetContainerClientRect.top + offsetContainer.scrollTop
+        top: topLimit,
+        bottom: bottomLimit,
+        left: leftLimit,
+        right: rightLimit
     };
 };
+
 /**
  * @hidden
  *
- * Retrieves the `left` and `top` values of the center of the provided element.
- * The retrieved values are relative to the current viewport (client values).
- * https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_View/Coordinate_systems#standard_cssom_coordinate_systems
+ * Notifies the timeline-scroll.directive to scroll into view to requested coordinates.
+ * The scrolling is performed based on client (viewport) coordinates.
  */
-const getElementClientCenterCoords = (element) => {
-    // client (viewport) coordinates of the targeted element
-    // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#value
-    const { left, top, width, height } = element.getBoundingClientRect();
-    return {
-        left: left + (width / 2),
-        top: top + (height / 2)
-    };
-};
+class TimelineScrollService {
+    constructor() {
+        this.horizontalScroll = new Subject();
+        this.verticalScroll = new Subject();
+        this.scrollCancel = new Subject();
+    }
+    ngOnDestroy() {
+        this.horizontalScroll.complete();
+        this.verticalScroll.complete();
+        this.scrollCancel.complete();
+    }
+    requestHorizontalScroll(clientTop) {
+        this.horizontalScroll.next(clientTop);
+    }
+    requestVerticalScroll(clientLeft) {
+        this.verticalScroll.next(clientLeft);
+    }
+    requestScrollCancel() {
+        this.scrollCancel.next();
+    }
+}
+TimelineScrollService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TimelineScrollService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineScrollService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineScrollService, decorators: [{
+            type: Injectable
+        }] });
 
-/**
- * Defines the size of the arrow that will be drawn at the end of each Gantt dependency.
- */
-const ARROW_SIZE = 4;
-/**
- * Defines the distance the polyline will cover from the task element before making a turn.
- */
-const MIN_DISTANCE_BEFORE_TURN = 10;
 /**
  * @hidden
  */
-class GanttDependencyDirective {
-    constructor(polyline, zone, renderer, mapper, dependencyDomService) {
-        this.polyline = polyline;
+class TimelineScrollableDirective {
+    constructor(timelineScrollableContainer, scrollService, zone) {
+        this.timelineScrollableContainer = timelineScrollableContainer;
+        this.scrollService = scrollService;
         this.zone = zone;
-        this.renderer = renderer;
-        this.mapper = mapper;
-        this.dependencyDomService = dependencyDomService;
         this.subscriptions = new Subscription();
-        this.subscriptions.add(dependencyDomService.taskChanges
-            .pipe(switchMap(changes => 
-        // reacts only on the very last event emission,
-        // ensures that the tasks are drawn in the DOM
-        this.zone.onStable.pipe(take(1), map(() => changes))))
-            .subscribe(changes => this.updatePoints(changes)));
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    ngOnChanges(changes) {
-        if (isPresent(changes['dependency'])) {
-            this.updatePoints(this.dependencyDomService.dependencyDomArgs);
-        }
-    }
-    updatePoints({ timelineRow, contentContainer, tasks }) {
-        if (!isPresent(timelineRow) || !isPresent(contentContainer) ||
-            !isPresent(tasks) || tasks.size === 0 ||
-            !tasks.has(this.mapper.extractFromDependency(this.dependency, 'fromId')) || !tasks.has(this.mapper.extractFromDependency(this.dependency, 'toId'))) {
-            this.clearPoints();
-            return;
-        }
-        const fromCoordinates = getElementRect(tasks.get(this.mapper.extractFromDependency(this.dependency, 'fromId')), contentContainer);
-        const toCoordinates = getElementRect(tasks.get(this.mapper.extractFromDependency(this.dependency, 'toId')), contentContainer);
-        const timelineRowHeight = isDocumentAvailable() ? timelineRow.getBoundingClientRect().height : 0;
-        const points = dependencyCoordinates(fromCoordinates, toCoordinates, timelineRowHeight, this.dependency.type, MIN_DISTANCE_BEFORE_TURN, ARROW_SIZE);
-        this.drawPoints(points);
-    }
-    clearPoints() {
-        this.renderer.setAttribute(this.polyline.nativeElement, 'points', '');
-    }
-    drawPoints(points) {
-        if (!isPresent(points) || points.length === 0) {
-            this.clearPoints();
-            return;
-        }
-        const parsedCoords = points.map(({ left, top }) => `${left},${top}`).join(' ');
-        this.renderer.setAttribute(this.polyline.nativeElement, 'points', parsedCoords);
-    }
-}
-GanttDependencyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttDependencyDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: MappingService }, { token: DependencyDomService }], target: i0.ɵɵFactoryTarget.Directive });
-GanttDependencyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: GanttDependencyDirective, selector: "[kendoGanttDependency]", inputs: { dependency: "dependency" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttDependencyDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGanttDependency]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: MappingService }, { type: DependencyDomService }]; }, propDecorators: { dependency: [{
-                type: Input
-            }] } });
-
-/**
- * @hidden
- */
-var ScrollDirection;
-(function (ScrollDirection) {
-    ScrollDirection[ScrollDirection["Backwards"] = -1] = "Backwards";
-    ScrollDirection[ScrollDirection["Forward"] = 1] = "Forward";
-})(ScrollDirection || (ScrollDirection = {}));
-/**
- * @hidden
- */
-var ScrollAxis;
-(function (ScrollAxis) {
-    ScrollAxis["Vertical"] = "scrollTop";
-    ScrollAxis["Horizontal"] = "scrollLeft";
-})(ScrollAxis || (ScrollAxis = {}));
-
-/**
- * @hidden
- *
- * Checks if the beginning of the scrollable element is reached (top/left).
- * Floors the top value.
- */
-const isUpperLimitReached = (element, axis) => Math.floor(element[axis]) <= 0;
-/**
- * @hidden
- *
- * Checks if the end of the scrollable element is reached (bottom/right).
- * Ceils the top value.
- */
-const isBottomLimitReached = (element, axis) => {
-    const elementSize = axis === ScrollAxis.Horizontal ?
-        element.scrollWidth - element.clientWidth :
-        element.scrollHeight - element.clientHeight;
-    return Math.ceil(element[axis]) >= elementSize;
-};
-/**
- * @hidden
- *
- * Scrolls the element in the given direction by the provided step in the provided scroll axis.
- *
- * If the targeted scroll incrementation doesn't yield any result due to device pixel ratio issues (https://github.com/dimitar-pechev/RenderingIndependentScrollOffsets#readme),
- * increments the step with 1px and again attempts to change the scrollTop of the element, until the content is actually scrolled.
- *
- * Cuts the operation short after 20 unsuccessful attempts to prevent infinite loops in possible corner-case scenarios.
- */
-const scrollElement = (element, step, direction, scrollAxis) => {
-    if (!(isPresent(element) && isDocumentAvailable())) {
-        return;
-    }
-    const initialScrollPosition = element[scrollAxis];
-    let currentStep = step;
-    let iterations = 0;
-    while (initialScrollPosition === element[scrollAxis] &&
-        !(direction === ScrollDirection.Backwards && isUpperLimitReached(element, scrollAxis)) &&
-        !(direction === ScrollDirection.Forward && isBottomLimitReached(element, scrollAxis)) &&
-        iterations < 20 // cut the operation short in 20 attempts - in case of a wild corner case
-    ) {
-        element[scrollAxis] += (currentStep * direction);
-        // try with a larger step if the current one doesn't update the scroll position successfully
-        currentStep += 1;
-        iterations += 1;
-    }
-};
-/**
- * @hidden
- *
- * As client coordinates are not restricted to the range 0px - {viewportSize}px, but can have negative starting values or ending values greater than the viewport size,
- * this function extracts the visible boundaries of the provided element - fall-backing to 0 when the top/left are below 0,
- * and fall-backing to the actual visible size of the container for bottom/right.
- */
-const getViewportBoundaries = (element) => {
-    const elementRect = element.getBoundingClientRect();
-    // if the beginning of the scrollable container is above/before the current viewport, fall-back to 0
-    const topLimit = Math.max(elementRect.top, 0);
-    const leftLimit = Math.max(elementRect.left, 0);
-    // if the end of the scrollable container is beneath/after the current viewport, fall-back to its client height
-    // add the distance from the start of the viewport to the beginning of the container to ensure scrolling bottom begins when the actual end of the container is reached
-    const bottomLimit = topLimit + Math.min(elementRect.bottom, element.clientHeight);
-    const rightLimit = leftLimit + Math.min(elementRect.right, element.clientWidth);
-    return {
-        top: topLimit,
-        bottom: bottomLimit,
-        left: leftLimit,
-        right: rightLimit
-    };
-};
-
-/**
- * @hidden
- *
- * Notifies the timeline-scroll.directive to scroll into view to requested coordinates.
- * The scrolling is performed based on client (viewport) coordinates.
- */
-class TimelineScrollService {
-    constructor() {
-        this.horizontalScroll = new Subject();
-        this.verticalScroll = new Subject();
-        this.scrollCancel = new Subject();
-    }
-    ngOnDestroy() {
-        this.horizontalScroll.complete();
-        this.verticalScroll.complete();
-        this.scrollCancel.complete();
-    }
-    requestHorizontalScroll(clientTop) {
-        this.horizontalScroll.next(clientTop);
-    }
-    requestVerticalScroll(clientLeft) {
-        this.verticalScroll.next(clientLeft);
-    }
-    requestScrollCancel() {
-        this.scrollCancel.next();
-    }
-}
-TimelineScrollService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TimelineScrollService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineScrollService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineScrollService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * @hidden
- */
-class TimelineScrollableDirective {
-    constructor(timelineScrollableContainer, scrollService, zone) {
-        this.timelineScrollableContainer = timelineScrollableContainer;
-        this.scrollService = scrollService;
-        this.zone = zone;
-        this.subscriptions = new Subscription();
-        this.subscriptions.add(this.scrollService.horizontalScroll
-            .subscribe(this.scrollHorizontallyTo.bind(this)));
-        this.subscriptions.add(this.scrollService.verticalScroll
-            .subscribe(this.scrollVerticallyTo.bind(this)));
-        this.subscriptions.add(this.scrollService.scrollCancel
-            .subscribe(this.cancelScroll.bind(this)));
+        this.subscriptions.add(this.scrollService.horizontalScroll
+            .subscribe(this.scrollHorizontallyTo.bind(this)));
+        this.subscriptions.add(this.scrollService.verticalScroll
+            .subscribe(this.scrollVerticallyTo.bind(this)));
+        this.subscriptions.add(this.scrollService.scrollCancel
+            .subscribe(this.cancelScroll.bind(this)));
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
@@ -2781,11 +2659,12 @@ class TimelineScrollableDirective {
     }
 }
 TimelineScrollableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineScrollableDirective, deps: [{ token: i0.ElementRef }, { token: TimelineScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-TimelineScrollableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TimelineScrollableDirective, selector: "[kendoGanttTimelineScrollable]", inputs: { scrollSettings: "scrollSettings" }, ngImport: i0 });
+TimelineScrollableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TimelineScrollableDirective, isStandalone: true, selector: "[kendoGanttTimelineScrollable]", inputs: { scrollSettings: "scrollSettings" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineScrollableDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoGanttTimelineScrollable]'
+                    selector: '[kendoGanttTimelineScrollable]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: TimelineScrollService }, { type: i0.NgZone }]; }, propDecorators: { scrollSettings: [{
                 type: Input
@@ -2794,86 +2673,207 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 /**
  * @hidden
  */
-class GanttTimelineComponent {
-    constructor(scrollSyncService, dependencyDomService, renderer, zone, currentTimeMarkerService) {
-        this.scrollSyncService = scrollSyncService;
-        this.dependencyDomService = dependencyDomService;
-        this.renderer = renderer;
-        this.zone = zone;
-        this.currentTimeMarkerService = currentTimeMarkerService;
-        this.dependencies = [];
-        // as all drag-and-drop operations are on the timeline container, use a single draggable instance
-        this.timelineContainerPress = new EventEmitter();
-        this.timelineContainerDrag = new EventEmitter();
-        this.timelineContainerRelease = new EventEmitter();
-        this.subscriptions = new Subscription();
-        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`);
-        }));
-    }
-    /**
-     * Specifies whether the draggable will attach or detach its pointer event listeners.
-     */
-    get draggableEnabled() {
-        return this.renderDependencyDragClues;
-    }
-    ngOnChanges(changes) {
-        if (changes['currentTimeMarker']) {
-            this.createTimeMarker();
-        }
-    }
-    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);
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    isNonWorking(item) {
-        return item.hasOwnProperty('isWorking') && !item.isWorking;
-    }
-    createTimeMarker() {
-        this.zone.runOutsideAngular(() => {
-            var _a;
-            this.currentTimeMarkerService.removeTimeMarker();
-            if ((typeof this.currentTimeMarker === 'boolean' && this.currentTimeMarker) || ((_a = this.currentTimeMarker) === null || _a === void 0 ? void 0 : _a.enabled)) {
-                this.currentTimeMarkerService.createTimeMarker();
-            }
-        });
+class GanttHeaderTableBodyComponent {
+    constructor() {
+        this.tbodyClass = true;
     }
 }
-GanttTimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttTimelineComponent, deps: [{ token: ScrollSyncService }, { token: DependencyDomService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: CurrentTimeMarkerService }], target: i0.ɵɵFactoryTarget.Component });
-GanttTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GanttTimelineComponent, 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", 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: "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">
+GanttHeaderTableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttHeaderTableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GanttHeaderTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GanttHeaderTableBodyComponent, isStandalone: true, selector: "[kendoGanttHeaderTableBody]", inputs: { groupSlots: "groupSlots", slots: "slots" }, host: { properties: { "class.k-table-tbody": "this.tbodyClass" } }, ngImport: i0, template: `
+        <tr class="k-table-row">
+            <td *ngFor="let item of groupSlots" [attr.colspan]="item.span" class="k-header k-table-td">{{ item.text }}</td>
+        </tr>
+
+        <tr class="k-table-row">
+            <td *ngFor="let item of slots" class="k-header k-table-td" [attr.colspan]="item.span === 7 ? item.span : 1" [attr.title]="item.text">{{ item.text }}</td>
+        </tr>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttHeaderTableBodyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoGanttHeaderTableBody]',
+                    template: `
+        <tr class="k-table-row">
+            <td *ngFor="let item of groupSlots" [attr.colspan]="item.span" class="k-header k-table-td">{{ item.text }}</td>
+        </tr>
+
+        <tr class="k-table-row">
+            <td *ngFor="let item of slots" class="k-header k-table-td" [attr.colspan]="item.span === 7 ? item.span : 1" [attr.title]="item.text">{{ item.text }}</td>
+        </tr>
+    `,
+                    standalone: true,
+                    imports: [NgFor]
+                }]
+        }], propDecorators: { tbodyClass: [{
+                type: HostBinding,
+                args: ['class.k-table-tbody']
+            }], groupSlots: [{
+                type: Input
+            }], slots: [{
+                type: Input
+            }] } });
+
+const MS_PER_SECOND = 1000;
+const MS_PER_MINUTE = 60 * MS_PER_SECOND;
+/**
+ * @hidden
+ */
+class CurrentTimeMarkerService {
+    constructor(renderer, cdr) {
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.slots = [];
+        this.rows = [];
+        this.now = new Date(Date.now());
+        this.createTimeMarker = () => {
+            if (!isDocumentAvailable()) {
+                return;
+            }
+            this.removeTimeMarker();
+            if (this.slotIndex >= 0) {
+                this.now = new Date(Date.now());
+                this.timeMarkerDiv = this.renderer.createElement('div');
+                this.renderer.addClass(this.timeMarkerDiv, 'k-current-time');
+                this.renderer.setStyle(this.timeMarkerDiv, 'width', '1px');
+                this.renderer.setStyle(this.timeMarkerDiv, 'top', '0px');
+                this.renderer.setStyle(this.timeMarkerDiv, `${this.rtl ? 'right' : 'left'}`, this.deltaOffset + 'px');
+                this.renderer.appendChild(this.container.nativeElement, this.timeMarkerDiv);
+                this.renderer.setStyle(this.timeMarkerDiv, 'height', this.height + 'px');
+                this.currentTimeTimeout = setTimeout(this.createTimeMarker, this.interval || MS_PER_MINUTE);
+            }
+        };
+    }
+    get deltaOffset() {
+        if (this.slotIndex >= 0) {
+            const total = this.slots[this.slotIndex].end.getTime() - this.slots[this.slotIndex].start.getTime();
+            if (total > 0) {
+                const currentTimeValue = this.now.getTime() - this.slots[this.slotIndex].start.getTime();
+                const fractionInsideCell = currentTimeValue / total;
+                const deltaOffsetToSlot = this.slotIndex * this.slotWidth;
+                const deltaOffsetInsideSlot = fractionInsideCell * this.slotWidth;
+                return deltaOffsetToSlot + deltaOffsetInsideSlot;
+            }
+            return 0;
+        }
+    }
+    get slotWidth() {
+        var _a;
+        return (_a = this.slots[0]) === null || _a === void 0 ? void 0 : _a.slotWidth;
+    }
+    get slotIndex() {
+        return this.slots.indexOf(this.slots.find((slot) => slot.start <= this.now && slot.end > this.now));
+    }
+    get height() {
+        return this.rows.length * this.rowHeight;
+    }
+    get interval() {
+        var _a;
+        if (typeof (this.currentTimeMarker) === 'boolean') {
+            return MS_PER_MINUTE;
+        }
+        return ((_a = this.currentTimeMarker) === null || _a === void 0 ? void 0 : _a.updateInterval) || MS_PER_MINUTE;
+    }
+    ngOnDestroy() {
+        clearTimeout(this.currentTimeTimeout);
+    }
+    removeTimeMarker() {
+        if (this.timeMarkerDiv) {
+            this.renderer.removeChild(this.container.nativeElement, this.timeMarkerDiv);
+            clearTimeout(this.currentTimeTimeout);
+            this.cdr.detectChanges();
+        }
+    }
+}
+CurrentTimeMarkerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CurrentTimeMarkerService, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable });
+CurrentTimeMarkerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CurrentTimeMarkerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CurrentTimeMarkerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; } });
+
+/**
+ * @hidden
+ */
+class GanttTimelineComponent {
+    constructor(scrollSyncService, dependencyDomService, renderer, zone, currentTimeMarkerService) {
+        this.scrollSyncService = scrollSyncService;
+        this.dependencyDomService = dependencyDomService;
+        this.renderer = renderer;
+        this.zone = zone;
+        this.currentTimeMarkerService = currentTimeMarkerService;
+        this.dependencies = [];
+        // as all drag-and-drop operations are on the timeline container, use a single draggable instance
+        this.timelineContainerPress = new EventEmitter();
+        this.timelineContainerDrag = new EventEmitter();
+        this.timelineContainerRelease = new EventEmitter();
+        this.subscriptions = new Subscription();
+        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`);
+        }));
+    }
+    /**
+     * Specifies whether the draggable will attach or detach its pointer event listeners.
+     */
+    get draggableEnabled() {
+        return this.renderDependencyDragClues;
+    }
+    ngOnChanges(changes) {
+        if (changes['currentTimeMarker']) {
+            this.createTimeMarker();
+        }
+    }
+    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);
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    isNonWorking(item) {
+        return item.hasOwnProperty('isWorking') && !item.isWorking;
+    }
+    createTimeMarker() {
+        this.zone.runOutsideAngular(() => {
+            var _a;
+            this.currentTimeMarkerService.removeTimeMarker();
+            if ((typeof this.currentTimeMarker === 'boolean' && this.currentTimeMarker) || ((_a = this.currentTimeMarker) === null || _a === void 0 ? void 0 : _a.enabled)) {
+                this.currentTimeMarkerService.createTimeMarker();
+            }
+        });
+    }
+}
+GanttTimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttTimelineComponent, deps: [{ token: ScrollSyncService }, { token: DependencyDomService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: CurrentTimeMarkerService }], target: i0.ɵɵFactoryTarget.Component });
+GanttTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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", 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: "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>
@@ -2964,7 +2964,7 @@ GanttTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 <ng-container #dragPopupContainer></ng-container>
             </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.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"] }, { kind: "component", type: GanttHeaderTableBodyComponent, selector: "[kendoGanttHeaderTableBody]", inputs: ["groupSlots", "slots"] }, { kind: "directive", type: GanttDependencyDirective, selector: "[kendoGanttDependency]", inputs: ["dependency"] }, { kind: "directive", type: TimelineScrollableDirective, selector: "[kendoGanttTimelineScrollable]", inputs: ["scrollSettings"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: GanttTasksTableBodyComponent, selector: "[kendoGanttTasksTableBody]", inputs: ["selectable", "rows", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "isExpanded", "isTaskSelected", "renderDependencyDragClues"] }, { kind: "directive", type: GanttDependencyDirective, selector: "[kendoGanttDependency]", inputs: ["dependency"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttTimelineComponent, decorators: [{
             type: Component,
             args: [{
@@ -3072,7 +3072,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 <ng-container #dragPopupContainer></ng-container>
             </div>
         </div>
-    `
+    `,
+                    standalone: true,
+                    imports: [TableDirective, GanttHeaderTableBodyComponent, TimelineScrollableDirective, DraggableDirective, NgFor, GanttTasksTableBodyComponent, GanttDependencyDirective]
                 }]
         }], ctorParameters: function () { return [{ type: ScrollSyncService }, { type: DependencyDomService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: CurrentTimeMarkerService }]; }, propDecorators: { timelineContent: [{
                 type: ViewChild,
@@ -3203,11 +3205,12 @@ class CellTemplateDirective {
     }
 }
 CellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CellTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-CellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CellTemplateDirective, selector: "[kendoGanttCellTemplate]", ngImport: i0 });
+CellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CellTemplateDirective, isStandalone: true, selector: "[kendoGanttCellTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoGanttCellTemplate]'
+                    selector: '[kendoGanttCellTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () {
         return [{ type: i0.TemplateRef, decorators: [{
@@ -3231,11 +3234,12 @@ class ColumnMenuTemplateDirective {
     }
 }
 ColumnMenuTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-ColumnMenuTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ColumnMenuTemplateDirective, selector: "[kendoGanttColumnMenuTemplate]", ngImport: i0 });
+ColumnMenuTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ColumnMenuTemplateDirective, isStandalone: true, selector: "[kendoGanttColumnMenuTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoGanttColumnMenuTemplate]'
+                    selector: '[kendoGanttColumnMenuTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () {
         return [{ type: i0.TemplateRef, decorators: [{
@@ -3258,11 +3262,12 @@ class FilterCellTemplateDirective {
     }
 }
 FilterCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterCellTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-FilterCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FilterCellTemplateDirective, selector: "[kendoGanttFilterCellTemplate]", ngImport: i0 });
+FilterCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FilterCellTemplateDirective, isStandalone: true, selector: "[kendoGanttFilterCellTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoGanttFilterCellTemplate]'
+                    selector: '[kendoGanttFilterCellTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () {
         return [{ type: i0.TemplateRef, decorators: [{
@@ -3284,11 +3289,12 @@ class FilterMenuTemplateDirective {
     }
 }
 FilterMenuTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterMenuTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-FilterMenuTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FilterMenuTemplateDirective, selector: "[kendoGanttFilterMenuTemplate]", ngImport: i0 });
+FilterMenuTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FilterMenuTemplateDirective, isStandalone: true, selector: "[kendoGanttFilterMenuTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterMenuTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoGanttFilterMenuTemplate]'
+                    selector: '[kendoGanttFilterMenuTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () {
         return [{ type: i0.TemplateRef, decorators: [{
@@ -3314,11 +3320,12 @@ class FooterTemplateDirective {
     }
 }
 FooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-FooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FooterTemplateDirective, selector: "[kendoGanttFooterTemplate]", ngImport: i0 });
+FooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FooterTemplateDirective, isStandalone: true, selector: "[kendoGanttFooterTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FooterTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoGanttFooterTemplate]'
+                    selector: '[kendoGanttFooterTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () {
         return [{ type: i0.TemplateRef, decorators: [{
@@ -3342,11 +3349,12 @@ class HeaderTemplateDirective {
     }
 }
 HeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-HeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: HeaderTemplateDirective, selector: "[kendoGanttHeaderTemplate]", ngImport: i0 });
+HeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: HeaderTemplateDirective, isStandalone: true, selector: "[kendoGanttHeaderTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoGanttHeaderTemplate]'
+                    selector: '[kendoGanttHeaderTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () {
         return [{ type: i0.TemplateRef, decorators: [{
@@ -3374,11 +3382,12 @@ class EditTemplateDirective {
     }
 }
 EditTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-EditTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditTemplateDirective, selector: "[kendoGanttEditTemplate]", ngImport: i0 });
+EditTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditTemplateDirective, isStandalone: true, selector: "[kendoGanttEditTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoGanttEditTemplate]'
+                    selector: '[kendoGanttEditTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () {
         return [{ type: i0.TemplateRef, decorators: [{
@@ -3430,7 +3439,7 @@ class GanttColumnComponent extends ColumnComponent {
     }
 }
 GanttColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttColumnComponent, deps: [{ token: OptionChangesService }, { token: GanttColumnBase, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-GanttColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GanttColumnComponent, selector: "kendo-gantt-column", inputs: { format: "format", filter: "filter", filterable: "filterable", editor: "editor", editable: "editable", locked: "locked", lockable: "lockable", hidden: "hidden", media: "media", style: "style", headerStyle: "headerStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", footerClass: "footerClass" }, providers: [
+GanttColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GanttColumnComponent, isStandalone: true, selector: "kendo-gantt-column", inputs: { format: "format", filter: "filter", filterable: "filterable", editor: "editor", editable: "editable", locked: "locked", lockable: "lockable", hidden: "hidden", media: "media", style: "style", headerStyle: "headerStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", footerClass: "footerClass" }, providers: [
         {
             provide: GanttColumnBase,
             useExisting: forwardRef(() => GanttColumnComponent)
@@ -3446,7 +3455,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             provide: GanttColumnBase,
                             useExisting: forwardRef(() => GanttColumnComponent)
                         }
-                    ]
+                    ],
+                    standalone: true
                 }]
         }], ctorParameters: function () {
         return [{ type: OptionChangesService }, { type: GanttColumnBase, decorators: [{
@@ -3544,7 +3554,7 @@ class GanttColumnGroupComponent extends ColumnGroupComponent {
     }
 }
 GanttColumnGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttColumnGroupComponent, deps: [{ token: OptionChangesService }, { token: GanttColumnBase, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-GanttColumnGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GanttColumnGroupComponent, selector: "kendo-gantt-column-group", inputs: { locked: "locked", lockable: "lockable", hidden: "hidden", sortable: "sortable", media: "media", style: "style", headerStyle: "headerStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", footerClass: "footerClass" }, providers: [
+GanttColumnGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GanttColumnGroupComponent, isStandalone: true, selector: "kendo-gantt-column-group", inputs: { locked: "locked", lockable: "lockable", hidden: "hidden", sortable: "sortable", media: "media", style: "style", headerStyle: "headerStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", footerClass: "footerClass" }, providers: [
         {
             provide: GanttColumnBase,
             useExisting: forwardRef(() => GanttColumnGroupComponent)
@@ -3560,7 +3570,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             provide: GanttColumnBase,
                             useExisting: forwardRef(() => GanttColumnGroupComponent)
                         }
-                    ]
+                    ],
+                    standalone: true
                 }]
         }], ctorParameters: function () {
         return [{ type: OptionChangesService }, { type: GanttColumnBase, decorators: [{
@@ -3649,7 +3660,7 @@ class GanttSpanColumnComponent extends SpanColumnComponent {
     }
 }
 GanttSpanColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttSpanColumnComponent, deps: [{ token: OptionChangesService }, { token: GanttColumnBase, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-GanttSpanColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GanttSpanColumnComponent, selector: "kendo-gantt-span-column", inputs: { locked: "locked", lockable: "lockable", editable: "editable", hidden: "hidden", media: "media", style: "style", headerStyle: "headerStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", footerClass: "footerClass" }, providers: [
+GanttSpanColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GanttSpanColumnComponent, isStandalone: true, selector: "kendo-gantt-span-column", inputs: { locked: "locked", lockable: "lockable", editable: "editable", hidden: "hidden", media: "media", style: "style", headerStyle: "headerStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", footerClass: "footerClass" }, providers: [
         {
             provide: GanttColumnBase,
             useExisting: forwardRef(() => GanttSpanColumnComponent)
@@ -3665,7 +3676,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             provide: GanttColumnBase,
                             useExisting: forwardRef(() => GanttSpanColumnComponent)
                         }
-                    ]
+                    ],
+                    standalone: true
                 }]
         }], ctorParameters: function () {
         return [{ type: OptionChangesService }, { type: GanttColumnBase, decorators: [{
@@ -3809,11 +3821,12 @@ class GanttTaskTemplateDirective {
     }
 }
 GanttTaskTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttTaskTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-GanttTaskTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: GanttTaskTemplateDirective, selector: "[kendoGanttTaskTemplate]", ngImport: i0 });
+GanttTaskTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: GanttTaskTemplateDirective, isStandalone: true, selector: "[kendoGanttTaskTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttTaskTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoGanttTaskTemplate]'
+                    selector: '[kendoGanttTaskTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () {
         return [{ type: i0.TemplateRef, decorators: [{
@@ -3856,11 +3869,12 @@ class GanttSummaryTaskTemplateDirective {
     }
 }
 GanttSummaryTaskTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttSummaryTaskTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-GanttSummaryTaskTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: GanttSummaryTaskTemplateDirective, selector: "[kendoGanttSummaryTaskTemplate]", ngImport: i0 });
+GanttSummaryTaskTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: GanttSummaryTaskTemplateDirective, isStandalone: true, selector: "[kendoGanttSummaryTaskTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttSummaryTaskTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoGanttSummaryTaskTemplate]'
+                    selector: '[kendoGanttSummaryTaskTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () {
         return [{ type: i0.TemplateRef, decorators: [{
@@ -3898,11 +3912,12 @@ class GanttTaskContentTemplateDirective {
     }
 }
 GanttTaskContentTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttTaskContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-GanttTaskContentTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: GanttTaskContentTemplateDirective, selector: "[kendoGanttTaskContentTemplate]", ngImport: i0 });
+GanttTaskContentTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: GanttTaskContentTemplateDirective, isStandalone: true, selector: "[kendoGanttTaskContentTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttTaskContentTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoGanttTaskContentTemplate]'
+                    selector: '[kendoGanttTaskContentTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () {
         return [{ type: i0.TemplateRef, decorators: [{
@@ -4019,11 +4034,12 @@ class ToolbarTemplateDirective {
     }
 }
 ToolbarTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-ToolbarTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ToolbarTemplateDirective, selector: "[kendoGanttToolbarTemplate]", inputs: { position: "position" }, ngImport: i0 });
+ToolbarTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ToolbarTemplateDirective, isStandalone: true, selector: "[kendoGanttToolbarTemplate]", inputs: { position: "position" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoGanttToolbarTemplate]'
+                    selector: '[kendoGanttToolbarTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () {
         return [{ type: i0.TemplateRef, decorators: [{
@@ -4093,851 +4109,863 @@ const mapPath = (item) => ({
 /**
  * @hidden
  */
-class ToolbarNavigationService {
-    constructor(renderer) {
-        this.renderer = renderer;
-        this.focusIndex = 0;
-    }
-    updateFocus() {
-        this.focusableContent.forEach(el => {
-            this.renderer.setAttribute(el, 'tabindex', '-1');
-        });
-        this.renderer.setAttribute(this.focusableContent[this.focusIndex], 'tabindex', '0');
-        this.focusableContent[this.focusIndex].focus();
-    }
-}
-ToolbarNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarNavigationService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
-ToolbarNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarNavigationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarNavigationService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
-
-/**
- * The Gantt ViewSelector component. Shows the currently active view type, and allows switching to another view type.
- */
-class ViewSelectorComponent {
-    constructor(localizationService) {
+class DependenciesTableComponent {
+    constructor(mapper, editService, localizationService) {
+        this.mapper = mapper;
+        this.editService = editService;
         this.localizationService = localizationService;
-        this.hostClass = true;
-        /**
-         * The currently active view type.
-         * @default 'week'
-         */
-        this.activeView = 'week';
-        /**
-         * Fires each time the user selects a different view type. The event data contains the type of the newly selected view.
-         */
-        this.activeViewChange = new EventEmitter();
-    }
-    /**
-     * @hidden
-     */
-    onClick(viewType) {
-        if (viewType !== this.activeView) {
-            this.activeViewChange.emit(viewType);
-        }
+        this.dependenciesChange = new EventEmitter();
+        this.selectedKeys = [];
+        this.formGroups = new FormArray([]);
+        this.dependencyTypes = this.getDependencyTypes();
+        this.plusIcon = plusIcon;
+        this.minusIcon = minusIcon;
     }
-    /**
-     * @hidden
-     */
-    getViewTypeText(viewType) {
-        return this.localizationService.get(`${viewType}ViewText`);
+    get taskId() {
+        return this.editService.dataItem.id;
     }
-    /**
-     * @hidden
-     */
-    onActiveViewChange(event) {
-        this.activeViewChange.emit(event.target.value);
+    // The target dependency id field
+    // e.g. if Predecessors, we have the `fromId` which is the currently edited task,
+    // while the `toId` is missing (needs to be selected by the user)
+    get dependencyIdField() {
+        return this.dependencyType === 'predecessor' ? 'fromId' : 'toId';
+    }
+    ngOnInit() {
+        // generate the FormGroups per each Grid row
+        if (this.formGroups.controls.length === 0) {
+            const fields = this.mapper.dependencyFields;
+            this.dependencies.forEach(item => {
+                const formGroup = new FormGroup({
+                    [fields.id]: new FormControl(this.mapper.extractFromDependency(item, 'id')),
+                    [fields.fromId]: new FormControl(this.mapper.extractFromDependency(item, 'fromId'), Validators.required),
+                    [fields.toId]: new FormControl(this.mapper.extractFromDependency(item, 'toId'), Validators.required),
+                    [fields.type]: new FormControl(this.mapper.extractFromDependency(item, 'type'), Validators.required)
+                });
+                this.formGroups.push(formGroup);
+            });
+        }
+        this.formGroups.valueChanges.subscribe(val => {
+            this.formGroups.controls.forEach(control => {
+                if (control.dirty) {
+                    this.editService.updateDependencies(control.value);
+                }
+            });
+            this.dependenciesChange.emit(val);
+        });
+    }
+    getFormControl(dataItemIndex, field) {
+        // return the FormControl for the respective column editor
+        return this.formGroups.controls
+            .find((_control, index) => index === dataItemIndex)
+            .get(this.mapper.dependencyFields[field]);
+    }
+    getText(token) {
+        return this.localizationService.get(token);
+    }
+    getDependencyTypes() {
+        const types = Object.keys(DependencyType)
+            .filter(value => typeof DependencyType[value] === 'number')
+            .map(type => {
+            return {
+                type,
+                id: DependencyType[type]
+            };
+        });
+        return types;
+    }
+    addHandler() {
+        const fields = this.mapper.dependencyFields;
+        const formGroup = new FormGroup({
+            [fields.id]: new FormControl(),
+            [fields.fromId]: new FormControl(this.dependencyIdField === 'toId' ? this.taskId : null, Validators.required),
+            [fields.toId]: new FormControl(this.dependencyIdField === 'fromId' ? this.taskId : null, Validators.required),
+            [fields.type]: new FormControl(null, Validators.required)
+        });
+        this.formGroups.push(formGroup);
+    }
+    removeHandler() {
+        const [selectedIndex] = this.selectedKeys;
+        const item = this.formGroups.at(selectedIndex).value;
+        this.editService.deleteDependency(item);
+        this.formGroups.removeAt(selectedIndex);
     }
 }
-ViewSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewSelectorComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ViewSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ViewSelectorComponent, selector: "kendo-gantt-view-selector", inputs: { views: "views", activeView: "activeView" }, outputs: { activeViewChange: "activeViewChange" }, host: { properties: { "class.k-gantt-views-wrapper": "this.hostClass" } }, ngImport: i0, template: `
-        <select
-            class="k-dropdownlist k-picker k-rounded-md k-views-dropdown"
-            aria-label="View Selector"
-            [value]="activeView"
-            (change)="onActiveViewChange($event)">
-            <option *ngFor="let view of views" [value]="view">{{getViewTypeText(view)}}</option>
-        </select>
-        <kendo-buttongroup class="k-gantt-views" selection="single" [navigable]="false">
-            <button *ngFor="let view of views"
-                kendoButton
-                type="button"
-                [selected]="view === activeView"
-                (click)="onClick(view)">{{getViewTypeText(view)}}</button>
-        </kendo-buttongroup>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: i4.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewSelectorComponent, decorators: [{
+DependenciesTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DependenciesTableComponent, deps: [{ token: MappingService }, { token: EditService }, { token: GanttLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DependenciesTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DependenciesTableComponent, isStandalone: true, selector: "kendo-gantt-dependencies-table", inputs: { tasks: "tasks", dependencies: "dependencies", dependencyType: "dependencyType" }, outputs: { dependenciesChange: "dependenciesChange" }, ngImport: i0, template: `
+        <kendo-grid
+            [data]="dependencies"
+            [selectable]="{ mode: 'single' }"
+            [(selectedKeys)]="selectedKeys"
+            kendoGridSelectBy
+            [height]="275"
+        >
+            <ng-template kendoGridToolbarTemplate>
+                <button
+                    kendoButton
+                    icon="plus"
+                    [svgIcon]="plusIcon"
+                    (click)="addHandler()"
+                >
+                    {{ getText('taskEditingDependenciesAddButtonText') }}
+                </button>
+                <button
+                    kendoButton
+                    icon="minus"
+                    [svgIcon]="minusIcon"
+                    [disabled]="selectedKeys.length === 0"
+                    (click)="removeHandler()"
+                >
+                    {{ getText('taskEditingDependenciesRemoveButtonText') }}
+                </button>
+            </ng-template>
+            <kendo-grid-column [title]="getText('taskEditingDependenciesGridNameColumnTitle')" [field]="dependencyIdField">
+                <ng-template kendoGridCellTemplate let-dataItem="dataItem" let-column="column" let-rowIndex="rowIndex">
+                    <kendo-dropdownlist
+                        [data]="tasks"
+                        textField="title"
+                        valueField="id"
+                        [valuePrimitive]="true"
+                        [formControl]="getFormControl(rowIndex, column.field)"
+                    >
+                    </kendo-dropdownlist>
+                </ng-template>
+            </kendo-grid-column>
+            <kendo-grid-column [title]="getText('taskEditingDependenciesGridTypeColumnTitle')" field="type">
+                <ng-template kendoGridCellTemplate let-dataItem="dataItem" let-column="column" let-rowIndex="rowIndex">
+                    <kendo-dropdownlist
+                        [data]="dependencyTypes"
+                        textField="type"
+                        valueField="id"
+                        [valuePrimitive]="true"
+                        [formControl]="getFormControl(rowIndex, column.field)"
+                    >
+                    </kendo-dropdownlist>
+                </ng-template>
+            </kendo-grid-column>
+        </kendo-grid>
+    `, isInline: true, dependencies: [{ kind: "component", type: GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "directive", type: ToolbarTemplateDirective$1, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: ColumnComponent$1, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: CellTemplateDirective$1, selector: "[kendoGridCellTemplate]" }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DependenciesTableComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'kendo-gantt-view-selector',
+                    selector: 'kendo-gantt-dependencies-table',
                     template: `
-        <select
-            class="k-dropdownlist k-picker k-rounded-md k-views-dropdown"
-            aria-label="View Selector"
-            [value]="activeView"
-            (change)="onActiveViewChange($event)">
-            <option *ngFor="let view of views" [value]="view">{{getViewTypeText(view)}}</option>
-        </select>
-        <kendo-buttongroup class="k-gantt-views" selection="single" [navigable]="false">
-            <button *ngFor="let view of views"
-                kendoButton
-                type="button"
-                [selected]="view === activeView"
-                (click)="onClick(view)">{{getViewTypeText(view)}}</button>
-        </kendo-buttongroup>
-    `
+        <kendo-grid
+            [data]="dependencies"
+            [selectable]="{ mode: 'single' }"
+            [(selectedKeys)]="selectedKeys"
+            kendoGridSelectBy
+            [height]="275"
+        >
+            <ng-template kendoGridToolbarTemplate>
+                <button
+                    kendoButton
+                    icon="plus"
+                    [svgIcon]="plusIcon"
+                    (click)="addHandler()"
+                >
+                    {{ getText('taskEditingDependenciesAddButtonText') }}
+                </button>
+                <button
+                    kendoButton
+                    icon="minus"
+                    [svgIcon]="minusIcon"
+                    [disabled]="selectedKeys.length === 0"
+                    (click)="removeHandler()"
+                >
+                    {{ getText('taskEditingDependenciesRemoveButtonText') }}
+                </button>
+            </ng-template>
+            <kendo-grid-column [title]="getText('taskEditingDependenciesGridNameColumnTitle')" [field]="dependencyIdField">
+                <ng-template kendoGridCellTemplate let-dataItem="dataItem" let-column="column" let-rowIndex="rowIndex">
+                    <kendo-dropdownlist
+                        [data]="tasks"
+                        textField="title"
+                        valueField="id"
+                        [valuePrimitive]="true"
+                        [formControl]="getFormControl(rowIndex, column.field)"
+                    >
+                    </kendo-dropdownlist>
+                </ng-template>
+            </kendo-grid-column>
+            <kendo-grid-column [title]="getText('taskEditingDependenciesGridTypeColumnTitle')" field="type">
+                <ng-template kendoGridCellTemplate let-dataItem="dataItem" let-column="column" let-rowIndex="rowIndex">
+                    <kendo-dropdownlist
+                        [data]="dependencyTypes"
+                        textField="type"
+                        valueField="id"
+                        [valuePrimitive]="true"
+                        [formControl]="getFormControl(rowIndex, column.field)"
+                    >
+                    </kendo-dropdownlist>
+                </ng-template>
+            </kendo-grid-column>
+        </kendo-grid>
+    `,
+                    standalone: true,
+                    imports: [GridComponent, SelectionDirective, ToolbarTemplateDirective$1, ButtonComponent, ColumnComponent$1, CellTemplateDirective$1, DropDownListComponent, ReactiveFormsModule]
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; }, propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class.k-gantt-views-wrapper']
-            }], views: [{
+        }], ctorParameters: function () { return [{ type: MappingService }, { type: EditService }, { type: GanttLocalizationService }]; }, propDecorators: { tasks: [{
                 type: Input
-            }], activeView: [{
+            }], dependencies: [{
                 type: Input
-            }], activeViewChange: [{
+            }], dependencyType: [{
+                type: Input
+            }], dependenciesChange: [{
                 type: Output
             }] } });
 
 /**
- * The UI for adding new items to the Gantt.
- * Use it within a toolbar template to provide a custom icon or list of options.
+ * @hidden
  */
-class GanttAddTaskComponent {
-    constructor(localizationService, editService, ngZone) {
-        this.localizationService = localizationService;
+class TaskFieldsComponent {
+    constructor(mapper, editService, localizationService) {
+        this.mapper = mapper;
         this.editService = editService;
-        this.ngZone = ngZone;
-        /**
-         * Sets the data of the DropDownButton.
-         * > The data has to be provided in an array-like list.
-         */
-        this.data = [{
-                text: this.getText('addChildText'),
-                type: 'addChild'
-            }, {
-                text: this.getText('addAboveText'),
-                type: 'addAbove'
-            }, {
-                text: this.getText('addBelowText'),
-                type: 'addBelow'
-            }];
-        /**
-         * Defines the name of an existing icon in a Kendo UI theme.
-         * @default 'plus'
-         */
-        this.icon = 'plus';
-        /**
-         * Defines an [`SVGIcon`](slug:api_icons_svgicon) icon to be rendered inside the `GanttAddTaskComponent` using
-         * a [`KendoSVGIcon`](slug:api_icons_svgiconcomponent) component.
-         */
-        this.svgIcon = plusIcon;
+        this.localizationService = localizationService;
     }
     /**
      * @hidden
      */
-    getText(message) {
-        return this.localizationService.get(message);
+    get formGroup() {
+        return this.editService.taskFormGroup;
     }
-    /**
-     * @hidden
-     */
-    handleOpen(e) {
-        if (!this.editService.getSelectedItem()) {
-            e.preventDefault();
-        }
-    }
-    /**
-     * @hidden
-     */
-    handleMouseClick() {
-        if (!this.editService.getSelectedItem()) {
-            this.ngZone.run(() => {
-                this.editService.addEvent.next({
-                    selectedItem: null,
-                    actionType: 'addTask'
-                });
-            });
-        }
-    }
-    /**
-     * @hidden
-     */
-    handleItemClick(e) {
-        this.editService.addEvent.next({
-            actionType: e.type,
-            selectedItem: null
-        });
+    getText(token) {
+        return this.localizationService.get(token);
     }
 }
-GanttAddTaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttAddTaskComponent, deps: [{ token: i1$1.LocalizationService }, { token: EditService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-GanttAddTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GanttAddTaskComponent, selector: "kendo-gantt-add-task", inputs: { data: "data", icon: "icon", svgIcon: "svgIcon" }, ngImport: i0, template: `
-        <kendo-dropdownbutton
-            [data]="data"
-            [icon]="icon"
-            [svgIcon]="svgIcon"
-            [kendoEventsOutsideAngular]="{ click: handleMouseClick }"
-            [scope]="this"
-            (itemClick)="handleItemClick($event)"
-            (open)="handleOpen($event)">
-            {{ getText('addTaskText') }}
-        </kendo-dropdownbutton>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i11.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i4.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttAddTaskComponent, decorators: [{
+TaskFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TaskFieldsComponent, deps: [{ token: MappingService }, { token: EditService }, { token: GanttLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+TaskFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TaskFieldsComponent, isStandalone: true, selector: "kendo-gantt-task-fields", ngImport: i0, template: `
+        <form class="k-form k-form-md" [formGroup]="formGroup">
+            <kendo-formfield *ngIf="formGroup.get(mapper.taskFields.title)">
+                <kendo-label [for]="title" [text]="getText('titleFieldInputLabel')"></kendo-label>
+                <input #title kendoTextBox [formControlName]="mapper.taskFields.title" />
+            </kendo-formfield>
+            <div class="k-hstack">
+                <kendo-formfield [style.width.%]="49" *ngIf="formGroup.get(mapper.taskFields.start)">
+                    <kendo-label [for]="start" [text]="getText('startFieldInputLabel')"></kendo-label>
+                    <kendo-datetimepicker #start [formControlName]="mapper.taskFields.start"></kendo-datetimepicker>
+                </kendo-formfield>
+                <kendo-treelist-spacer></kendo-treelist-spacer>
+                <kendo-formfield [style.width.%]="49" *ngIf="formGroup.get(mapper.taskFields.end)">
+                    <kendo-label [for]="end" [text]="getText('endFieldInputLabel')"></kendo-label>
+                    <kendo-datetimepicker #end [formControlName]="mapper.taskFields.end"></kendo-datetimepicker>
+                </kendo-formfield>
+            </div>
+            <kendo-formfield [style.width.%]="49" *ngIf="formGroup.get(mapper.taskFields.completionRatio)">
+                <kendo-label [for]="completionRatio" [text]="getText('completionRatioFieldInputLabel')"></kendo-label>
+                <kendo-numerictextbox
+                    #completionRatio
+                    [formControlName]="mapper.taskFields.completionRatio"
+                    [min]="0"
+                    [max]="1"
+                    [decimals]="2"
+                    format="p2"
+                    [step]="0.01"
+                ></kendo-numerictextbox>
+            </kendo-formfield>
+        </form>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "directive", type: TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { kind: "component", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["focusableId", "weekDaysFormat", "showOtherMonthDays", "value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "title", "subtitle", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "clearButton", "autoFill", "adaptiveMode", "inputAttributes", "defaultTab", "size", "rounded", "fillMode", "headerTemplate", "footerTemplate", "footer"], outputs: ["valueChange", "open", "close", "focus", "blur", "escape"], exportAs: ["kendo-datetimepicker"] }, { kind: "component", type: TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TaskFieldsComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'kendo-gantt-add-task',
+                    selector: 'kendo-gantt-task-fields',
                     template: `
-        <kendo-dropdownbutton
-            [data]="data"
-            [icon]="icon"
-            [svgIcon]="svgIcon"
-            [kendoEventsOutsideAngular]="{ click: handleMouseClick }"
-            [scope]="this"
-            (itemClick)="handleItemClick($event)"
-            (open)="handleOpen($event)">
-            {{ getText('addTaskText') }}
-        </kendo-dropdownbutton>
-    `
+        <form class="k-form k-form-md" [formGroup]="formGroup">
+            <kendo-formfield *ngIf="formGroup.get(mapper.taskFields.title)">
+                <kendo-label [for]="title" [text]="getText('titleFieldInputLabel')"></kendo-label>
+                <input #title kendoTextBox [formControlName]="mapper.taskFields.title" />
+            </kendo-formfield>
+            <div class="k-hstack">
+                <kendo-formfield [style.width.%]="49" *ngIf="formGroup.get(mapper.taskFields.start)">
+                    <kendo-label [for]="start" [text]="getText('startFieldInputLabel')"></kendo-label>
+                    <kendo-datetimepicker #start [formControlName]="mapper.taskFields.start"></kendo-datetimepicker>
+                </kendo-formfield>
+                <kendo-treelist-spacer></kendo-treelist-spacer>
+                <kendo-formfield [style.width.%]="49" *ngIf="formGroup.get(mapper.taskFields.end)">
+                    <kendo-label [for]="end" [text]="getText('endFieldInputLabel')"></kendo-label>
+                    <kendo-datetimepicker #end [formControlName]="mapper.taskFields.end"></kendo-datetimepicker>
+                </kendo-formfield>
+            </div>
+            <kendo-formfield [style.width.%]="49" *ngIf="formGroup.get(mapper.taskFields.completionRatio)">
+                <kendo-label [for]="completionRatio" [text]="getText('completionRatioFieldInputLabel')"></kendo-label>
+                <kendo-numerictextbox
+                    #completionRatio
+                    [formControlName]="mapper.taskFields.completionRatio"
+                    [min]="0"
+                    [max]="1"
+                    [decimals]="2"
+                    format="p2"
+                    [step]="0.01"
+                ></kendo-numerictextbox>
+            </kendo-formfield>
+        </form>
+    `,
+                    standalone: true,
+                    imports: [ReactiveFormsModule, NgIf, FormFieldComponent, LabelComponent, TextBoxDirective, DateTimePickerComponent, TreeListSpacerComponent, NumericTextBoxComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: EditService }, { type: i0.NgZone }]; }, propDecorators: { data: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], svgIcon: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () { return [{ type: MappingService }, { type: EditService }, { type: GanttLocalizationService }]; } });
 
 /**
  * @hidden
  */
-class ToolbarComponent {
-    constructor(hostEl, navigationService) {
-        this.hostEl = hostEl;
-        this.navigationService = navigationService;
-        this.context = {};
-        this.role = 'toolbar';
-        this.toolbarSizingClass = true;
-        this.activeViewChange = new EventEmitter();
+class EditDialogComponent {
+    constructor(mapper, editService, cdr, localizationService) {
+        this.mapper = mapper;
+        this.editService = editService;
+        this.cdr = cdr;
+        this.localizationService = localizationService;
+        this.saveIcon = saveIcon;
+        this.cancelIcon = cancelOutlineIcon;
+        this.deleteIcon = trashIcon;
     }
-    clickHandler(ev) {
-        if (this.navigable) {
-            const closestFocusable = closest(ev.target, isFocusable);
-            const targetIndex = this.navigationService.focusableContent.indexOf(closestFocusable);
-            if (targetIndex > -1) {
-                this.navigationService.focusIndex = targetIndex;
-            }
-            this.navigationService.updateFocus();
-        }
+    ngOnInit() {
+        this.editService.loadTasks(this.data).subscribe(value => {
+            this.loadedTasks = value;
+        });
     }
-    arrowLeftListener() {
-        if (this.navigable && isDocumentAvailable()) {
-            this.navigationService.focusIndex--;
-            if (this.navigationService.focusIndex < 0) {
-                this.navigationService.focusIndex = this.navigationService.focusableContent.length - 1;
-            }
-            this.navigationService.updateFocus();
-        }
+    get predecessors() {
+        return this.editService.predecessors;
     }
-    arrowRightListener() {
-        if (this.navigable && isDocumentAvailable()) {
-            this.navigationService.focusIndex++;
-            if (this.navigationService.focusIndex >= this.navigationService.focusableContent.length) {
-                this.navigationService.focusIndex = 0;
-            }
-            this.navigationService.updateFocus();
-        }
+    set predecessors(items) {
+        this.editService.predecessors = items;
     }
-    set position(value) {
-        this.context.position = this._position = value;
+    get successors() {
+        return this.editService.successors;
     }
-    get position() {
-        return this._position;
+    set successors(items) {
+        this.editService.successors = items;
     }
-    get toolbarTemplateRef() {
-        return this.toolbarTemplate ? this.toolbarTemplate.templateRef : undefined;
+    getText(token) {
+        return this.localizationService.get(token);
     }
-    get renderTemplate() {
-        const ganttToolbarTemplate = this.toolbarTemplate;
-        const templatePosition = ganttToolbarTemplate ? ganttToolbarTemplate.position : null;
-        return ganttToolbarTemplate && (templatePosition === 'both' || templatePosition === this.position);
+    getDependencyType(typeId) {
+        return DependencyType[typeId];
     }
-    handleViewChange(view) {
-        this.activeViewChange.emit(view);
+    handleEditingResult(editResultType) {
+        this.editService.triggerEditEvent(editResultType);
     }
-    ngAfterViewInit() {
-        if (isDocumentAvailable()) {
-            const focusableElements = Array.from(this.hostEl.nativeElement.querySelectorAll(focusableSelector) || [])
-                .filter(el => isVisible(el));
-            if (focusableElements.length) {
-                this.navigationService.focusableContent = focusableElements;
-            }
-        }
+    handleTaskDelete() {
+        this.editService.taskDelete.next(this.editService.dataItem);
     }
 }
-ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarComponent, deps: [{ token: i0.ElementRef }, { token: ToolbarNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: { showAddTask: "showAddTask", showViewSelector: "showViewSelector", views: "views", activeView: "activeView", toolbarTemplate: "toolbarTemplate", navigable: "navigable", position: "position" }, outputs: { activeViewChange: "activeViewChange" }, host: { listeners: { "click": "clickHandler($event)", "keydown.arrowleft": "arrowLeftListener($event)", "keydown.arrowright": "arrowRightListener($event)" }, properties: { "attr.role": "this.role", "class.k-toolbar-md": "this.toolbarSizingClass" } }, providers: [ToolbarNavigationService], ngImport: i0, template: `
-        <ng-container *ngIf="!renderTemplate">
-            <kendo-gantt-add-task *ngIf="showAddTask"></kendo-gantt-add-task>
-            <span class="k-spacer k-toolbar-spacer"></span>
-            <kendo-gantt-view-selector
-                *ngIf="showViewSelector"
-                [views]="views"
-                [activeView]="activeView"
-                (activeViewChange)="handleViewChange($event)"></kendo-gantt-view-selector>
-        </ng-container>
-        <ng-template
-            *ngIf="renderTemplate"
-            [ngTemplateOutlet]="toolbarTemplateRef"
-            [ngTemplateOutletContext]="context"
-            >
-        </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ViewSelectorComponent, selector: "kendo-gantt-view-selector", inputs: ["views", "activeView"], outputs: ["activeViewChange"] }, { kind: "component", type: GanttAddTaskComponent, selector: "kendo-gantt-add-task", inputs: ["data", "icon", "svgIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-gantt-toolbar',
-                    providers: [ToolbarNavigationService],
-                    template: `
-        <ng-container *ngIf="!renderTemplate">
-            <kendo-gantt-add-task *ngIf="showAddTask"></kendo-gantt-add-task>
-            <span class="k-spacer k-toolbar-spacer"></span>
-            <kendo-gantt-view-selector
-                *ngIf="showViewSelector"
-                [views]="views"
-                [activeView]="activeView"
-                (activeViewChange)="handleViewChange($event)"></kendo-gantt-view-selector>
-        </ng-container>
-        <ng-template
-            *ngIf="renderTemplate"
-            [ngTemplateOutlet]="toolbarTemplateRef"
-            [ngTemplateOutletContext]="context"
-            >
-        </ng-template>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ToolbarNavigationService }]; }, propDecorators: { role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], toolbarSizingClass: [{
-                type: HostBinding,
-                args: ['class.k-toolbar-md']
-            }], clickHandler: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], arrowLeftListener: [{
-                type: HostListener,
-                args: ['keydown.arrowleft', ['$event']]
-            }], arrowRightListener: [{
-                type: HostListener,
-                args: ['keydown.arrowright', ['$event']]
-            }], activeViewChange: [{
-                type: Output
-            }], showAddTask: [{
-                type: Input
-            }], showViewSelector: [{
-                type: Input
-            }], views: [{
-                type: Input
-            }], activeView: [{
-                type: Input
-            }], toolbarTemplate: [{
-                type: Input
-            }], navigable: [{
-                type: Input
-            }], position: [{
+EditDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditDialogComponent, deps: [{ token: MappingService }, { token: EditService }, { token: i0.ChangeDetectorRef }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+EditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: EditDialogComponent, isStandalone: true, selector: "kendo-gantt-edit-dialog", inputs: { data: "data" }, ngImport: i0, template: `
+        <kendo-dialog
+            [title]="getText('taskEditingDialogTitle')"
+            [width]="575"
+            [height]="470"
+            [autoFocusedElement]="'.k-actions .k-button-solid-primary'"
+            (close)="handleEditingResult('cancel')">
+            <kendo-dialog-messages
+                [closeTitle]="getText('taskEditingDialogCloseTitle')"></kendo-dialog-messages>
+
+            <kendo-tabstrip [keepTabContent]="true" [style.height.px]="345">
+                <kendo-tabstrip-tab [title]="getText('taskEditingGeneralTabTitle')" [selected]="true">
+                    <ng-template kendoTabContent>
+                    <kendo-gantt-task-fields></kendo-gantt-task-fields>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+                <kendo-tabstrip-tab [title]="getText('taskEditingPredecessorsTabTitle')">
+                    <ng-template kendoTabContent>
+                        <kendo-gantt-dependencies-table
+                            [tasks]="loadedTasks"
+                            [(dependencies)]="predecessors"
+                            dependencyType="predecessor"
+                        >
+                        </kendo-gantt-dependencies-table>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+                <kendo-tabstrip-tab [title]="getText('taskEditingSuccessorsTabTitle')">
+                    <ng-template kendoTabContent>
+                        <kendo-gantt-dependencies-table
+                            [tasks]="loadedTasks"
+                            [(dependencies)]="successors"
+                            dependencyType="successor">
+                        </kendo-gantt-dependencies-table>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+            </kendo-tabstrip>
+
+            <kendo-dialog-actions layout="start">
+                <button
+                    kendoButton
+                    themeColor="primary"
+                    icon="save"
+                    [svgIcon]="saveIcon"
+                    (click)="handleEditingResult('save')"
+                >
+                    {{ getText('saveButtonText') }}
+                </button>
+                <button
+                    kendoButton
+                    icon="cancel-outline"
+                    [svgIcon]="cancelIcon"
+                    (click)="handleEditingResult('cancel')"
+                >
+                    {{ getText('cancelButtonText') }}
+                </button>
+                <kendo-treelist-spacer></kendo-treelist-spacer>
+                <button
+                    kendoButton
+                    themeColor="primary"
+                    fillMode="flat"
+                    icon="delete"
+                    [svgIcon]="deleteIcon"
+                    [kendoEventsOutsideAngular]="{
+                        click: handleTaskDelete
+                    }"
+                    [scope]="this"
+                >
+                    {{ getText('deleteButtonText') }}
+                </button>
+            </kendo-dialog-actions>
+        </kendo-dialog>
+    `, isInline: true, dependencies: [{ kind: "component", type: DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "directive", type: CustomMessagesComponent$1, selector: "kendo-dialog-messages, kendo-window-messages" }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: TaskFieldsComponent, selector: "kendo-gantt-task-fields" }, { kind: "component", type: DependenciesTableComponent, selector: "kendo-gantt-dependencies-table", inputs: ["tasks", "dependencies", "dependencyType"], outputs: ["dependenciesChange"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-gantt-edit-dialog',
+                    template: `
+        <kendo-dialog
+            [title]="getText('taskEditingDialogTitle')"
+            [width]="575"
+            [height]="470"
+            [autoFocusedElement]="'.k-actions .k-button-solid-primary'"
+            (close)="handleEditingResult('cancel')">
+            <kendo-dialog-messages
+                [closeTitle]="getText('taskEditingDialogCloseTitle')"></kendo-dialog-messages>
+
+            <kendo-tabstrip [keepTabContent]="true" [style.height.px]="345">
+                <kendo-tabstrip-tab [title]="getText('taskEditingGeneralTabTitle')" [selected]="true">
+                    <ng-template kendoTabContent>
+                    <kendo-gantt-task-fields></kendo-gantt-task-fields>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+                <kendo-tabstrip-tab [title]="getText('taskEditingPredecessorsTabTitle')">
+                    <ng-template kendoTabContent>
+                        <kendo-gantt-dependencies-table
+                            [tasks]="loadedTasks"
+                            [(dependencies)]="predecessors"
+                            dependencyType="predecessor"
+                        >
+                        </kendo-gantt-dependencies-table>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+                <kendo-tabstrip-tab [title]="getText('taskEditingSuccessorsTabTitle')">
+                    <ng-template kendoTabContent>
+                        <kendo-gantt-dependencies-table
+                            [tasks]="loadedTasks"
+                            [(dependencies)]="successors"
+                            dependencyType="successor">
+                        </kendo-gantt-dependencies-table>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+            </kendo-tabstrip>
+
+            <kendo-dialog-actions layout="start">
+                <button
+                    kendoButton
+                    themeColor="primary"
+                    icon="save"
+                    [svgIcon]="saveIcon"
+                    (click)="handleEditingResult('save')"
+                >
+                    {{ getText('saveButtonText') }}
+                </button>
+                <button
+                    kendoButton
+                    icon="cancel-outline"
+                    [svgIcon]="cancelIcon"
+                    (click)="handleEditingResult('cancel')"
+                >
+                    {{ getText('cancelButtonText') }}
+                </button>
+                <kendo-treelist-spacer></kendo-treelist-spacer>
+                <button
+                    kendoButton
+                    themeColor="primary"
+                    fillMode="flat"
+                    icon="delete"
+                    [svgIcon]="deleteIcon"
+                    [kendoEventsOutsideAngular]="{
+                        click: handleTaskDelete
+                    }"
+                    [scope]="this"
+                >
+                    {{ getText('deleteButtonText') }}
+                </button>
+            </kendo-dialog-actions>
+        </kendo-dialog>
+    `,
+                    standalone: true,
+                    imports: [DialogComponent, CustomMessagesComponent$1, TabStripComponent, TabStripTabComponent, TabContentDirective, TaskFieldsComponent, DependenciesTableComponent, DialogActionsComponent, ButtonComponent, TreeListSpacerComponent, EventsOutsideAngularDirective]
+                }]
+        }], ctorParameters: function () { return [{ type: MappingService }, { type: EditService }, { type: i0.ChangeDetectorRef }, { type: i1$1.LocalizationService }]; }, propDecorators: { data: [{
                 type: Input
             }] } });
 
 /**
  * @hidden
  */
-class DependenciesTableComponent {
-    constructor(mapper, editService, localizationService) {
-        this.mapper = mapper;
-        this.editService = editService;
-        this.localizationService = localizationService;
-        this.dependenciesChange = new EventEmitter();
-        this.selectedKeys = [];
-        this.formGroups = new FormArray([]);
-        this.dependencyTypes = this.getDependencyTypes();
-        this.plusIcon = plusIcon;
-        this.minusIcon = minusIcon;
-    }
-    get taskId() {
-        return this.editService.dataItem.id;
-    }
-    // The target dependency id field
-    // e.g. if Predecessors, we have the `fromId` which is the currently edited task,
-    // while the `toId` is missing (needs to be selected by the user)
-    get dependencyIdField() {
-        return this.dependencyType === 'predecessor' ? 'fromId' : 'toId';
+class ToolbarNavigationService {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.focusIndex = 0;
     }
-    ngOnInit() {
-        // generate the FormGroups per each Grid row
-        if (this.formGroups.controls.length === 0) {
-            const fields = this.mapper.dependencyFields;
-            this.dependencies.forEach(item => {
-                const formGroup = new FormGroup({
-                    [fields.id]: new FormControl(this.mapper.extractFromDependency(item, 'id')),
-                    [fields.fromId]: new FormControl(this.mapper.extractFromDependency(item, 'fromId'), Validators.required),
-                    [fields.toId]: new FormControl(this.mapper.extractFromDependency(item, 'toId'), Validators.required),
-                    [fields.type]: new FormControl(this.mapper.extractFromDependency(item, 'type'), Validators.required)
-                });
-                this.formGroups.push(formGroup);
-            });
-        }
-        this.formGroups.valueChanges.subscribe(val => {
-            this.formGroups.controls.forEach(control => {
-                if (control.dirty) {
-                    this.editService.updateDependencies(control.value);
-                }
-            });
-            this.dependenciesChange.emit(val);
+    updateFocus() {
+        this.focusableContent.forEach(el => {
+            this.renderer.setAttribute(el, 'tabindex', '-1');
         });
+        this.renderer.setAttribute(this.focusableContent[this.focusIndex], 'tabindex', '0');
+        this.focusableContent[this.focusIndex].focus();
     }
-    getFormControl(dataItemIndex, field) {
-        // return the FormControl for the respective column editor
-        return this.formGroups.controls
-            .find((_control, index) => index === dataItemIndex)
-            .get(this.mapper.dependencyFields[field]);
-    }
-    getText(token) {
-        return this.localizationService.get(token);
+}
+ToolbarNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarNavigationService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
+ToolbarNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarNavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarNavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
+
+/**
+ * The Gantt ViewSelector component. Shows the currently active view type, and allows switching to another view type.
+ */
+class ViewSelectorComponent {
+    constructor(localizationService) {
+        this.localizationService = localizationService;
+        this.hostClass = true;
+        /**
+         * The currently active view type.
+         * @default 'week'
+         */
+        this.activeView = 'week';
+        /**
+         * Fires each time the user selects a different view type. The event data contains the type of the newly selected view.
+         */
+        this.activeViewChange = new EventEmitter();
     }
-    getDependencyTypes() {
-        const types = Object.keys(DependencyType)
-            .filter(value => typeof DependencyType[value] === 'number')
-            .map(type => {
-            return {
-                type,
-                id: DependencyType[type]
-            };
-        });
-        return types;
+    /**
+     * @hidden
+     */
+    onClick(viewType) {
+        if (viewType !== this.activeView) {
+            this.activeViewChange.emit(viewType);
+        }
     }
-    addHandler() {
-        const fields = this.mapper.dependencyFields;
-        const formGroup = new FormGroup({
-            [fields.id]: new FormControl(),
-            [fields.fromId]: new FormControl(this.dependencyIdField === 'toId' ? this.taskId : null, Validators.required),
-            [fields.toId]: new FormControl(this.dependencyIdField === 'fromId' ? this.taskId : null, Validators.required),
-            [fields.type]: new FormControl(null, Validators.required)
-        });
-        this.formGroups.push(formGroup);
+    /**
+     * @hidden
+     */
+    getViewTypeText(viewType) {
+        return this.localizationService.get(`${viewType}ViewText`);
     }
-    removeHandler() {
-        const [selectedIndex] = this.selectedKeys;
-        const item = this.formGroups.at(selectedIndex).value;
-        this.editService.deleteDependency(item);
-        this.formGroups.removeAt(selectedIndex);
+    /**
+     * @hidden
+     */
+    onActiveViewChange(event) {
+        this.activeViewChange.emit(event.target.value);
     }
 }
-DependenciesTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DependenciesTableComponent, deps: [{ token: MappingService }, { token: EditService }, { token: GanttLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-DependenciesTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DependenciesTableComponent, selector: "kendo-gantt-dependencies-table", inputs: { tasks: "tasks", dependencies: "dependencies", dependencyType: "dependencyType" }, outputs: { dependenciesChange: "dependenciesChange" }, ngImport: i0, template: `
-        <kendo-grid
-            [data]="dependencies"
-            [selectable]="{ mode: 'single' }"
-            [(selectedKeys)]="selectedKeys"
-            kendoGridSelectBy
-            [height]="275"
-        >
-            <ng-template kendoGridToolbarTemplate>
-                <button
-                    kendoButton
-                    icon="plus"
-                    [svgIcon]="plusIcon"
-                    (click)="addHandler()"
-                >
-                    {{ getText('taskEditingDependenciesAddButtonText') }}
-                </button>
-                <button
-                    kendoButton
-                    icon="minus"
-                    [svgIcon]="minusIcon"
-                    [disabled]="selectedKeys.length === 0"
-                    (click)="removeHandler()"
-                >
-                    {{ getText('taskEditingDependenciesRemoveButtonText') }}
-                </button>
-            </ng-template>
-            <kendo-grid-column [title]="getText('taskEditingDependenciesGridNameColumnTitle')" [field]="dependencyIdField">
-                <ng-template kendoGridCellTemplate let-dataItem="dataItem" let-column="column" let-rowIndex="rowIndex">
-                    <kendo-dropdownlist
-                        [data]="tasks"
-                        textField="title"
-                        valueField="id"
-                        [valuePrimitive]="true"
-                        [formControl]="getFormControl(rowIndex, column.field)"
-                    >
-                    </kendo-dropdownlist>
-                </ng-template>
-            </kendo-grid-column>
-            <kendo-grid-column [title]="getText('taskEditingDependenciesGridTypeColumnTitle')" field="type">
-                <ng-template kendoGridCellTemplate let-dataItem="dataItem" let-column="column" let-rowIndex="rowIndex">
-                    <kendo-dropdownlist
-                        [data]="dependencyTypes"
-                        textField="type"
-                        valueField="id"
-                        [valuePrimitive]="true"
-                        [formControl]="getFormControl(rowIndex, column.field)"
-                    >
-                    </kendo-dropdownlist>
-                </ng-template>
-            </kendo-grid-column>
-        </kendo-grid>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i6$1.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i6$1.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "directive", type: i6$1.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i6$1.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i6$1.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "component", type: i7.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DependenciesTableComponent, decorators: [{
+ViewSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewSelectorComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ViewSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ViewSelectorComponent, isStandalone: true, selector: "kendo-gantt-view-selector", inputs: { views: "views", activeView: "activeView" }, outputs: { activeViewChange: "activeViewChange" }, host: { properties: { "class.k-gantt-views-wrapper": "this.hostClass" } }, ngImport: i0, template: `
+        <select
+            class="k-dropdownlist k-picker k-rounded-md k-views-dropdown"
+            aria-label="View Selector"
+            [value]="activeView"
+            (change)="onActiveViewChange($event)">
+            <option *ngFor="let view of views" [value]="view">{{getViewTypeText(view)}}</option>
+        </select>
+        <kendo-buttongroup class="k-gantt-views" selection="single" [navigable]="false">
+            <button *ngFor="let view of views"
+                kendoButton
+                type="button"
+                [selected]="view === activeView"
+                (click)="onClick(view)">{{getViewTypeText(view)}}</button>
+        </kendo-buttongroup>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewSelectorComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'kendo-gantt-dependencies-table',
+                    selector: 'kendo-gantt-view-selector',
                     template: `
-        <kendo-grid
-            [data]="dependencies"
-            [selectable]="{ mode: 'single' }"
-            [(selectedKeys)]="selectedKeys"
-            kendoGridSelectBy
-            [height]="275"
-        >
-            <ng-template kendoGridToolbarTemplate>
-                <button
-                    kendoButton
-                    icon="plus"
-                    [svgIcon]="plusIcon"
-                    (click)="addHandler()"
-                >
-                    {{ getText('taskEditingDependenciesAddButtonText') }}
-                </button>
-                <button
-                    kendoButton
-                    icon="minus"
-                    [svgIcon]="minusIcon"
-                    [disabled]="selectedKeys.length === 0"
-                    (click)="removeHandler()"
-                >
-                    {{ getText('taskEditingDependenciesRemoveButtonText') }}
-                </button>
-            </ng-template>
-            <kendo-grid-column [title]="getText('taskEditingDependenciesGridNameColumnTitle')" [field]="dependencyIdField">
-                <ng-template kendoGridCellTemplate let-dataItem="dataItem" let-column="column" let-rowIndex="rowIndex">
-                    <kendo-dropdownlist
-                        [data]="tasks"
-                        textField="title"
-                        valueField="id"
-                        [valuePrimitive]="true"
-                        [formControl]="getFormControl(rowIndex, column.field)"
-                    >
-                    </kendo-dropdownlist>
-                </ng-template>
-            </kendo-grid-column>
-            <kendo-grid-column [title]="getText('taskEditingDependenciesGridTypeColumnTitle')" field="type">
-                <ng-template kendoGridCellTemplate let-dataItem="dataItem" let-column="column" let-rowIndex="rowIndex">
-                    <kendo-dropdownlist
-                        [data]="dependencyTypes"
-                        textField="type"
-                        valueField="id"
-                        [valuePrimitive]="true"
-                        [formControl]="getFormControl(rowIndex, column.field)"
-                    >
-                    </kendo-dropdownlist>
-                </ng-template>
-            </kendo-grid-column>
-        </kendo-grid>
-    `
+        <select
+            class="k-dropdownlist k-picker k-rounded-md k-views-dropdown"
+            aria-label="View Selector"
+            [value]="activeView"
+            (change)="onActiveViewChange($event)">
+            <option *ngFor="let view of views" [value]="view">{{getViewTypeText(view)}}</option>
+        </select>
+        <kendo-buttongroup class="k-gantt-views" selection="single" [navigable]="false">
+            <button *ngFor="let view of views"
+                kendoButton
+                type="button"
+                [selected]="view === activeView"
+                (click)="onClick(view)">{{getViewTypeText(view)}}</button>
+        </kendo-buttongroup>
+    `,
+                    standalone: true,
+                    imports: [NgFor, ReactiveFormsModule, ButtonGroupComponent, ButtonComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: MappingService }, { type: EditService }, { type: GanttLocalizationService }]; }, propDecorators: { tasks: [{
-                type: Input
-            }], dependencies: [{
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-gantt-views-wrapper']
+            }], views: [{
                 type: Input
-            }], dependencyType: [{
+            }], activeView: [{
                 type: Input
-            }], dependenciesChange: [{
+            }], activeViewChange: [{
                 type: Output
             }] } });
 
 /**
- * @hidden
+ * The UI for adding new items to the Gantt.
+ * Use it within a toolbar template to provide a custom icon or list of options.
  */
-class TaskFieldsComponent {
-    constructor(mapper, editService, localizationService) {
-        this.mapper = mapper;
-        this.editService = editService;
+class GanttAddTaskComponent {
+    constructor(localizationService, editService, ngZone) {
         this.localizationService = localizationService;
+        this.editService = editService;
+        this.ngZone = ngZone;
+        /**
+         * Sets the data of the DropDownButton.
+         * > The data has to be provided in an array-like list.
+         */
+        this.data = [{
+                text: this.getText('addChildText'),
+                type: 'addChild'
+            }, {
+                text: this.getText('addAboveText'),
+                type: 'addAbove'
+            }, {
+                text: this.getText('addBelowText'),
+                type: 'addBelow'
+            }];
+        /**
+         * Defines the name of an existing icon in a Kendo UI theme.
+         * @default 'plus'
+         */
+        this.icon = 'plus';
+        /**
+         * Defines an [`SVGIcon`](slug:api_icons_svgicon) icon to be rendered inside the `GanttAddTaskComponent` using
+         * a [`KendoSVGIcon`](slug:api_icons_svgiconcomponent) component.
+         */
+        this.svgIcon = plusIcon;
     }
     /**
      * @hidden
      */
-    get formGroup() {
-        return this.editService.taskFormGroup;
+    getText(message) {
+        return this.localizationService.get(message);
     }
-    getText(token) {
-        return this.localizationService.get(token);
+    /**
+     * @hidden
+     */
+    handleOpen(e) {
+        if (!this.editService.getSelectedItem()) {
+            e.preventDefault();
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleMouseClick() {
+        if (!this.editService.getSelectedItem()) {
+            this.ngZone.run(() => {
+                this.editService.addEvent.next({
+                    selectedItem: null,
+                    actionType: 'addTask'
+                });
+            });
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleItemClick(e) {
+        this.editService.addEvent.next({
+            actionType: e.type,
+            selectedItem: null
+        });
     }
 }
-TaskFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TaskFieldsComponent, deps: [{ token: MappingService }, { token: EditService }, { token: GanttLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TaskFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TaskFieldsComponent, selector: "kendo-gantt-task-fields", ngImport: i0, template: `
-        <form class="k-form k-form-md" [formGroup]="formGroup">
-            <kendo-formfield *ngIf="formGroup.get(mapper.taskFields.title)">
-                <kendo-label [for]="title" [text]="getText('titleFieldInputLabel')"></kendo-label>
-                <input #title kendoTextBox [formControlName]="mapper.taskFields.title" />
-            </kendo-formfield>
-            <div class="k-hstack">
-                <kendo-formfield [style.width.%]="49" *ngIf="formGroup.get(mapper.taskFields.start)">
-                    <kendo-label [for]="start" [text]="getText('startFieldInputLabel')"></kendo-label>
-                    <kendo-datetimepicker #start [formControlName]="mapper.taskFields.start"></kendo-datetimepicker>
-                </kendo-formfield>
-                <kendo-treelist-spacer></kendo-treelist-spacer>
-                <kendo-formfield [style.width.%]="49" *ngIf="formGroup.get(mapper.taskFields.end)">
-                    <kendo-label [for]="end" [text]="getText('endFieldInputLabel')"></kendo-label>
-                    <kendo-datetimepicker #end [formControlName]="mapper.taskFields.end"></kendo-datetimepicker>
-                </kendo-formfield>
-            </div>
-            <kendo-formfield [style.width.%]="49" *ngIf="formGroup.get(mapper.taskFields.completionRatio)">
-                <kendo-label [for]="completionRatio" [text]="getText('completionRatioFieldInputLabel')"></kendo-label>
-                <kendo-numerictextbox
-                    #completionRatio
-                    [formControlName]="mapper.taskFields.completionRatio"
-                    [min]="0"
-                    [max]="1"
-                    [decimals]="2"
-                    format="p2"
-                    [step]="0.01"
-                ></kendo-numerictextbox>
-            </kendo-formfield>
-        </form>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$2.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "directive", type: i7$1.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { kind: "component", type: i7$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: i7$1.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors"] }, { kind: "component", type: i8.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["focusableId", "weekDaysFormat", "showOtherMonthDays", "value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "title", "subtitle", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "clearButton", "autoFill", "adaptiveMode", "inputAttributes", "defaultTab", "size", "rounded", "fillMode", "headerTemplate", "footerTemplate", "footer"], outputs: ["valueChange", "open", "close", "focus", "blur", "escape"], exportAs: ["kendo-datetimepicker"] }, { kind: "component", type: i14.TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TaskFieldsComponent, decorators: [{
+GanttAddTaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttAddTaskComponent, deps: [{ token: i1$1.LocalizationService }, { token: EditService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+GanttAddTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GanttAddTaskComponent, isStandalone: true, selector: "kendo-gantt-add-task", inputs: { data: "data", icon: "icon", svgIcon: "svgIcon" }, ngImport: i0, template: `
+        <kendo-dropdownbutton
+            [data]="data"
+            [icon]="icon"
+            [svgIcon]="svgIcon"
+            [kendoEventsOutsideAngular]="{ click: handleMouseClick }"
+            [scope]="this"
+            (itemClick)="handleItemClick($event)"
+            (open)="handleOpen($event)">
+            {{ getText('addTaskText') }}
+        </kendo-dropdownbutton>
+    `, isInline: true, dependencies: [{ kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttAddTaskComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'kendo-gantt-task-fields',
+                    selector: 'kendo-gantt-add-task',
                     template: `
-        <form class="k-form k-form-md" [formGroup]="formGroup">
-            <kendo-formfield *ngIf="formGroup.get(mapper.taskFields.title)">
-                <kendo-label [for]="title" [text]="getText('titleFieldInputLabel')"></kendo-label>
-                <input #title kendoTextBox [formControlName]="mapper.taskFields.title" />
-            </kendo-formfield>
-            <div class="k-hstack">
-                <kendo-formfield [style.width.%]="49" *ngIf="formGroup.get(mapper.taskFields.start)">
-                    <kendo-label [for]="start" [text]="getText('startFieldInputLabel')"></kendo-label>
-                    <kendo-datetimepicker #start [formControlName]="mapper.taskFields.start"></kendo-datetimepicker>
-                </kendo-formfield>
-                <kendo-treelist-spacer></kendo-treelist-spacer>
-                <kendo-formfield [style.width.%]="49" *ngIf="formGroup.get(mapper.taskFields.end)">
-                    <kendo-label [for]="end" [text]="getText('endFieldInputLabel')"></kendo-label>
-                    <kendo-datetimepicker #end [formControlName]="mapper.taskFields.end"></kendo-datetimepicker>
-                </kendo-formfield>
-            </div>
-            <kendo-formfield [style.width.%]="49" *ngIf="formGroup.get(mapper.taskFields.completionRatio)">
-                <kendo-label [for]="completionRatio" [text]="getText('completionRatioFieldInputLabel')"></kendo-label>
-                <kendo-numerictextbox
-                    #completionRatio
-                    [formControlName]="mapper.taskFields.completionRatio"
-                    [min]="0"
-                    [max]="1"
-                    [decimals]="2"
-                    format="p2"
-                    [step]="0.01"
-                ></kendo-numerictextbox>
-            </kendo-formfield>
-        </form>
-    `
+        <kendo-dropdownbutton
+            [data]="data"
+            [icon]="icon"
+            [svgIcon]="svgIcon"
+            [kendoEventsOutsideAngular]="{ click: handleMouseClick }"
+            [scope]="this"
+            (itemClick)="handleItemClick($event)"
+            (open)="handleOpen($event)">
+            {{ getText('addTaskText') }}
+        </kendo-dropdownbutton>
+    `,
+                    standalone: true,
+                    imports: [DropDownButtonComponent, EventsOutsideAngularDirective]
                 }]
-        }], ctorParameters: function () { return [{ type: MappingService }, { type: EditService }, { type: GanttLocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: EditService }, { type: i0.NgZone }]; }, propDecorators: { data: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], svgIcon: [{
+                type: Input
+            }] } });
 
 /**
  * @hidden
  */
-class EditDialogComponent {
-    constructor(mapper, editService, cdr, localizationService) {
-        this.mapper = mapper;
-        this.editService = editService;
-        this.cdr = cdr;
-        this.localizationService = localizationService;
-        this.saveIcon = saveIcon;
-        this.cancelIcon = cancelOutlineIcon;
-        this.deleteIcon = trashIcon;
+class ToolbarComponent {
+    constructor(hostEl, navigationService) {
+        this.hostEl = hostEl;
+        this.navigationService = navigationService;
+        this.context = {};
+        this.role = 'toolbar';
+        this.toolbarSizingClass = true;
+        this.activeViewChange = new EventEmitter();
     }
-    ngOnInit() {
-        this.editService.loadTasks(this.data).subscribe(value => {
-            this.loadedTasks = value;
-        });
+    clickHandler(ev) {
+        if (this.navigable) {
+            const closestFocusable = closest(ev.target, isFocusable);
+            const targetIndex = this.navigationService.focusableContent.indexOf(closestFocusable);
+            if (targetIndex > -1) {
+                this.navigationService.focusIndex = targetIndex;
+            }
+            this.navigationService.updateFocus();
+        }
     }
-    get predecessors() {
-        return this.editService.predecessors;
+    arrowLeftListener() {
+        if (this.navigable && isDocumentAvailable()) {
+            this.navigationService.focusIndex--;
+            if (this.navigationService.focusIndex < 0) {
+                this.navigationService.focusIndex = this.navigationService.focusableContent.length - 1;
+            }
+            this.navigationService.updateFocus();
+        }
     }
-    set predecessors(items) {
-        this.editService.predecessors = items;
+    arrowRightListener() {
+        if (this.navigable && isDocumentAvailable()) {
+            this.navigationService.focusIndex++;
+            if (this.navigationService.focusIndex >= this.navigationService.focusableContent.length) {
+                this.navigationService.focusIndex = 0;
+            }
+            this.navigationService.updateFocus();
+        }
     }
-    get successors() {
-        return this.editService.successors;
+    set position(value) {
+        this.context.position = this._position = value;
     }
-    set successors(items) {
-        this.editService.successors = items;
+    get position() {
+        return this._position;
     }
-    getText(token) {
-        return this.localizationService.get(token);
+    get toolbarTemplateRef() {
+        return this.toolbarTemplate ? this.toolbarTemplate.templateRef : undefined;
     }
-    getDependencyType(typeId) {
-        return DependencyType[typeId];
+    get renderTemplate() {
+        const ganttToolbarTemplate = this.toolbarTemplate;
+        const templatePosition = ganttToolbarTemplate ? ganttToolbarTemplate.position : null;
+        return ganttToolbarTemplate && (templatePosition === 'both' || templatePosition === this.position);
     }
-    handleEditingResult(editResultType) {
-        this.editService.triggerEditEvent(editResultType);
+    handleViewChange(view) {
+        this.activeViewChange.emit(view);
     }
-    handleTaskDelete() {
-        this.editService.taskDelete.next(this.editService.dataItem);
+    ngAfterViewInit() {
+        if (isDocumentAvailable()) {
+            const focusableElements = Array.from(this.hostEl.nativeElement.querySelectorAll(focusableSelector) || [])
+                .filter(el => isVisible(el));
+            if (focusableElements.length) {
+                this.navigationService.focusableContent = focusableElements;
+            }
+        }
     }
 }
-EditDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditDialogComponent, deps: [{ token: MappingService }, { token: EditService }, { token: i0.ChangeDetectorRef }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-EditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: EditDialogComponent, selector: "kendo-gantt-edit-dialog", inputs: { data: "data" }, ngImport: i0, template: `
-        <kendo-dialog
-            [title]="getText('taskEditingDialogTitle')"
-            [width]="575"
-            [height]="470"
-            [autoFocusedElement]="'.k-actions .k-button-solid-primary'"
-            (close)="handleEditingResult('cancel')">
-            <kendo-dialog-messages
-                [closeTitle]="getText('taskEditingDialogCloseTitle')"></kendo-dialog-messages>
-
-            <kendo-tabstrip [keepTabContent]="true" [style.height.px]="345">
-                <kendo-tabstrip-tab [title]="getText('taskEditingGeneralTabTitle')" [selected]="true">
-                    <ng-template kendoTabContent>
-                    <kendo-gantt-task-fields></kendo-gantt-task-fields>
-                    </ng-template>
-                </kendo-tabstrip-tab>
-                <kendo-tabstrip-tab [title]="getText('taskEditingPredecessorsTabTitle')">
-                    <ng-template kendoTabContent>
-                        <kendo-gantt-dependencies-table
-                            [tasks]="loadedTasks"
-                            [(dependencies)]="predecessors"
-                            dependencyType="predecessor"
-                        >
-                        </kendo-gantt-dependencies-table>
-                    </ng-template>
-                </kendo-tabstrip-tab>
-                <kendo-tabstrip-tab [title]="getText('taskEditingSuccessorsTabTitle')">
-                    <ng-template kendoTabContent>
-                        <kendo-gantt-dependencies-table
-                            [tasks]="loadedTasks"
-                            [(dependencies)]="successors"
-                            dependencyType="successor">
-                        </kendo-gantt-dependencies-table>
-                    </ng-template>
-                </kendo-tabstrip-tab>
-            </kendo-tabstrip>
-
-            <kendo-dialog-actions layout="start">
-                <button
-                    kendoButton
-                    themeColor="primary"
-                    icon="save"
-                    [svgIcon]="saveIcon"
-                    (click)="handleEditingResult('save')"
-                >
-                    {{ getText('saveButtonText') }}
-                </button>
-                <button
-                    kendoButton
-                    icon="cancel-outline"
-                    [svgIcon]="cancelIcon"
-                    (click)="handleEditingResult('cancel')"
-                >
-                    {{ getText('cancelButtonText') }}
-                </button>
-                <kendo-treelist-spacer></kendo-treelist-spacer>
-                <button
-                    kendoButton
-                    themeColor="primary"
-                    fillMode="flat"
-                    icon="delete"
-                    [svgIcon]="deleteIcon"
-                    [kendoEventsOutsideAngular]="{
-                        click: handleTaskDelete
-                    }"
-                    [scope]="this"
-                >
-                    {{ getText('deleteButtonText') }}
-                </button>
-            </kendo-dialog-actions>
-        </kendo-dialog>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i11.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i14.TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }, { kind: "component", type: i7$2.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: i7$2.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "directive", type: i7$2.CustomMessagesComponent, selector: "kendo-dialog-messages, kendo-window-messages" }, { kind: "component", type: i8$1.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: i8$1.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i8$1.TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: DependenciesTableComponent, selector: "kendo-gantt-dependencies-table", inputs: ["tasks", "dependencies", "dependencyType"], outputs: ["dependenciesChange"] }, { kind: "component", type: TaskFieldsComponent, selector: "kendo-gantt-task-fields" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditDialogComponent, decorators: [{
+ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarComponent, deps: [{ token: i0.ElementRef }, { token: ToolbarNavigationService }], target: i0.ɵɵFactoryTarget.Component });
+ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolbarComponent, isStandalone: true, selector: "kendo-gantt-toolbar", inputs: { showAddTask: "showAddTask", showViewSelector: "showViewSelector", views: "views", activeView: "activeView", toolbarTemplate: "toolbarTemplate", navigable: "navigable", position: "position" }, outputs: { activeViewChange: "activeViewChange" }, host: { listeners: { "click": "clickHandler($event)", "keydown.arrowleft": "arrowLeftListener($event)", "keydown.arrowright": "arrowRightListener($event)" }, properties: { "attr.role": "this.role", "class.k-toolbar-md": "this.toolbarSizingClass" } }, providers: [ToolbarNavigationService], ngImport: i0, template: `
+        <ng-container *ngIf="!renderTemplate">
+            <kendo-gantt-add-task *ngIf="showAddTask"></kendo-gantt-add-task>
+            <span class="k-spacer k-toolbar-spacer"></span>
+            <kendo-gantt-view-selector
+                *ngIf="showViewSelector"
+                [views]="views"
+                [activeView]="activeView"
+                (activeViewChange)="handleViewChange($event)"></kendo-gantt-view-selector>
+        </ng-container>
+        <ng-template
+            *ngIf="renderTemplate"
+            [ngTemplateOutlet]="toolbarTemplateRef"
+            [ngTemplateOutletContext]="context"
+            >
+        </ng-template>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GanttAddTaskComponent, selector: "kendo-gantt-add-task", inputs: ["data", "icon", "svgIcon"] }, { kind: "component", type: ViewSelectorComponent, selector: "kendo-gantt-view-selector", inputs: ["views", "activeView"], outputs: ["activeViewChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'kendo-gantt-edit-dialog',
+                    selector: 'kendo-gantt-toolbar',
+                    providers: [ToolbarNavigationService],
                     template: `
-        <kendo-dialog
-            [title]="getText('taskEditingDialogTitle')"
-            [width]="575"
-            [height]="470"
-            [autoFocusedElement]="'.k-actions .k-button-solid-primary'"
-            (close)="handleEditingResult('cancel')">
-            <kendo-dialog-messages
-                [closeTitle]="getText('taskEditingDialogCloseTitle')"></kendo-dialog-messages>
-
-            <kendo-tabstrip [keepTabContent]="true" [style.height.px]="345">
-                <kendo-tabstrip-tab [title]="getText('taskEditingGeneralTabTitle')" [selected]="true">
-                    <ng-template kendoTabContent>
-                    <kendo-gantt-task-fields></kendo-gantt-task-fields>
-                    </ng-template>
-                </kendo-tabstrip-tab>
-                <kendo-tabstrip-tab [title]="getText('taskEditingPredecessorsTabTitle')">
-                    <ng-template kendoTabContent>
-                        <kendo-gantt-dependencies-table
-                            [tasks]="loadedTasks"
-                            [(dependencies)]="predecessors"
-                            dependencyType="predecessor"
-                        >
-                        </kendo-gantt-dependencies-table>
-                    </ng-template>
-                </kendo-tabstrip-tab>
-                <kendo-tabstrip-tab [title]="getText('taskEditingSuccessorsTabTitle')">
-                    <ng-template kendoTabContent>
-                        <kendo-gantt-dependencies-table
-                            [tasks]="loadedTasks"
-                            [(dependencies)]="successors"
-                            dependencyType="successor">
-                        </kendo-gantt-dependencies-table>
-                    </ng-template>
-                </kendo-tabstrip-tab>
-            </kendo-tabstrip>
-
-            <kendo-dialog-actions layout="start">
-                <button
-                    kendoButton
-                    themeColor="primary"
-                    icon="save"
-                    [svgIcon]="saveIcon"
-                    (click)="handleEditingResult('save')"
-                >
-                    {{ getText('saveButtonText') }}
-                </button>
-                <button
-                    kendoButton
-                    icon="cancel-outline"
-                    [svgIcon]="cancelIcon"
-                    (click)="handleEditingResult('cancel')"
-                >
-                    {{ getText('cancelButtonText') }}
-                </button>
-                <kendo-treelist-spacer></kendo-treelist-spacer>
-                <button
-                    kendoButton
-                    themeColor="primary"
-                    fillMode="flat"
-                    icon="delete"
-                    [svgIcon]="deleteIcon"
-                    [kendoEventsOutsideAngular]="{
-                        click: handleTaskDelete
-                    }"
-                    [scope]="this"
-                >
-                    {{ getText('deleteButtonText') }}
-                </button>
-            </kendo-dialog-actions>
-        </kendo-dialog>
-    `
+        <ng-container *ngIf="!renderTemplate">
+            <kendo-gantt-add-task *ngIf="showAddTask"></kendo-gantt-add-task>
+            <span class="k-spacer k-toolbar-spacer"></span>
+            <kendo-gantt-view-selector
+                *ngIf="showViewSelector"
+                [views]="views"
+                [activeView]="activeView"
+                (activeViewChange)="handleViewChange($event)"></kendo-gantt-view-selector>
+        </ng-container>
+        <ng-template
+            *ngIf="renderTemplate"
+            [ngTemplateOutlet]="toolbarTemplateRef"
+            [ngTemplateOutletContext]="context"
+            >
+        </ng-template>
+    `,
+                    standalone: true,
+                    imports: [NgIf, GanttAddTaskComponent, ViewSelectorComponent, NgTemplateOutlet]
                 }]
-        }], ctorParameters: function () { return [{ type: MappingService }, { type: EditService }, { type: i0.ChangeDetectorRef }, { type: i1$1.LocalizationService }]; }, propDecorators: { data: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ToolbarNavigationService }]; }, propDecorators: { role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], toolbarSizingClass: [{
+                type: HostBinding,
+                args: ['class.k-toolbar-md']
+            }], clickHandler: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], arrowLeftListener: [{
+                type: HostListener,
+                args: ['keydown.arrowleft', ['$event']]
+            }], arrowRightListener: [{
+                type: HostListener,
+                args: ['keydown.arrowright', ['$event']]
+            }], activeViewChange: [{
+                type: Output
+            }], showAddTask: [{
+                type: Input
+            }], showViewSelector: [{
+                type: Input
+            }], views: [{
+                type: Input
+            }], activeView: [{
+                type: Input
+            }], toolbarTemplate: [{
+                type: Input
+            }], navigable: [{
+                type: Input
+            }], position: [{
                 type: Input
             }] } });
 
@@ -5102,7 +5130,7 @@ class LocalizedMessagesDirective extends Messages {
     }
 }
 LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, selector: "[kendoGanttLocalizedMessages]", providers: [
+LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoGanttLocalizedMessages]", providers: [
         {
             provide: Messages,
             useExisting: forwardRef(() => LocalizedMessagesDirective)
@@ -5117,7 +5145,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             useExisting: forwardRef(() => LocalizedMessagesDirective)
                         }
                     ],
-                    selector: '[kendoGanttLocalizedMessages]'
+                    selector: '[kendoGanttLocalizedMessages]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
@@ -6385,7 +6414,7 @@ class GanttComponent {
     }
 }
 GanttComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttComponent, deps: [{ token: TimelineViewService }, { token: ScrollSyncService }, { token: i0.Renderer2 }, { token: MappingService }, { token: OptionChangesService }, { token: DependencyDomService }, { token: EditService }, { token: i1$1.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: NavigationService }, { token: CurrentTimeMarkerService }], target: i0.ɵɵFactoryTarget.Component });
-GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GanttComponent, selector: "kendo-gantt", inputs: { roleDescription: ["aria-roledescription", "roleDescription"], role: "role", taskModelFields: "taskModelFields", dependencyModelFields: "dependencyModelFields", activeView: "activeView", data: "data", isSelected: "isSelected", validateNewDependency: "validateNewDependency", selectable: "selectable", toolbarSettings: "toolbarSettings", toolbarAriaLabel: "toolbarAriaLabel", fetchChildren: "fetchChildren", hasChildren: "hasChildren", dependencies: "dependencies", sortable: "sortable", sort: "sort", filterable: "filterable", filter: "filter", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", navigable: "navigable", timelinePaneOptions: "timelinePaneOptions", treeListPaneOptions: "treeListPaneOptions", taskClass: "taskClass", rowClass: "rowClass", isExpanded: "isExpanded", columnsAutoSize: "columnsAutoSize", currentTimeMarker: "currentTimeMarker", columnMenu: "columnMenu", columnsReorderable: "columnsReorderable", columnsResizable: "columnsResizable", dragScrollSettings: "dragScrollSettings" }, outputs: { selectionChange: "selectionChange", rowExpand: "rowExpand", taskDblClick: "taskDblClick", cellDblClick: "cellDblClick", cellClose: "cellClose", taskDelete: "taskDelete", rowCollapse: "rowCollapse", remove: "remove", cancel: "cancel", save: "save", taskAdd: "taskAdd", dependencyAdd: "dependencyAdd", sortChange: "sortChange", filterChange: "filterChange", dataStateChange: "dataStateChange", treeListPaneCollapsedChange: "treeListPaneCollapsedChange", timelinePaneCollapsedChange: "timelinePaneCollapsedChange", timelinePaneSizeChange: "timelinePaneSizeChange", activeViewChange: "activeViewChange", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", cellClick: "cellClick", taskClick: "taskClick" }, host: { properties: { "attr.aria-roledescription": "this.hostRoleDescriptionAttr", "attr.role": "this.hostRoleAttr", "class.k-gantt": "this.hostClasses", "attr.dir": "this.dir" } }, providers: [
+GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GanttComponent, isStandalone: true, selector: "kendo-gantt", inputs: { roleDescription: ["aria-roledescription", "roleDescription"], role: "role", taskModelFields: "taskModelFields", dependencyModelFields: "dependencyModelFields", activeView: "activeView", data: "data", isSelected: "isSelected", validateNewDependency: "validateNewDependency", selectable: "selectable", toolbarSettings: "toolbarSettings", toolbarAriaLabel: "toolbarAriaLabel", fetchChildren: "fetchChildren", hasChildren: "hasChildren", dependencies: "dependencies", sortable: "sortable", sort: "sort", filterable: "filterable", filter: "filter", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", navigable: "navigable", timelinePaneOptions: "timelinePaneOptions", treeListPaneOptions: "treeListPaneOptions", taskClass: "taskClass", rowClass: "rowClass", isExpanded: "isExpanded", columnsAutoSize: "columnsAutoSize", currentTimeMarker: "currentTimeMarker", columnMenu: "columnMenu", columnsReorderable: "columnsReorderable", columnsResizable: "columnsResizable", dragScrollSettings: "dragScrollSettings" }, outputs: { selectionChange: "selectionChange", rowExpand: "rowExpand", taskDblClick: "taskDblClick", cellDblClick: "cellDblClick", cellClose: "cellClose", taskDelete: "taskDelete", rowCollapse: "rowCollapse", remove: "remove", cancel: "cancel", save: "save", taskAdd: "taskAdd", dependencyAdd: "dependencyAdd", sortChange: "sortChange", filterChange: "filterChange", dataStateChange: "dataStateChange", treeListPaneCollapsedChange: "treeListPaneCollapsedChange", timelinePaneCollapsedChange: "timelinePaneCollapsedChange", timelinePaneSizeChange: "timelinePaneSizeChange", activeViewChange: "activeViewChange", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", cellClick: "cellClick", taskClick: "taskClick" }, host: { properties: { "attr.aria-roledescription": "this.hostRoleDescriptionAttr", "attr.role": "this.hostRoleAttr", "class.k-gantt": "this.hostClasses", "attr.dir": "this.dir" } }, providers: [
         GanttLocalizationService,
         LocalizationService,
         {
@@ -6781,7 +6810,7 @@ GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
         </kendo-dialog>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-   `, isInline: true, dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i8$1.SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "splitbarWidth", "resizeStep"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { kind: "component", type: i8$1.SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "separatorLabel", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { kind: "component", type: i14.TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "navigatable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "rowReorderable", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange", "rowReorder"], exportAs: ["kendoTreeList"] }, { kind: "component", type: i14.TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }, { kind: "component", type: i14.CustomMessagesComponent, selector: "kendo-treelist-messages" }, { kind: "component", type: i7$2.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: i7$2.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: i11.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }, { kind: "component", type: GanttTimelineComponent, selector: "kendo-gantt-timeline", inputs: ["rows", "slots", "groupSlots", "tableWidth", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "renderDependencyDragClues", "dragScrollSettings", "currentTimeMarker", "selectable", "isTaskSelected", "isExpanded", "dependencies"], outputs: ["timelineContainerPress", "timelineContainerDrag", "timelineContainerRelease"] }, { kind: "component", type: ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: ["showAddTask", "showViewSelector", "views", "activeView", "toolbarTemplate", "navigable", "position"], outputs: ["activeViewChange"] }, { kind: "component", type: EditDialogComponent, selector: "kendo-gantt-edit-dialog", inputs: ["data"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGanttLocalizedMessages]" }] });
+   `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGanttLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: ["showAddTask", "showViewSelector", "views", "activeView", "toolbarTemplate", "navigable", "position"], outputs: ["activeViewChange"] }, { kind: "component", type: SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "splitbarWidth", "resizeStep"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { kind: "component", type: SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "separatorLabel", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { kind: "component", type: TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "navigatable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "rowReorderable", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange", "rowReorder"], exportAs: ["kendoTreeList"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: CustomMessagesComponent$2, selector: "kendo-treelist-messages" }, { kind: "component", type: GanttTimelineComponent, selector: "kendo-gantt-timeline", inputs: ["rows", "slots", "groupSlots", "tableWidth", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "renderDependencyDragClues", "dragScrollSettings", "currentTimeMarker", "selectable", "isTaskSelected", "isExpanded", "dependencies"], outputs: ["timelineContainerPress", "timelineContainerDrag", "timelineContainerRelease"] }, { kind: "component", type: EditDialogComponent, selector: "kendo-gantt-edit-dialog", inputs: ["data"] }, { kind: "component", type: DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttComponent, decorators: [{
             type: Component,
             args: [{
@@ -7184,7 +7213,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         </kendo-dialog>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-   `
+   `,
+                    standalone: true,
+                    imports: [LocalizedMessagesDirective, NgIf, ToolbarComponent, SplitterComponent, SplitterPaneComponent, TreeListComponent, EventsOutsideAngularDirective, CustomMessagesComponent$2, GanttTimelineComponent, EditDialogComponent, DialogComponent, DialogActionsComponent, TreeListSpacerComponent, ButtonComponent, WatermarkOverlayComponent]
                 }]
         }], ctorParameters: function () { return [{ type: TimelineViewService }, { type: ScrollSyncService }, { type: i0.Renderer2 }, { type: MappingService }, { type: OptionChangesService }, { type: DependencyDomService }, { type: EditService }, { type: i1$1.LocalizationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: NavigationService }, { type: CurrentTimeMarkerService }]; }, propDecorators: { treeList: [{
                 type: ViewChild,
@@ -7278,252 +7309,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], taskClass: [{
                 type: Input
-            }], rowClass: [{
-                type: Input
-            }], isExpanded: [{
-                type: Input
-            }], columnsAutoSize: [{
-                type: Input
-            }], currentTimeMarker: [{
-                type: Input
-            }], columnMenu: [{
-                type: Input
-            }], columnsReorderable: [{
-                type: Input
-            }], columnsResizable: [{
-                type: Input
-            }], dragScrollSettings: [{
-                type: Input
-            }], rowExpand: [{
-                type: Output
-            }], taskDblClick: [{
-                type: Output
-            }], cellDblClick: [{
-                type: Output
-            }], cellClose: [{
-                type: Output
-            }], taskDelete: [{
-                type: Output
-            }], rowCollapse: [{
-                type: Output
-            }], remove: [{
-                type: Output
-            }], cancel: [{
-                type: Output
-            }], save: [{
-                type: Output
-            }], taskAdd: [{
-                type: Output
-            }], dependencyAdd: [{
-                type: Output
-            }], sortChange: [{
-                type: Output
-            }], filterChange: [{
-                type: Output
-            }], dataStateChange: [{
-                type: Output
-            }], treeListPaneCollapsedChange: [{
-                type: Output
-            }], timelinePaneCollapsedChange: [{
-                type: Output
-            }], timelinePaneSizeChange: [{
-                type: Output
-            }], activeViewChange: [{
-                type: Output
-            }], columnResize: [{
-                type: Output
-            }], columnReorder: [{
-                type: Output
-            }], columnVisibilityChange: [{
-                type: Output
-            }], columnLockedChange: [{
-                type: Output
-            }], cellClick: [{
-                type: Output
-            }], taskClick: [{
-                type: Output
-            }] } });
-
-/**
- * A directive which binds the Gantt to an array of objects by using
- * an ID and parent ID field to define the hierarchy.
- *
- * The directive encapsulates the in-memory handling of data operations such as sorting and filtering.
- */
-class GanttFlatBindingDirective extends FlatBindingDirective {
-    /**
-     * @hidden
-     */
-    set aggregate(value) {
-        super.aggregate = value;
-    }
-}
-GanttFlatBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttFlatBindingDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-GanttFlatBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: GanttFlatBindingDirective, selector: "[kendoGanttFlatBinding]", inputs: { data: ["kendoGanttFlatBinding", "data"] }, exportAs: ["kendoGanttFlatBinding"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttFlatBindingDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGanttFlatBinding]',
-                    exportAs: 'kendoGanttFlatBinding'
-                }]
-        }], propDecorators: { data: [{
-                type: Input,
-                args: ['kendoGanttFlatBinding']
-            }] } });
-
-/**
- * A directive which binds the Gantt to a tree of objects,
- * which encapsulates the in-memory handling of data operations such as sorting and filtering.
- */
-class GanttHierarchyBindingDirective extends HierarchyBindingDirective {
-    /**
-     * @hidden
-     */
-    set aggregate(value) {
-        super.aggregate = value;
-    }
-}
-GanttHierarchyBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttHierarchyBindingDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-GanttHierarchyBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: GanttHierarchyBindingDirective, selector: "[kendoGanttHierarchyBinding]", inputs: { data: ["kendoGanttHierarchyBinding", "data"] }, exportAs: ["kendoGanttHierarchyBinding"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttHierarchyBindingDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGanttHierarchyBinding]',
-                    exportAs: 'kendoGanttHierarchyBinding'
-                }]
-        }], propDecorators: { data: [{
-                type: Input,
-                args: ['kendoGanttHierarchyBinding']
-            }] } });
-
-/**
- * A directive which controls the expanded state of the items.
- */
-class GanttExpandableDirective extends ExpandableDirective {
-    /**
-     * Defines the item key that will be stored in the expandedKeys collection.
-     * Defaults to the task data item ID field,
-     * which is specified in the [`taskModelFields`]({% slug api_gantt_ganttcomponent %}#toc-taskmodelfields) object.
-     *
-     */
-    set expandBy(value) {
-        super.expandBy = value;
-    }
-}
-GanttExpandableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttExpandableDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-GanttExpandableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: GanttExpandableDirective, selector: "[kendoGanttExpandable]", inputs: { expandBy: "expandBy" }, exportAs: ["kendoGanttExpandable"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttExpandableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    exportAs: 'kendoGanttExpandable',
-                    selector: '[kendoGanttExpandable]'
-                }]
-        }], propDecorators: { expandBy: [{
-                type: Input
-            }] } });
-
-/**
- * A directive which handles the [`selectionChange`]({% slug api_gantt_ganttcomponent %}#toc-selectionchange) event of the Gantt
- * ([see example]({% slug selection_gantt %}#toc-built-in-directive))
- */
-class SelectableDirective {
-    constructor(gantt) {
-        this.gantt = gantt;
-        /**
-         * Fires when the selected keys are changed.
-         */
-        this.selectedKeysChange = new EventEmitter();
-        this.state = new Set();
-        this.isSelected = this.isSelected.bind(this);
-        this.selectionChange = this.selectionChange.bind(this);
-        this.selectable = true;
-    }
-    /**
-     * @hidden
-     */
-    set selectable(value) {
-        if (value) {
-            this.gantt.isSelected = this.isSelected;
-            this.subscribeSelection();
-        }
-        else {
-            this.gantt.isSelected = () => false;
-            this.unsubscribeSelection();
-        }
-        this.gantt.selectable = value;
-        this.gantt.updateView();
-    }
-    /**
-     * Sets the selected keys.
-     */
-    set selectedKeys(value) {
-        if (isPresent(value) && value === this.lastChange) {
-            return;
-        }
-        // prevent multiple items displayed as selected as multiple selection still not supported fully
-        const keys = (value || []).slice(0, 1);
-        this.state = new Set(keys);
-        this.gantt.updateView();
-    }
-    /**
-     * The field name or a function that specifies the data item unique key identifier.
-     * By default, the string field `id` is used.
-     */
-    set itemKey(value) {
-        if (isString(value)) {
-            this._keyGetter = getter(value);
-        }
-        else {
-            this._keyGetter = value;
-        }
-    }
-    get keyGetter() {
-        return this._keyGetter || this.gantt.idGetter;
-    }
-    ngOnDestroy() {
-        this.unsubscribeSelection();
-    }
-    isSelected(dataItem) {
-        return this.state.has(this.keyGetter(dataItem));
-    }
-    selectionChange({ action, items }) {
-        this.state.clear();
-        if (action === 'select') {
-            items.forEach(item => this.state.add(this.keyGetter(item)));
-        }
-        this.emitSelectedItemsChange();
-    }
-    emitSelectedItemsChange() {
-        this.lastChange = Array.from(this.state);
-        this.selectedKeysChange.emit(this.lastChange);
-    }
-    subscribeSelection() {
-        this.unsubscribeSelection();
-        this.selectionSubscription = this.gantt.selectionChange.subscribe(this.selectionChange);
-    }
-    unsubscribeSelection() {
-        if (this.selectionSubscription) {
-            this.selectionSubscription.unsubscribe();
-            this.selectionSubscription = null;
-        }
-    }
-}
-SelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectableDirective, deps: [{ token: GanttComponent }], target: i0.ɵɵFactoryTarget.Directive });
-SelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SelectableDirective, selector: "[kendoGanttSelectable]", inputs: { selectable: "selectable", selectedKeys: "selectedKeys", itemKey: "itemKey" }, outputs: { selectedKeysChange: "selectedKeysChange" }, exportAs: ["kendoGanttSelectable"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    exportAs: 'kendoGanttSelectable',
-                    selector: '[kendoGanttSelectable]'
-                }]
-        }], ctorParameters: function () { return [{ type: GanttComponent }]; }, propDecorators: { selectable: [{
-                type: Input
-            }], selectedKeys: [{
+            }], rowClass: [{
                 type: Input
-            }], selectedKeysChange: [{
-                type: Output
-            }], itemKey: [{
+            }], isExpanded: [{
+                type: Input
+            }], columnsAutoSize: [{
+                type: Input
+            }], currentTimeMarker: [{
+                type: Input
+            }], columnMenu: [{
+                type: Input
+            }], columnsReorderable: [{
+                type: Input
+            }], columnsResizable: [{
                 type: Input
+            }], dragScrollSettings: [{
+                type: Input
+            }], rowExpand: [{
+                type: Output
+            }], taskDblClick: [{
+                type: Output
+            }], cellDblClick: [{
+                type: Output
+            }], cellClose: [{
+                type: Output
+            }], taskDelete: [{
+                type: Output
+            }], rowCollapse: [{
+                type: Output
+            }], remove: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }], save: [{
+                type: Output
+            }], taskAdd: [{
+                type: Output
+            }], dependencyAdd: [{
+                type: Output
+            }], sortChange: [{
+                type: Output
+            }], filterChange: [{
+                type: Output
+            }], dataStateChange: [{
+                type: Output
+            }], treeListPaneCollapsedChange: [{
+                type: Output
+            }], timelinePaneCollapsedChange: [{
+                type: Output
+            }], timelinePaneSizeChange: [{
+                type: Output
+            }], activeViewChange: [{
+                type: Output
+            }], columnResize: [{
+                type: Output
+            }], columnReorder: [{
+                type: Output
+            }], columnVisibilityChange: [{
+                type: Output
+            }], columnLockedChange: [{
+                type: Output
+            }], cellClick: [{
+                type: Output
+            }], taskClick: [{
+                type: Output
             }] } });
 
 /**
@@ -7540,7 +7389,7 @@ class DragValidationTooltipComponent {
     }
 }
 DragValidationTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragValidationTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DragValidationTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DragValidationTooltipComponent, selector: "ng-component", ngImport: i0, template: `
+DragValidationTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DragValidationTooltipComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
         <div
             class="k-tooltip k-gantt-tooltip-validation"
             [class.k-gantt-tooltip-valid]="showValidityStatus && isValid"
@@ -7574,10 +7423,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 <span class="k-gantt-tooltip-validation-value">{{ toTaskName }}</span>
             </div>
         </div>
-    `
+    `,
+                    standalone: true
                 }]
         }] });
 
+/**
+ * A directive which binds the Gantt to an array of objects by using
+ * an ID and parent ID field to define the hierarchy.
+ *
+ * The directive encapsulates the in-memory handling of data operations such as sorting and filtering.
+ */
+class GanttFlatBindingDirective extends FlatBindingDirective {
+    /**
+     * @hidden
+     */
+    set aggregate(value) {
+        super.aggregate = value;
+    }
+}
+GanttFlatBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttFlatBindingDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+GanttFlatBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: GanttFlatBindingDirective, isStandalone: true, selector: "[kendoGanttFlatBinding]", inputs: { data: ["kendoGanttFlatBinding", "data"] }, exportAs: ["kendoGanttFlatBinding"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttFlatBindingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGanttFlatBinding]',
+                    exportAs: 'kendoGanttFlatBinding',
+                    standalone: true
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['kendoGanttFlatBinding']
+            }] } });
+
+/**
+ * A directive which binds the Gantt to a tree of objects,
+ * which encapsulates the in-memory handling of data operations such as sorting and filtering.
+ */
+class GanttHierarchyBindingDirective extends HierarchyBindingDirective {
+    /**
+     * @hidden
+     */
+    set aggregate(value) {
+        super.aggregate = value;
+    }
+}
+GanttHierarchyBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttHierarchyBindingDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+GanttHierarchyBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: GanttHierarchyBindingDirective, isStandalone: true, selector: "[kendoGanttHierarchyBinding]", inputs: { data: ["kendoGanttHierarchyBinding", "data"] }, exportAs: ["kendoGanttHierarchyBinding"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttHierarchyBindingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGanttHierarchyBinding]',
+                    exportAs: 'kendoGanttHierarchyBinding',
+                    standalone: true
+                }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: ['kendoGanttHierarchyBinding']
+            }] } });
+
+/**
+ * A directive which controls the expanded state of the items.
+ */
+class GanttExpandableDirective extends ExpandableDirective {
+    /**
+     * Defines the item key that will be stored in the expandedKeys collection.
+     * Defaults to the task data item ID field,
+     * which is specified in the [`taskModelFields`]({% slug api_gantt_ganttcomponent %}#toc-taskmodelfields) object.
+     *
+     */
+    set expandBy(value) {
+        super.expandBy = value;
+    }
+}
+GanttExpandableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttExpandableDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+GanttExpandableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: GanttExpandableDirective, isStandalone: true, selector: "[kendoGanttExpandable]", inputs: { expandBy: "expandBy" }, exportAs: ["kendoGanttExpandable"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttExpandableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'kendoGanttExpandable',
+                    selector: '[kendoGanttExpandable]',
+                    standalone: true
+                }]
+        }], propDecorators: { expandBy: [{
+                type: Input
+            }] } });
+
 /**
  * When added to the .k-task-dot, the element will be kept with hover styles.
  * Used for the drag clue from which the dragging has started.
@@ -7872,11 +7803,12 @@ class DependencyDragCreateDirective {
     }
 }
 DependencyDragCreateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DependencyDragCreateDirective, deps: [{ token: GanttComponent }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: MappingService }, { token: i3.PopupService }, { token: TimelineScrollService }], target: i0.ɵɵFactoryTarget.Directive });
-DependencyDragCreateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DependencyDragCreateDirective, selector: "[kendoGanttDependencyDragCreate]", inputs: { displayValidationTooltip: "displayValidationTooltip" }, ngImport: i0 });
+DependencyDragCreateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DependencyDragCreateDirective, isStandalone: true, selector: "[kendoGanttDependencyDragCreate]", inputs: { displayValidationTooltip: "displayValidationTooltip" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DependencyDragCreateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoGanttDependencyDragCreate]'
+                    selector: '[kendoGanttDependencyDragCreate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: GanttComponent }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: MappingService }, { type: i3.PopupService }, { type: TimelineScrollService }]; }, propDecorators: { displayValidationTooltip: [{
                 type: Input
@@ -7895,7 +7827,7 @@ class TimelineDayViewComponent extends ViewBase {
     }
 }
 TimelineDayViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineDayViewComponent, deps: [{ token: OptionChangesService }, { token: DependencyDomService }], target: i0.ɵɵFactoryTarget.Component });
-TimelineDayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimelineDayViewComponent, selector: "kendo-gantt-timeline-day-view", providers: [
+TimelineDayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimelineDayViewComponent, isStandalone: true, selector: "kendo-gantt-timeline-day-view", providers: [
         {
             provide: ViewBase,
             useExisting: forwardRef(() => TimelineDayViewComponent)
@@ -7911,7 +7843,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             provide: ViewBase,
                             useExisting: forwardRef(() => TimelineDayViewComponent)
                         }
-                    ]
+                    ],
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: OptionChangesService }, { type: DependencyDomService }]; } });
 
@@ -7928,7 +7861,7 @@ class TimelineWeekViewComponent extends ViewBase {
     }
 }
 TimelineWeekViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineWeekViewComponent, deps: [{ token: OptionChangesService }, { token: DependencyDomService }], target: i0.ɵɵFactoryTarget.Component });
-TimelineWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimelineWeekViewComponent, selector: "kendo-gantt-timeline-week-view", providers: [
+TimelineWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimelineWeekViewComponent, isStandalone: true, selector: "kendo-gantt-timeline-week-view", providers: [
         {
             provide: ViewBase,
             useExisting: forwardRef(() => TimelineWeekViewComponent)
@@ -7944,7 +7877,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             provide: ViewBase,
                             useExisting: forwardRef(() => TimelineWeekViewComponent)
                         }
-                    ]
+                    ],
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: OptionChangesService }, { type: DependencyDomService }]; } });
 
@@ -7961,7 +7895,7 @@ class TimelineMonthViewComponent extends ViewBase {
     }
 }
 TimelineMonthViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineMonthViewComponent, deps: [{ token: OptionChangesService }, { token: DependencyDomService }], target: i0.ɵɵFactoryTarget.Component });
-TimelineMonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimelineMonthViewComponent, selector: "kendo-gantt-timeline-month-view", providers: [
+TimelineMonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimelineMonthViewComponent, isStandalone: true, selector: "kendo-gantt-timeline-month-view", providers: [
         {
             provide: ViewBase,
             useExisting: forwardRef(() => TimelineMonthViewComponent)
@@ -7977,7 +7911,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             provide: ViewBase,
                             useExisting: forwardRef(() => TimelineMonthViewComponent)
                         }
-                    ]
+                    ],
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: OptionChangesService }, { type: DependencyDomService }]; } });
 
@@ -7994,7 +7929,7 @@ class TimelineYearViewComponent extends ViewBase {
     }
 }
 TimelineYearViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineYearViewComponent, deps: [{ token: OptionChangesService }, { token: DependencyDomService }], target: i0.ɵɵFactoryTarget.Component });
-TimelineYearViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimelineYearViewComponent, selector: "kendo-gantt-timeline-year-view", providers: [
+TimelineYearViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimelineYearViewComponent, isStandalone: true, selector: "kendo-gantt-timeline-year-view", providers: [
         {
             provide: ViewBase,
             useExisting: forwardRef(() => TimelineYearViewComponent)
@@ -8010,10 +7945,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             provide: ViewBase,
                             useExisting: forwardRef(() => TimelineYearViewComponent)
                         }
-                    ]
+                    ],
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: OptionChangesService }, { type: DependencyDomService }]; } });
 
+/**
+ * A directive which handles the [`selectionChange`]({% slug api_gantt_ganttcomponent %}#toc-selectionchange) event of the Gantt
+ * ([see example]({% slug selection_gantt %}#toc-built-in-directive))
+ */
+class SelectableDirective {
+    constructor(gantt) {
+        this.gantt = gantt;
+        /**
+         * Fires when the selected keys are changed.
+         */
+        this.selectedKeysChange = new EventEmitter();
+        this.state = new Set();
+        this.isSelected = this.isSelected.bind(this);
+        this.selectionChange = this.selectionChange.bind(this);
+        this.selectable = true;
+    }
+    /**
+     * @hidden
+     */
+    set selectable(value) {
+        if (value) {
+            this.gantt.isSelected = this.isSelected;
+            this.subscribeSelection();
+        }
+        else {
+            this.gantt.isSelected = () => false;
+            this.unsubscribeSelection();
+        }
+        this.gantt.selectable = value;
+        this.gantt.updateView();
+    }
+    /**
+     * Sets the selected keys.
+     */
+    set selectedKeys(value) {
+        if (isPresent(value) && value === this.lastChange) {
+            return;
+        }
+        // prevent multiple items displayed as selected as multiple selection still not supported fully
+        const keys = (value || []).slice(0, 1);
+        this.state = new Set(keys);
+        this.gantt.updateView();
+    }
+    /**
+     * The field name or a function that specifies the data item unique key identifier.
+     * By default, the string field `id` is used.
+     */
+    set itemKey(value) {
+        if (isString(value)) {
+            this._keyGetter = getter(value);
+        }
+        else {
+            this._keyGetter = value;
+        }
+    }
+    get keyGetter() {
+        return this._keyGetter || this.gantt.idGetter;
+    }
+    ngOnDestroy() {
+        this.unsubscribeSelection();
+    }
+    isSelected(dataItem) {
+        return this.state.has(this.keyGetter(dataItem));
+    }
+    selectionChange({ action, items }) {
+        this.state.clear();
+        if (action === 'select') {
+            items.forEach(item => this.state.add(this.keyGetter(item)));
+        }
+        this.emitSelectedItemsChange();
+    }
+    emitSelectedItemsChange() {
+        this.lastChange = Array.from(this.state);
+        this.selectedKeysChange.emit(this.lastChange);
+    }
+    subscribeSelection() {
+        this.unsubscribeSelection();
+        this.selectionSubscription = this.gantt.selectionChange.subscribe(this.selectionChange);
+    }
+    unsubscribeSelection() {
+        if (this.selectionSubscription) {
+            this.selectionSubscription.unsubscribe();
+            this.selectionSubscription = null;
+        }
+    }
+}
+SelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectableDirective, deps: [{ token: GanttComponent }], target: i0.ɵɵFactoryTarget.Directive });
+SelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SelectableDirective, isStandalone: true, selector: "[kendoGanttSelectable]", inputs: { selectable: "selectable", selectedKeys: "selectedKeys", itemKey: "itemKey" }, outputs: { selectedKeysChange: "selectedKeysChange" }, exportAs: ["kendoGanttSelectable"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'kendoGanttSelectable',
+                    selector: '[kendoGanttSelectable]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: GanttComponent }]; }, propDecorators: { selectable: [{
+                type: Input
+            }], selectedKeys: [{
+                type: Input
+            }], selectedKeysChange: [{
+                type: Output
+            }], itemKey: [{
+                type: Input
+            }] } });
+
 /**
  * Custom component messages override default component messages
  * ([see example](slug:globalization_treelist#toc-custom-messages)).
@@ -8028,7 +8069,7 @@ class CustomMessagesComponent extends Messages {
     }
 }
 CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, selector: "kendo-gantt-messages", providers: [
+CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-gantt-messages", providers: [
         {
             provide: Messages,
             useExisting: forwardRef(() => CustomMessagesComponent)
@@ -8044,74 +8085,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         }
                     ],
                     selector: 'kendo-gantt-messages',
-                    template: ``
+                    template: ``,
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
-const IMPORTED_MODULES = [
-    CommonModule,
-    ReactiveFormsModule,
-    LabelModule,
-    InputsModule,
-    DateInputsModule,
-    ButtonsModule,
-    SplitterModule,
-    TreeListModule,
-    ButtonsModule,
-    DialogModule,
-    EventsModule,
-    PopupModule,
-    DraggableModule,
-    TabStripModule,
-    GridModule,
-    DropDownsModule,
-    IconsModule,
-    IntlModule,
-    WatermarkModule
-];
-const DECLARATIONS = [
+/**
+* Utility array that contains all `@progress/kendo-angular-gantt` related components and directives
+*/
+const KENDO_GANTT = [
     GanttComponent,
     GanttFlatBindingDirective,
     GanttHierarchyBindingDirective,
-    GanttTaskComponent,
-    GanttSummaryTaskComponent,
-    GanttMilestoneTaskComponent,
-    GanttTimelineComponent,
-    GanttTasksTableBodyComponent,
-    GanttHeaderTableBodyComponent,
     GanttTaskContentTemplateDirective,
     GanttTaskTemplateDirective,
     GanttSummaryTaskTemplateDirective,
     ToolbarTemplateDirective,
-    ToolbarComponent,
     ViewSelectorComponent,
     GanttColumnComponent,
     GanttColumnGroupComponent,
     GanttSpanColumnComponent,
-    FilterMenuTemplateDirective,
     FilterCellTemplateDirective,
+    FilterMenuTemplateDirective,
     CellTemplateDirective,
     EditTemplateDirective,
     ColumnMenuTemplateDirective,
     HeaderTemplateDirective,
     FooterTemplateDirective,
     GanttExpandableDirective,
-    GanttDependencyDirective,
     DependencyDragCreateDirective,
     TimelineDayViewComponent,
     TimelineWeekViewComponent,
     TimelineMonthViewComponent,
     TimelineYearViewComponent,
     SelectableDirective,
-    EditDialogComponent,
     CustomMessagesComponent,
-    LocalizedMessagesDirective,
-    GanttAddTaskComponent,
-    DragValidationTooltipComponent,
-    TimelineScrollableDirective,
-    DependenciesTableComponent,
-    TaskFieldsComponent
+    GanttAddTaskComponent
 ];
+
+// IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Gantt component.
@@ -8146,118 +8158,44 @@ const DECLARATIONS = [
 class GanttModule {
 }
 GanttModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GanttModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: GanttModule, declarations: [GanttComponent,
-        GanttFlatBindingDirective,
-        GanttHierarchyBindingDirective,
-        GanttTaskComponent,
-        GanttSummaryTaskComponent,
-        GanttMilestoneTaskComponent,
-        GanttTimelineComponent,
-        GanttTasksTableBodyComponent,
-        GanttHeaderTableBodyComponent,
-        GanttTaskContentTemplateDirective,
-        GanttTaskTemplateDirective,
-        GanttSummaryTaskTemplateDirective,
-        ToolbarTemplateDirective,
-        ToolbarComponent,
-        ViewSelectorComponent,
-        GanttColumnComponent,
-        GanttColumnGroupComponent,
-        GanttSpanColumnComponent,
-        FilterMenuTemplateDirective,
-        FilterCellTemplateDirective,
-        CellTemplateDirective,
-        EditTemplateDirective,
-        ColumnMenuTemplateDirective,
-        HeaderTemplateDirective,
-        FooterTemplateDirective,
-        GanttExpandableDirective,
-        GanttDependencyDirective,
-        DependencyDragCreateDirective,
-        TimelineDayViewComponent,
-        TimelineWeekViewComponent,
-        TimelineMonthViewComponent,
-        TimelineYearViewComponent,
-        SelectableDirective,
-        EditDialogComponent,
-        CustomMessagesComponent,
-        LocalizedMessagesDirective,
-        GanttAddTaskComponent,
-        DragValidationTooltipComponent,
-        TimelineScrollableDirective,
-        DependenciesTableComponent,
-        TaskFieldsComponent], imports: [CommonModule,
-        ReactiveFormsModule,
-        LabelModule,
-        InputsModule,
-        DateInputsModule,
-        ButtonsModule,
-        SplitterModule,
-        TreeListModule,
-        ButtonsModule,
-        DialogModule,
-        EventsModule,
-        PopupModule,
-        DraggableModule,
-        TabStripModule,
-        GridModule,
-        DropDownsModule,
-        IconsModule,
-        IntlModule,
-        WatermarkModule], exports: [GanttComponent,
-        GanttFlatBindingDirective,
-        GanttHierarchyBindingDirective,
-        GanttTaskComponent,
-        GanttSummaryTaskComponent,
-        GanttMilestoneTaskComponent,
-        GanttTimelineComponent,
-        GanttTasksTableBodyComponent,
-        GanttHeaderTableBodyComponent,
-        GanttTaskContentTemplateDirective,
-        GanttTaskTemplateDirective,
-        GanttSummaryTaskTemplateDirective,
-        ToolbarTemplateDirective,
-        ToolbarComponent,
-        ViewSelectorComponent,
-        GanttColumnComponent,
-        GanttColumnGroupComponent,
-        GanttSpanColumnComponent,
-        FilterMenuTemplateDirective,
-        FilterCellTemplateDirective,
-        CellTemplateDirective,
-        EditTemplateDirective,
-        ColumnMenuTemplateDirective,
-        HeaderTemplateDirective,
-        FooterTemplateDirective,
-        GanttExpandableDirective,
-        GanttDependencyDirective,
-        DependencyDragCreateDirective,
-        TimelineDayViewComponent,
-        TimelineWeekViewComponent,
-        TimelineMonthViewComponent,
-        TimelineYearViewComponent,
-        SelectableDirective,
-        EditDialogComponent,
-        CustomMessagesComponent,
-        LocalizedMessagesDirective,
-        GanttAddTaskComponent,
-        DragValidationTooltipComponent,
-        TimelineScrollableDirective,
-        DependenciesTableComponent,
-        TaskFieldsComponent] });
+GanttModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: GanttModule, imports: [GanttComponent, GanttFlatBindingDirective, GanttHierarchyBindingDirective, GanttTaskContentTemplateDirective, GanttTaskTemplateDirective, GanttSummaryTaskTemplateDirective, ToolbarTemplateDirective, ViewSelectorComponent, GanttColumnComponent, GanttColumnGroupComponent, GanttSpanColumnComponent, FilterCellTemplateDirective, FilterMenuTemplateDirective, CellTemplateDirective, EditTemplateDirective, ColumnMenuTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, GanttExpandableDirective, DependencyDragCreateDirective, TimelineDayViewComponent, TimelineWeekViewComponent, TimelineMonthViewComponent, TimelineYearViewComponent, SelectableDirective, CustomMessagesComponent, GanttAddTaskComponent], exports: [GanttComponent, GanttFlatBindingDirective, GanttHierarchyBindingDirective, GanttTaskContentTemplateDirective, GanttTaskTemplateDirective, GanttSummaryTaskTemplateDirective, ToolbarTemplateDirective, ViewSelectorComponent, GanttColumnComponent, GanttColumnGroupComponent, GanttSpanColumnComponent, FilterCellTemplateDirective, FilterMenuTemplateDirective, CellTemplateDirective, EditTemplateDirective, ColumnMenuTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, GanttExpandableDirective, DependencyDragCreateDirective, TimelineDayViewComponent, TimelineWeekViewComponent, TimelineMonthViewComponent, TimelineYearViewComponent, SelectableDirective, CustomMessagesComponent, GanttAddTaskComponent] });
 GanttModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttModule, providers: [{
             provide: L10N_PREFIX,
             useValue: 'kendo.gantt'
         }, {
             provide: TOUCH_ENABLED,
             useValue: touchEnabled
-        }], imports: [IMPORTED_MODULES] });
+        },
+        // InputsModule providers
+        IconsService,
+        PopupService,
+        ResizeBatchService,
+        DialogContainerService,
+        DialogService,
+        WindowService,
+        WindowContainerService,
+        // DateInputsModule providers
+        CalendarDOMService,
+        CenturyViewService,
+        DecadeViewService,
+        MonthViewService,
+        YearViewService,
+        WeekNamesService,
+        NavigationService$1,
+        TimePickerDOMService,
+        HoursService,
+        MinutesService,
+        SecondsService,
+        MillisecondsService,
+        DayPeriodService,
+        // TreeListModule providers
+        ColumnResizingService
+    ], imports: [GanttComponent, ViewSelectorComponent, GanttColumnComponent, GanttColumnGroupComponent, GanttSpanColumnComponent, TimelineDayViewComponent, TimelineWeekViewComponent, TimelineMonthViewComponent, TimelineYearViewComponent, CustomMessagesComponent, GanttAddTaskComponent] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [...IMPORTED_MODULES],
-                    declarations: [...DECLARATIONS],
-                    exports: [...DECLARATIONS],
+                    imports: [...KENDO_GANTT],
+                    exports: [...KENDO_GANTT],
                     entryComponents: [DragValidationTooltipComponent],
                     providers: [{
                             provide: L10N_PREFIX,
@@ -8265,7 +8203,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         }, {
                             provide: TOUCH_ENABLED,
                             useValue: touchEnabled
-                        }]
+                        },
+                        // InputsModule providers
+                        IconsService,
+                        PopupService,
+                        ResizeBatchService,
+                        DialogContainerService,
+                        DialogService,
+                        WindowService,
+                        WindowContainerService,
+                        // DateInputsModule providers
+                        CalendarDOMService,
+                        CenturyViewService,
+                        DecadeViewService,
+                        MonthViewService,
+                        YearViewService,
+                        WeekNamesService,
+                        NavigationService$1,
+                        TimePickerDOMService,
+                        HoursService,
+                        MinutesService,
+                        SecondsService,
+                        MillisecondsService,
+                        DayPeriodService,
+                        // TreeListModule providers
+                        ColumnResizingService
+                    ]
                 }]
         }] });
 
@@ -8273,5 +8236,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CellCloseEvent, CellTemplateDirective, ColumnMenuTemplateDirective, CustomMessagesComponent, DependenciesTableComponent, DependencyDragCreateDirective, DependencyType, DragValidationTooltipComponent, EditDialogComponent, EditTemplateDirective, FilterCellTemplateDirective, FilterMenuTemplateDirective, FooterTemplateDirective, GanttAddTaskComponent, GanttColumnBase, GanttColumnComponent, GanttColumnGroupComponent, GanttComponent, GanttDependencyDirective, GanttExpandableDirective, GanttFlatBindingDirective, GanttHeaderTableBodyComponent, GanttHierarchyBindingDirective, GanttMilestoneTaskComponent, GanttModule, GanttSpanColumnComponent, GanttSummaryTaskComponent, GanttSummaryTaskTemplateDirective, GanttTaskComponent, GanttTaskContentTemplateDirective, GanttTaskTemplateDirective, GanttTasksTableBodyComponent, GanttTimelineComponent, HeaderTemplateDirective, LocalizedMessagesDirective, SelectableDirective, TaskFieldsComponent, TimelineDayViewComponent, TimelineMonthViewComponent, TimelineScrollableDirective, TimelineWeekViewComponent, TimelineYearViewComponent, ToolbarComponent, ToolbarTemplateDirective, ViewSelectorComponent };
+export { CellCloseEvent, CellTemplateDirective, ColumnMenuTemplateDirective, CustomMessagesComponent, DependenciesTableComponent, DependencyDragCreateDirective, DependencyType, DragValidationTooltipComponent, EditDialogComponent, EditTemplateDirective, FilterCellTemplateDirective, FilterMenuTemplateDirective, FooterTemplateDirective, GanttAddTaskComponent, GanttColumnBase, GanttColumnComponent, GanttColumnGroupComponent, GanttComponent, GanttDependencyDirective, GanttExpandableDirective, GanttFlatBindingDirective, GanttHeaderTableBodyComponent, GanttHierarchyBindingDirective, GanttMilestoneTaskComponent, GanttModule, GanttSpanColumnComponent, GanttSummaryTaskComponent, GanttSummaryTaskTemplateDirective, GanttTaskComponent, GanttTaskContentTemplateDirective, GanttTaskTemplateDirective, GanttTasksTableBodyComponent, GanttTimelineComponent, HeaderTemplateDirective, KENDO_GANTT, LocalizedMessagesDirective, SelectableDirective, TaskFieldsComponent, TimelineDayViewComponent, TimelineMonthViewComponent, TimelineScrollableDirective, TimelineWeekViewComponent, TimelineYearViewComponent, ToolbarComponent, ToolbarTemplateDirective, ViewSelectorComponent };