@progress/kendo-angular-gantt 1.0.1 → 2.0.0-dev.202204150748

package/{dist/es2015 → esm2015}/common/mapping.service.js

@@ -2,19 +2,16 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
 import { Injectable } from '@angular/core';
 import { getter } from '@progress/kendo-common';
 import { DEFAULT_DEPENDENCY_MODEL_FIELDS } from '../models/gantt-dependency-model-fields.interface';
 import { DEFAULT_TASK_MODEL_FIELDS } from '../models/gantt-task-model-fields.interface';
 import { isPresent } from '../utils';
+import * as i0 from "@angular/core";
 /**
  * @hidden
  */
-let MappingService = class MappingService {
-    /**
-     * @hidden
-     */
+export class MappingService {
     constructor() {
         this._taskFields = Object.assign({}, DEFAULT_TASK_MODEL_FIELDS);
         this._dependencyFields = Object.assign({}, DEFAULT_DEPENDENCY_MODEL_FIELDS);
@@ -24,7 +21,7 @@ let MappingService = class MappingService {
      * Uses the default values for fields which are not specified.
      */
     set taskFields(fields) {
-        this._taskFields = Object.assign({}, DEFAULT_TASK_MODEL_FIELDS, fields);
+        this._taskFields = Object.assign(Object.assign({}, DEFAULT_TASK_MODEL_FIELDS), fields);
     }
     get taskFields() {
         return this._taskFields;
@@ -34,7 +31,7 @@ let MappingService = class MappingService {
      * Uses the default values for fields which are not specified.
      */
     set dependencyFields(fields) {
-        this._dependencyFields = Object.assign({}, DEFAULT_DEPENDENCY_MODEL_FIELDS, fields);
+        this._dependencyFields = Object.assign(Object.assign({}, DEFAULT_DEPENDENCY_MODEL_FIELDS), fields);
     }
     get dependencyFields() {
         return this._dependencyFields;
@@ -59,8 +56,9 @@ let MappingService = class MappingService {
         }
         return getter(this.dependencyFields[field])(dataItem);
     }
-};
-MappingService = tslib_1.__decorate([
-    Injectable()
-], MappingService);
-export { MappingService };
+}
+MappingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MappingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MappingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MappingService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MappingService, decorators: [{
+            type: Injectable
+        }] });

package/{dist/es2015 → esm2015}/common/option-changes.service.js

@@ -2,15 +2,12 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
 import { Injectable, EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
 /**
  * @hidden
  */
-let OptionChangesService = class OptionChangesService {
-    /**
-     * @hidden
-     */
+export class OptionChangesService {
     constructor() {
         this.viewChanges = new EventEmitter();
         this.columnChanges = new EventEmitter();
@@ -21,8 +18,9 @@ let OptionChangesService = class OptionChangesService {
     notifyViewChanges() {
         this.viewChanges.emit();
     }
-};
-OptionChangesService = tslib_1.__decorate([
-    Injectable()
-], OptionChangesService);
-export { OptionChangesService };
+}
+OptionChangesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OptionChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+OptionChangesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OptionChangesService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OptionChangesService, decorators: [{
+            type: Injectable
+        }] });

package/{dist/es2015 → esm2015}/dependencies/dependency-dom.service.js

@@ -2,14 +2,14 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
 import { Injectable } from '@angular/core';
 import { Subject } from 'rxjs';
-import { MappingService } from '../common/mapping.service';
+import * as i0 from "@angular/core";
+import * as i1 from "../common/mapping.service";
 /**
  * @hidden
  */
-let DependencyDomService = class DependencyDomService {
+export class DependencyDomService {
     constructor(mapper) {
         this.mapper = mapper;
         this.notifier = new Subject();
@@ -62,9 +62,9 @@ let DependencyDomService = class DependencyDomService {
     notifyChanges() {
         this.notifier.next(this.dependencyDomArgs);
     }
-};
-DependencyDomService = tslib_1.__decorate([
-    Injectable(),
-    tslib_1.__metadata("design:paramtypes", [MappingService])
-], DependencyDomService);
-export { DependencyDomService };
+}
+DependencyDomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DependencyDomService, deps: [{ token: i1.MappingService }], target: i0.ɵɵFactoryTarget.Injectable });
+DependencyDomService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DependencyDomService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DependencyDomService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.MappingService }]; } });

