@progress/kendo-angular-gantt 0.3.0-dev.202201111723 → 1.0.0

package/dist/es2015/rendering/gantt-task-base.d.ts

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { ChangeDetectorRef, ElementRef, SimpleChanges } from '@angular/core';
+import { NavigationService } from '../navigation/navigation.service';
 import { OptionChangesService } from '../common/option-changes.service';
 import { TaskClassFn } from '../models/class-callbacks';
 import { TimelineViewType } from '../models/timeline-view';
@@ -18,25 +19,38 @@ export declare abstract class GanttTaskBase {
     private dependencyDomService;
     private optionChangesService;
     private cdr;
+    private navigationService;
     wrapperClass: boolean;
+    readonly taskIndexAttribute: number;
     /**
-     * Points to the first element of the component.
+     * Points to the `.k-task` element of the template (present in all three task types).
      */
     taskElement: ElementRef<HTMLElement>;
     dataItem: any;
     index: number;
+    level: number;
+    renderDependencyDragClues: boolean;
+    selectable: boolean;
     isSelected: (dataItem: object) => boolean;
     activeView: TimelineViewType;
     taskClass: TaskClassFn;
-    private viewChangesSubscription;
+    readonly ariaSelected: string;
     readonly slotUnitDuration: number;
     private readonly viewService;
     readonly slotWidth: number;
-    constructor(mapper: MappingService, // left public to be available for usage in the templates
-    timelineViewService: TimelineViewService, dependencyDomService: DependencyDomService, optionChangesService: OptionChangesService, cdr: ChangeDetectorRef);
-    ngOnChanges(changes: SimpleChanges): void;
-    ngOnDestroy(): void;
     readonly taskWidth: number;
+    /**
+     * 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.
+     */
     readonly taskOffset: number;
     readonly completionOverlayWidth: number;
+    private subscriptions;
+    constructor(mapper: MappingService, // left public to be available for usage in the templates
+    timelineViewService: TimelineViewService, dependencyDomService: DependencyDomService, optionChangesService: OptionChangesService, cdr: ChangeDetectorRef, navigationService: NavigationService);
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    private updateActiveState;
 }

package/dist/es2015/rendering/gantt-task-base.js

@@ -12,22 +12,32 @@ const slotUnitDuration = {
     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) {
+    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.viewChangesSubscription = new Subscription();
-        this.viewChangesSubscription.add(this.optionChangesService.viewChanges.subscribe(() => {
-            this.cdr.markForCheck();
-        }));
+        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];
@@ -38,29 +48,18 @@ export class GanttTaskBase {
     get slotWidth() {
         return this.viewService.options.slotWidth;
     }
-    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();
-        }
-    }
-    ngOnDestroy() {
-        if (isPresent(this.dataItem)) {
-            this.dependencyDomService.unregisterTask(this.dataItem);
-        }
-        this.viewChangesSubscription.unsubscribe();
-    }
     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;
@@ -72,11 +71,48 @@ export class GanttTaskBase {
         // 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);
+        }
+    }
 }
 tslib_1.__decorate([
     HostBinding('class.k-task-wrap'),
     tslib_1.__metadata("design:type", Boolean)
 ], GanttTaskBase.prototype, "wrapperClass", void 0);
+tslib_1.__decorate([
+    HostBinding('attr.data-task-index'),
+    tslib_1.__metadata("design:type", Number),
+    tslib_1.__metadata("design:paramtypes", [])
+], GanttTaskBase.prototype, "taskIndexAttribute", null);
 tslib_1.__decorate([
     ViewChild('task', { static: true }),
     tslib_1.__metadata("design:type", ElementRef)
@@ -89,6 +125,18 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Number)
 ], GanttTaskBase.prototype, "index", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Number)
+], GanttTaskBase.prototype, "level", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean)
+], GanttTaskBase.prototype, "renderDependencyDragClues", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean)
+], GanttTaskBase.prototype, "selectable", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Function)
@@ -101,3 +149,8 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Function)
 ], GanttTaskBase.prototype, "taskClass", void 0);
