@progress/kendo-angular-gantt 2.0.0-next.202204010911 → 2.0.0-next.202204121022

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

@@ -0,0 +1,160 @@
+/**-----------------------------------------------------------------------------------------
+* 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, ViewChild } from '@angular/core';
+import { isEqual } from '@progress/kendo-date-math';
+import { isPresent } from '../utils';
+import * as i0 from "@angular/core";
+import * as i1 from "../dependencies/dependency-dom.service";
+import * as i2 from "../common/mapping.service";
+import * as i3 from "./gantt-milestone-task.component";
+import * as i4 from "./gantt-summary-task.component";
+import * as i5 from "./gantt-task.component";
+import * as i6 from "@angular/common";
+/**
+ * @hidden
+ */
+export class GanttTasksTableBodyComponent {
+    constructor(dependencyDomService, mapper) {
+        this.dependencyDomService = dependencyDomService;
+        this.mapper = mapper;
+    }
+    set timelineRow(timelineRow) {
+        // register the row value only when the first row is rendered
+        // with server-side data-binding, the rows rendering could be delayed
+        if (isPresent(timelineRow)) {
+            this.dependencyDomService.registerTimelineRow(timelineRow.nativeElement);
+        }
+    }
+    isMileStone(item) {
+        return !item.hasChildren && isEqual(this.mapper.extractFromTask(item.data, 'start'), this.mapper.extractFromTask(item.data, 'end'));
+    }
+}
+GanttTasksTableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttTasksTableBodyComponent, deps: [{ token: i1.DependencyDomService }, { token: i2.MappingService }], target: i0.ɵɵFactoryTarget.Component });
+GanttTasksTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: GanttTasksTableBodyComponent, selector: "[kendoGanttTasksTableBody]", inputs: { selectable: "selectable", rows: "rows", activeView: "activeView", taskContentTemplate: "taskContentTemplate", taskTemplate: "taskTemplate", summaryTaskTemplate: "summaryTaskTemplate", taskClass: "taskClass", isExpanded: "isExpanded", isTaskSelected: "isTaskSelected", renderDependencyDragClues: "renderDependencyDragClues" }, viewQueries: [{ propertyName: "timelineRow", first: true, predicate: ["timelineRow"], descendants: true }], ngImport: i0, template: `
+        <tr #timelineRow *ngFor="let item of rows; let index = index">
+            <td>
+                <kendo-gantt-milestone-task
+                    *ngIf="isMileStone(item); else task"
+                    [dataItem]="item.data"
+                    [level]="item.level"
+                    [activeView]="activeView"
+                    [taskClass]="taskClass"
+                    [selectable]="selectable"
+                    [isSelected]="isTaskSelected"
+                    [index]="index"
+                    [renderDependencyDragClues]="renderDependencyDragClues"
+                >
+                </kendo-gantt-milestone-task>
+                <ng-template #task>
+                    <kendo-gantt-summary-task
+                        *ngIf="item.hasChildren"
+                        [dataItem]="item.data"
+                        [level]="item.level"
+                        [template]="summaryTaskTemplate"
+                        [activeView]="activeView"
+                        [taskClass]="taskClass"
+                        [selectable]="selectable"
+                        [isSelected]="isTaskSelected"
+                        [isExpanded]="isExpanded"
+                        [index]="index"
+                        [renderDependencyDragClues]="renderDependencyDragClues"
+                    >
+                    </kendo-gantt-summary-task>
+                    <kendo-gantt-task
+                        *ngIf="!item.hasChildren"
+                        [dataItem]="item.data"
+                        [level]="item.level"
+                        [taskContentTemplate]="taskContentTemplate"
+                        [taskTemplate]="taskTemplate"
+                        [activeView]="activeView"
+                        [taskClass]="taskClass"
+                        [selectable]="selectable"
+                        [isSelected]="isTaskSelected"
+                        [index]="index"
+                        [renderDependencyDragClues]="renderDependencyDragClues"
+                    >
+                    </kendo-gantt-task>
+                </ng-template>
+            </td>
+        </tr>
+    `, isInline: true, components: [{ type: i3.GanttMilestoneTaskComponent, selector: "kendo-gantt-milestone-task" }, { type: i4.GanttSummaryTaskComponent, selector: "kendo-gantt-summary-task", inputs: ["template", "isExpanded"] }, { type: i5.GanttTaskComponent, selector: "kendo-gantt-task", inputs: ["taskContentTemplate", "taskTemplate"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttTasksTableBodyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoGanttTasksTableBody]',
+                    template: `
+        <tr #timelineRow *ngFor="let item of rows; let index = index">
+            <td>
+                <kendo-gantt-milestone-task
+                    *ngIf="isMileStone(item); else task"
+                    [dataItem]="item.data"
+                    [level]="item.level"
+                    [activeView]="activeView"
+                    [taskClass]="taskClass"
+                    [selectable]="selectable"
+                    [isSelected]="isTaskSelected"
+                    [index]="index"
+                    [renderDependencyDragClues]="renderDependencyDragClues"
+                >
+                </kendo-gantt-milestone-task>
+                <ng-template #task>
+                    <kendo-gantt-summary-task
+                        *ngIf="item.hasChildren"
+                        [dataItem]="item.data"
+                        [level]="item.level"
+                        [template]="summaryTaskTemplate"
+                        [activeView]="activeView"
+                        [taskClass]="taskClass"
+                        [selectable]="selectable"
+                        [isSelected]="isTaskSelected"
+                        [isExpanded]="isExpanded"
+                        [index]="index"
+                        [renderDependencyDragClues]="renderDependencyDragClues"
+                    >
+                    </kendo-gantt-summary-task>
+                    <kendo-gantt-task
+                        *ngIf="!item.hasChildren"
+                        [dataItem]="item.data"
+                        [level]="item.level"
+                        [taskContentTemplate]="taskContentTemplate"
+                        [taskTemplate]="taskTemplate"
+                        [activeView]="activeView"
+                        [taskClass]="taskClass"
+                        [selectable]="selectable"
+                        [isSelected]="isTaskSelected"
+                        [index]="index"
+                        [renderDependencyDragClues]="renderDependencyDragClues"
+                    >
+                    </kendo-gantt-task>
+                </ng-template>
+            </td>
+        </tr>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DependencyDomService }, { type: i2.MappingService }]; }, propDecorators: { timelineRow: [{
+                type: ViewChild,
+                args: ['timelineRow', { static: false }]
+            }], selectable: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], activeView: [{
+                type: Input
+            }], taskContentTemplate: [{
+                type: Input
+            }], taskTemplate: [{
+                type: Input
+            }], summaryTaskTemplate: [{
+                type: Input
+            }], taskClass: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], isTaskSelected: [{
+                type: Input
+            }], renderDependencyDragClues: [{
+                type: Input
+            }] } });

package/esm2015/scrolling/drag-scroll-settings.js

@@ -0,0 +1,20 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export var ScrollDirection;
+(function (ScrollDirection) {
+    ScrollDirection[ScrollDirection["Backwards"] = -1] = "Backwards";
+    ScrollDirection[ScrollDirection["Forward"] = 1] = "Forward";
+})(ScrollDirection || (ScrollDirection = {}));
+/**
+ * @hidden
+ */
+export var ScrollAxis;
+(function (ScrollAxis) {
+    ScrollAxis["Vertical"] = "scrollTop";
+    ScrollAxis["Horizontal"] = "scrollLeft";
+})(ScrollAxis || (ScrollAxis = {}));

package/esm2015/scrolling/scroll-sync.service.js

@@ -0,0 +1,80 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { Subscription, Subject, fromEvent } from 'rxjs';
+import { distinctUntilChanged, map, take } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class ScrollSyncService {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this.changes = new Subject();
+        this.elements = [];
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(this.changes.subscribe(args => {
+            this.scroll(args);
+        }));
+    }
+    registerElement(el, sourceType) {
+        this.elements.push({ element: el, sourceType });
+        if (sourceType === "timeline" || sourceType === "treelist") {
+            this.ngZone.runOutsideAngular(() => {
+                const obs = fromEvent(el, 'scroll').pipe(map(({ target: { scrollTop, scrollLeft } }) => ({
+                    scrollTop,
+                    scrollLeft,
+                    sourceType
+                })));
+                const comparisonFn = sourceType === 'timeline' ?
+                    (x, y) => (x.scrollTop === y.scrollTop) && (x.scrollLeft === y.scrollLeft) :
+                    (x, y) => (x.scrollTop === y.scrollTop);
+                this.subscriptions.add(obs.pipe(distinctUntilChanged(comparisonFn))
+                    .subscribe((event) => this.changes.next(event)));
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+        this.elements = null;
+    }
+    syncScrollTop(sourceType, targetType) {
+        const source = this.elements.find(element => element.sourceType === sourceType);
+        const target = this.elements.find(element => element.sourceType === targetType);
+        // Need to wait for the splitter pane's content to be rendered
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => target.element.scrollTop = source.element.scrollTop);
+    }
+    resetTimelineScrollLeft() {
+        const source = this.elements.find(element => element.sourceType === 'timeline');
+        source.element.scrollLeft = 0;
+    }
+    scroll({ scrollTop, scrollLeft, sourceType }) {
+        this.ngZone.runOutsideAngular(() => {
+            if (sourceType === 'timeline') {
+                const header = this.elements.find(element => element.sourceType === 'header').element;
+                header.scrollLeft = scrollLeft;
+                if (!this.syncingTimeline) {
+                    this.syncingTreeList = true;
+                    const treelist = this.elements.find(element => element.sourceType === 'treelist').element;
+                    treelist.scrollTop = scrollTop;
+                }
+                this.syncingTimeline = false;
+            }
+            if (sourceType === 'treelist') {
+                if (!this.syncingTreeList) {
+                    this.syncingTimeline = true;
+                    const timeline = this.elements.find(element => element.sourceType === 'timeline').element;
+                    timeline.scrollTop = scrollTop;
+                }
+                this.syncingTreeList = false;
+            }
+        });
+    }
+}
+ScrollSyncService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollSyncService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+ScrollSyncService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollSyncService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollSyncService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });

package/esm2015/scrolling/timeline-scroll.directive.js

@@ -0,0 +1,75 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { Subscription } from 'rxjs';
+import { isPresent } from '../utils';
+import { ScrollAxis, ScrollDirection } from './drag-scroll-settings';
+import { getViewportBoundaries, scrollElement } from './utils';
+import * as i0 from "@angular/core";
+import * as i1 from "./timeline-scroll.service";
+/**
+ * @hidden
+ */
+export class TimelineScrollableDirective {
+    constructor(timelineScrollableContainer, scrollService, zone) {
+        this.timelineScrollableContainer = timelineScrollableContainer;
+        this.scrollService = scrollService;
+        this.zone = zone;
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(this.scrollService.horizontalScroll
+            .subscribe(this.scrollHorizontallyTo.bind(this)));
+        this.subscriptions.add(this.scrollService.verticalScroll
+            .subscribe(this.scrollVerticallyTo.bind(this)));
+        this.subscriptions.add(this.scrollService.scrollCancel
+            .subscribe(this.cancelScroll.bind(this)));
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    scrollHorizontallyTo(left) {
+        this.zone.runOutsideAngular(() => {
+            const container = this.timelineScrollableContainer.nativeElement;
+            const visibleBoundaries = getViewportBoundaries(container);
+            if (left < visibleBoundaries.left + this.scrollSettings.threshold) {
+                this.horizontalScrollInterval = setInterval(() => scrollElement(container, this.scrollSettings.step, ScrollDirection.Backwards, ScrollAxis.Horizontal), this.scrollSettings.interval);
+            }
+            else if (left > visibleBoundaries.right - this.scrollSettings.threshold) {
+                this.horizontalScrollInterval = setInterval(() => scrollElement(container, this.scrollSettings.step, ScrollDirection.Forward, ScrollAxis.Horizontal), this.scrollSettings.interval);
+            }
+        });
+    }
+    scrollVerticallyTo(top) {
+        this.zone.runOutsideAngular(() => {
+            const container = this.timelineScrollableContainer.nativeElement;
+            const visibleBoundaries = getViewportBoundaries(container);
+            if (top < visibleBoundaries.top + this.scrollSettings.threshold) {
+                this.verticalScrollInterval = setInterval(() => scrollElement(container, this.scrollSettings.step, ScrollDirection.Backwards, ScrollAxis.Vertical), this.scrollSettings.interval);
+            }
+            else if (top > visibleBoundaries.bottom - this.scrollSettings.threshold) {
+                this.verticalScrollInterval = setInterval(() => scrollElement(container, this.scrollSettings.step, ScrollDirection.Forward, ScrollAxis.Vertical), this.scrollSettings.interval);
+            }
+        });
+    }
+    cancelScroll() {
+        if (isPresent(this.verticalScrollInterval)) {
+            clearInterval(this.verticalScrollInterval);
+            this.verticalScrollInterval = null;
+        }
+        if (isPresent(this.horizontalScrollInterval)) {
+            clearInterval(this.horizontalScrollInterval);
+            this.horizontalScrollInterval = null;
+        }
+    }
+}
+TimelineScrollableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimelineScrollableDirective, deps: [{ token: i0.ElementRef }, { token: i1.TimelineScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+TimelineScrollableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TimelineScrollableDirective, selector: "[kendoGanttTimelineScrollable]", inputs: { scrollSettings: "scrollSettings" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimelineScrollableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGanttTimelineScrollable]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.TimelineScrollService }, { type: i0.NgZone }]; }, propDecorators: { scrollSettings: [{
+                type: Input
+            }] } });

package/esm2015/scrolling/timeline-scroll.service.js

@@ -0,0 +1,39 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ *
+ * Notifies the timeline-scroll.directive to scroll into view to requested coordinates.
+ * The scrolling is performed based on client (viewport) coordinates.
+ */
+export class TimelineScrollService {
+    constructor() {
+        this.horizontalScroll = new Subject();
+        this.verticalScroll = new Subject();
+        this.scrollCancel = new Subject();
+    }
+    ngOnDestroy() {
+        this.horizontalScroll.complete();
+        this.verticalScroll.complete();
+        this.scrollCancel.complete();
+    }
+    requestHorizontalScroll(clientTop) {
+        this.horizontalScroll.next(clientTop);
+    }
+    requestVerticalScroll(clientLeft) {
+        this.verticalScroll.next(clientLeft);
+    }
+    requestScrollCancel() {
+        this.scrollCancel.next();
+    }
+}
+TimelineScrollService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimelineScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TimelineScrollService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimelineScrollService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimelineScrollService, decorators: [{
+            type: Injectable
+        }] });

package/esm2015/scrolling/utils.js

@@ -0,0 +1,77 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import { ScrollAxis, ScrollDirection } from './drag-scroll-settings';
+import { isPresent } from '../utils';
+/**
+ * @hidden
+ *
+ * Checks if the beginning of the scrollable element is reached (top/left).
+ * Floors the top value.
+ */
+const isUpperLimitReached = (element, axis) => Math.floor(element[axis]) <= 0;
+/**
+ * @hidden
+ *
+ * Checks if the end of the scrollable element is reached (bottom/right).
+ * Ceils the top value.
+ */
+const isBottomLimitReached = (element, axis) => {
+    const elementSize = axis === ScrollAxis.Horizontal ?
+        element.scrollWidth - element.clientWidth :
+        element.scrollHeight - element.clientHeight;
+    return Math.ceil(element[axis]) >= elementSize;
+};
+/**
+ * @hidden
+ *
+ * Scrolls the element in the given direction by the provided step in the provided scroll axis.
+ *
+ * If the targeted scroll incrementation doesn't yield any result due to device pixel ratio issues (https://github.com/dimitar-pechev/RenderingIndependentScrollOffsets#readme),
+ * increments the step with 1px and again attempts to change the scrollTop of the element, until the content is actually scrolled.
+ *
+ * Cuts the operation short after 20 unsuccessful attempts to prevent infinite loops in possible corner-case scenarios.
+ */
+export const scrollElement = (element, step, direction, scrollAxis) => {
+    if (!(isPresent(element) && isDocumentAvailable())) {
+        return;
+    }
+    const initialScrollPosition = element[scrollAxis];
+    let currentStep = step;
+    let iterations = 0;
+    while (initialScrollPosition === element[scrollAxis] &&
+        !(direction === ScrollDirection.Backwards && isUpperLimitReached(element, scrollAxis)) &&
+        !(direction === ScrollDirection.Forward && isBottomLimitReached(element, scrollAxis)) &&
+        iterations < 20 // cut the operation short in 20 attempts - in case of a wild corner case
+    ) {
+        element[scrollAxis] += (currentStep * direction);
+        // try with a larger step if the current one doesn't update the scroll position successfully
+        currentStep += 1;
+        iterations += 1;
+    }
+};
+/**
+ * @hidden
+ *
+ * As client coordinates are not restricted to the range 0px - {viewportSize}px, but can have negative starting values or ending values greater than the viewport size,
+ * this function extracts the visible boundaries of the provided element - fall-backing to 0 when the top/left are below 0,
+ * and fall-backing to the actual visible size of the container for bottom/right.
+ */
+export const getViewportBoundaries = (element) => {
+    const elementRect = element.getBoundingClientRect();
+    // if the beginning of the scrollable container is above/before the current viewport, fall-back to 0
+    const topLimit = Math.max(elementRect.top, 0);
+    const leftLimit = Math.max(elementRect.left, 0);
+    // if the end of the scrollable container is beneath/after the current viewport, fall-back to its client height
+    // add the distance from the start of the viewport to the beginning of the container to ensure scrolling bottom begins when the actual end of the container is reached
+    const bottomLimit = topLimit + Math.min(elementRect.bottom, element.clientHeight);
+    const rightLimit = leftLimit + Math.min(elementRect.right, element.clientWidth);
+    return {
+        top: topLimit,
+        bottom: bottomLimit,
+        left: leftLimit,
+        right: rightLimit
+    };
+};

package/esm2015/selection/selectable.directive.js

@@ -0,0 +1,112 @@
+/**-----------------------------------------------------------------------------------------
+* 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, Output, EventEmitter } from '@angular/core';
+import { getter } from '@progress/kendo-common';
+import { isPresent, isString } from '../utils';
+import * as i0 from "@angular/core";
+import * as i1 from "../gantt.component";
+/**
+ * A directive which handles the [`selectionChange`]({% slug api_gantt_ganttcomponent %}#toc-selectionchange) event of the Gantt
+ * ([see example]({% slug selection_gantt %}#toc-built-in-directive))
+ */
+export class SelectableDirective {
+    constructor(gantt) {
+        this.gantt = gantt;
+        /**
+         * Fires when the selected keys are changed.
+         */
+        this.selectedKeysChange = new EventEmitter();
+        this.state = new Set();
+        this.isSelected = this.isSelected.bind(this);
+        this.selectionChange = this.selectionChange.bind(this);
+        this.selectable = true;
+    }
+    /**
+     * @hidden
+     */
+    set selectable(value) {
+        if (value) {
+            this.gantt.isSelected = this.isSelected;
+            this.subscribeSelection();
+        }
+        else {
+            this.gantt.isSelected = () => false;
+            this.unsubscribeSelection();
+        }
+        this.gantt.selectable = value;
+        this.gantt.updateView();
+    }
+    /**
+     * Sets the selected keys.
+     */
+    set selectedKeys(value) {
+        if (isPresent(value) && value === this.lastChange) {
+            return;
+        }
+        // prevent multiple items displayed as selected as multiple selection still not supported fully
+        const keys = (value || []).slice(0, 1);
+        this.state = new Set(keys);
+        this.gantt.updateView();
+    }
+    /**
+     * The field name or a function that specifies the data item unique key identifier.
+     * By default, the string field `id` is used.
+     */
+    set itemKey(value) {
+        if (isString(value)) {
+            this._keyGetter = getter(value);
+        }
+        else {
+            this._keyGetter = value;
+        }
+    }
+    get keyGetter() {
+        return this._keyGetter || this.gantt.idGetter;
+    }
+    ngOnDestroy() {
+        this.unsubscribeSelection();
+    }
+    isSelected(dataItem) {
+        return this.state.has(this.keyGetter(dataItem));
+    }
+    selectionChange({ action, items }) {
+        this.state.clear();
+        if (action === 'select') {
+            items.forEach(item => this.state.add(this.keyGetter(item)));
+        }
+        this.emitSelectedItemsChange();
+    }
+    emitSelectedItemsChange() {
+        this.lastChange = Array.from(this.state);
+        this.selectedKeysChange.emit(this.lastChange);
+    }
+    subscribeSelection() {
+        this.unsubscribeSelection();
+        this.selectionSubscription = this.gantt.selectionChange.subscribe(this.selectionChange);
+    }
+    unsubscribeSelection() {
+        if (this.selectionSubscription) {
+            this.selectionSubscription.unsubscribe();
+            this.selectionSubscription = null;
+        }
+    }
+}
+SelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectableDirective, deps: [{ token: i1.GanttComponent }], target: i0.ɵɵFactoryTarget.Directive });
+SelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SelectableDirective, selector: "[kendoGanttSelectable]", inputs: { selectable: "selectable", selectedKeys: "selectedKeys", itemKey: "itemKey" }, outputs: { selectedKeysChange: "selectedKeysChange" }, exportAs: ["kendoGanttSelectable"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'kendoGanttSelectable',
+                    selector: '[kendoGanttSelectable]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.GanttComponent }]; }, propDecorators: { selectable: [{
+                type: Input
+            }], selectedKeys: [{
+                type: Input
+            }], selectedKeysChange: [{
+                type: Output
+            }], itemKey: [{
+                type: Input
+            }] } });

package/esm2015/selection/selection-change-event.js

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

package/esm2015/template-directives/summary-task-template.directive.js

@@ -0,0 +1,50 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Optional } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Represents a template that defines the whole content of the summary task component.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoGanttSummaryTaskTemplate` directive inside the `<kendo-gantt>` tag.
+ *
+ * The template context is set to the current data item. The following additional field is passed:
+ * - `elementWidth`&mdash;The current summary task wrapper element's calculated width in pixels based on its start and end date.
+ * Use it as an alias for a template variable by utilizing the `let-elementWidth="elementWidth"` syntax.
+ * Useful for calculations related to rendering custom elements representing the task progress.
+ *
+ * @example
+ * ```ts-preview
+ * _@Component({
+ *      selector: 'my-app',
+ *      template: `
+ *          <kendo-gantt [kendoGanttHierarchyBinding]="data">
+ *              <ng-template kendoGanttSummaryTaskTemplate let-dataItem let-elementWidth="elementWidth">
+ *                  <div style="color: white; font-size: 8px;">
+ *                      {{ dataItem.title }} - {{ dataItem.completionRatio * 100 }}% complete; width: {{ elementWidth }}
+ *                  </div>
+ *              </ng-template>
+ *          </kendo-gantt>
+ *      `
+ * })
+ * class AppComponent {
+ *     public data: any[] = sampleTasks;
+ * }
+ * ```
+ */
+export class GanttSummaryTaskTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+GanttSummaryTaskTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttSummaryTaskTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+GanttSummaryTaskTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: GanttSummaryTaskTemplateDirective, selector: "[kendoGanttSummaryTaskTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttSummaryTaskTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGanttSummaryTaskTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });