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

package/dist/es2015/navigation/navigation.service.js

@@ -0,0 +1,355 @@
+/**-----------------------------------------------------------------------------------------
+* 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, NgZone, Renderer2 } from '@angular/core';
+import { Keys, hasObservers } from '@progress/kendo-angular-common';
+import { Subject } from 'rxjs';
+import { ScrollSyncService } from '../scrolling/scroll-sync.service';
+import { fitToRange, getClosestTaskIndex, isClearButton, isPresent, isTask, isToolbar } from '../utils';
+import { getIndexFromViewDigitKeyCode, isArrowUpDownKey, isExpandCollapseKey, isNavigationKey, isViewDigitKey } from './utils';
+/**
+ * @hidden
+ */
+let NavigationService = class NavigationService {
+    constructor(zone, renderer, scrollSyncService) {
+        this.zone = zone;
+        this.renderer = renderer;
+        this.scrollSyncService = scrollSyncService;
+        /**
+         * Notifies when the tasks' focused and interactive (tabindex) state has changed.
+         *
+         * All tasks are rendered with tabindex="-1".
+         * When one is clicked, or when some navigation key keyboard key is pressed, it should be focused, assigned the focus class, and its tabindex updated to 0.
+         * All other tasks should get -1 tabindex and have the focus class removed from them.
+         */
+        this.taskStatusChanges = new Subject();
+        /**
+         * Keeps track of whether the Timeline part is focused.
+         * Used when the index of the task elements change (tasks are changed, pushed to, spliced from, etc.)
+         * and their status should be updated accordingly.
+         */
+        this.isTimelineFocused = false;
+        /**
+         * Keeps track of which part has last been focused.
+         * Used when calling `gantt.focus()` to determine which part of the component should receive focus.
+         */
+        this.treeListLastActive = false;
+        /**
+         * Keeps track of which part has last been focused.
+         * Used when calling `gantt.focus()` to determine which part of the component should receive focus.
+         */
+        this.timelineLastActive = false;
+        this._enabled = false;
+        this._activeTimelineIndex = 0;
+        this._activeTreeListCell = { rowIndex: 0, colIndex: 0 };
+    }
+    /**
+     * Specifies whether navigation is enabled.
+     */
+    get enabled() {
+        return this._enabled;
+    }
+    /**
+     * Used to retrieve read-only data about the currently active task.
+     */
+    get activeTask() {
+        return {
+            activeIndex: this.activeTimelineIndex,
+            isFocused: this.isTimelineFocused
+        };
+    }
+    /**
+     * Persists the expected TreeList focused cell coords.
+     * When the tasks in the Timeline are navigated through, the expected TreeList focus target should also change,
+     * in order to allow back-tabbing from the Timeline to the same row in the TreeList.
+     */
+    set activeTreeListCell(cell) {
+        this._activeTreeListCell = cell;
+    }
+    get activeTreeListCell() {
+        const firstAvailableIndex = 0;
+        const lastAvailableRowIndex = this.treeListHeaderRowsCount + this.gantt.treeList.view.data.length - 1;
+        const rowIndex = fitToRange(this._activeTreeListCell.rowIndex, firstAvailableIndex, lastAvailableRowIndex);
+        const lastAvailableColIndex = this.gantt.columns.length;
+        const colIndex = fitToRange(this._activeTreeListCell.colIndex, firstAvailableIndex, lastAvailableColIndex);
+        return { rowIndex, colIndex };
+    }
+    /**
+     * Persists the expected Timeline focused task index.
+     * When the cells in the TreeList are navigated through, the expected Timeline focus target should also change,
+     * in order to allow tabbing from the TreeList to the same row in the Timeline.
+     */
+    set activeTimelineIndex(index) {
+        this._activeTimelineIndex = index;
+    }
+    get activeTimelineIndex() {
+        const firstAvailableIndex = 0;
+        const lastAvailableIndex = this.gantt.treeList.view.data.length - 1;
+        return fitToRange(this._activeTimelineIndex, firstAvailableIndex, lastAvailableIndex);
+    }
+    /**
+     * The TreeList row index takes into account the header and filter rows.
+     * Used when translating Timeline task indices to TreeList row indices.
+     */
+    get treeListHeaderRowsCount() {
+        // captures nested group header rows + filter row if we start supporting it at some point
+        return this.treeListElement.querySelectorAll('.k-grid-header tr').length;
+    }
+    initialize({ gantt, host, treeListElement, timelineElement }) {
+        // no private property setters in TypeScript, so use a getter and a poorly named private prop for this value
+        this._enabled = true;
+        this.gantt = gantt;
+        this.host = host;
+        this.treeListElement = treeListElement;
+        this.timelineElement = timelineElement;
+        // TODO: fix in the splitter package and remove
+        // move the splitbar HTML element between the two panes to keep the visial tabbing order in tact
+        const splitbar = this.host.querySelector('.k-splitbar');
+        if (isPresent(splitbar) && isPresent(splitbar.previousElementSibling) && isPresent(splitbar.after)) {
+            splitbar.after(splitbar.previousElementSibling);
+        }
+        this.zone.runOutsideAngular(() => {
+            this.eventListenerDisposers = [
+                this.renderer.listen(this.host, 'keydown', this.handleKeydown.bind(this)),
+                this.renderer.listen(this.treeListElement, 'mousedown', this.focusTreeList.bind(this)),
+                this.renderer.listen(this.treeListElement, 'focusin', this.handleTreeListFocusIn.bind(this)),
+                this.renderer.listen(this.timelineElement, 'mousedown', this.handleTimelineMousedown.bind(this)),
+                this.renderer.listen(this.timelineElement, 'focusin', this.handleTimelineFocusIn.bind(this)),
+                this.renderer.listen(this.timelineElement, 'focusout', this.handleTimelineFocusOut.bind(this))
+            ];
+        });
+    }
+    ngOnDestroy() {
+        if (isPresent(this.eventListenerDisposers)) {
+            this.eventListenerDisposers.forEach(removeListener => removeListener());
+            this.eventListenerDisposers = null;
+        }
+        this.gantt = null;
+        this.host = null;
+        this.treeListElement = null;
+        this.timelineElement = null;
+    }
+    /**
+     * Focuses either the last active TreeList cell, or the last active Timeline task,
+     * dependening on which of the two last held focus.
+     *
+     * Focuses the first TreeList cell by default.
+     */
+    focusLastActiveItem() {
+        if (this.gantt.data.length === 0 || (!this.treeListLastActive && !this.timelineLastActive)) {
+            this.focusCell(0, 0);
+        }
+        else if (this.treeListLastActive) {
+            const { rowIndex, colIndex } = this.activeTreeListCell;
+            this.gantt.treeList.focusCell(rowIndex, colIndex);
+        }
+        else if (this.timelineLastActive) {
+            this.focusTask(this.activeTimelineIndex);
+        }
+    }
+    /**
+     * Focuses the targeted TreeList cell regardless of the last peresisted target.
+     */
+    focusCell(rowIndex, colIndex) {
+        this.activeTreeListCell = { rowIndex, colIndex };
+        this.activeTimelineIndex = rowIndex - this.treeListHeaderRowsCount;
+        this.gantt.treeList.focusCell(this.activeTreeListCell.rowIndex, this.activeTreeListCell.colIndex);
+    }
+    /**
+     * Focuses the targeted Timeline task regardless of the last peresisted target.
+     */
+    focusTask(index) {
+        this.activeTimelineIndex = index;
+        this.isTimelineFocused = true;
+        this.activeTreeListCell = {
+            rowIndex: index + this.treeListHeaderRowsCount,
+            colIndex: this.activeTreeListCell.colIndex
+        };
+        this.notifyTaskStatusChange();
+    }
+    /**
+     * Updates the focus target flags and notifies the active task to update its focused state.
+     */
+    handleTimelineFocusIn({ target }) {
+        this.treeListLastActive = false;
+        this.timelineLastActive = true;
+        this.isTimelineFocused = true;
+        if (isTask(target, this.timelineElement)) {
+            this.notifyTaskStatusChange();
+        }
+    }
+    /**
+     * Updates the timeline focus state flag and notifies the active task to update its focused state.
+     */
+    handleTimelineFocusOut({ relatedTarget }) {
+        this.isTimelineFocused = this.timelineElement.contains(relatedTarget);
+        // update the task element only if the new focus target is not in the Timeline - focus change between tasks is handled in the focusin handler
+        if (!isTask(relatedTarget, this.timelineElement)) {
+            this.notifyTaskStatusChange();
+        }
+    }
+    /**
+     * Updates the focus target flags and corrects the TreeList focus target if needed.
+     * As the TreeList will keep its last focused cell with tabindex="0",
+     * this methods forcefully focuses the correct cell,
+     * when navigating in the Timeline has updated the expected TreeList focus target.
+     */
+    handleTreeListFocusIn(event) {
+        this.treeListLastActive = true;
+        this.timelineLastActive = false;
+        // if the previous focus target was in the TreeList, rely on its component navigation and just record the focused item index
+        if (this.treeListElement.contains(event.relatedTarget)) {
+            const { colIndex, rowIndex } = this.gantt.treeList.activeCell;
+            this.activeTreeListCell = { colIndex, rowIndex };
+        }
+        else {
+            // if the previous focus target was outside the TreeList, ensure the expected focus coords are used
+            const { rowIndex, colIndex } = this.activeTreeListCell;
+            this.gantt.treeList.focusCell(rowIndex, colIndex); // activates the target cell even if it has tabindex="-1"
+        }
+        this.activeTimelineIndex = this.gantt.treeList.activeCell.dataRowIndex;
+        this.notifyTaskStatusChange();
+        if (this.gantt.treeList.activeCell.dataRowIndex >= 0) {
+            this.scrollHorizontallyToTask(this.activeTimelineIndex);
+            this.scrollSyncService.syncScrollTop('treelist', 'timeline');
+        }
+    }
+    handleKeydown(event) {
+        const { keyCode, target, altKey } = event;
+        const isTimelineActive = this.timelineElement.contains(target);
+        if (isTimelineActive) {
+            if (isArrowUpDownKey(keyCode)) {
+                const direction = keyCode === Keys.ArrowUp ? -1 : 1;
+                this.activeTimelineIndex = this.activeTimelineIndex + direction;
+                this.activeTreeListCell = {
+                    rowIndex: this.activeTimelineIndex + this.treeListHeaderRowsCount,
+                    colIndex: this.activeTreeListCell.colIndex
+                };
+            }
+            else if (keyCode === Keys.Home) {
+                this.activeTimelineIndex = 0;
+                this.activeTreeListCell = {
+                    rowIndex: this.activeTimelineIndex + this.treeListHeaderRowsCount,
+                    colIndex: this.activeTreeListCell.colIndex
+                };
+            }
+            else if (keyCode === Keys.End) {
+                const lastAvailableIndex = this.gantt.treeList.view.data.length - 1;
+                this.activeTimelineIndex = lastAvailableIndex;
+                this.activeTreeListCell = {
+                    rowIndex: this.activeTimelineIndex + this.treeListHeaderRowsCount,
+                    colIndex: this.activeTreeListCell.colIndex
+                };
+            }
+            if (isNavigationKey(keyCode)) {
+                this.scrollHorizontallyToTask(this.activeTimelineIndex);
+                this.scrollSyncService.syncScrollTop('timeline', 'treelist');
+                this.notifyTaskStatusChange();
+                event.preventDefault();
+            }
+            if (keyCode === Keys.Space && hasObservers(this.gantt.selectionChange)) {
+                const task = this.gantt.renderedTreeListItems[this.activeTimelineIndex];
+                const selectionAction = this.gantt.getSelectionAction(event, task);
+                if (isPresent(task) && !this.gantt.isSameSelection(selectionAction, task)) {
+                    this.zone.run(() => this.gantt.notifySelectionChange(task, selectionAction));
+                }
+                event.preventDefault();
+            }
+            if (keyCode === Keys.Enter && hasObservers(this.gantt.taskClick)) {
+                const task = this.gantt.renderedTreeListItems[this.activeTimelineIndex];
+                if (isPresent(task)) {
+                    this.zone.run(() => this.gantt.notifyTaskClick(event, task, this.activeTimelineIndex));
+                }
+                event.preventDefault();
+            }
+            if (isExpandCollapseKey(keyCode, altKey)) {
+                const task = this.gantt.renderedTreeListItems[this.activeTimelineIndex];
+                if (isPresent(task) && this.gantt.hasChildren(task)) {
+                    const shouldExpand = keyCode === Keys.ArrowRight;
+                    const isExpanded = this.gantt.isExpanded(task);
+                    const sameState = shouldExpand === isExpanded;
+                    if (!sameState) {
+                        this.zone.run(() => {
+                            const expandEvent = { dataItem: task };
+                            // order is not arbitrary
+                            // the TreeList emits the individual events first, then the combined `expandStateChange` event
+                            const individualEmitter = shouldExpand ? this.gantt.rowExpand : this.gantt.rowCollapse;
+                            individualEmitter.emit(expandEvent);
+                            this.gantt.expandStateChange.emit(Object.assign({}, expandEvent, { expand: shouldExpand }));
+                            this.gantt.updateView();
+                            this.scrollHorizontallyToTask(this.activeTimelineIndex);
+                        });
+                    }
+                }
+                event.preventDefault();
+            }
+        }
+        const isTreeListActive = this.treeListElement.contains(target);
+        if (keyCode === Keys.Delete && (isTimelineActive || isTreeListActive) && hasObservers(this.gantt.taskDelete)) {
+            const taskIndex = isTreeListActive ?
+                this.gantt.treeList.activeCell.dataRowIndex :
+                this.activeTimelineIndex;
+            const task = this.gantt.renderedTreeListItems[taskIndex];
+            if (isPresent(task)) {
+                this.zone.run(() => this.gantt.notifyTaskDelete(task));
+            }
+        }
+        if (isViewDigitKey(keyCode) && !isToolbar(target, this.host) && !this.gantt.isInEditMode) {
+            const targetViewIndex = getIndexFromViewDigitKeyCode(keyCode);
+            const availableViews = this.gantt.views.toArray();
+            const targetView = availableViews[targetViewIndex];
+            if (isPresent(targetView) && targetView.type !== this.gantt.activeView) {
+                this.zone.run(() => this.gantt.changeActiveView(targetView.type));
+            }
+        }
+    }
+    /**
+     * Filters for task mousedown in the Timeline.
+     */
+    handleTimelineMousedown({ target }) {
+        if (isTask(target, this.host) && !isClearButton(target, this.host)) {
+            const taskIndex = getClosestTaskIndex(target, this.host);
+            this.focusTask(taskIndex);
+        }
+    }
+    /**
+     * Scrolls horizontally to the beginning of the target task if the beginning of its content is not in the viewport.
+     */
+    scrollHorizontallyToTask(index) {
+        const task = this.timelineElement.querySelectorAll('.k-task-wrap').item(index);
+        if (!isPresent(task)) {
+            return;
+        }
+        // scroll horizontally to the item if less than 200px from the beginning of its content are visible
+        const targetVisibleWidth = 200;
+        const isScrollBeforeTask = (this.timelineElement.clientWidth + this.timelineElement.scrollLeft) < (task.offsetLeft + targetVisibleWidth);
+        const isScrollAfterTask = this.timelineElement.scrollLeft > task.offsetLeft;
+        if (isScrollBeforeTask || isScrollAfterTask) {
+            this.timelineElement.scrollLeft = task.offsetLeft;
+        }
+    }
+    /**
+     * Focus the TreeList on TreeList mousedown.
+     * A nasty hack to trick `handleTreeListFocusIn` into regarding the previous focus target as again the TreeList.
+     * Otherwise cell clicks are wrongly overwritten in `handleTreeListFocusIn` and the click focus target is not respected.
+     */
+    focusTreeList() {
+        this.gantt.treeList.focus();
+    }
+    /**
+     * Fires the `taskStatusChanges` event with active and focused status retrieved from
+     * `this.activeTimelineIndex` and `this.isTimelineFocused`.
+     */
+    notifyTaskStatusChange() {
+        this.taskStatusChanges.next(this.activeTask);
+    }
+};
+NavigationService = tslib_1.__decorate([
+    Injectable(),
+    tslib_1.__metadata("design:paramtypes", [NgZone,
+        Renderer2,
+        ScrollSyncService])
+], NavigationService);
+export { NavigationService };

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

