@progress/kendo-angular-gantt 0.2.0-dev.202111231320 → 0.2.1-dev.202112081924

package/dist/fesm2015/index.js

@@ -5,12 +5,12 @@
 import { __decorate, __metadata, __param } from 'tslib';
 import { Input, EventEmitter, Injectable, Directive, Optional, TemplateRef, QueryList, ContentChildren, ContentChild, Component, forwardRef, SkipSelf, Host, Injector, NgZone, isDevMode, ViewChild, HostBinding, Output, Renderer2, ElementRef, ChangeDetectorRef, NgModule } from '@angular/core';
 import { ColumnBase, ColumnComponent, ColumnGroupComponent, SpanColumnComponent, TreeListComponent, DataBoundTreeComponent, ExpandableTreeComponent, FlatBindingDirective, HierarchyBindingDirective, ExpandableDirective, TreeListModule } from '@progress/kendo-angular-treelist';
+import { cloneDate, addWeeks, firstDayInWeek, addDays, getDate, lastDayOfMonth, firstDayOfMonth, addMonths, isEqualDate, MS_PER_HOUR, MS_PER_DAY } from '@progress/kendo-date-math';
 import { of, Subject, Subscription, fromEvent } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
 import { isDocumentAvailable, closestInScope, matchesClasses, anyChanged, hasObservers, EventsModule } from '@progress/kendo-angular-common';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { orderBy } from '@progress/kendo-data-query';
-import { cloneDate, addWeeks, firstDayInWeek, addDays, getDate, lastDayOfMonth, firstDayOfMonth, addMonths, isEqualDate, MS_PER_HOUR, MS_PER_DAY } from '@progress/kendo-date-math';
 import { getter } from '@progress/kendo-common';
 import { map, distinctUntilChanged, take, filter, switchMap } from 'rxjs/operators';
 import { LocalizationService, ComponentMessages, L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -30,7 +30,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-gantt',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1637673280,
+    publishDate: 1638991092,
     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'
 };
@@ -627,6 +627,10 @@ const rowClassCallback = () => null;
  * @hidden
  */
 const taskClassCallback = () => null;
+/**
+ * @hidden
+ */
+const isSelected = () => false;
 
 /**
  * @hidden
@@ -723,6 +727,10 @@ const isColumnGroup = (column) => column.isColumnGroup;
  * @hidden
  */
 const isNumber = (contender) => typeof contender === 'number' && !isNaN(contender);
+/**
+ * @hidden
+ */
+const isString = (contender) => typeof contender === 'string';
 /**
  * @hidden
  *
@@ -1721,6 +1729,27 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         this.hostElement = hostElement;
         this.zone = zone;
         this.hostClasses = true;
+        /**
+         * Provides a callback that determines if the given task is selected ([see example]({% slug selection_gantt %}#toc-custom-selection))
+         *
+         * > The [`selectable`]({% slug gantt_api_ganttcomponent %}#toc-selectable) prop has to be set to `true` in order for this callback to be executed.
+         */
+        this.isSelected = isSelected;
+        /**
+         * Fires when the Gantt selection is changed through user interaction.
+         *
+         * Holds data about the affected [`items`]({% slug api_gantt_selectionchangeevent %}#toc-items) and the attempted [`action`]({% slug api_gantt_selectionchangeevent %}#toc-action):
+         * - `select` - Triggered on `click` or `ctrl + click` on deselected items.
+         * - `remove` - Triggered on `ctrl + click` on selected items.
+         */
+        this.selectionChange = new EventEmitter();
+        /**
+         * Enables or disables the Gantt selection mechanism ([see example]({% slug selection_gantt %}#toc-custom-selection)).
+         *
+         * > When set to `true`, the [`isSelected`]({% slug gantt_api_ganttcomponent %}#toc-isselected) callback has to be provided.
+         * > When applied, the [`SelectableDirective`]({% slug api_gantt_selectabledirective %}) sets `selectable` to `true` internally.
+         */
+        this.selectable = false;
         /**
          * The position of the toolbar.
          *
@@ -1889,6 +1918,14 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
          * Fires when the user changes the locked state of the columns from the column menu or by reordering the columns.
          */
         this.columnLockedChange = new EventEmitter();
