@progress/kendo-angular-gantt 2.0.0-next.202204011501 → 2.0.0-next.202204121507

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
+            }] } });

package/esm2015/editing/edit-dialog.component.js

@@ -0,0 +1,170 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input } from '@angular/core';
+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 "@progress/kendo-angular-l10n";
+import * as i4 from "@progress/kendo-angular-dialog";
+import * as i5 from "@progress/kendo-angular-layout";
+import * as i6 from "./task-fields.component";
+import * as i7 from "./dependencies-table.component";
+import * as i8 from "@progress/kendo-angular-treelist";
+import * as i9 from "@progress/kendo-angular-buttons";
+import * as i10 from "@progress/kendo-angular-common";
+/**
+ * @hidden
+ */
+export class EditDialogComponent {
+    constructor(mapper, editService, cdr, localizationService) {
+        this.mapper = mapper;
+        this.editService = editService;
+        this.cdr = cdr;
+        this.localizationService = localizationService;
+    }
+    ngOnInit() {
+        this.editService.loadTasks(this.data).subscribe(value => {
+            this.loadedTasks = value;
+        });
+    }
+    get predecessors() {
+        return this.editService.predecessors;
+    }
+    set predecessors(items) {
+        this.editService.predecessors = items;
+    }
+    get successors() {
+        return this.editService.successors;
+    }
+    set successors(items) {
+        this.editService.successors = items;
+    }
+    getText(token) {
+        return this.localizationService.get(token);
+    }
+    getDependencyType(typeId) {
+        return DependencyType[typeId];
+    }
+    handleEditingResult(editResultType) {
+        this.editService.triggerEditEvent(editResultType);
+    }
+    handleTaskDelete() {
+        this.editService.taskDelete.next(this.editService.dataItem);
+    }
+}
+EditDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditDialogComponent, deps: [{ token: i1.MappingService }, { token: i2.EditService }, { token: i0.ChangeDetectorRef }, { token: i3.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+EditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EditDialogComponent, selector: "kendo-gantt-edit-dialog", inputs: { data: "data" }, ngImport: i0, template: `
+        <kendo-dialog
+            [title]="getText('taskEditingDialogTitle')"
+            [width]="575"
+            [height]="470"
+            (close)="handleEditingResult('cancel')">
+            <kendo-dialog-messages
+                [closeTitle]="getText('taskEditingDialogCloseTitle')"></kendo-dialog-messages>
+
+            <kendo-tabstrip [keepTabContent]="true" style="height: 345px;">
+                <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="normal">
+                <button
+                    kendoButton
+                    [kendoEventsOutsideAngular]="{
+                        click: handleTaskDelete
+                    }"
+                    [scope]="this"
+                >
+                    {{ getText('deleteButtonText') }}
+                </button>
+                <kendo-treelist-spacer></kendo-treelist-spacer>
+                <button kendoButton [primary]="true" (click)="handleEditingResult('save')">{{ getText('saveButtonText') }}</button>
+                <button kendoButton (click)="handleEditingResult('cancel')">{{ getText('cancelButtonText') }}</button>
+            </kendo-dialog-actions>
+        </kendo-dialog>
+    `, isInline: true, components: [{ type: i4.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: i5.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i5.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon"], exportAs: ["kendoTabStripTab"] }, { type: i6.TaskFieldsComponent, selector: "kendo-gantt-task-fields" }, { type: i7.DependenciesTableComponent, selector: "kendo-gantt-dependencies-table", inputs: ["tasks", "dependencies", "dependencyType"], outputs: ["dependenciesChange"] }, { type: i4.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i8.TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }], directives: [{ type: i4.CustomMessagesComponent, selector: "kendo-dialog-messages, kendo-window-messages" }, { type: i5.TabContentDirective, selector: "[kendoTabContent]" }, { type: i9.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: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-gantt-edit-dialog',
+                    template: `
+        <kendo-dialog
+            [title]="getText('taskEditingDialogTitle')"
+            [width]="575"
+            [height]="470"
+            (close)="handleEditingResult('cancel')">
+            <kendo-dialog-messages
+                [closeTitle]="getText('taskEditingDialogCloseTitle')"></kendo-dialog-messages>
+
+            <kendo-tabstrip [keepTabContent]="true" style="height: 345px;">
+                <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="normal">
+                <button
+                    kendoButton
+                    [kendoEventsOutsideAngular]="{
+                        click: handleTaskDelete
+                    }"
+                    [scope]="this"
+                >
+                    {{ getText('deleteButtonText') }}
+                </button>
+                <kendo-treelist-spacer></kendo-treelist-spacer>
+                <button kendoButton [primary]="true" (click)="handleEditingResult('save')">{{ getText('saveButtonText') }}</button>
+                <button kendoButton (click)="handleEditingResult('cancel')">{{ getText('cancelButtonText') }}</button>
+            </kendo-dialog-actions>
+        </kendo-dialog>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.MappingService }, { type: i2.EditService }, { type: i0.ChangeDetectorRef }, { type: i3.LocalizationService }]; }, propDecorators: { data: [{
+                type: Input
+            }] } });

package/esm2015/editing/edit.service.js

@@ -0,0 +1,111 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable } from '@angular/core';
+import { EMPTY, forkJoin, isObservable, of, Subject } from 'rxjs';
+import { map, expand, reduce } from 'rxjs/operators';
+import { isPresent, normalizeGanttData } from '../utils';
+import * as i0 from "@angular/core";
+import * as i1 from "../common/mapping.service";
+/**
+ * @hidden
+ */
+export class EditService {
+    constructor(mapper) {
+        this.mapper = mapper;
+        this.showEditingDialog = new Subject();
+        this.taskDelete = new Subject();
+        this.editEvent = new Subject();
+        this.addEvent = new Subject();
+        this.predecessors = [];
+        this.successors = [];
+        this.updatedItems = [];
+        this.deletedItems = [];
+        this.itemIndex = (item, data) => {
+            return data.findIndex(dataItem => this.mapper.extractFromTask(dataItem, 'id') === this.mapper.extractFromTask(item, 'id'));
+        };
+    }
+    set dependencies(items) {
+        // Can this whole thing be moved to edit-dialog? Dependencies might not be needed here
+        const dataItemId = this.mapper.extractFromTask(this.dataItem, 'id');
+        this.predecessors = items.filter(item => this.mapper.extractFromDependency(item, 'toId') === dataItemId);
+        this.successors = items.filter(item => this.mapper.extractFromDependency(item, 'fromId') === dataItemId);
+    }
+    get dependencies() {
+        return [...this.predecessors, ...this.successors];
+    }
+    createEditDialog(dataItem, taskFormGroup, dependencies) {
+        this.dataItem = dataItem;
+        this.taskFormGroup = taskFormGroup;
+        this.dependencies = dependencies;
+        this.showEditingDialog.next(true);
+    }
+    closeEditDialog() {
+        this.showEditingDialog.next(false);
+        this.dataItem = undefined;
+        this.taskFormGroup = undefined;
+        this.dependencies = [];
+        this.updatedItems = [];
+        this.deletedItems = [];
+    }
+    triggerEditEvent(editResultType) {
+        this.editEvent.next({
+            taskFormGroup: this.taskFormGroup,
+            dataItem: this.dataItem,
+            dependencies: {
+                createdItems: this.getCreatedDependencies(),
+                updatedItems: this.updatedItems,
+                deletedItems: this.deletedItems
+            },
+            editResultType
+        });
+    }
+    updateDependencies(item) {
+        if (!this.isNew(item)) {
+            // update
+            const index = this.itemIndex(item, this.updatedItems);
+            if (index !== -1) {
+                this.updatedItems.splice(index, 1, item);
+            }
+            else {
+                this.updatedItems.push(item);
+            }
+        }
+    }
+    getCreatedDependencies() {
+        return this.dependencies.filter(item => this.mapper.extractFromDependency(item, 'id') === null);
+    }
+    deleteDependency(item) {
+        const updatedIndex = this.itemIndex(item, this.updatedItems);
+        if (updatedIndex !== -1) {
+            this.updatedItems.splice(updatedIndex, 1);
+        }
+        if (!this.isNew(item)) {
+            this.deletedItems.push(item);
+        }
+    }
+    loadTasks(initialValues, isInitializer = true) {
+        return forkJoin(initialValues.map(v => this.getElementById(v))).pipe(map((value) => value.reduce((acc, item) => acc = acc.concat(normalizeGanttData(item)), [])), expand(values => {
+            if (values.some(el => this.hasChildren(el))) {
+                return this.loadTasks(values, false);
+            }
+            return EMPTY;
+        }), reduce((acc, values) => acc.concat(values), isInitializer ? [...initialValues] : []));
+    }
+    getElementById(item) {
+        const children = this.fetchChildren(item);
+        if (isObservable(children)) {
+            return children;
+        }
+        return of(children);
+    }
+    isNew(item) {
+        return !isPresent(this.mapper.extractFromDependency(item, 'id'));
+    }
+}
+EditService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditService, deps: [{ token: i1.MappingService }], target: i0.ɵɵFactoryTarget.Injectable });
+EditService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.MappingService }]; } });

package/esm2015/editing/task-fields.component.js

@@ -0,0 +1,101 @@
+/**-----------------------------------------------------------------------------------------
+* 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";
+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-inputs";
+import * as i5 from "@progress/kendo-angular-label";
+import * as i6 from "@progress/kendo-angular-dateinputs";
+import * as i7 from "@progress/kendo-angular-treelist";
+import * as i8 from "@angular/forms";
+import * as i9 from "@angular/common";
+/**
+ * @hidden
+ */
+export class TaskFieldsComponent {
+    constructor(mapper, editService, localizationService) {
+        this.mapper = mapper;
+        this.editService = editService;
+        this.localizationService = localizationService;
+    }
+    /**
+     * @hidden
+     */
+    get formGroup() {
+        return this.editService.taskFormGroup;
+    }
+    getText(token) {
+        return this.localizationService.get(token);
+    }
+}
+TaskFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TaskFieldsComponent, deps: [{ token: i1.MappingService }, { token: i2.EditService }, { token: i3.GanttLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+TaskFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TaskFieldsComponent, selector: "kendo-gantt-task-fields", ngImport: i0, template: `
+        <form class="k-form" [formGroup]="formGroup">
+            <kendo-formfield *ngIf="formGroup.contains(mapper.taskFields.title)">
+                <kendo-label [for]="mapper.taskFields.title" [text]="getText('titleFieldInputLabel')"></kendo-label>
+                <input kendoTextBox [formControlName]="mapper.taskFields.title" />
+            </kendo-formfield>
+            <div class="k-hstack">
+                <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.start)">
+                    <kendo-label [for]="mapper.taskFields.start" [text]="getText('startFieldInputLabel')"></kendo-label>
+                    <kendo-datetimepicker [formControlName]="mapper.taskFields.start"></kendo-datetimepicker>
+                </kendo-formfield>
+                <kendo-treelist-spacer></kendo-treelist-spacer>
+                <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.end)">
+                    <kendo-label [for]="mapper.taskFields.end" [text]="getText('endFieldInputLabel')"></kendo-label>
+                    <kendo-datetimepicker [formControlName]="mapper.taskFields.end"></kendo-datetimepicker>
+                </kendo-formfield>
+            </div>
+            <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.completionRatio)">
+                <kendo-label [for]="mapper.taskFields.completionRatio" [text]="getText('completionRatioFieldInputLabel')"></kendo-label>
+                <kendo-numerictextbox
+                    [formControlName]="mapper.taskFields.completionRatio"
+                    [min]="0"
+                    [max]="1"
+                    [decimals]="2"
+                    format="p2"
+                    [step]="0.01"
+                ></kendo-numerictextbox>
+            </kendo-formfield>
+        </form>
+    `, isInline: true, components: [{ type: i4.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors"] }, { type: i5.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i6.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "focusableId", "title", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "defaultTab", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur"], exportAs: ["kendo-datetimepicker"] }, { type: i7.TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }, { type: i4.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"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TaskFieldsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-gantt-task-fields',
+                    template: `
+        <form class="k-form" [formGroup]="formGroup">
+            <kendo-formfield *ngIf="formGroup.contains(mapper.taskFields.title)">
+                <kendo-label [for]="mapper.taskFields.title" [text]="getText('titleFieldInputLabel')"></kendo-label>
+                <input kendoTextBox [formControlName]="mapper.taskFields.title" />
+            </kendo-formfield>
+            <div class="k-hstack">
+                <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.start)">
+                    <kendo-label [for]="mapper.taskFields.start" [text]="getText('startFieldInputLabel')"></kendo-label>
+                    <kendo-datetimepicker [formControlName]="mapper.taskFields.start"></kendo-datetimepicker>
+                </kendo-formfield>
+                <kendo-treelist-spacer></kendo-treelist-spacer>
+                <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.end)">
+                    <kendo-label [for]="mapper.taskFields.end" [text]="getText('endFieldInputLabel')"></kendo-label>
+                    <kendo-datetimepicker [formControlName]="mapper.taskFields.end"></kendo-datetimepicker>
+                </kendo-formfield>
+            </div>
+            <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.completionRatio)">
+                <kendo-label [for]="mapper.taskFields.completionRatio" [text]="getText('completionRatioFieldInputLabel')"></kendo-label>
+                <kendo-numerictextbox
+                    [formControlName]="mapper.taskFields.completionRatio"
+                    [min]="0"
+                    [max]="1"
+                    [decimals]="2"
+                    format="p2"
+                    [step]="0.01"
+                ></kendo-numerictextbox>
+            </kendo-formfield>
+        </form>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.MappingService }, { type: i2.EditService }, { type: i3.GanttLocalizationService }]; } });