package/{dist/es2015 → esm2015}/dependencies/dom-dependency-args.js

@@ -2,3 +2,4 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+export {};

package/{dist/es2015 → esm2015}/dependencies/gantt-dependency.directive.js

@@ -2,15 +2,15 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
-import { Directive, ElementRef, Input, NgZone, Renderer2 } from '@angular/core';
+import { Directive, Input } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { map, switchMap, take } from 'rxjs/operators';
-import { MappingService } from '../common/mapping.service';
-import { DependencyDomService } from './dependency-dom.service';
 import { isPresent } from '../utils';
 import { dependencyCoordinates, getElementRect } from './utils';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import * as i0 from "@angular/core";
+import * as i1 from "../common/mapping.service";
+import * as i2 from "./dependency-dom.service";
 /**
  * Defines the size of the arrow that will be drawn at the end of each Gantt dependency.
  */
@@ -22,7 +22,7 @@ const MIN_DISTANCE_BEFORE_TURN = 10;
 /**
  * @hidden
  */
-let GanttDependencyDirective = class GanttDependencyDirective {
+export class GanttDependencyDirective {
     constructor(polyline, zone, renderer, mapper, dependencyDomService) {
         this.polyline = polyline;
         this.zone = zone;
@@ -69,19 +69,14 @@ let GanttDependencyDirective = class GanttDependencyDirective {
         const parsedCoords = points.map(({ left, top }) => `${left},${top}`).join(' ');
         this.renderer.setAttribute(this.polyline.nativeElement, 'points', parsedCoords);
     }
-};
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], GanttDependencyDirective.prototype, "dependency", void 0);
-GanttDependencyDirective = tslib_1.__decorate([
-    Directive({
-        selector: '[kendoGanttDependency]'
-    }),
-    tslib_1.__metadata("design:paramtypes", [ElementRef,
-        NgZone,
-        Renderer2,
-        MappingService,
-        DependencyDomService])
-], GanttDependencyDirective);
-export { GanttDependencyDirective };
+}
+GanttDependencyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttDependencyDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.MappingService }, { token: i2.DependencyDomService }], target: i0.ɵɵFactoryTarget.Directive });
+GanttDependencyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: GanttDependencyDirective, selector: "[kendoGanttDependency]", inputs: { dependency: "dependency" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttDependencyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGanttDependency]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.MappingService }, { type: i2.DependencyDomService }]; }, propDecorators: { dependency: [{
+                type: Input
+            }] } });

package/{dist/es2015 → esm2015}/dependencies/utils.js

@@ -122,7 +122,6 @@ const getArrow = (top, left, isArrowWest, arrowSize) => {
         : getArrowEast(top, left, arrowSize);
     return points;
 };