+        /**
+         * Fires when a cell is clicked.
+         */
+        this.cellClick = new EventEmitter();
+        /**
+         * Fires when a task is clicked.
+         */
+        this.taskClick = new EventEmitter();
         /**
          * @hidden
          *
@@ -1914,9 +1951,6 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         this.optionChangesSubscriptions = new Subscription();
         this.editServiceSubscription = new Subscription();
         validatePackage(packageMetadata);
-        this.handleTimelineDblClick = this.handleTimelineDblClick.bind(this);
-        this.handleTimelineMouseDown = this.handleTimelineMouseDown.bind(this);
-        this.handleDoubleClick = this.handleDoubleClick.bind(this);
         this.optionChangesSubscriptions.add(this.optionChangesService.viewChanges.subscribe(() => {
             this.loadTimelineData();
         }));
@@ -2089,6 +2123,15 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         // TODO: review if this is a performance concern?
         return this.timelineViewService.service(this.activeView);
     }
+    /**
+     * @hidden
+     *
+     * Retrieves the `isSelected` callback if `selectable` is set to `true`
+     * Otherwise returns the default callback, which always returns `false`.
+     */
+    get isTaskSelected() {
+        return this.selectable ? this.isSelected : isSelected;
+    }
     /**
      * @hidden
      *
@@ -2183,6 +2226,14 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
             this.treeList.reorderColumn(source, destIndex, options);
         }
     }
+    /**
+     * Updates the data of the Gantt and forces row-related callbacks to be called anew.
+     */
+    updateView() {
+        if (isPresent(this.treeList)) {
+            this.treeList.updateView();
+        }
+    }
     /**
      * Opens the task editing dialog.
      */
@@ -2243,16 +2294,6 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
             this.dependencyDomService.notifyChanges();
         }
     }
-    /**
-     * @hidden
-     *
-     * Used by the GanttExpandableDirective.
-     */
-    updateView() {
-        if (isPresent(this.treeList)) {
-            this.treeList.updateView();
-        }
-    }
     /**
      * @hidden
      */
@@ -2290,24 +2331,89 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
     /**
      * @hidden
      */