package/esm2015/editing/utils.js

@@ -0,0 +1,15 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export const getEditItem = (dataItem, data, mapper) => {
+    const treeListDataItem = data.find(item => mapper.extractFromTask(item.data, 'id') === mapper.extractFromTask(dataItem, 'id'));
+    return mapPath(treeListDataItem);
+};
+const mapPath = (item) => ({
+    dataItem: item.data,
+    parent: item.parent.data ? mapPath(item.parent) : null
+});

package/esm2015/expanded-state/expand-event.js

@@ -0,0 +1,9 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Arguments for the Gantt `expand` and `collapse` events.
+ */
+export class ExpandEvent {
+}

package/esm2015/expanded-state/expandable.directive.js

@@ -0,0 +1,23 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Input } from '@angular/core';
+import { ExpandableDirective } from '@progress/kendo-angular-treelist';
+import * as i0 from "@angular/core";
+/**
+ * A directive which controls the expanded state of the items.
+ */
+export class GanttExpandableDirective extends ExpandableDirective {
+}
+GanttExpandableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttExpandableDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+GanttExpandableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: GanttExpandableDirective, selector: "[kendoGanttExpandable]", inputs: { expandBy: "expandBy" }, exportAs: ["kendoGanttExpandable"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttExpandableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'kendoGanttExpandable',
+                    selector: '[kendoGanttExpandable]'
+                }]
+        }], propDecorators: { expandBy: [{
+                type: Input
+            }] } });