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

package/fesm2020/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, EventEmitter, Inject, LOCALE_ID, 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, EventEmitter, Inject, LOCALE_ID, 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 { cloneDate, addWeeks, firstDayInWeek, addDays, lastDayOfMonth, getDate, firstDayOfMonth, addMonths, lastMonthOfYear, MS_PER_HOUR, MS_PER_DAY, isEqual } from '@progress/kendo-date-math';
 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 { map, distinctUntilChanged, take, switchMap, expand, reduce, filter } from 'rxjs/operators';
 import { getter, touchEnabled } from '@progress/kendo-common';
-import * as i6 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i1 from '@progress/kendo-angular-intl';
-import { IntlService, IntlModule } from '@progress/kendo-angular-intl';
+import { IntlService } from '@progress/kendo-angular-intl';
 import { __decorate, __param, __metadata } from 'tslib';
 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: 1721828061,
+    version: '16.6.0-develop.1',
     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'
 };
 
@@ -732,6 +720,268 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; } });
 
+/**
+ * @hidden
+ *
+ * Gets the offset (top and left values) relative to a target element.
+ */
+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;
+};
+/**
+ * @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));
+    }
+    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));
+    }
+    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)
+    };
+};
+
+/**
+ * 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;
+        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, 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
  */
@@ -1697,143 +1947,61 @@ GanttTaskBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version:
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttTaskBase, decorators: [{
             type: Directive,
             args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'kendo-gantt-task-base'
-                }]
-        }], ctorParameters: function () { return [{ type: MappingService }, { type: TimelineViewService }, { type: DependencyDomService }, { type: OptionChangesService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; }, propDecorators: { wrapperClass: [{
-                type: HostBinding,
-                args: ['class.k-task-wrap']
-            }], taskIndexAttribute: [{
-                type: HostBinding,
-                args: ['attr.data-task-index']
-            }], taskElement: [{
-                type: ViewChild,
-                args: ['task', { static: true }]
-            }], dataItem: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], level: [{
-                type: Input
-            }], renderDependencyDragClues: [{
-                type: Input
-            }], selectable: [{
-                type: Input
-            }], isSelected: [{
-                type: Input
-            }], activeView: [{
-                type: Input
-            }], taskClass: [{
-                type: Input
-            }], taskOffset: [{
-                type: HostBinding,
-                args: ['style.left.px']
-            }] } });
-
-/**
- * @hidden
- */
-class GanttTaskComponent extends GanttTaskBase {
-    constructor(editService, touchEnabled, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
-        super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService);
-        this.editService = editService;
-        this.touchEnabled = touchEnabled;
-        this.xIcon = xIcon;
-    }
-    onTaskDelete() {
-        this.editService.dataItem = this.dataItem;
-        this.editService.taskDelete.next(this.dataItem);
-    }
-}
-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: [
-        {
-            provide: GanttTaskBase,
-            useExisting: forwardRef(() => GanttTaskComponent)
-        }
-    ], usesInheritance: true, ngImport: i0, template: `
-        <div
-            #task
-            class="k-task k-task-single"
-            role="treeitem"
-            [ngClass]="taskClass(dataItem)"
-            [style.width.px]="taskWidth"
-            [attr.title]="mapper.extractFromTask(dataItem, 'title')"
-            [class.k-selected]="isSelected(dataItem)"
-            [attr.aria-selected]="ariaSelected"
-            [attr.aria-level]="level + 1"
-        >
-            <ng-container *ngIf="!taskTemplate">
-                <div
-                    class="k-task-complete"
-                    [style.width.px]="completionOverlayWidth"
-                        aria-hidden="true"
-                >
-                </div>
-                <div class="k-task-content">
-                    <div class="k-task-template">
-                        <ng-container *ngIf="!taskContentTemplate; else taskContent">
-                            {{ mapper.extractFromTask(dataItem, 'title') }}
-                        </ng-container>
-                        <ng-template
-                            #taskContent
-                            [ngTemplateOutlet]="taskContentTemplate"
-                            [ngTemplateOutletContext]="{ $implicit: dataItem }"
-                        >
-                        </ng-template>
-                    </div>
-                    <span
-                        class="k-task-actions"
-                        aria-hidden="true"
-                    >
-                        <span
-                            class="k-link k-task-delete"
-                            [kendoEventsOutsideAngular]="{
-                                click: onTaskDelete
-                            }"
-                            [scope]="this"
-                        >
-                            <kendo-icon-wrapper
-                                icon="x"
-                                [svgIcon]="xIcon"></kendo-icon-wrapper>
-                        </span>
-                    </span>
-                </div>
-            </ng-container>
-            <ng-template
-                *ngIf="taskTemplate"
-                [ngTemplateOutlet]="taskTemplate"
-                [ngTemplateOutletContext]="{
-                    $implicit: dataItem,
-                    elementWidth: taskWidth
-                }"
-            >
-            </ng-template>
-        </div>
-        <ng-container *ngIf="renderDependencyDragClues">
-            <div
-                class="k-task-dot k-task-start k-touch-action-none"
-                [class.k-display-block]="touchEnabled"
-            >
-            </div>
-            <div
-                class="k-task-dot k-task-end k-touch-action-none"
-                [class.k-display-block]="touchEnabled"
-            >
-            </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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttTaskComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-gantt-task',
-                    providers: [
-                        {
-                            provide: GanttTaskBase,
-                            useExisting: forwardRef(() => GanttTaskComponent)
-                        }
-                    ],
-                    template: `
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'kendo-gantt-task-base'
+                }]
+        }], ctorParameters: function () { return [{ type: MappingService }, { type: TimelineViewService }, { type: DependencyDomService }, { type: OptionChangesService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; }, propDecorators: { wrapperClass: [{
+                type: HostBinding,
+                args: ['class.k-task-wrap']
+            }], taskIndexAttribute: [{
+                type: HostBinding,
+                args: ['attr.data-task-index']
+            }], taskElement: [{
+                type: ViewChild,
+                args: ['task', { static: true }]
+            }], dataItem: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], level: [{
+                type: Input
+            }], renderDependencyDragClues: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], isSelected: [{
+                type: Input
+            }], activeView: [{
+                type: Input
+            }], taskClass: [{
+                type: Input
+            }], taskOffset: [{
+                type: HostBinding,
+                args: ['style.left.px']
+            }] } });
+
+/**
+ * @hidden
+ */
+class GanttTaskComponent extends GanttTaskBase {
+    constructor(editService, touchEnabled, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
+        super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService);
+        this.editService = editService;
+        this.touchEnabled = touchEnabled;
+        this.xIcon = xIcon;
+    }
+    onTaskDelete() {
+        this.editService.dataItem = this.dataItem;
+        this.editService.taskDelete.next(this.dataItem);
+    }
+}
+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, isStandalone: true, selector: "kendo-gantt-task", inputs: { taskContentTemplate: "taskContentTemplate", taskTemplate: "taskTemplate" }, providers: [
+        {
+            provide: GanttTaskBase,
+            useExisting: forwardRef(() => GanttTaskComponent)
+        }
+    ], usesInheritance: true, ngImport: i0, template: `
         <div
             #task
             class="k-task k-task-single"
@@ -1878,205 +2046,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             <kendo-icon-wrapper
                                 icon="x"
                                 [svgIcon]="xIcon"></kendo-icon-wrapper>
-                        </span>
-                    </span>
-                </div>
-            </ng-container>
-            <ng-template
-                *ngIf="taskTemplate"
-                [ngTemplateOutlet]="taskTemplate"
-                [ngTemplateOutletContext]="{
-                    $implicit: dataItem,
-                    elementWidth: taskWidth
-                }"
-            >
-            </ng-template>
-        </div>
-        <ng-container *ngIf="renderDependencyDragClues">
-            <div
-                class="k-task-dot k-task-start k-touch-action-none"
-                [class.k-display-block]="touchEnabled"
-            >
-            </div>
-            <div
-                class="k-task-dot k-task-end k-touch-action-none"
-                [class.k-display-block]="touchEnabled"
-            >
-            </div>
-        </ng-container>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: EditService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [TOUCH_ENABLED]
-                }] }, { type: MappingService }, { type: TimelineViewService }, { type: DependencyDomService }, { type: OptionChangesService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; }, propDecorators: { taskContentTemplate: [{
-                type: Input
-            }], taskTemplate: [{
-                type: Input
-            }] } });
-
-/**
- * @hidden
- */
-class GanttSummaryTaskComponent extends GanttTaskBase {
-    constructor(touchEnabled, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
-        super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService);
-        this.touchEnabled = touchEnabled;
-        this.summaryWrapperClass = true;
-    }
-    get ariaExpanded() {
-        // if no callback is provided, all child items are displayed and the item is regarded as expanded
-        // replicates the TreeList aria-expanded behavior
-        const isExpanded = !isPresent(this.isExpanded) || this.isExpanded(this.dataItem);
-        return String(isExpanded);
-    }
-}
-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: [
-        {
-            provide: GanttTaskBase,
-            useExisting: forwardRef(() => GanttSummaryTaskComponent)
-        }
-    ], usesInheritance: true, ngImport: i0, template: `
-        <div
-            #task
-            role="treeitem"
-            class="k-task k-task-summary"
-            [ngClass]="taskClass(dataItem)"
-            [style.width.px]="taskWidth"
-            [attr.title]="mapper.extractFromTask(dataItem, 'title')"
-            [class.k-selected]="isSelected(dataItem)"
-            [attr.aria-selected]="ariaSelected"
-            [attr.aria-expanded]="ariaExpanded"
-            [attr.aria-level]="level + 1"
-        >
-            <div *ngIf="!template; else summaryTemplate"
-                class="k-task-summary-progress"
-                [style.width.px]="taskWidth">
-                <div
-                    class="k-task-summary-complete"
-                    [style.width.px]="completionOverlayWidth"
-                >
-                </div>
-            </div>
-            <ng-template
-                #summaryTemplate
-                [ngTemplateOutlet]="template"
-                [ngTemplateOutletContext]="{
-                    $implicit: dataItem,
-                    elementWidth: taskWidth
-                }"
-            >
-            </ng-template>
-        </div>
-        <ng-container *ngIf="renderDependencyDragClues">
-            <div
-                class="k-task-dot k-task-start k-touch-action-none"
-                [class.k-display-block]="touchEnabled"
-            >
-            </div>
-            <div
-                class="k-task-dot k-task-end k-touch-action-none"
-                [class.k-display-block]="touchEnabled"
-            >
-            </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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttSummaryTaskComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-gantt-summary-task',
-                    providers: [
-                        {
-                            provide: GanttTaskBase,
-                            useExisting: forwardRef(() => GanttSummaryTaskComponent)
-                        }
-                    ],
-                    template: `
-        <div
-            #task
-            role="treeitem"
-            class="k-task k-task-summary"
-            [ngClass]="taskClass(dataItem)"
-            [style.width.px]="taskWidth"
-            [attr.title]="mapper.extractFromTask(dataItem, 'title')"
-            [class.k-selected]="isSelected(dataItem)"
-            [attr.aria-selected]="ariaSelected"
-            [attr.aria-expanded]="ariaExpanded"
-            [attr.aria-level]="level + 1"
-        >
-            <div *ngIf="!template; else summaryTemplate"
-                class="k-task-summary-progress"
-                [style.width.px]="taskWidth">
-                <div
-                    class="k-task-summary-complete"
-                    [style.width.px]="completionOverlayWidth"
-                >
-                </div>
-            </div>
-            <ng-template
-                #summaryTemplate
-                [ngTemplateOutlet]="template"
-                [ngTemplateOutletContext]="{
-                    $implicit: dataItem,
-                    elementWidth: taskWidth
-                }"
-            >
-            </ng-template>
-        </div>
-        <ng-container *ngIf="renderDependencyDragClues">
-            <div
-                class="k-task-dot k-task-start k-touch-action-none"
-                [class.k-display-block]="touchEnabled"
-            >
-            </div>
-            <div
-                class="k-task-dot k-task-end k-touch-action-none"
-                [class.k-display-block]="touchEnabled"
-            >
-            </div>
-        </ng-container>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [TOUCH_ENABLED]
-                }] }, { type: MappingService }, { type: TimelineViewService }, { type: DependencyDomService }, { type: OptionChangesService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; }, propDecorators: { summaryWrapperClass: [{
-                type: HostBinding,
-                args: ['class.k-summary-wrap']
-            }], template: [{
-                type: Input
-            }], isExpanded: [{
-                type: Input
-            }] } });
-
-/**
- * @hidden
- */
-class GanttMilestoneTaskComponent extends GanttTaskBase {
-    constructor(touchEnabled, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
-        super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService);
-        this.touchEnabled = touchEnabled;
-        this.milestoneWrapperClass = true;
-    }
-}
-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: [
-        {
-            provide: GanttTaskBase,
-            useExisting: forwardRef(() => GanttMilestoneTaskComponent)
-        }
-    ], usesInheritance: true, ngImport: i0, template: `
-        <div
-            #task
-            role="treeitem"
-            class="k-task k-task-milestone"
-            [ngClass]="taskClass(dataItem)"
-            [attr.title]="mapper.extractFromTask(dataItem, 'title')"
-            [class.k-selected]="isSelected(dataItem)"
-            [attr.aria-selected]="ariaSelected"
-            [attr.aria-level]="level + 1"
-        >
+                        </span>
+                    </span>
+                </div>
+            </ng-container>
+            <ng-template
+                *ngIf="taskTemplate"
+                [ngTemplateOutlet]="taskTemplate"
+                [ngTemplateOutletContext]="{
+                    $implicit: dataItem,
+                    elementWidth: taskWidth
+                }"
+            >
+            </ng-template>
         </div>
         <ng-container *ngIf="renderDependencyDragClues">
             <div
