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

package/esm2015/rendering/gantt-header-table-body.component.js

@@ -0,0 +1,42 @@
+/**-----------------------------------------------------------------------------------------
+* 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 * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+/**
+ * @hidden
+ */
+export class GanttHeaderTableBodyComponent {
+}
+GanttHeaderTableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttHeaderTableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GanttHeaderTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: GanttHeaderTableBodyComponent, selector: "[kendoGanttHeaderTableBody]", inputs: { groupSlots: "groupSlots", slots: "slots" }, ngImport: i0, template: `
+        <tr>
+            <td *ngFor="let item of groupSlots" [attr.colspan]="item.span" class="k-header">{{ item.text }}</td>
+        </tr>
+
+        <tr>
+            <td *ngFor="let item of slots" [attr.colspan]="item.span" class="k-header" [attr.title]="item.text">{{ item.text }}</td>
+        </tr>
+    `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttHeaderTableBodyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoGanttHeaderTableBody]',
+                    template: `
+        <tr>
+            <td *ngFor="let item of groupSlots" [attr.colspan]="item.span" class="k-header">{{ item.text }}</td>
+        </tr>
+
+        <tr>
+            <td *ngFor="let item of slots" [attr.colspan]="item.span" class="k-header" [attr.title]="item.text">{{ item.text }}</td>
+        </tr>
+    `
+                }]
+        }], propDecorators: { groupSlots: [{
+                type: Input
+            }], slots: [{
+                type: Input
+            }] } });

package/esm2015/rendering/gantt-milestone-task.component.js

@@ -0,0 +1,107 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, forwardRef, HostBinding, Inject } from '@angular/core';
+import { TOUCH_ENABLED } from '../common/touch-enabled';
+import { GanttTaskBase } from './gantt-task-base';
+import * as i0 from "@angular/core";
+import * as i1 from "../common/mapping.service";
+import * as i2 from "./../timeline/timeline-view.service";
+import * as i3 from "../dependencies/dependency-dom.service";
+import * as i4 from "../common/option-changes.service";
+import * as i5 from "../navigation/navigation.service";
+import * as i6 from "@angular/common";
+/**
+ * @hidden
+ */
+export 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: "12.2.16", ngImport: i0, type: GanttMilestoneTaskComponent, deps: [{ token: TOUCH_ENABLED }, { token: i1.MappingService }, { token: i2.TimelineViewService }, { token: i3.DependencyDomService }, { token: i4.OptionChangesService }, { token: i0.ChangeDetectorRef }, { token: i5.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+GanttMilestoneTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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-state-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, styles: ["\n        .k-task.k-focus {\n            box-shadow: 0 0 4px 3px grey;\n            outline: none;\n        }\n        .k-task.k-focus.k-state-selected {\n            box-shadow: 0 0 4px 3px #ffaea8;\n        }\n    "], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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-state-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>
+    `,
+                    styles: [`
+        .k-task.k-focus {
+            box-shadow: 0 0 4px 3px grey;
+            outline: none;
+        }
+        .k-task.k-focus.k-state-selected {
+            box-shadow: 0 0 4px 3px #ffaea8;
+        }
+    `]
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TOUCH_ENABLED]
+                }] }, { type: i1.MappingService }, { type: i2.TimelineViewService }, { type: i3.DependencyDomService }, { type: i4.OptionChangesService }, { type: i0.ChangeDetectorRef }, { type: i5.NavigationService }]; }, propDecorators: { milestoneWrapperClass: [{
+                type: HostBinding,
+                args: ['class.k-milestone-wrap']
+            }] } });

package/esm2015/rendering/gantt-summary-task.component.js

@@ -0,0 +1,158 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, forwardRef, HostBinding, Inject, Input } from '@angular/core';
+import { TOUCH_ENABLED } from '../common/touch-enabled';
+import { GanttTaskBase } from './gantt-task-base';
+import { isPresent } from '../utils';
+import * as i0 from "@angular/core";
+import * as i1 from "../common/mapping.service";
+import * as i2 from "./../timeline/timeline-view.service";
+import * as i3 from "../dependencies/dependency-dom.service";
+import * as i4 from "../common/option-changes.service";
+import * as i5 from "../navigation/navigation.service";
+import * as i6 from "@angular/common";
+/**
+ * @hidden
+ */
+export 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: "12.2.16", ngImport: i0, type: GanttSummaryTaskComponent, deps: [{ token: TOUCH_ENABLED }, { token: i1.MappingService }, { token: i2.TimelineViewService }, { token: i3.DependencyDomService }, { token: i4.OptionChangesService }, { token: i0.ChangeDetectorRef }, { token: i5.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+GanttSummaryTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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-state-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, styles: ["\n        .k-task.k-focus {\n            box-shadow: 0 0 4px 3px grey;\n            outline: none;\n        }\n        .k-task.k-focus.k-state-selected {\n            box-shadow: 0 0 4px 3px #ffaea8;\n        }\n    "], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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-state-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>
+    `,
+                    styles: [`
+        .k-task.k-focus {
+            box-shadow: 0 0 4px 3px grey;
+            outline: none;
+        }
+        .k-task.k-focus.k-state-selected {
+            box-shadow: 0 0 4px 3px #ffaea8;
+        }
+    `]
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TOUCH_ENABLED]
+                }] }, { type: i1.MappingService }, { type: i2.TimelineViewService }, { type: i3.DependencyDomService }, { type: i4.OptionChangesService }, { type: i0.ChangeDetectorRef }, { type: i5.NavigationService }]; }, propDecorators: { summaryWrapperClass: [{
+                type: HostBinding,
+                args: ['class.k-summary-wrap']
+            }], template: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }] } });

package/esm2015/rendering/gantt-task-base.js

@@ -0,0 +1,148 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, HostBinding, Input, ViewChild } from '@angular/core';
+import { MS_PER_HOUR, MS_PER_DAY } from '@progress/kendo-date-math';
+import { Subscription } from 'rxjs';
+import { isNumber, isPresent } from '../utils';
+import * as i0 from "@angular/core";
+import * as i1 from "../common/mapping.service";
+import * as i2 from "../timeline/timeline-view.service";
+import * as i3 from "../dependencies/dependency-dom.service";
+import * as i4 from "../common/option-changes.service";
+import * as i5 from "../navigation/navigation.service";
+const slotUnitDuration = {
+    day: MS_PER_HOUR,
+    week: MS_PER_DAY,
+    month: MS_PER_DAY * 7
+};
+const FOCUSED_CLASS = 'k-focus';
+/**
+ * @hidden
+ */
+export class GanttTaskBase {
+    constructor(mapper, // left public to be available for usage in the templates
+    timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
+        this.mapper = mapper;
+        this.timelineViewService = timelineViewService;
+        this.dependencyDomService = dependencyDomService;
+        this.optionChangesService = optionChangesService;
+        this.cdr = cdr;
+        this.navigationService = navigationService;
+        this.wrapperClass = true;
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(this.optionChangesService.viewChanges
+            .subscribe(() => this.cdr.markForCheck()));
+        this.subscriptions.add(this.navigationService.taskStatusChanges
+            .subscribe(this.updateActiveState.bind(this)));
+    }
+    get taskIndexAttribute() {
+        return this.index;
+    }
+    get ariaSelected() {
+        // assinging null will not render the attribute at all (desired in selectable="false" mode)
+        return this.selectable ? String(this.isSelected(this.dataItem)) : null;
+    }
+    get slotUnitDuration() {
+        return slotUnitDuration[this.activeView];
+    }
+    get viewService() {
+        return this.timelineViewService.service(this.activeView);
+    }
+    get slotWidth() {
+        return this.viewService.options.slotWidth;
+    }
+    get taskWidth() {
+        const itemDuration = this.mapper.extractFromTask(this.dataItem, 'end') - this.mapper.extractFromTask(this.dataItem, 'start');
+        const durationInSlotUnits = itemDuration / this.slotUnitDuration;
+        const width = durationInSlotUnits * this.slotWidth;
+        return width;
+    }
+    /**
+     * The `left` style prop has to be applied to the host element (.k-task-wrap), as the drag clue elements are displayed on .k-task-wrap hover.
+     * Applying the `left` offset to the inner .k-task element leaves the .k-task-wrap element rendered with an offset of 0 somewhere on the left
+     * and hovering just the .k-task element doesn't expose the drag clues.
+     * Additionally, positioning the entire container takes care of positioning the hints as well.
+     */
+    get taskOffset() {
+        const timeAfterViewStart = this.mapper.extractFromTask(this.dataItem, 'start') - this.viewService.viewStart;
+        const offsetInSlotUnits = timeAfterViewStart / this.slotUnitDuration;
+        const offset = offsetInSlotUnits * this.slotWidth;
+        return offset;
+    }
+    get completionOverlayWidth() {
+        const overlayWidth = this.taskWidth * this.mapper.extractFromTask(this.dataItem, 'completionRatio');
+        // fall-back to 0 in case no completionRatio is provided
+        return isNumber(overlayWidth) ? overlayWidth : 0;
+    }
+    ngOnChanges(changes) {
+        if (isPresent(changes.dataItem)) {
+            if (isPresent(changes.dataItem.previousValue)) {
+                this.dependencyDomService.unregisterTask(changes.dataItem.previousValue);
+            }
+            this.dependencyDomService.registerTask(this.dataItem, this.taskElement.nativeElement);
+        }
+        else if (isPresent(changes.activeView)) {
+            this.dependencyDomService.notifyChanges();
+        }
+        if (this.navigationService.enabled && isPresent(changes.index)) {
+            this.updateActiveState(this.navigationService.activeTask);
+        }
+    }
+    ngOnDestroy() {
+        if (isPresent(this.dataItem)) {
+            this.dependencyDomService.unregisterTask(this.dataItem);
+        }
+        this.subscriptions.unsubscribe();
+    }
+    updateActiveState({ activeIndex, isFocused }) {
+        const isActive = activeIndex === this.index;
+        const tabindex = isActive ? '0' : '-1';
+        this.taskElement.nativeElement.setAttribute('tabindex', tabindex);
+        if (isActive && isFocused) {
+            this.taskElement.nativeElement.focus();
+            this.taskElement.nativeElement.classList.add(FOCUSED_CLASS);
+        }
+        else {
+            this.taskElement.nativeElement.classList.remove(FOCUSED_CLASS);
+        }
+    }
+}
+GanttTaskBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttTaskBase, deps: [{ token: i1.MappingService }, { token: i2.TimelineViewService }, { token: i3.DependencyDomService }, { token: i4.OptionChangesService }, { token: i0.ChangeDetectorRef }, { token: i5.NavigationService }], target: i0.ɵɵFactoryTarget.Directive });
+GanttTaskBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: GanttTaskBase, selector: "kendo-gantt-task-base", inputs: { dataItem: "dataItem", index: "index", level: "level", renderDependencyDragClues: "renderDependencyDragClues", selectable: "selectable", isSelected: "isSelected", activeView: "activeView", taskClass: "taskClass" }, host: { properties: { "class.k-task-wrap": "this.wrapperClass", "attr.data-task-index": "this.taskIndexAttribute", "style.left.px": "this.taskOffset" } }, viewQueries: [{ propertyName: "taskElement", first: true, predicate: ["task"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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: i1.MappingService }, { type: i2.TimelineViewService }, { type: i3.DependencyDomService }, { type: i4.OptionChangesService }, { type: i0.ChangeDetectorRef }, { type: i5.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']
+            }] } });