@@ -0,0 +1,26 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export declare const isArrowUpDownKey: (keyCode: number) => boolean;
+/**
+ * @hidden
+ */
+export declare const isNavigationKey: (keyCode: number) => boolean;
+/**
+ * @hidden
+ */
+export declare const isExpandCollapseKey: (keyCode: number, altKey: boolean) => boolean;
+/**
+ * @hidden
+ */
+export declare const isViewDigitKey: (keyCode: number) => boolean;
+/**
+ * @hidden
+ *
+ * Returns the corresponding view index for the pressed digit key (Digit 1 => 0, Digit 2 => 1, etc.).
+ */
+export declare const getIndexFromViewDigitKeyCode: (keyCode: number) => number;

package/dist/es2015/navigation/utils.js

@@ -0,0 +1,69 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Keys } from '@progress/kendo-angular-common';
+// TODO: add those keys to `import { Keys } from '@progress/kendo-angular-common';`
+var NumpadKeys;
+(function (NumpadKeys) {
+    NumpadKeys[NumpadKeys["Digit1"] = 97] = "Digit1";
+    NumpadKeys[NumpadKeys["Digit2"] = 98] = "Digit2";
+    NumpadKeys[NumpadKeys["Digit3"] = 99] = "Digit3";
+    NumpadKeys[NumpadKeys["Digit4"] = 100] = "Digit4";
+})(NumpadKeys || (NumpadKeys = {}));
+/**
+ * @hidden
+ */
+export const isArrowUpDownKey = (keyCode) => [
+    Keys.ArrowUp,
+    Keys.ArrowDown
+].some(arrowKeyCode => keyCode === arrowKeyCode);
+/**
+ * @hidden
+ */
+export const isNavigationKey = (keyCode) => [
+    Keys.ArrowUp,
+    Keys.ArrowDown,
+    Keys.Home,
+    Keys.End
+].some(navigationKeyCode => keyCode === navigationKeyCode);
+/**
+ * @hidden
+ */
+export const isExpandCollapseKey = (keyCode, altKey) => {
+    return altKey && [
+        Keys.ArrowLeft,
+        Keys.ArrowRight
+    ].some(navigationKeyCode => keyCode === navigationKeyCode);
+};
+/**
+ * @hidden
+ */
+export const isViewDigitKey = (keyCode) => [
+    Keys.Digit1,
+    NumpadKeys.Digit1,
+    Keys.Digit2,
+    NumpadKeys.Digit2,
+    Keys.Digit3,
+    NumpadKeys.Digit3,
+    Keys.Digit4,
+    NumpadKeys.Digit4
+].some(digitKeyCode => keyCode === digitKeyCode);
+/**
+ * @hidden
+ *
+ * Returns the corresponding view index for the pressed digit key (Digit 1 => 0, Digit 2 => 1, etc.).
+ */
+export const getIndexFromViewDigitKeyCode = (keyCode) => {
+    switch (keyCode) {
+        case NumpadKeys.Digit1:
+        case Keys.Digit1: return 0;
+        case NumpadKeys.Digit2:
+        case Keys.Digit2: return 1;
+        case NumpadKeys.Digit3:
+        case Keys.Digit3: return 2;
+        case NumpadKeys.Digit4:
+        case Keys.Digit4: return 3;
+        default: return null;
+    }
+};

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-gantt',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1641921322,
+    publishDate: 1642606888,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

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

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { ChangeDetectorRef } from '@angular/core';
 import { MappingService } from '../common/mapping.service';