@@ -2090,28 +2072,75 @@ 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttMilestoneTaskComponent, decorators: [{
+    `, 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: [{
-                    selector: 'kendo-gantt-milestone-task',
+                    selector: 'kendo-gantt-task',
                     providers: [
                         {
                             provide: GanttTaskBase,
-                            useExisting: forwardRef(() => GanttMilestoneTaskComponent)
+                            useExisting: forwardRef(() => GanttTaskComponent)
                         }
                     ],
                     template: `
         <div
             #task
+            class="k-task k-task-single"
             role="treeitem"
-            class="k-task k-task-milestone"
             [ngClass]="taskClass(dataItem)"
+            [style.width.px]="taskWidth"
             [attr.title]="mapper.extractFromTask(dataItem, 'title')"
             [class.k-selected]="isSelected(dataItem)"
             [attr.aria-selected]="ariaSelected"
             [attr.aria-level]="level + 1"
         >
+            <ng-container *ngIf="!taskTemplate">
+                <div
+                    class="k-task-complete"
+                    [style.width.px]="completionOverlayWidth"
+                        aria-hidden="true"
+                >
+                </div>
+                <div class="k-task-content">
+                    <div class="k-task-template">
+                        <ng-container *ngIf="!taskContentTemplate; else taskContent">
+                            {{ mapper.extractFromTask(dataItem, 'title') }}
+                        </ng-container>
+                        <ng-template
+                            #taskContent
+                            [ngTemplateOutlet]="taskContentTemplate"
+                            [ngTemplateOutletContext]="{ $implicit: dataItem }"
+                        >
+                        </ng-template>
+                    </div>
+                    <span
+                        class="k-task-actions"
+                        aria-hidden="true"
+                    >
+                        <span
+                            class="k-link k-task-delete"
+                            [kendoEventsOutsideAngular]="{
+                                click: onTaskDelete
+                            }"
+                            [scope]="this"
+                        >
+                            <kendo-icon-wrapper
+                                icon="x"
+                                [svgIcon]="xIcon"></kendo-icon-wrapper>
+                        </span>
+                    </span>
+                </div>
+            </ng-container>
+            <ng-template
+                *ngIf="taskTemplate"
+                [ngTemplateOutlet]="taskTemplate"
+                [ngTemplateOutletContext]="{
+                    $implicit: dataItem,
+                    elementWidth: taskWidth
+                }"
+            >
+            </ng-template>
         </div>
         <ng-container *ngIf="renderDependencyDragClues">
             <div