-    handleCellClick(event) {
-        this._cellClickEvent = event;
+    handleTimelineRightClick(event) {
+        const target = event.target;
+        const gantt = this.hostElement.nativeElement;
+        if (!isTask(target, gantt) || isClearButton(target, gantt)) {
+            return;
+        }
+        if (hasObservers(this.taskClick)) {
+            const taskIndex = getClosestTaskIndex(target, gantt);
+            const task = this.renderedTreeListItems[taskIndex];
+            this.zone.run(() => this.emitTaskClick(event, task, taskIndex));
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleTimelineClick(event) {
+        const target = event.target;
+        const gantt = this.hostElement.nativeElement;
+        if (!isTask(target, gantt) || isClearButton(target, gantt)) {
+            return;
+        }
+        const taskIndex = getClosestTaskIndex(target, gantt);
+        const task = this.renderedTreeListItems[taskIndex];
+        const selectionAction = this.getSelectionAction(event, task);
+        if ((hasObservers(this.selectionChange) && !this.isSameSelection(selectionAction, task)) ||
+            hasObservers(this.taskClick)) {
+            this.zone.run(() => {
+                this.emitSelectionChange(task, selectionAction);
+                this.emitTaskClick(event, task, taskIndex);
+            });
+        }
     }
     /**
      * @hidden
      */
-    handleDoubleClick(event) {
-        const cell = this._cellClickEvent.originalEvent.target;
-        if (event.target !== cell) {
+    handleTreeListDoubleClick(event) {
+        if (!isPresent(this.lastTreeListCellClick) || event.target !== this.lastTreeListCellClick.originalEvent.target) {
             return;
         }
-        this.editItem = getEditItem(this._cellClickEvent.dataItem, this.treeList.view.data, this.mapper);
+        this.editItem = getEditItem(this.lastTreeListCellClick.dataItem, this.treeList.view.data, this.mapper);
         if (hasObservers(this.cellDblClick)) {
             this.zone.run(() => {
-                this.cellDblClick.emit(Object.assign({}, this._cellClickEvent, { sender: this }));
+                this.cellDblClick.emit({
+                    column: this.lastTreeListCellClick.column,
+                    columnIndex: this.lastTreeListCellClick.columnIndex,
+                    dataItem: this.lastTreeListCellClick.dataItem,
+                    isEdited: this.lastTreeListCellClick.isEdited,
+                    originalEvent: this.lastTreeListCellClick.originalEvent,
+                    rowIndex: this.lastTreeListCellClick.rowIndex,
+                    type: 'dblclick',
+                    sender: this
+                });
             });
         }
     }
+    /**
+     * @hidden
+     */
+    handleTreeListSelectionChange(event) {
+        // prevent selection change from right-click
+        if (isPresent(this.lastTreeListCellClick) && this.lastTreeListCellClick.type === 'contextmenu') {
+            return;
+        }
+        const task = event.items.map(item => item.dataItem)[0]; // single selection only currently available
+        const action = event.action;
+        this.emitSelectionChange(task, action);
+    }
+    /**
+     * @hidden
+     */
+    handleTreeListCellClick(event) {
+        this.lastTreeListCellClick = event;
+        this.cellClick.emit({
+            column: event.column,
+            columnIndex: event.columnIndex,
+            dataItem: event.dataItem,
+            isEdited: event.isEdited,
+            originalEvent: event.originalEvent,
+            rowIndex: event.rowIndex,
+            type: event.type,
+            sender: this
+        });
+    }
     /**
      * @hidden
      */
@@ -2334,13 +2440,17 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         if (!isTask(target, gantt) || isClearButton(target, gantt)) {
             return;
         }
-        const taskIndex = getClosestTaskIndex(target, gantt);
-        const task = this.renderedTreeListItems[taskIndex];
-        this.zone.run(() => this.taskDblClick.emit({
-            dataItem: task,
-            originalEvent: event,
-            sender: this
-        }));
+        if (hasObservers(this.taskDblClick)) {
+            const taskIndex = getClosestTaskIndex(target, gantt);
+            const task = this.renderedTreeListItems[taskIndex];
+            this.zone.run(() => this.taskDblClick.emit({
+                dataItem: task,
+                originalEvent: event,
+                sender: this,
+                rowIndex: taskIndex,
+                type: 'dblclick'
+            }));
+        }
     }
     /**
      * @hidden
@@ -2348,6 +2458,26 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
     getText(token) {
         return this.localizationService.get(token);
     }
+    emitTaskClick(event, dataItem, itemIndex) {
+        this.taskClick.emit({
+            originalEvent: event,
+            dataItem: dataItem,
+            rowIndex: itemIndex,
+            type: event.type,
+            sender: this
+        });
+    }
+    emitSelectionChange(dataItem, action) {
+        if (this.isSameSelection(action, dataItem)) {
+            return;
+        }
+        this.selectionChange.emit({
+            action: action,
+            items: [dataItem],
+            sender: this
+        });
+        this.updateView();
+    }
     updateTreeListGroupClass(columns = this.columns) {
         if (!isPresent(this.treeList)) {
             return;
@@ -2374,6 +2504,13 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         }
         return this.views.find(view => view.type === this.activeView);
     }
+    isSameSelection(action, dataItem) {
+        return action === 'select' && this.isSelected(dataItem);
+    }
+    getSelectionAction({ ctrlKey, metaKey }, dataItem) {
+        const shouldToggleSelection = ctrlKey || metaKey;
+        return (shouldToggleSelection && this.isSelected(dataItem)) ? 'remove' : 'select';
+    }
 };
 __decorate([
     ViewChild(TreeListComponent, { static: true }),
@@ -2433,6 +2570,18 @@ __decorate([
     __metadata("design:type", Array),
     __metadata("design:paramtypes", [Array])
 ], GanttComponent.prototype, "data", null);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], GanttComponent.prototype, "isSelected", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], GanttComponent.prototype, "selectionChange", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], GanttComponent.prototype, "selectable", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String)
@@ -2601,6 +2750,14 @@ __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
 ], GanttComponent.prototype, "columnLockedChange", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], GanttComponent.prototype, "cellClick", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], GanttComponent.prototype, "taskClick", void 0);
 GanttComponent = GanttComponent_1 = __decorate([
     Component({
         selector: 'kendo-gantt',
@@ -2821,6 +2978,8 @@ GanttComponent = GanttComponent_1 = __decorate([
                         [reorderable]="columnsReorderable"
                         [resizable]="columnsResizable"
                         [rowClass]="rowClass"
+                        [isSelected]="isSelected"
+                        [selectable]="selectable"
                         [sortable]="sortable"
                         [sort]="sort"
                         [filterable]="filterMenu"
@@ -2838,11 +2997,14 @@ GanttComponent = GanttComponent_1 = __decorate([
                         (columnResize)="columnResize.emit($event)"
                         (columnVisibilityChange)="handleColumnVisibilityChange($event)"
                         (columnLockedChange)="columnLockedChange.emit($event)"
-                        (cellClick)="handleCellClick($event)"
+                        (selectionChange)="handleTreeListSelectionChange($event)"
+                        (cellClick)="handleTreeListCellClick($event)"
                         (cellClose)="handleCellClose($event)"
                         [kendoEventsOutsideAngular]="{
-                            dblclick: handleDoubleClick
-                        }">
+                            dblclick: handleTreeListDoubleClick
+                        }"
+                        [scope]="this"
+                    >
                         <kendo-treelist-messages [kendoGanttTreeListMessages]="localizationService"></kendo-treelist-messages>
                     </kendo-treelist>
                 </kendo-splitter-pane>
@@ -2869,10 +3031,14 @@ GanttComponent = GanttComponent_1 = __decorate([
                         [taskClass]="taskClass"
                         [dependencies]="dependencies"
                         [hasChildren]="hasChildren"
+                        [isTaskSelected]="isTaskSelected"
                         [kendoEventsOutsideAngular]="{
+                            click: handleTimelineClick,
+                            contextmenu: handleTimelineRightClick,
                             dblclick: handleTimelineDblClick,
                             mousedown: handleTimelineMouseDown
                         }"
+                        [scope]="this"
                     ></kendo-gantt-timeline>
                 </kendo-splitter-pane>
             </kendo-splitter>
@@ -3001,6 +3167,10 @@ __decorate([
     Input(),
     __metadata("design:type", Function)
 ], GanttTimelineComponent.prototype, "taskClass", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], GanttTimelineComponent.prototype, "isTaskSelected", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Function)
@@ -3080,6 +3250,7 @@ GanttTimelineComponent = __decorate([
                             [summaryTaskTemplate]="summaryTaskTemplate"
                             [taskClass]="taskClass"
                             [hasChildren]="hasChildren"
+                            [isTaskSelected]="isTaskSelected"
                         >
                         </tbody>
                     </table>
@@ -3155,8 +3326,8 @@ __decorate([
 ], GanttTasksTableBodyComponent.prototype, "hasChildren", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", Number)
-], GanttTasksTableBodyComponent.prototype, "index", void 0);
+    __metadata("design:type", Function)
+], GanttTasksTableBodyComponent.prototype, "isTaskSelected", void 0);
 GanttTasksTableBodyComponent = __decorate([
     Component({
         selector: '[kendoGanttTasksTableBody]',
@@ -3168,6 +3339,7 @@ GanttTasksTableBodyComponent = __decorate([
                     [dataItem]="item"
                     [activeView]="activeView"
                     [taskClass]="taskClass"
+                    [isSelected]="isTaskSelected"
                     [index]="index"
                 >
                 </kendo-gantt-milestone-task>
@@ -3178,6 +3350,7 @@ GanttTasksTableBodyComponent = __decorate([
                         [template]="summaryTaskTemplate"
                         [activeView]="activeView"
                         [taskClass]="taskClass"
+                        [isSelected]="isTaskSelected"
                         [index]="index"
                     >
                     </kendo-gantt-summary-task>
@@ -3188,6 +3361,7 @@ GanttTasksTableBodyComponent = __decorate([
                         [taskTemplate]="taskTemplate"
                         [activeView]="activeView"
                         [taskClass]="taskClass"
+                        [isSelected]="isTaskSelected"
                         [index]="index"
                     >
                     </kendo-gantt-task>
@@ -3306,6 +3480,14 @@ __decorate([
     Input(),
     __metadata("design:type", Object)
 ], GanttTaskBase.prototype, "dataItem", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Number)
+], GanttTaskBase.prototype, "index", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], GanttTaskBase.prototype, "isSelected", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String)
@@ -3314,10 +3496,6 @@ __decorate([
     Input(),
     __metadata("design:type", Function)
 ], GanttTaskBase.prototype, "taskClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], GanttTaskBase.prototype, "index", void 0);
 
 var GanttTaskComponent_1;
 /**
@@ -3359,6 +3537,7 @@ GanttTaskComponent = GanttTaskComponent_1 = __decorate([
             [style.left.px]="taskOffset"
             [attr.title]="mapper.extractFromTask(dataItem, 'title')"
             [attr.data-task-index]="index"
+            [class.k-state-selected]="isSelected(dataItem)"
         >
             <ng-container *ngIf="!taskTemplate">
                 <div
@@ -3443,6 +3622,7 @@ GanttSummaryTaskComponent = GanttSummaryTaskComponent_1 = __decorate([
             [style.left.px]="taskOffset"
             [attr.title]="mapper.extractFromTask(dataItem, 'title')"
             [attr.data-task-index]="index"
+            [class.k-state-selected]="isSelected(dataItem)"
         >
             <div *ngIf="!template; else summaryTemplate"
                 class="k-task-summary-progress"
@@ -3502,6 +3682,7 @@ GanttMilestoneTaskComponent = GanttMilestoneTaskComponent_1 = __decorate([
             [ngClass]="taskClass(dataItem)"
             [style.left.px]="taskOffset"
             [attr.title]="mapper.extractFromTask(dataItem, 'title')"
+            [class.k-state-selected]="isSelected(dataItem)"
             [attr.data-task-index]="index"
         >
         </div>
@@ -3578,6 +3759,10 @@ GanttHierarchyBindingDirective = __decorate([
  * A directive which controls the expanded state of the items.
  */
 let GanttExpandableDirective = class GanttExpandableDirective extends ExpandableDirective {
+    // fixes an injection error in some builds/ng-versions (e.g. StackBlitz)
+    constructor(gantt) {
+        super(gantt);
+    }
 };
 __decorate([
     Input(),
@@ -3587,9 +3772,123 @@ GanttExpandableDirective = __decorate([
     Directive({
         exportAs: 'kendoGanttExpandable',
         selector: '[kendoGanttExpandable]'
-    })
+    }),
+    __metadata("design:paramtypes", [ExpandableTreeComponent])
 ], GanttExpandableDirective);
 
+/**
+ * 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))
+ */
+let SelectableDirective = 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;
+        }
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], SelectableDirective.prototype, "selectable", null);
+__decorate([
+    Input(),
+    __metadata("design:type", Array),
+    __metadata("design:paramtypes", [Array])
+], SelectableDirective.prototype, "selectedKeys", null);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], SelectableDirective.prototype, "selectedKeysChange", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
+], SelectableDirective.prototype, "itemKey", null);
+SelectableDirective = __decorate([
+    Directive({
+        exportAs: 'kendoGanttSelectable',
+        selector: '[kendoGanttSelectable]'
+    }),
+    __metadata("design:paramtypes", [GanttComponent])
+], SelectableDirective);
+
 /**
  * @hidden
  */