+import { NavigationService } from '../navigation/navigation.service';
 import { DependencyDomService } from '../dependencies/dependency-dom.service';
 import { OptionChangesService } from '../common/option-changes.service';
 import { TimelineViewService } from './../timeline/timeline-view.service';
@@ -12,6 +13,7 @@ import { GanttTaskBase } from './gantt-task-base';
  * @hidden
  */
 export declare class GanttMilestoneTaskComponent extends GanttTaskBase {
+    touchEnabled: boolean;
     milestoneWrapperClass: boolean;
-    constructor(mapper: MappingService, timelineViewService: TimelineViewService, dependencyDomService: DependencyDomService, optionChangesService: OptionChangesService, cdr: ChangeDetectorRef);
+    constructor(touchEnabled: boolean, mapper: MappingService, timelineViewService: TimelineViewService, dependencyDomService: DependencyDomService, optionChangesService: OptionChangesService, cdr: ChangeDetectorRef, navigationService: NavigationService);
 }

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

@@ -4,8 +4,10 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 var GanttMilestoneTaskComponent_1;
-import { Component, forwardRef, HostBinding, ChangeDetectorRef } from '@angular/core';
+import { Component, forwardRef, HostBinding, ChangeDetectorRef, Inject } from '@angular/core';
 import { MappingService } from '../common/mapping.service';