@@ -2119,469 +2148,395 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 [class.k-display-block]="touchEnabled"
             >
             </div>
-            <div
-                class="k-task-dot k-task-end k-touch-action-none"
-                [class.k-display-block]="touchEnabled"
-            >
-            </div>
-        </ng-container>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [TOUCH_ENABLED]
-                }] }, { type: MappingService }, { type: TimelineViewService }, { type: DependencyDomService }, { type: OptionChangesService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; }, propDecorators: { milestoneWrapperClass: [{
-                type: HostBinding,
-                args: ['class.k-milestone-wrap']
-            }] } });
-
-/**
- * @hidden
- */
-class GanttTasksTableBodyComponent {
-    constructor(dependencyDomService, mapper) {
-        this.dependencyDomService = dependencyDomService;
-        this.mapper = mapper;
-    }
-    set timelineRow(timelineRow) {
-        // register the row value only when the first row is rendered
-        // with server-side data-binding, the rows rendering could be delayed
-        if (isPresent(timelineRow)) {
-            this.dependencyDomService.registerTimelineRow(timelineRow.nativeElement);
-        }
-    }
-    isMileStone(item) {
-        return !item.hasChildren && isEqual(this.mapper.extractFromTask(item.data, 'start'), this.mapper.extractFromTask(item.data, 'end'));
-    }
-}
-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: `
-        <tr class="k-table-row" #timelineRow *ngFor="let item of rows; let index = index">
-            <td class="k-table-td">
-                <kendo-gantt-milestone-task
-                    *ngIf="isMileStone(item); else task"
-                    [dataItem]="item.data"
-                    [level]="item.level"
-                    [activeView]="activeView"
-                    [taskClass]="taskClass"
-                    [selectable]="selectable"
-                    [isSelected]="isTaskSelected"
-                    [index]="index"
-                    [renderDependencyDragClues]="renderDependencyDragClues"
-                >
-                </kendo-gantt-milestone-task>
-                <ng-template #task>
-                    <kendo-gantt-summary-task
-                        *ngIf="item.hasChildren"
-                        [dataItem]="item.data"
-                        [level]="item.level"
-                        [template]="summaryTaskTemplate"
-                        [activeView]="activeView"
-                        [taskClass]="taskClass"
-                        [selectable]="selectable"
-                        [isSelected]="isTaskSelected"
-                        [isExpanded]="isExpanded"
-                        [index]="index"
-                        [renderDependencyDragClues]="renderDependencyDragClues"
-                    >
-                    </kendo-gantt-summary-task>
-                    <kendo-gantt-task
-                        *ngIf="!item.hasChildren"
-                        [dataItem]="item.data"
-                        [level]="item.level"
-                        [taskContentTemplate]="taskContentTemplate"
-                        [taskTemplate]="taskTemplate"
-                        [activeView]="activeView"
-                        [taskClass]="taskClass"
-                        [selectable]="selectable"
-                        [isSelected]="isTaskSelected"
-                        [index]="index"
-                        [renderDependencyDragClues]="renderDependencyDragClues"
-                    >
-                    </kendo-gantt-task>
-                </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" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GanttTasksTableBodyComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: '[kendoGanttTasksTableBody]',
-                    template: `
-        <tr class="k-table-row" #timelineRow *ngFor="let item of rows; let index = index">
-            <td class="k-table-td">
-                <kendo-gantt-milestone-task
-                    *ngIf="isMileStone(item); else task"
-                    [dataItem]="item.data"
-                    [level]="item.level"
-                    [activeView]="activeView"
-                    [taskClass]="taskClass"
-                    [selectable]="selectable"
-                    [isSelected]="isTaskSelected"
-                    [index]="index"
-                    [renderDependencyDragClues]="renderDependencyDragClues"
-                >
-                </kendo-gantt-milestone-task>
-                <ng-template #task>
-                    <kendo-gantt-summary-task
-                        *ngIf="item.hasChildren"
-                        [dataItem]="item.data"
-                        [level]="item.level"
-                        [template]="summaryTaskTemplate"
-                        [activeView]="activeView"
-                        [taskClass]="taskClass"
-                        [selectable]="selectable"
-                        [isSelected]="isTaskSelected"
-                        [isExpanded]="isExpanded"
-                        [index]="index"
-                        [renderDependencyDragClues]="renderDependencyDragClues"
-                    >
-                    </kendo-gantt-summary-task>
-                    <kendo-gantt-task
-                        *ngIf="!item.hasChildren"
-                        [dataItem]="item.data"
-                        [level]="item.level"
-                        [taskContentTemplate]="taskContentTemplate"
-                        [taskTemplate]="taskTemplate"
-                        [activeView]="activeView"
-                        [taskClass]="taskClass"
-                        [selectable]="selectable"
-                        [isSelected]="isTaskSelected"
-                        [index]="index"
-                        [renderDependencyDragClues]="renderDependencyDragClues"
-                    >
-                    </kendo-gantt-task>
-                </ng-template>
-            </td>
-        </tr>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: DependencyDomService }, { type: MappingService }]; }, propDecorators: { timelineRow: [{
-                type: ViewChild,
-                args: ['timelineRow', { static: false }]
-            }], selectable: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], activeView: [{
-                type: Input
-            }], taskContentTemplate: [{
-                type: Input
-            }], taskTemplate: [{
-                type: Input
-            }], summaryTaskTemplate: [{
-                type: Input
-            }], taskClass: [{
-                type: Input
-            }], isExpanded: [{
-                type: Input
-            }], isTaskSelected: [{
-                type: Input
-            }], renderDependencyDragClues: [{
-                type: Input
-            }] } });
-
-/**
- * @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>
-    `
+            <div
+                class="k-task-dot k-task-end k-touch-action-none"
+                [class.k-display-block]="touchEnabled"
+            >
+            </div>
+        </ng-container>
+    `,
+                    standalone: true,
+                    imports: [NgClass, NgIf, NgTemplateOutlet, EventsOutsideAngularDirective, IconWrapperComponent]
                 }]
-        }], propDecorators: { tbodyClass: [{
-                type: HostBinding,
-                args: ['class.k-table-tbody']
-            }], groupSlots: [{
+        }], ctorParameters: function () { return [{ type: EditService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TOUCH_ENABLED]
+                }] }, { type: MappingService }, { type: TimelineViewService }, { type: DependencyDomService }, { type: OptionChangesService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; }, propDecorators: { taskContentTemplate: [{
                 type: Input
-            }], slots: [{
+            }], taskTemplate: [{
                 type: Input
             }] } });
 
 /**
  * @hidden
- *
- * Gets the offset (top and left values) relative to a target element.
  */
