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

package/dist/es2015/gantt.component.js

@@ -5,14 +5,14 @@
 import * as tslib_1 from "tslib";
 var GanttComponent_1;
 import { Component, forwardRef, HostBinding, Input, Output, EventEmitter, ViewChild, ContentChildren, ContentChild, QueryList, isDevMode, Renderer2, ElementRef, NgZone } from '@angular/core';
-import { DataBoundTreeComponent, ExpandableTreeComponent } from '@progress/kendo-angular-treelist';
-import { TreeListComponent } from '@progress/kendo-angular-treelist';
+import { TreeListComponent, DataBoundTreeComponent, ExpandableTreeComponent } from '@progress/kendo-angular-treelist';
+import { Day } from '@progress/kendo-date-math';
 import { Subscription } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
 import { anyChanged, hasObservers } from '@progress/kendo-angular-common';
 import { GanttColumnBase } from './columns/columns';
-import { fetchChildren, hasChildren, rowClassCallback, taskClassCallback } from './common/default-callbacks';
+import { fetchChildren, hasChildren, isSelected, rowClassCallback, taskClassCallback } from './common/default-callbacks';
 import { TimelineViewService } from './timeline/timeline-view.service';
 import { TimelineDayViewService } from './timeline/timeline-day-view.service';
 import { TimelineWeekViewService } from './timeline/timeline-week-view.service';
@@ -30,7 +30,6 @@ import { GanttSummaryTaskTemplateDirective } from './template-directives/summary
 import { GanttTaskContentTemplateDirective } from './template-directives/task-content-template.directive';
 import { ToolbarTemplateDirective } from './toolbar/toolbar-template.directive';
 import { ViewBase } from './timeline/view-base';
-import { Day } from '@progress/kendo-date-math';
 import { getEditItem } from './editing/util';
 const TREELIST_GROUP_COLUMNS_CLASS = 'k-gantt-treelist-nested-columns';
 const DEFAULT_VIEW = 'week';
@@ -118,6 +117,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.
          *
@@ -286,6 +306,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
          *
@@ -311,9 +339,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();
         }));
@@ -486,6 +511,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
      *
@@ -580,6 +614,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.
      */
@@ -640,16 +682,6 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
             this.dependencyDomService.notifyChanges();
         }
     }
-    /**
-     * @hidden
-     *
-     * Used by the GanttExpandableDirective.
-     */
-    updateView() {
-        if (isPresent(this.treeList)) {
-            this.treeList.updateView();
-        }
-    }
     /**
      * @hidden
      */
@@ -687,24 +719,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
      */
@@ -731,13 +828,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
@@ -745,6 +846,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;
@@ -771,6 +892,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';
+    }
 };
 tslib_1.__decorate([
     ViewChild(TreeListComponent, { static: true }),
@@ -830,6 +958,18 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", Array),
     tslib_1.__metadata("design:paramtypes", [Array])
 ], GanttComponent.prototype, "data", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Function)
+], GanttComponent.prototype, "isSelected", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], GanttComponent.prototype, "selectionChange", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean)
+], GanttComponent.prototype, "selectable", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
@@ -998,6 +1138,14 @@ tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
 ], GanttComponent.prototype, "columnLockedChange", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], GanttComponent.prototype, "cellClick", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], GanttComponent.prototype, "taskClick", void 0);
 GanttComponent = GanttComponent_1 = tslib_1.__decorate([
     Component({
         selector: 'kendo-gantt',
@@ -1218,6 +1366,8 @@ GanttComponent = GanttComponent_1 = tslib_1.__decorate([
                         [reorderable]="columnsReorderable"
                         [resizable]="columnsResizable"
                         [rowClass]="rowClass"
+                        [isSelected]="isSelected"
+                        [selectable]="selectable"
                         [sortable]="sortable"
                         [sort]="sort"
                         [filterable]="filterMenu"
@@ -1235,11 +1385,14 @@ GanttComponent = GanttComponent_1 = tslib_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>
@@ -1266,10 +1419,14 @@ GanttComponent = GanttComponent_1 = tslib_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>

package/dist/es2015/gantt.module.js

@@ -8,6 +8,7 @@ import { CommonModule } from '@angular/common';
 import { SplitterModule } from '@progress/kendo-angular-layout';
 import { TreeListModule } from '@progress/kendo-angular-treelist';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { EventsModule } from '@progress/kendo-angular-common';
 import { DialogModule } from '@progress/kendo-angular-dialog';
 import { GanttComponent } from './gantt.component';
 import { GanttTimelineComponent } from './timeline/gantt-timeline.component';
@@ -22,6 +23,7 @@ import { GanttMilestoneTaskComponent } from './rendering/gantt-milestone-task.co
 import { GanttFlatBindingDirective } from './binding-directives/flat-binding.directive';
 import { GanttHierarchyBindingDirective } from './binding-directives/hierarchy-binding.directive';
 import { GanttExpandableDirective } from './expanded-state/expandable.directive';
+import { SelectableDirective } from './selection/selectable.directive';
 import { ToolbarComponent } from './toolbar/toolbar.component';
 import { ToolbarTemplateDirective } from './toolbar/toolbar-template.directive';
 import { ViewSelectorComponent } from './toolbar/view-selector.component';
@@ -39,7 +41,6 @@ import { CustomMessagesComponent } from './localization/custom-messages.componen
 import { L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
 import { GanttTreeListMessagesDirective } from './localization/treelist-messages.directive';
-import { EventsModule } from '@progress/kendo-angular-common';
 const IMPORTED_MODULES = [
     CommonModule,
     ReactiveFormsModule,
@@ -84,6 +85,7 @@ const DECLARATIONS = [
     TimelineDayViewComponent,
     TimelineWeekViewComponent,
     TimelineMonthViewComponent,
+    SelectableDirective,
     EditDialogComponent,
     CustomMessagesComponent,
     LocalizedMessagesDirective,