+import { NavigationService } from '../navigation/navigation.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';
@@ -14,8 +16,9 @@ import { GanttTaskBase } from './gantt-task-base';
  * @hidden
  */
 let GanttMilestoneTaskComponent = GanttMilestoneTaskComponent_1 = class GanttMilestoneTaskComponent extends GanttTaskBase {
-    constructor(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
-        super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr);
+    constructor(touchEnabled, mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService) {
+        super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr, navigationService);
+        this.touchEnabled = touchEnabled;
         this.milestoneWrapperClass = true;
     }
 };
@@ -35,20 +38,44 @@ GanttMilestoneTaskComponent = GanttMilestoneTaskComponent_1 = tslib_1.__decorate
         template: `
         <div
             #task
+            role="treeitem"
             class="k-task k-task-milestone"
             [ngClass]="taskClass(dataItem)"
-            [style.left.px]="taskOffset"
             [attr.title]="mapper.extractFromTask(dataItem, 'title')"
             [class.k-state-selected]="isSelected(dataItem)"
-            [attr.data-task-index]="index"
+            [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;
+        }
+    `]
     }),
-    tslib_1.__metadata("design:paramtypes", [MappingService,
+    tslib_1.__param(0, Inject(TOUCH_ENABLED)),
+    tslib_1.__metadata("design:paramtypes", [Boolean, MappingService,
         TimelineViewService,
         DependencyDomService,
         OptionChangesService,
-        ChangeDetectorRef])
+        ChangeDetectorRef,
+        NavigationService])
 ], GanttMilestoneTaskComponent);
 export { GanttMilestoneTaskComponent };

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

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { ChangeDetectorRef, TemplateRef } from '@angular/core';
 import { MappingService } from '../common/mapping.service';