-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;
+class GanttSummaryTaskComponent extends GanttTaskBase {
+    constructor(touchEnabled, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
+        super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService);
+        this.touchEnabled = touchEnabled;
+        this.summaryWrapperClass = true;
     }
-    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));
+    get ariaExpanded() {
+        // if no callback is provided, all child items are displayed and the item is regarded as expanded
+        // replicates the TreeList aria-expanded behavior
+        const isExpanded = !isPresent(this.isExpanded) || this.isExpanded(this.dataItem);
+        return String(isExpanded);
     }
-    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 });
+}
+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, 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)
         }
-        // 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));
-    }
-    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
-    };
-};
+    ], usesInheritance: true, ngImport: i0, template: `
+        <div
+            #task
+            role="treeitem"
+            class="k-task k-task-summary"
+            [ngClass]="taskClass(dataItem)"
+            [style.width.px]="taskWidth"
+            [attr.title]="mapper.extractFromTask(dataItem, 'title')"
+            [class.k-selected]="isSelected(dataItem)"
+            [attr.aria-selected]="ariaSelected"
+            [attr.aria-expanded]="ariaExpanded"
+            [attr.aria-level]="level + 1"
+        >
+            <div *ngIf="!template; else summaryTemplate"
+                class="k-task-summary-progress"
+                [style.width.px]="taskWidth">
+                <div
+                    class="k-task-summary-complete"
+                    [style.width.px]="completionOverlayWidth"
+                >
+                </div>
+            </div>
+            <ng-template
+                #summaryTemplate
+                [ngTemplateOutlet]="template"
+                [ngTemplateOutletContext]="{
+                    $implicit: dataItem,
+                    elementWidth: taskWidth
+                }"
+            >
+            </ng-template>
+        </div>
+        <ng-container *ngIf="renderDependencyDragClues">
+            <div
+                class="k-task-dot k-task-start k-touch-action-none"
+                [class.k-display-block]="touchEnabled"
+            >
+            </div>
+            <div
+                class="k-task-dot k-task-end k-touch-action-none"
+                [class.k-display-block]="touchEnabled"
+            >
+            </div>
+        </ng-container>
+    `, 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: [{
+                    selector: 'kendo-gantt-summary-task',
+                    providers: [
+                        {
+                            provide: GanttTaskBase,
+                            useExisting: forwardRef(() => GanttSummaryTaskComponent)
+                        }
+                    ],
+                    template: `
+        <div
+            #task
+            role="treeitem"
+            class="k-task k-task-summary"
+            [ngClass]="taskClass(dataItem)"
+            [style.width.px]="taskWidth"
+            [attr.title]="mapper.extractFromTask(dataItem, 'title')"
+            [class.k-selected]="isSelected(dataItem)"
+            [attr.aria-selected]="ariaSelected"
+            [attr.aria-expanded]="ariaExpanded"
+            [attr.aria-level]="level + 1"
+        >
+            <div *ngIf="!template; else summaryTemplate"
+                class="k-task-summary-progress"
+                [style.width.px]="taskWidth">
+                <div
+                    class="k-task-summary-complete"
+                    [style.width.px]="completionOverlayWidth"
+                >
+                </div>
+            </div>
+            <ng-template
+                #summaryTemplate
+                [ngTemplateOutlet]="template"
+                [ngTemplateOutletContext]="{
+                    $implicit: dataItem,
+                    elementWidth: taskWidth
+                }"
+            >
+            </ng-template>
+        </div>
+        <ng-container *ngIf="renderDependencyDragClues">
+            <div
+                class="k-task-dot k-task-start k-touch-action-none"
+                [class.k-display-block]="touchEnabled"
+            >
+            </div>
+            <div
+                class="k-task-dot k-task-end k-touch-action-none"
+                [class.k-display-block]="touchEnabled"
+            >
+            </div>
+        </ng-container>
+    `,
+                    standalone: true,
+                    imports: [NgClass, NgIf, NgTemplateOutlet]
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TOUCH_ENABLED]
+                }] }, { type: MappingService }, { type: TimelineViewService }, { type: DependencyDomService }, { type: OptionChangesService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; }, propDecorators: { summaryWrapperClass: [{
+                type: HostBinding,
+                args: ['class.k-summary-wrap']
+            }], template: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }] } });
+
 /**
  * @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)
-    };
-};
+class GanttMilestoneTaskComponent extends GanttTaskBase {
+    constructor(touchEnabled, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
+        super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService);
+        this.touchEnabled = touchEnabled;
+        this.milestoneWrapperClass = true;
+    }
+}
+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, isStandalone: true, selector: "kendo-gantt-milestone-task", host: { properties: { "class.k-milestone-wrap": "this.milestoneWrapperClass" } }, providers: [
+        {
+            provide: GanttTaskBase,
+            useExisting: forwardRef(() => GanttMilestoneTaskComponent)
+        }
+    ], usesInheritance: true, ngImport: i0, template: `
+        <div
+            #task
+            role="treeitem"
+            class="k-task k-task-milestone"
+            [ngClass]="taskClass(dataItem)"
+            [attr.title]="mapper.extractFromTask(dataItem, 'title')"
+            [class.k-selected]="isSelected(dataItem)"
+            [attr.aria-selected]="ariaSelected"
+            [attr.aria-level]="level + 1"
+        >
+        </div>
+        <ng-container *ngIf="renderDependencyDragClues">
+            <div
+                class="k-task-dot k-task-start k-touch-action-none"
+                [class.k-display-block]="touchEnabled"
+            >
+            </div>
+            <div
+                class="k-task-dot k-task-end k-touch-action-none"
+                [class.k-display-block]="touchEnabled"
+            >
+            </div>
+        </ng-container>
+    `, 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: [{
+                    selector: 'kendo-gantt-milestone-task',
+                    providers: [
+                        {
+                            provide: GanttTaskBase,
+                            useExisting: forwardRef(() => GanttMilestoneTaskComponent)
+                        }
+                    ],
+                    template: `
+        <div
+            #task
+            role="treeitem"
+            class="k-task k-task-milestone"
+            [ngClass]="taskClass(dataItem)"
+            [attr.title]="mapper.extractFromTask(dataItem, 'title')"
+            [class.k-selected]="isSelected(dataItem)"
+            [attr.aria-selected]="ariaSelected"
+            [attr.aria-level]="level + 1"
+        >
+        </div>
+        <ng-container *ngIf="renderDependencyDragClues">
+            <div
+                class="k-task-dot k-task-start k-touch-action-none"
+                [class.k-display-block]="touchEnabled"
+            >
+            </div>
+            <div
+                class="k-task-dot k-task-end k-touch-action-none"
+                [class.k-display-block]="touchEnabled"
+            >
+            </div>
+        </ng-container>
+    `,
+                    standalone: true,
+                    imports: [NgClass, NgIf]
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TOUCH_ENABLED]
+                }] }, { type: MappingService }, { type: TimelineViewService }, { type: DependencyDomService }, { type: OptionChangesService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; }, propDecorators: { milestoneWrapperClass: [{
+                type: HostBinding,
+                args: ['class.k-milestone-wrap']
+            }] } });
 
-/**
- * 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;
-        this.zone = zone;
-        this.renderer = renderer;
-        this.mapper = mapper;
+class GanttTasksTableBodyComponent {
+    constructor(dependencyDomService, 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);
-        }
+        this.mapper = mapper;
     }
-    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;
+    set timelineRow(timelineRow) {
+        // register the row value only when the first row is rendered
+        // with server-side data-binding, the rows rendering could be delayed
+        if (isPresent(timelineRow)) {
+            this.dependencyDomService.registerTimelineRow(timelineRow.nativeElement);
         }
-        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);
+    isMileStone(item) {
+        return !item.hasChildren && isEqual(this.mapper.extractFromTask(item.data, 'start'), this.mapper.extractFromTask(item.data, 'end'));
     }
 }
-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,
+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, 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
+                    *ngIf="isMileStone(item); else task"
+                    [dataItem]="item.data"
+                    [level]="item.level"
+                    [activeView]="activeView"
+                    [taskClass]="taskClass"
+                    [selectable]="selectable"
+                    [isSelected]="isTaskSelected"
+                    [index]="index"
+                    [renderDependencyDragClues]="renderDependencyDragClues"
+                >
+                </kendo-gantt-milestone-task>
+                <ng-template #task>
+                    <kendo-gantt-summary-task
+                        *ngIf="item.hasChildren"
+                        [dataItem]="item.data"
+                        [level]="item.level"
+                        [template]="summaryTaskTemplate"
+                        [activeView]="activeView"
+                        [taskClass]="taskClass"
+                        [selectable]="selectable"
+                        [isSelected]="isTaskSelected"
+                        [isExpanded]="isExpanded"
+                        [index]="index"
+                        [renderDependencyDragClues]="renderDependencyDragClues"
+                    >
+                    </kendo-gantt-summary-task>
+                    <kendo-gantt-task
+                        *ngIf="!item.hasChildren"
+                        [dataItem]="item.data"
+                        [level]="item.level"
+                        [taskContentTemplate]="taskContentTemplate"
+                        [taskTemplate]="taskTemplate"
+                        [activeView]="activeView"
+                        [taskClass]="taskClass"
+                        [selectable]="selectable"
+                        [isSelected]="isTaskSelected"
+                        [index]="index"
+                        [renderDependencyDragClues]="renderDependencyDragClues"
+                    >
+                    </kendo-gantt-task>
+                </ng-template>
+            </td>
+        </tr>
+    `, 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: [{
-                    selector: '[kendoGanttDependency]'
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoGanttTasksTableBody]',
+                    template: `
+        <tr class="k-table-row" #timelineRow *ngFor="let item of rows; let index = index">
+            <td class="k-table-td">
+                <kendo-gantt-milestone-task
+                    *ngIf="isMileStone(item); else task"
+                    [dataItem]="item.data"
+                    [level]="item.level"
+                    [activeView]="activeView"
+                    [taskClass]="taskClass"
+                    [selectable]="selectable"
+                    [isSelected]="isTaskSelected"
+                    [index]="index"
+                    [renderDependencyDragClues]="renderDependencyDragClues"
+                >
+                </kendo-gantt-milestone-task>
+                <ng-template #task>
+                    <kendo-gantt-summary-task
+                        *ngIf="item.hasChildren"
+                        [dataItem]="item.data"
+                        [level]="item.level"
+                        [template]="summaryTaskTemplate"
+                        [activeView]="activeView"
+                        [taskClass]="taskClass"
+                        [selectable]="selectable"
+                        [isSelected]="isTaskSelected"
+                        [isExpanded]="isExpanded"
+                        [index]="index"
+                        [renderDependencyDragClues]="renderDependencyDragClues"
+                    >
+                    </kendo-gantt-summary-task>
+                    <kendo-gantt-task
+                        *ngIf="!item.hasChildren"
+                        [dataItem]="item.data"
+                        [level]="item.level"
+                        [taskContentTemplate]="taskContentTemplate"
+                        [taskTemplate]="taskTemplate"
+                        [activeView]="activeView"
+                        [taskClass]="taskClass"
+                        [selectable]="selectable"
+                        [isSelected]="isTaskSelected"
+                        [index]="index"
+                        [renderDependencyDragClues]="renderDependencyDragClues"
+                    >
+                    </kendo-gantt-task>
+                </ng-template>
+            </td>
+        </tr>
+    `,
+                    standalone: true,
+                    imports: [NgFor, NgIf, GanttMilestoneTaskComponent, GanttSummaryTaskComponent, GanttTaskComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: MappingService }, { type: DependencyDomService }]; }, propDecorators: { dependency: [{
+        }], ctorParameters: function () { return [{ type: DependencyDomService }, { type: MappingService }]; }, propDecorators: { timelineRow: [{
+                type: ViewChild,
+                args: ['timelineRow', { static: false }]
+            }], selectable: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], activeView: [{
+                type: Input
+            }], taskContentTemplate: [{
+                type: Input
+            }], taskTemplate: [{
+                type: Input
+            }], summaryTaskTemplate: [{
+                type: Input
+            }], taskClass: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], isTaskSelected: [{
+                type: Input
+            }], renderDependencyDragClues: [{
                 type: Input
             }] } });
 
@@ -2761,16 +2716,61 @@ 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
             }] } });
 
+/**
+ * @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, 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
+            }] } });
+
 /**
  * @hidden
  */
