@progress/kendo-angular-gantt 0.2.1-dev.202112101349 → 0.3.0-dev.202201190830

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 };

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

@@ -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
+*-------------------------------------------------------------------------------------------*/
+import { Subject } from 'rxjs';
+/**
+ * @hidden
+ *
+ * Notifies the timeline-scroll.directive to scroll into view to requested coordinates.
+ * The scrolling is performed based on client (viewport) coordinates.
+ */
+export declare class TimelineScrollService {
+    readonly horizontalScroll: Subject<number>;
+    readonly verticalScroll: Subject<number>;
+    readonly scrollCancel: Subject<any>;
+    ngOnDestroy(): void;
+    requestHorizontalScroll(clientTop: number): void;
+    requestVerticalScroll(clientLeft: number): void;
+    requestScrollCancel(): void;
+}

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

@@ -0,0 +1,44 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+/**
+ * @hidden
+ *
+ * Notifies the timeline-scroll.directive to scroll into view to requested coordinates.
+ * The scrolling is performed based on client (viewport) coordinates.
+ */
+let TimelineScrollService = class TimelineScrollService {
+    /**
+     * @hidden
+     *
+     * Notifies the timeline-scroll.directive to scroll into view to requested coordinates.
+     * The scrolling is performed based on client (viewport) coordinates.
+     */
+    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 = tslib_1.__decorate([
+    Injectable()
+], TimelineScrollService);
+export { TimelineScrollService };

package/dist/es2015/scrolling/utils.d.ts

@@ -0,0 +1,29 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ScrollAxis, ScrollDirection } from './drag-scroll-settings';
+/**
+ * @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 declare const scrollElement: (element: Element, step: number, direction: ScrollDirection, scrollAxis: ScrollAxis) => void;
+/**
+ * @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 declare const getViewportBoundaries: (element: Element) => {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+};

package/dist/es2015/scrolling/utils.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 { 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;
+const ɵ0 = isUpperLimitReached;
+/**
+ * @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;
+};
+const ɵ1 = isBottomLimitReached;
+/**
+ * @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
+    };
+};
+export { ɵ0, ɵ1 };

package/dist/es2015/timeline/gantt-timeline.component.d.ts

@@ -2,10 +2,11 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { AfterViewInit, ElementRef, NgZone, Renderer2, TemplateRef } from '@angular/core';
+import { AfterViewInit, ElementRef, EventEmitter, NgZone, Renderer2, TemplateRef, ViewContainerRef } from '@angular/core';
 import { ScrollSyncService } from '../scrolling/scroll-sync.service';
 import { DependencyDomService } from '../dependencies/dependency-dom.service';
-import { TimelineViewType, TaskClassFn } from '../models/models';
+import { ViewItem } from '../models/view-item.interface';
+import { TimelineViewType, TaskClassFn, DragScrollSettings } from '../models/models';
 /**
  * @hidden
  */