package/esm2015/rendering/gantt-task.component.js

@@ -0,0 +1,204 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, forwardRef, Inject, Input } from '@angular/core';
+import { TOUCH_ENABLED } from '../common/touch-enabled';
+import { GanttTaskBase } from './gantt-task-base';
+import * as i0 from "@angular/core";
+import * as i1 from "../editing/edit.service";
+import * as i2 from "../common/mapping.service";
+import * as i3 from "./../timeline/timeline-view.service";
+import * as i4 from "../dependencies/dependency-dom.service";
+import * as i5 from "../common/option-changes.service";
+import * as i6 from "../navigation/navigation.service";
+import * as i7 from "@angular/common";
+import * as i8 from "@progress/kendo-angular-common";
+/**
+ * @hidden
+ */
+export 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;
+    }
+    onTaskDelete() {
+        this.editService.dataItem = this.dataItem;
+        this.editService.taskDelete.next(this.dataItem);
+    }
+}
+GanttTaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttTaskComponent, deps: [{ token: i1.EditService }, { token: TOUCH_ENABLED }, { token: i2.MappingService }, { token: i3.TimelineViewService }, { token: i4.DependencyDomService }, { token: i5.OptionChangesService }, { token: i0.ChangeDetectorRef }, { token: i6.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+GanttTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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-state-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"
+                        >
+                            <span class="k-icon k-i-close"></span>
+                        </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, styles: ["\n        .k-task.k-focus {\n            box-shadow: 0 0 4px 3px grey;\n            outline: none;\n        }\n        .k-task.k-focus.k-state-selected {\n            box-shadow: 0 0 4px 3px #ffaea8;\n        }\n    "], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttTaskComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-gantt-task',
+                    providers: [
+                        {
+                            provide: GanttTaskBase,
+                            useExisting: forwardRef(() => GanttTaskComponent)
+                        }
+                    ],
+                    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-state-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"
+                        >
+                            <span class="k-icon k-i-close"></span>
+                        </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>
+    `,
+                    styles: [`
+        .k-task.k-focus {
+            box-shadow: 0 0 4px 3px grey;
+            outline: none;
+        }
+        .k-task.k-focus.k-state-selected {
+            box-shadow: 0 0 4px 3px #ffaea8;
+        }
+    `]
+                }]
+        }], ctorParameters: function () { return [{ type: i1.EditService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TOUCH_ENABLED]
+                }] }, { type: i2.MappingService }, { type: i3.TimelineViewService }, { type: i4.DependencyDomService }, { type: i5.OptionChangesService }, { type: i0.ChangeDetectorRef }, { type: i6.NavigationService }]; }, propDecorators: { taskContentTemplate: [{
+                type: Input
+            }], taskTemplate: [{
+                type: Input
+            }] } });