+tslib_1.__decorate([
+    HostBinding('style.left.px'),
+    tslib_1.__metadata("design:type", Number),
+    tslib_1.__metadata("design:paramtypes", [])
+], GanttTaskBase.prototype, "taskOffset", null);

package/dist/es2015/rendering/gantt-task.component.d.ts

@@ -4,18 +4,20 @@
 *-------------------------------------------------------------------------------------------*/
 import { ChangeDetectorRef, TemplateRef } from '@angular/core';
 import { MappingService } from '../common/mapping.service';
+import { NavigationService } from '../navigation/navigation.service';
+import { EditService } from '../editing/edit.service';
 import { DependencyDomService } from '../dependencies/dependency-dom.service';
 import { OptionChangesService } from '../common/option-changes.service';
 import { TimelineViewService } from './../timeline/timeline-view.service';
 import { GanttTaskBase } from './gantt-task-base';
-import { EditService } from '../editing/edit.service';
 /**
  * @hidden
  */
 export declare class GanttTaskComponent extends GanttTaskBase {
     private editService;
+    touchEnabled: boolean;
     taskContentTemplate: TemplateRef<any>;
     taskTemplate: TemplateRef<any>;
-    constructor(mapper: MappingService, timelineViewService: TimelineViewService, dependencyDomService: DependencyDomService, optionChangesService: OptionChangesService, cdr: ChangeDetectorRef, editService: EditService);
+    constructor(editService: EditService, touchEnabled: boolean, mapper: MappingService, timelineViewService: TimelineViewService, dependencyDomService: DependencyDomService, optionChangesService: OptionChangesService, cdr: ChangeDetectorRef, navigationService: NavigationService);
     onTaskDelete(): void;
 }

package/dist/es2015/rendering/gantt-task.component.js

@@ -4,24 +4,27 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 var GanttTaskComponent_1;
-import { ChangeDetectorRef, Component, forwardRef, Input, TemplateRef } from '@angular/core';
+import { ChangeDetectorRef, Component, forwardRef, Inject, Input, TemplateRef } from '@angular/core';
 import { MappingService } from '../common/mapping.service';
+import { NavigationService } from '../navigation/navigation.service';
+import { EditService } from '../editing/edit.service';
+import { TOUCH_ENABLED } from '../common/touch-enabled';
 import { DependencyDomService } from '../dependencies/dependency-dom.service';
 import { OptionChangesService } from '../common/option-changes.service';
 import { TimelineViewService } from './../timeline/timeline-view.service';
 import { GanttTaskBase } from './gantt-task-base';