@@ -14,12 +15,26 @@ export declare class GanttTimelineComponent implements AfterViewInit {
     private dependencyDomService;
     private renderer;
     private zone;
+    /**
+     * Represents the scrollable container of the timeline content.
+     * Used externally by the DependencyDragCreateDirective.
+     */
     timelineContent: ElementRef<HTMLElement>;
     timelineColumns: ElementRef<HTMLElement>;
     timelineHeaderWrap: ElementRef<HTMLElement>;
     tasksContainer: ElementRef<HTMLElement>;
+    /**
+     * Represents the view container ref used for rendering the dependency drag popop.
+     * Used externally by the DependencyDragCreateDirective.
+     */
+    dragPopupContainer: ViewContainerRef;
+    /**
+     * Represents the polyline element used for rendering the dependency drag editing interaction.
+     * Used externally by the DependencyDragCreateDirective.
+     */
+    dependencyDragCreatePolyline: ElementRef<SVGPolylineElement>;
     hostClass: boolean;
-    rows: any[];
+    rows: ViewItem[];
     slots: any[];
     groupSlots: any[];
     tableWidth: number;
@@ -28,9 +43,19 @@ export declare class GanttTimelineComponent implements AfterViewInit {
     taskTemplate: TemplateRef<any>;
     summaryTaskTemplate: TemplateRef<any>;
     taskClass: TaskClassFn;
+    renderDependencyDragClues: boolean;
+    dragScrollSettings: DragScrollSettings;
+    selectable: boolean;
     isTaskSelected: (item: object) => boolean;
-    hasChildren: (item: object) => boolean;
+    isExpanded: (item: object) => boolean;
     dependencies: any[];
+    timelineContainerPress: EventEmitter<any>;
+    timelineContainerDrag: EventEmitter<any>;
+    timelineContainerRelease: EventEmitter<any>;
+    /**
+     * Specifies whether the draggable will attach or detach its pointer event listeners.
+     */
+    readonly draggableEnabled: boolean;
     private subscriptions;
     constructor(scrollSyncService: ScrollSyncService, dependencyDomService: DependencyDomService, renderer: Renderer2, zone: NgZone);
     ngAfterViewInit(): void;

package/dist/es2015/timeline/gantt-timeline.component.js

@@ -3,13 +3,13 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Component, ElementRef, HostBinding, Input, NgZone, Renderer2, TemplateRef, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { filter, map, switchMap, take } from 'rxjs/operators';
+import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { ScrollSyncService } from '../scrolling/scroll-sync.service';
 import { DependencyDomService } from '../dependencies/dependency-dom.service';
 import { isPresent } from '../utils';
-import { isDocumentAvailable } from '@progress/kendo-angular-common';
 /**
  * @hidden
  */
@@ -21,6 +21,10 @@ let GanttTimelineComponent = class GanttTimelineComponent {
         this.zone = zone;
         this.hostClass = true;
         this.dependencies = [];
+        // as all drag-and-drop operations are on the timeline container, use a single draggable instance
+        this.timelineContainerPress = new EventEmitter();
+        this.timelineContainerDrag = new EventEmitter();
+        this.timelineContainerRelease = new EventEmitter();
         this.subscriptions = new Subscription();
         this.subscriptions.add(
         // task changes indicates change in row content, number, height, etc.
@@ -32,6 +36,12 @@ let GanttTimelineComponent = class GanttTimelineComponent {
             this.renderer.setStyle(this.timelineColumns.nativeElement, 'height', `${(this.rows || []).length * timelineRowHeight}px`);
         }));
     }
+    /**
+     * Specifies whether the draggable will attach or detach its pointer event listeners.
+     */
+    get draggableEnabled() {
+        return this.renderDependencyDragClues;
+    }
     ngAfterViewInit() {
         const timelineHeader = this.timelineHeaderWrap.nativeElement;
         const rightContainer = this.timelineContent.nativeElement;
@@ -62,6 +72,14 @@ tslib_1.__decorate([
     ViewChild('tasksContainer', { static: true }),
     tslib_1.__metadata("design:type", ElementRef)
 ], GanttTimelineComponent.prototype, "tasksContainer", void 0);
+tslib_1.__decorate([
+    ViewChild('dragPopupContainer', { static: false, read: ViewContainerRef }),
+    tslib_1.__metadata("design:type", ViewContainerRef)
+], GanttTimelineComponent.prototype, "dragPopupContainer", void 0);
+tslib_1.__decorate([
+    ViewChild('dependencyDragCreatePolyline', { static: false }),
+    tslib_1.__metadata("design:type", ElementRef)
+], GanttTimelineComponent.prototype, "dependencyDragCreatePolyline", void 0);
 tslib_1.__decorate([
     HostBinding('class.k-gantt-timeline'),
     tslib_1.__metadata("design:type", Boolean)
@@ -102,6 +120,18 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Function)
 ], GanttTimelineComponent.prototype, "taskClass", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean)
+], GanttTimelineComponent.prototype, "renderDependencyDragClues", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], GanttTimelineComponent.prototype, "dragScrollSettings", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean)
+], GanttTimelineComponent.prototype, "selectable", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Function)
@@ -109,11 +139,23 @@ tslib_1.__decorate([
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Function)
-], GanttTimelineComponent.prototype, "hasChildren", void 0);
+], GanttTimelineComponent.prototype, "isExpanded", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Array)
 ], GanttTimelineComponent.prototype, "dependencies", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], GanttTimelineComponent.prototype, "timelineContainerPress", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], GanttTimelineComponent.prototype, "timelineContainerDrag", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], GanttTimelineComponent.prototype, "timelineContainerRelease", void 0);
 GanttTimelineComponent = tslib_1.__decorate([
     Component({
         selector: 'kendo-gantt-timeline',
@@ -133,7 +175,21 @@ GanttTimelineComponent = tslib_1.__decorate([
                     </table>
                 </div>
             </div>
-            <div #timelineContent class="k-grid-content">
+            <!-- tabindex="-1" required for https://bugzilla.mozilla.org/show_bug.cgi?id=1069739 -->
+            <div
+                #timelineContent
+                class="k-grid-content"
+                tabindex="-1"
+                role="tree"
+                aria-roledescription="Timeline"
+                kendoGanttTimelineScrollable
+                [scrollSettings]="dragScrollSettings"
+                kendoDraggable
+                [enableDrag]="draggableEnabled"
+                (kendoPress)="timelineContainerPress.emit($event)"
+                (kendoDrag)="timelineContainerDrag.emit($event)"
+                (kendoRelease)="timelineContainerRelease.emit($event)"
+            >
                 <div class="k-gantt-tables">
                     <table
                         class="k-gantt-rows"
@@ -184,8 +240,10 @@ GanttTimelineComponent = tslib_1.__decorate([
                             [taskTemplate]="taskTemplate"
                             [summaryTaskTemplate]="summaryTaskTemplate"
                             [taskClass]="taskClass"
-                            [hasChildren]="hasChildren"
+                            [isExpanded]="isExpanded"
+                            [selectable]="selectable"
                             [isTaskSelected]="isTaskSelected"
+                            [renderDependencyDragClues]="renderDependencyDragClues"
                         >
                         </tbody>
                     </table>
@@ -196,7 +254,11 @@ GanttTimelineComponent = tslib_1.__decorate([
                         kendoGanttDependency
                         [dependency]="dependency"
                     />
+                    <polyline #dependencyDragCreatePolyline />
                 </svg>
+
+                <!-- placeholder for the dependency drag popup; its position is not arbitrary - the popup is intended to be absolutely positioned inside the .k-grid-content element -->
+                <ng-container #dragPopupContainer></ng-container>
             </div>
         </div>
     `

package/dist/es2015/toolbar/toolbar-template.directive.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ToolbarPosition } from './../models/toolbar-position';
+import { ToolbarPosition } from '../models/toolbar-settings';
 import { TemplateRef } from '@angular/core';
 /**
  * Represents the toolbar template of the Gantt.

package/dist/es2015/toolbar/toolbar.component.d.ts

@@ -3,20 +3,21 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { TemplateRef } from '@angular/core';
-import { GanttComponent } from "../gantt.component";
-import { ScrollSyncService } from '../scrolling/scroll-sync.service';
+import { GanttComponent } from '../gantt.component';
 import { TimelineViewType } from './../models/timeline-view';
 /**
  * @hidden
  */
 export declare class ToolbarComponent {
     gantt: GanttComponent;
-    private scrollSyncService;
     context: any;
+    role: string;
+    showAddTask: boolean;
+    showViewSelector: boolean;
     position: 'top' | 'bottom';
     readonly toolbarTemplateRef: TemplateRef<any>;
     readonly renderTemplate: boolean;
     private _position;
-    constructor(gantt: GanttComponent, scrollSyncService: ScrollSyncService);
-    onViewChange(e: TimelineViewType): void;
+    constructor(gantt: GanttComponent);
+    handleViewChange(view: TimelineViewType): void;
 }

package/dist/es2015/toolbar/toolbar.component.js

@@ -3,17 +3,16 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Component, Input } from '@angular/core';
-import { GanttComponent } from "../gantt.component";
-import { ScrollSyncService } from '../scrolling/scroll-sync.service';
+import { Component, Input, HostBinding } from '@angular/core';
+import { GanttComponent } from '../gantt.component';
 /**
  * @hidden
  */
 let ToolbarComponent = class ToolbarComponent {
-    constructor(gantt, scrollSyncService) {
+    constructor(gantt) {
         this.gantt = gantt;
-        this.scrollSyncService = scrollSyncService;
         this.context = {};
+        this.role = 'toolbar';
     }
     set position(value) {
         this.context.position = this._position = value;
@@ -29,13 +28,22 @@ let ToolbarComponent = class ToolbarComponent {
         const templatePosition = ganttToolbarTemplate ? ganttToolbarTemplate.position : null;
         return ganttToolbarTemplate && (templatePosition === 'both' || templatePosition === this.position);
     }
-    onViewChange(e) {
-        this.gantt.activeView = e; // TODO: may be load the timeline data directly in an activeView setter?
-        this.gantt.loadTimelineData();
-        this.gantt.activeViewChange.emit(e);
-        this.scrollSyncService.resetTimelineScrollLeft();
+    handleViewChange(view) {
+        this.gantt.changeActiveView(view);
     }
 };
+tslib_1.__decorate([
+    HostBinding('attr.role'),
+    tslib_1.__metadata("design:type", String)
+], ToolbarComponent.prototype, "role", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean)
+], ToolbarComponent.prototype, "showAddTask", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean)
+], ToolbarComponent.prototype, "showViewSelector", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String),
@@ -46,11 +54,13 @@ ToolbarComponent = tslib_1.__decorate([
         selector: 'kendo-gantt-toolbar',
         template: `
         <ng-container *ngIf="!renderTemplate">
+            <kendo-gantt-add-task *ngIf="showAddTask"></kendo-gantt-add-task>
             <span class="k-spacer k-toolbar-spacer"></span>
             <kendo-gantt-view-selector
+                *ngIf="showViewSelector"
                 [views]="gantt.viewTypes"
                 [activeView]="gantt.activeView"
-                (activeViewChange)="onViewChange($event)"></kendo-gantt-view-selector>
+                (activeViewChange)="handleViewChange($event)"></kendo-gantt-view-selector>
         </ng-container>
         <ng-template
             *ngIf="renderTemplate"
@@ -60,7 +70,6 @@ ToolbarComponent = tslib_1.__decorate([
         </ng-template>
     `
     }),
-    tslib_1.__metadata("design:paramtypes", [GanttComponent,
-        ScrollSyncService])
+    tslib_1.__metadata("design:paramtypes", [GanttComponent])
 ], ToolbarComponent);
 export { ToolbarComponent };

package/dist/es2015/toolbar/view-selector.component.js

@@ -57,7 +57,9 @@ ViewSelectorComponent = tslib_1.__decorate([
     Component({
         selector: 'kendo-gantt-view-selector',
         template: `
-        <select class="k-dropdown k-views-dropdown"
+        <select
+            class="k-dropdown k-views-dropdown"
+            aria-label="View Selector"
             [value]="activeView"
             (change)="activeViewChange.emit($event.target.value)">
             <option *ngFor="let view of views" [value]="view">{{getViewTypeText(view)}}</option>