-const ɵ0 = getArrow;
 const getArrowWest = (top, left, arrowSize) => {
     const points = [];
     points.push({
@@ -143,7 +142,6 @@ const getArrowWest = (top, left, arrowSize) => {
     });
     return points;
 };
-const ɵ1 = getArrowWest;
 const getArrowEast = (top, left, arrowSize) => {
     const points = [];
     points.push({
@@ -164,7 +162,6 @@ const getArrowEast = (top, left, arrowSize) => {
     });
     return points;
 };
-const ɵ2 = getArrowEast;
 /**
  * @hidden
  *
@@ -196,4 +193,3 @@ export const getElementClientCenterCoords = (element) => {
         top: top + (height / 2)
     };
 };
-export { ɵ0, ɵ1, ɵ2 };

package/{dist/es2015 → esm2015}/dragging/dependency-drag-create.directive.js

@@ -2,17 +2,17 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
-import { Directive, Input, NgZone, Renderer2 } from '@angular/core';
+import { Directive, Input } from '@angular/core';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
-import { PopupService } from '@progress/kendo-angular-popup';
-import { GanttComponent } from '../gantt.component';
-import { MappingService } from '../common/mapping.service';
-import { TimelineScrollService } from '../scrolling/timeline-scroll.service';
 import { DragValidationTooltipComponent } from './drag-validation-tooltip.component';
 import { clientToOffsetCoords, getElementClientCenterCoords } from '../dependencies/utils';
 import { isPresent, isDependencyDragClue, getClosestTaskWrapper, getDependencyTypeFromTargetTasks, getClosestTaskIndex, sameTaskClues, isTaskWrapper, fitToRange } from '../utils';
 import { elementFromPoint } from '../utils';
+import * as i0 from "@angular/core";
+import * as i1 from "../gantt.component";
+import * as i2 from "../common/mapping.service";
+import * as i3 from "@progress/kendo-angular-popup";
+import * as i4 from "../scrolling/timeline-scroll.service";
 /**
  * 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.
@@ -36,7 +36,7 @@ const DEFAULT_POPUP_VERTICAL_MARGIN = 20;
 /**
  * A directive which enables the creation of new dependencies via dragging.
  */
-let DependencyDragCreateDirective = class DependencyDragCreateDirective {
+export class DependencyDragCreateDirective {
     constructor(gantt, zone, renderer, mapper, popupService, timelineScrollService) {
         this.gantt = gantt;
         this.zone = zone;
@@ -305,20 +305,14 @@ let DependencyDragCreateDirective = class DependencyDragCreateDirective {
             top: fitToRange(top, minLeftTop, this.container.scrollHeight - popupHeight)
         };
     }
-};
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], DependencyDragCreateDirective.prototype, "displayValidationTooltip", void 0);
-DependencyDragCreateDirective = tslib_1.__decorate([
-    Directive({
-        selector: '[kendoGanttDependencyDragCreate]'
-    }),
-    tslib_1.__metadata("design:paramtypes", [GanttComponent,
-        NgZone,
-        Renderer2,
-        MappingService,
-        PopupService,
-        TimelineScrollService])
-], DependencyDragCreateDirective);
-export { DependencyDragCreateDirective };
+}
+DependencyDragCreateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DependencyDragCreateDirective, deps: [{ token: i1.GanttComponent }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i2.MappingService }, { token: i3.PopupService }, { token: i4.TimelineScrollService }], target: i0.ɵɵFactoryTarget.Directive });
+DependencyDragCreateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DependencyDragCreateDirective, selector: "[kendoGanttDependencyDragCreate]", inputs: { displayValidationTooltip: "displayValidationTooltip" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DependencyDragCreateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGanttDependencyDragCreate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.GanttComponent }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i2.MappingService }, { type: i3.PopupService }, { type: i4.TimelineScrollService }]; }, propDecorators: { displayValidationTooltip: [{
+                type: Input
+            }] } });

package/esm2015/dragging/drag-validation-tooltip.component.js