+import { NavigationService } from '../navigation/navigation.service';
 import { DependencyDomService } from '../dependencies/dependency-dom.service';
 import { OptionChangesService } from '../common/option-changes.service';
 import { TimelineViewService } from './../timeline/timeline-view.service';
@@ -12,7 +13,10 @@ import { GanttTaskBase } from './gantt-task-base';
  * @hidden
  */
 export declare class GanttSummaryTaskComponent extends GanttTaskBase {
+    touchEnabled: boolean;
     summaryWrapperClass: boolean;
     template: TemplateRef<any>;
-    constructor(mapper: MappingService, timelineViewService: TimelineViewService, dependencyDomService: DependencyDomService, optionChangesService: OptionChangesService, cdr: ChangeDetectorRef);
+    isExpanded: (task: object) => boolean;
+    readonly ariaExpanded: string;
+    constructor(touchEnabled: boolean, mapper: MappingService, timelineViewService: TimelineViewService, dependencyDomService: DependencyDomService, optionChangesService: OptionChangesService, cdr: ChangeDetectorRef, navigationService: NavigationService);
 }

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

@@ -4,20 +4,30 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 var GanttSummaryTaskComponent_1;
-import { ChangeDetectorRef, Component, forwardRef, HostBinding, Input, TemplateRef } from '@angular/core';
+import { ChangeDetectorRef, Component, forwardRef, HostBinding, Inject, Input, TemplateRef } from '@angular/core';
 import { MappingService } from '../common/mapping.service';