@@ -3708,6 +4007,7 @@ ViewSelectorComponent = __decorate([
         <kendo-buttongroup class="k-gantt-views" selection="single">
             <button *ngFor="let view of views"
                 kendoButton
+                type="button"
                 [selected]="view === activeView"
                 (click)="onClick(view)">{{getViewTypeText(view)}}</button>
         </kendo-buttongroup>
@@ -4446,6 +4746,7 @@ const DECLARATIONS = [
     TimelineDayViewComponent,
     TimelineWeekViewComponent,
     TimelineMonthViewComponent,
+    SelectableDirective,
     EditDialogComponent,
     CustomMessagesComponent,
     LocalizedMessagesDirective,
@@ -4500,4 +4801,4 @@ GanttModule = __decorate([
  * Generated bundle index. Do not edit.
  */
 
-export { MappingService, OptionChangesService, DependencyDomService, GanttDependencyDirective, EditDialogComponent, EditService, CustomMessagesComponent, LocalizedMessagesDirective, Messages, GanttTreeListMessagesDirective, GanttHeaderTableBodyComponent, GanttMilestoneTaskComponent, GanttSummaryTaskComponent, GanttTaskBase, GanttTaskComponent, GanttTasksTableBodyComponent, ScrollSyncService, GanttTimelineComponent, TimelineBaseViewService, TimelineDayViewComponent, TimelineDayViewService, TimelineMonthViewComponent, TimelineMonthViewService, TimelineViewService, TimelineWeekViewComponent, TimelineWeekViewService, ViewBase, ToolbarComponent, ViewSelectorComponent, GanttComponent, GanttModule, GanttHierarchyBindingDirective, GanttFlatBindingDirective, GanttExpandableDirective, GanttTaskTemplateDirective, GanttTaskContentTemplateDirective, GanttSummaryTaskTemplateDirective, ToolbarTemplateDirective, GanttColumnBase, GanttColumnComponent, GanttColumnGroupComponent, GanttSpanColumnComponent, CellTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ColumnMenuTemplateDirective, FilterCellTemplateDirective, FilterMenuTemplateDirective, EditTemplateDirective };
+export { MappingService, OptionChangesService, DependencyDomService, GanttDependencyDirective, EditDialogComponent, EditService, CustomMessagesComponent, LocalizedMessagesDirective, Messages, GanttTreeListMessagesDirective, GanttHeaderTableBodyComponent, GanttMilestoneTaskComponent, GanttSummaryTaskComponent, GanttTaskBase, GanttTaskComponent, GanttTasksTableBodyComponent, ScrollSyncService, GanttTimelineComponent, TimelineBaseViewService, TimelineDayViewComponent, TimelineDayViewService, TimelineMonthViewComponent, TimelineMonthViewService, TimelineViewService, TimelineWeekViewComponent, TimelineWeekViewService, ViewBase, ToolbarComponent, ViewSelectorComponent, GanttComponent, GanttModule, GanttHierarchyBindingDirective, GanttFlatBindingDirective, GanttExpandableDirective, GanttTaskTemplateDirective, GanttTaskContentTemplateDirective, GanttSummaryTaskTemplateDirective, ToolbarTemplateDirective, SelectableDirective, GanttColumnBase, GanttColumnComponent, GanttColumnGroupComponent, GanttSpanColumnComponent, CellTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ColumnMenuTemplateDirective, FilterCellTemplateDirective, FilterMenuTemplateDirective, EditTemplateDirective };