@@ -2840,7 +2840,7 @@ class GanttTimelineComponent {
     }
 }
 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: `
+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">
@@ -2943,7 +2943,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: [{
@@ -3051,7 +3051,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,
@@ -3182,11 +3184,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: [{
                     type: Optional
@@ -3208,11 +3211,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: [{
                     type: Optional
@@ -3233,11 +3237,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: [{
                     type: Optional
@@ -3257,11 +3262,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: [{
                     type: Optional
@@ -3285,11 +3291,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: [{
                     type: Optional
@@ -3311,11 +3318,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: [{
                     type: Optional
@@ -3341,11 +3349,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: [{
                     type: Optional
@@ -3395,7 +3404,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)
@@ -3411,7 +3420,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: [{
                     type: SkipSelf
@@ -3507,7 +3517,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)
@@ -3523,7 +3533,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: [{
                     type: SkipSelf
@@ -3610,7 +3621,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)
@@ -3626,7 +3637,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: [{
                     type: SkipSelf
@@ -3768,11 +3780,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: [{
                     type: Optional
@@ -3813,11 +3826,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: [{
                     type: Optional
@@ -3853,11 +3867,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: [{
                     type: Optional
@@ -3972,11 +3987,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: [{
                     type: Optional
@@ -4044,851 +4060,863 @@ const mapPath = (item) => ({
 /**
  * @hidden
  */
-class ToolbarNavigationService {
-    constructor(renderer) {
-        this.renderer = renderer;
-        this.focusIndex = 0;
+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;
     }
-    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();
+    get taskId() {
+        return this.editService.dataItem.id;
     }
-}
-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();
+    // 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';
     }
-    /**
-     * @hidden
-     */
-    onClick(viewType) {
-        if (viewType !== this.activeView) {
-            this.activeViewChange.emit(viewType);
+    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);
+        });
     }
-    /**
-     * @hidden
-     */
-    getViewTypeText(viewType) {
-        return this.localizationService.get(`${viewType}ViewText`);
+    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]);
     }
-    /**
-     * @hidden
-     */
-    onActiveViewChange(event) {
-        this.activeViewChange.emit(event.target.value);
+    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;
-    }
-    /**
-     * @hidden
-     */
-    getText(message) {
-        return this.localizationService.get(message);
-    }
-    /**
-     * @hidden
-     */
-    handleOpen(e) {
-        if (!this.editService.getSelectedItem()) {
-            e.preventDefault();
-        }
+        this.localizationService = localizationService;
     }
     /**
      * @hidden
      */
-    handleMouseClick() {
-        if (!this.editService.getSelectedItem()) {
-            this.ngZone.run(() => {
-                this.editService.addEvent.next({
-                    selectedItem: null,
-                    actionType: 'addTask'
-                });
-            });
-        }
+    get formGroup() {
+        return this.editService.taskFormGroup;
     }
-    /**
-     * @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: [{
+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-toolbar',
-                    providers: [ToolbarNavigationService],
+                    selector: 'kendo-gantt-edit-dialog',
                     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>
-    `
+        <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: 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: [{
+        }], 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
             }] } });
 
@@ -5053,7 +5081,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)
@@ -5068,7 +5096,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 }]; } });
 
@@ -6344,7 +6373,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,
         {
@@ -6740,7 +6769,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: [{
@@ -7143,7 +7172,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,
@@ -7237,252 +7268,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
             }] } });
 
 /**
@@ -7499,7 +7348,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"
@@ -7533,10 +7382,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.
@@ -7831,11 +7762,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
@@ -7854,7 +7786,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)
@@ -7870,7 +7802,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 }]; } });
 
@@ -7887,7 +7820,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)
@@ -7903,7 +7836,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 }]; } });
 
@@ -7920,7 +7854,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)
@@ -7936,7 +7870,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 }]; } });
 
@@ -7953,7 +7888,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)
@@ -7969,10 +7904,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)).
@@ -7987,7 +8028,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)
@@ -8003,74 +8044,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.
@@ -8105,118 +8117,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,
@@ -8224,7 +8162,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
+                    ]
                 }]
         }] });
 
@@ -8232,5 +8195,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 };