+import { NavigationService } from '../navigation/navigation.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 { isPresent } from '../utils';
 /**
  * @hidden
  */
 let GanttSummaryTaskComponent = GanttSummaryTaskComponent_1 = class GanttSummaryTaskComponent extends GanttTaskBase {
-    constructor(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr) {
-        super(mapper, timelineViewService, dependencyDomService, optionChangesService, cdr);
+    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);
+    }
 };
 tslib_1.__decorate([
     HostBinding('class.k-summary-wrap'),
@@ -27,6 +37,10 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", TemplateRef)
 ], GanttSummaryTaskComponent.prototype, "template", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Function)
+], GanttSummaryTaskComponent.prototype, "isExpanded", void 0);
 GanttSummaryTaskComponent = GanttSummaryTaskComponent_1 = tslib_1.__decorate([
     Component({
         selector: 'kendo-gantt-summary-task',
@@ -39,13 +53,15 @@ GanttSummaryTaskComponent = GanttSummaryTaskComponent_1 = tslib_1.__decorate([
         template: `
         <div
             #task
+            role="treeitem"
             class="k-task k-task-summary"
             [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-expanded]="ariaExpanded"
+            [attr.aria-level]="level + 1"
         >
             <div *ngIf="!template; else summaryTemplate"
                 class="k-task-summary-progress"
@@ -66,12 +82,35 @@ GanttSummaryTaskComponent = GanttSummaryTaskComponent_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(0, Inject(TOUCH_ENABLED)),
+    tslib_1.__metadata("design:paramtypes", [Boolean, MappingService,
         TimelineViewService,
         DependencyDomService,
         OptionChangesService,
-        ChangeDetectorRef])
+        ChangeDetectorRef,
+        NavigationService])
 ], GanttSummaryTaskComponent);
 export { GanttSummaryTaskComponent };