@@ -0,0 +1,57 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class DragValidationTooltipComponent {
+    constructor() {
+        /**
+         * Sets the status class of the attempted operation.
+         * Note that the status will be ignored and the `neutral` status class will be rendered,
+         * if the any of the fromTaskName or toTaskName are not populated.
+         */
+        this.isValid = false;
+    }
+}
+DragValidationTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DragValidationTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DragValidationTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DragValidationTooltipComponent, selector: "ng-component", ngImport: i0, template: `
+        <div
+            class="k-tooltip k-gantt-tooltip-validation"
+            [class.k-gantt-tooltip-valid]="showValidityStatus && isValid"
+            [class.k-gantt-tooltip-invalid]="showValidityStatus && !isValid"
+        >
+            <div class="k-gantt-tooltip-validation-row">
+                <span class="k-gantt-tooltip-validation-label">From:</span>
+                <span class="k-gantt-tooltip-validation-value">{{ fromTaskName }}</span>
+            </div>
+            <div class="k-gantt-tooltip-validation-row">
+                <span class="k-gantt-tooltip-validation-label">To:</span>
+                <span class="k-gantt-tooltip-validation-value">{{ toTaskName }}</span>
+            </div>
+        </div>
+    `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DragValidationTooltipComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+        <div
+            class="k-tooltip k-gantt-tooltip-validation"
+            [class.k-gantt-tooltip-valid]="showValidityStatus && isValid"
+            [class.k-gantt-tooltip-invalid]="showValidityStatus && !isValid"
+        >
+            <div class="k-gantt-tooltip-validation-row">
+                <span class="k-gantt-tooltip-validation-label">From:</span>
+                <span class="k-gantt-tooltip-validation-value">{{ fromTaskName }}</span>
+            </div>
+            <div class="k-gantt-tooltip-validation-row">
+                <span class="k-gantt-tooltip-validation-label">To:</span>
+                <span class="k-gantt-tooltip-validation-value">{{ toTaskName }}</span>
+            </div>
+        </div>
+    `
+                }]
+        }] });

package/{dist/es2015 → esm2015}/editing/add-task.component.js

@@ -2,15 +2,17 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
-import { Component, Input, NgZone } from '@angular/core';
-import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { EditService } from './edit.service';
+import { Component, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./edit.service";
+import * as i3 from "@progress/kendo-angular-buttons";
+import * as i4 from "@progress/kendo-angular-common";
 /**
  * The UI for adding new items to the Gantt.
  * Use it within a toolbar template to provide a custom icon or list of options.
  */
-let GanttAddTaskComponent = class GanttAddTaskComponent {
+export class GanttAddTaskComponent {
     constructor(localizationService, editService, ngZone) {
         this.localizationService = localizationService;
         this.editService = editService;
@@ -71,19 +73,24 @@ let GanttAddTaskComponent = class GanttAddTaskComponent {
             selectedItem: null
         });
     }
-};
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Array)
-], GanttAddTaskComponent.prototype, "data", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], GanttAddTaskComponent.prototype, "icon", void 0);
-GanttAddTaskComponent = tslib_1.__decorate([
-    Component({
-        selector: 'kendo-gantt-add-task',
-        template: `
+}
+GanttAddTaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttAddTaskComponent, deps: [{ token: i1.LocalizationService }, { token: i2.EditService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+GanttAddTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: GanttAddTaskComponent, selector: "kendo-gantt-add-task", inputs: { data: "data", icon: "icon" }, ngImport: i0, template: `
+        <kendo-dropdownbutton
+            [data]="data"
+            [icon]="icon"
+            [kendoEventsOutsideAngular]="{ click: handleMouseClick }"
+            [scope]="this"
+            (itemClick)="handleItemClick($event)"
+            (open)="handleOpen($event)">
+            {{ getText('addTaskText') }}
+        </kendo-dropdownbutton>
+    `, isInline: true, components: [{ type: i3.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "popupSettings", "textField", "disabled", "data", "size", "rounded", "fillMode", "themeColor", "buttonClass", "tabIndex"], outputs: ["itemClick", "open", "close", "focus", "blur"], exportAs: ["kendoDropDownButton"] }], directives: [{ type: i4.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttAddTaskComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-gantt-add-task',
+                    template: `
         <kendo-dropdownbutton
             [data]="data"
             [icon]="icon"
@@ -94,9 +101,9 @@ GanttAddTaskComponent = tslib_1.__decorate([
             {{ getText('addTaskText') }}
         </kendo-dropdownbutton>
     `
-    }),
-    tslib_1.__metadata("design:paramtypes", [LocalizationService,
-        EditService,
-        NgZone])
-], GanttAddTaskComponent);
-export { GanttAddTaskComponent };
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.EditService }, { type: i0.NgZone }]; }, propDecorators: { data: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }] } });

package/esm2015/editing/dependencies-table.component.js