-import { EditService } from '../editing/edit.service';
 /**
  * @hidden
  */
 let GanttTaskComponent = GanttTaskComponent_1 = class GanttTaskComponent extends GanttTaskBase {
-    constructor(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, editService) {
-        super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr);
+    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.showConfirmationDialog.next();
+        this.editService.taskDelete.next(this.dataItem);
     }
 };
 tslib_1.__decorate([
@@ -45,17 +48,19 @@ GanttTaskComponent = GanttTaskComponent_1 = tslib_1.__decorate([
         <div
             #task
             class="k-task k-task-single"
+            role="treeitem"
             [ngClass]="taskClass(dataItem)"
             [style.width.px]="taskWidth"
-            [style.left.px]="taskOffset"
             [attr.title]="mapper.extractFromTask(dataItem, 'title')"
-            [attr.data-task-index]="index"
             [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">
@@ -70,10 +75,17 @@ GanttTaskComponent = GanttTaskComponent_1 = tslib_1.__decorate([
                         >
                         </ng-template>
                     </div>
-                    <span class="k-task-actions">
+                    <span
+                        class="k-task-actions"
+                        aria-hidden="true"
+                    >
                         <span
-                            (click)="onTaskDelete()"
-                            class="k-link k-task-delete">
+                            class="k-link k-task-delete"
+                            [kendoEventsOutsideAngular]="{
+                                click: onTaskDelete
+                            }"
+                            [scope]="this"
+                        >
                             <span class="k-icon k-i-close"></span>
                         </span>
                     </span>
@@ -89,13 +101,35 @@ GanttTaskComponent = GanttTaskComponent_1 = tslib_1.__decorate([
             >
             </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;
+        }
+    `]
     }),
-    tslib_1.__metadata("design:paramtypes", [MappingService,
+    tslib_1.__param(1, Inject(TOUCH_ENABLED)),
+    tslib_1.__metadata("design:paramtypes", [EditService, Boolean, MappingService,
         TimelineViewService,
         DependencyDomService,
         OptionChangesService,
         ChangeDetectorRef,
-        EditService])
+        NavigationService])
 ], GanttTaskComponent);
 export { GanttTaskComponent };

package/dist/es2015/rendering/gantt-tasks-table-body.component.d.ts

@@ -7,6 +7,7 @@ import { TaskClassFn } from '../models/class-callbacks';
 import { TimelineViewType } from '../models/timeline-view';
 import { DependencyDomService } from '../dependencies/dependency-dom.service';
 import { MappingService } from '../common/mapping.service';
+import { ViewItem } from '../models/view-item.interface';
 /**
  * @hidden
  */
@@ -14,14 +15,16 @@ export declare class GanttTasksTableBodyComponent {
     private dependencyDomService;
     private mapper;
     timelineRow: ElementRef<HTMLTableRowElement>;
-    rows: any[];
+    selectable: boolean;
+    rows: ViewItem[];
     activeView: TimelineViewType;
     taskContentTemplate: TemplateRef<any>;
     taskTemplate: TemplateRef<any>;
     summaryTaskTemplate: TemplateRef<any>;
     taskClass: TaskClassFn;
-    hasChildren: (item: object) => boolean;
+    isExpanded: (item: object) => boolean;
     isTaskSelected: (item: object) => boolean;
+    renderDependencyDragClues: boolean;
     constructor(dependencyDomService: DependencyDomService, mapper: MappingService);
-    isMileStone(task: any): boolean;
+    isMileStone(item: ViewItem): boolean;
 }

package/dist/es2015/rendering/gantt-tasks-table-body.component.js

@@ -6,8 +6,8 @@ import * as tslib_1 from "tslib";
 import { Component, Input, TemplateRef, ViewChild, ElementRef } from '@angular/core';
 import { isEqual } from '@progress/kendo-date-math';
 import { DependencyDomService } from '../dependencies/dependency-dom.service';
-import { isPresent } from '../utils';
 import { MappingService } from '../common/mapping.service';
+import { isPresent } from '../utils';
 /**
  * @hidden
  */
@@ -23,8 +23,8 @@ let GanttTasksTableBodyComponent = class GanttTasksTableBodyComponent {
             this.dependencyDomService.registerTimelineRow(timelineRow.nativeElement);
         }
     }
-    isMileStone(task) {
-        return !this.hasChildren(task) && isEqual(this.mapper.extractFromTask(task, 'start'), this.mapper.extractFromTask(task, 'end'));
+    isMileStone(item) {
+        return !item.hasChildren && isEqual(this.mapper.extractFromTask(item.data, 'start'), this.mapper.extractFromTask(item.data, 'end'));
     }
 };
 tslib_1.__decorate([
@@ -32,6 +32,10 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", ElementRef),
     tslib_1.__metadata("design:paramtypes", [ElementRef])
 ], GanttTasksTableBodyComponent.prototype, "timelineRow", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean)
+], GanttTasksTableBodyComponent.prototype, "selectable", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Array)
@@ -59,11 +63,15 @@ tslib_1.__decorate([
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Function)
-], GanttTasksTableBodyComponent.prototype, "hasChildren", void 0);
+], GanttTasksTableBodyComponent.prototype, "isExpanded", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Function)
 ], GanttTasksTableBodyComponent.prototype, "isTaskSelected", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean)
+], GanttTasksTableBodyComponent.prototype, "renderDependencyDragClues", void 0);
 GanttTasksTableBodyComponent = tslib_1.__decorate([
     Component({
         selector: '[kendoGanttTasksTableBody]',
@@ -72,33 +80,43 @@ GanttTasksTableBodyComponent = tslib_1.__decorate([
             <td>
                 <kendo-gantt-milestone-task
                     *ngIf="isMileStone(item); else task"
-                    [dataItem]="item"
+                    [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="hasChildren(item)"
-                        [dataItem]="item"
+                        *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="!hasChildren(item)"
-                        [dataItem]="item"
+                        *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>

package/dist/es2015/scrolling/drag-scroll-settings.d.ts

@@ -0,0 +1,47 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Specifies the settings for auto-scrolling during drag editing operations.
+ */
+export interface DragScrollSettings {
+    /**
+     * Specifies whether auto-scrolling during drag editing operations is enabled.
+     *
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Specifies the scrolling step in pixels.
+     *
+     * @default: 3
+     */
+    step?: number;
+    /**
+     * Specifies the scrolling interval in milliseconds.
+     *
+     * @default: 1
+     */
+    interval?: number;
+    /**
+     * Specifies the threshold (in pixels) at each end of the scrollable container which when reached will trigger scrolling.
+     *
+     * @default: 10
+     */
+    threshold?: number;
+}
+/**
+ * @hidden
+ */
+export declare enum ScrollDirection {
+    Backwards = -1,
+    Forward = 1
+}
+/**
+ * @hidden
+ */
+export declare enum ScrollAxis {
+    Vertical = "scrollTop",
+    Horizontal = "scrollLeft"
+}

package/dist/es2015/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/dist/es2015/scrolling/scroll-sync.service.d.ts

@@ -23,7 +23,7 @@ export declare class ScrollSyncService implements OnDestroy {
     constructor(ngZone: NgZone);
     registerElement(el: any, sourceType: SourceType): void;
     ngOnDestroy(): void;
-    syncScrollTop(sourceType: string, targetType: string): void;
+    syncScrollTop(sourceType: SourceType, targetType: SourceType): void;
     resetTimelineScrollLeft(): void;
     private scroll;
 }

package/dist/es2015/scrolling/timeline-scroll.directive.d.ts

@@ -0,0 +1,24 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ElementRef, NgZone } from '@angular/core';
+import { DragScrollSettings } from './drag-scroll-settings';
+import { TimelineScrollService } from './timeline-scroll.service';
+/**
+ * @hidden
+ */
+export declare class TimelineScrollableDirective {
+    private timelineScrollableContainer;
+    private scrollService;
+    private zone;
+    scrollSettings: DragScrollSettings;
+    private subscriptions;
+    private verticalScrollInterval;
+    private horizontalScrollInterval;
+    constructor(timelineScrollableContainer: ElementRef<Element>, scrollService: TimelineScrollService, zone: NgZone);
+    ngOnDestroy(): void;
+    private scrollHorizontallyTo;
+    private scrollVerticallyTo;
+    private cancelScroll;
+}

package/dist/es2015/scrolling/timeline-scroll.directive.js

@@ -0,0 +1,78 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, ElementRef, Input, NgZone } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { isPresent } from '../utils';
+import { ScrollAxis, ScrollDirection } from './drag-scroll-settings';
+import { TimelineScrollService } from './timeline-scroll.service';
+import { getViewportBoundaries, scrollElement } from './utils';
+/**
+ * @hidden
+ */
+let TimelineScrollableDirective = 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;
+        }
+    }
+};
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], TimelineScrollableDirective.prototype, "scrollSettings", void 0);
+TimelineScrollableDirective = tslib_1.__decorate([
+    Directive({
+        selector: '[kendoGanttTimelineScrollable]'
+    }),
+    tslib_1.__metadata("design:paramtypes", [ElementRef,
+        TimelineScrollService,
+        NgZone])
+], TimelineScrollableDirective);
+export { TimelineScrollableDirective };