@@ -0,0 +1,196 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
+import { DependencyType } from '../models/dependency-type.enum';
+import * as i0 from "@angular/core";
+import * as i1 from "../common/mapping.service";
+import * as i2 from "./edit.service";
+import * as i3 from "../localization/gantt-localization.service";
+import * as i4 from "@progress/kendo-angular-grid";
+import * as i5 from "@progress/kendo-angular-dropdowns";
+import * as i6 from "@progress/kendo-angular-buttons";
+import * as i7 from "@angular/forms";
+/**
+ * @hidden
+ */
+export 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();
+    }
+    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';
+    }
+    ngOnInit() {
+        // generate the FormGroups per each Grid row
+        if (this.formGroups.controls.length === 0) {
+            const fields = this.mapper.dependencyFields;
+            this.dependencies.forEach(item => {
+                const formGroup = new FormGroup({
+                    [fields.id]: new FormControl(this.mapper.extractFromDependency(item, 'id')),
+                    [fields.fromId]: new FormControl(this.mapper.extractFromDependency(item, 'fromId'), Validators.required),
+                    [fields.toId]: new FormControl(this.mapper.extractFromDependency(item, 'toId'), Validators.required),
+                    [fields.type]: new FormControl(this.mapper.extractFromDependency(item, 'type'), Validators.required)
+                });
+                this.formGroups.push(formGroup);
+            });
+        }
+        this.formGroups.valueChanges.subscribe(val => {
+            this.formGroups.controls.forEach(control => {
+                if (control.dirty) {
+                    this.editService.updateDependencies(control.value);
+                }
+            });
+            this.dependenciesChange.emit(val);
+        });
+    }
+    getFormControl(dataItemIndex, field) {
+        // return the FormControl for the respective column editor
+        return this.formGroups.controls
+            .find((_control, index) => index === dataItemIndex)
+            .get(this.mapper.dependencyFields[field]);
+    }
+    getText(token) {
+        return this.localizationService.get(token);
+    }
+    getDependencyTypes() {
+        const types = Object.keys(DependencyType)
+            .filter(value => typeof DependencyType[value] === 'number')
+            .map(type => {
+            return {
+                type,
+                id: DependencyType[type]
+            };
+        });
+        return types;
+    }
+    addHandler() {
+        const fields = this.mapper.dependencyFields;
+        const formGroup = new FormGroup({
+            [fields.id]: new FormControl(),
+            [fields.fromId]: new FormControl(this.dependencyIdField === 'toId' ? this.taskId : null, Validators.required),
+            [fields.toId]: new FormControl(this.dependencyIdField === 'fromId' ? this.taskId : null, Validators.required),
+            [fields.type]: new FormControl(null, Validators.required)
+        });
+        this.formGroups.push(formGroup);
+    }
+    removeHandler() {
+        const [selectedIndex] = this.selectedKeys;
+        const item = this.formGroups.at(selectedIndex).value;
+        this.editService.deleteDependency(item);
+        this.formGroups.removeAt(selectedIndex);
+    }
+}
+DependenciesTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DependenciesTableComponent, deps: [{ token: i1.MappingService }, { token: i2.EditService }, { token: i3.GanttLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DependenciesTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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 (click)="addHandler()">
+                    {{ getText('taskEditingDependenciesAddButtonText') }}
+                </button>
+                <button kendoButton (click)="removeHandler()" [disabled]="selectedKeys.length === 0">
+                    {{ 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, components: [{ type: i4.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { type: i4.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { type: i5.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.SelectionDirective, selector: "[kendoGridSelectBy]" }, { type: i4.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { type: i6.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i4.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DependenciesTableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-gantt-dependencies-table',
+                    template: `
+        <kendo-grid
+            [data]="dependencies"
+            [selectable]="{ mode: 'single' }"
+            [(selectedKeys)]="selectedKeys"
+            kendoGridSelectBy
+            [height]="275"
+        >
+            <ng-template kendoGridToolbarTemplate>
+                <button kendoButton (click)="addHandler()">
+                    {{ getText('taskEditingDependenciesAddButtonText') }}
+                </button>
+                <button kendoButton (click)="removeHandler()" [disabled]="selectedKeys.length === 0">
+                    {{ 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>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.MappingService }, { type: i2.EditService }, { type: i3.GanttLocalizationService }]; }, propDecorators: { tasks: [{
+                type: Input
+            }], dependencies: [{
+                type: Input
+            }], dependencyType: [{
+                type: Input
+            }], dependenciesChange: [{
+                type: Output
+            }] } });