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

package/dist/es/selection/selectable.directive.js

@@ -0,0 +1,141 @@
+/**-----------------------------------------------------------------------------------------
+* 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, Input, Output, EventEmitter } from '@angular/core';
+import { getter } from '@progress/kendo-common';
+import { GanttComponent } from '../gantt.component';
+import { isPresent, isString } from '../utils';
+/**
+ * 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))
+ */
+var SelectableDirective = /** @class */ (function () {
+    function SelectableDirective(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;
+    }
+    Object.defineProperty(SelectableDirective.prototype, "selectable", {
+        /**
+         * @hidden
+         */
+        set: function (value) {
+            if (value) {
+                this.gantt.isSelected = this.isSelected;
+                this.subscribeSelection();
+            }
+            else {
+                this.gantt.isSelected = function () { return false; };
+                this.unsubscribeSelection();
+            }
+            this.gantt.selectable = value;
+            this.gantt.updateView();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SelectableDirective.prototype, "selectedKeys", {
+        /**
+         * Sets the selected keys.
+         */
+        set: function (value) {
+            if (isPresent(value) && value === this.lastChange) {
+                return;
+            }
+            // prevent multiple items displayed as selected as multiple selection still not supported fully
+            var keys = (value || []).slice(0, 1);
+            this.state = new Set(keys);
+            this.gantt.updateView();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SelectableDirective.prototype, "itemKey", {
+        /**
+         * The field name or a function that specifies the data item unique key identifier.
+         * By default, the string field `id` is used.
+         */
+        set: function (value) {
+            if (isString(value)) {
+                this._keyGetter = getter(value);
+            }
+            else {
+                this._keyGetter = value;
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SelectableDirective.prototype, "keyGetter", {
+        get: function () {
+            return this._keyGetter || this.gantt.idGetter;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    SelectableDirective.prototype.ngOnDestroy = function () {
+        this.unsubscribeSelection();
+    };
+    SelectableDirective.prototype.isSelected = function (dataItem) {
+        return this.state.has(this.keyGetter(dataItem));
+    };
+    SelectableDirective.prototype.selectionChange = function (_a) {
+        var _this = this;
+        var action = _a.action, items = _a.items;
+        this.state.clear();
+        if (action === 'select') {
+            items.forEach(function (item) { return _this.state.add(_this.keyGetter(item)); });
+        }
+        this.emitSelectedItemsChange();
+    };
+    SelectableDirective.prototype.emitSelectedItemsChange = function () {
+        this.lastChange = Array.from(this.state);
+        this.selectedKeysChange.emit(this.lastChange);
+    };
+    SelectableDirective.prototype.subscribeSelection = function () {
+        this.unsubscribeSelection();
+        this.selectionSubscription = this.gantt.selectionChange.subscribe(this.selectionChange);
+    };
+    SelectableDirective.prototype.unsubscribeSelection = function () {
+        if (this.selectionSubscription) {
+            this.selectionSubscription.unsubscribe();
+            this.selectionSubscription = null;
+        }
+    };
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [Boolean])
+    ], SelectableDirective.prototype, "selectable", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Array),
+        tslib_1.__metadata("design:paramtypes", [Array])
+    ], SelectableDirective.prototype, "selectedKeys", null);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], SelectableDirective.prototype, "selectedKeysChange", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Object),
+        tslib_1.__metadata("design:paramtypes", [Object])
+    ], SelectableDirective.prototype, "itemKey", null);
+    SelectableDirective = tslib_1.__decorate([
+        Directive({
+            exportAs: 'kendoGanttSelectable',
+            selector: '[kendoGanttSelectable]'
+        }),
+        tslib_1.__metadata("design:paramtypes", [GanttComponent])
+    ], SelectableDirective);
+    return SelectableDirective;
+}());
+export { SelectableDirective };

package/dist/es/selection/selection-change-event.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

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

@@ -103,6 +103,10 @@ var GanttTimelineComponent = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", Function)
     ], GanttTimelineComponent.prototype, "taskClass", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Function)
+    ], GanttTimelineComponent.prototype, "isTaskSelected", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Function)
@@ -114,7 +118,7 @@ var GanttTimelineComponent = /** @class */ (function () {
     GanttTimelineComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-gantt-timeline',
-            template: "\n        <div class=\"k-timeline k-grid k-widget\">\n            <div class=\"k-grid-header\">\n                <div #timelineHeaderWrap class=\"k-grid-header-wrap\">\n                    <table\n                        role=\"presentation\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <tbody\n                            kendoGanttHeaderTableBody\n                            [groupSlots]=\"groupSlots\"\n                            [slots]=\"slots\">\n                        </tbody>\n                    </table>\n                </div>\n            </div>\n            <div #timelineContent class=\"k-grid-content\">\n                <div class=\"k-gantt-tables\">\n                    <table\n                        class=\"k-gantt-rows\"\n                        [style.width.px]=\"tableWidth\"\n                        role=\"presentation\"\n                    >\n                        <tbody>\n                            <tr *ngFor=\"let item of rows; let i = index;\"\n                                [class.k-alt]=\"i % 2\"\n                            >\n                                <td></td>\n                            </tr>\n                        </tbody>\n                    </table>\n\n                    <table\n                        #timelineColumns\n                        class=\"k-gantt-columns\"\n                        role=\"presentation\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <colgroup>\n                            <col *ngFor=\"let item of slots\">\n                        </colgroup>\n\n                        <tbody>\n                            <tr>\n                                <td *ngFor=\"let item of slots\"\n                                    [class.k-nonwork-hour]=\"isNonWorking(item)\"\n                                >\n                                </td>\n                            </tr>\n                        </tbody>\n                    </table>\n\n                    <table\n                        #tasksContainer\n                        class=\"k-gantt-tasks\"\n                        role=\"presentation\"\n                        style=\"border-collapse: collapse;\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <tbody\n                            kendoGanttTasksTableBody\n                            [rows]=\"rows\"\n                            [activeView]=\"activeView\"\n                            [taskContentTemplate]=\"taskContentTemplate\"\n                            [taskTemplate]=\"taskTemplate\"\n                            [summaryTaskTemplate]=\"summaryTaskTemplate\"\n                            [taskClass]=\"taskClass\"\n                            [hasChildren]=\"hasChildren\"\n                        >\n                        </tbody>\n                    </table>\n                </div>\n                <svg class=\"k-gantt-dependencies-svg\">\n                    <polyline\n                        *ngFor=\"let dependency of dependencies\"\n                        kendoGanttDependency\n                        [dependency]=\"dependency\"\n                    />\n                </svg>\n            </div>\n        </div>\n    "
+            template: "\n        <div class=\"k-timeline k-grid k-widget\">\n            <div class=\"k-grid-header\">\n                <div #timelineHeaderWrap class=\"k-grid-header-wrap\">\n                    <table\n                        role=\"presentation\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <tbody\n                            kendoGanttHeaderTableBody\n                            [groupSlots]=\"groupSlots\"\n                            [slots]=\"slots\">\n                        </tbody>\n                    </table>\n                </div>\n            </div>\n            <div #timelineContent class=\"k-grid-content\">\n                <div class=\"k-gantt-tables\">\n                    <table\n                        class=\"k-gantt-rows\"\n                        [style.width.px]=\"tableWidth\"\n                        role=\"presentation\"\n                    >\n                        <tbody>\n                            <tr *ngFor=\"let item of rows; let i = index;\"\n                                [class.k-alt]=\"i % 2\"\n                            >\n                                <td></td>\n                            </tr>\n                        </tbody>\n                    </table>\n\n                    <table\n                        #timelineColumns\n                        class=\"k-gantt-columns\"\n                        role=\"presentation\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <colgroup>\n                            <col *ngFor=\"let item of slots\">\n                        </colgroup>\n\n                        <tbody>\n                            <tr>\n                                <td *ngFor=\"let item of slots\"\n                                    [class.k-nonwork-hour]=\"isNonWorking(item)\"\n                                >\n                                </td>\n                            </tr>\n                        </tbody>\n                    </table>\n\n                    <table\n                        #tasksContainer\n                        class=\"k-gantt-tasks\"\n                        role=\"presentation\"\n                        style=\"border-collapse: collapse;\"\n                        [style.width.px]=\"tableWidth\"\n                    >\n                        <tbody\n                            kendoGanttTasksTableBody\n                            [rows]=\"rows\"\n                            [activeView]=\"activeView\"\n                            [taskContentTemplate]=\"taskContentTemplate\"\n                            [taskTemplate]=\"taskTemplate\"\n                            [summaryTaskTemplate]=\"summaryTaskTemplate\"\n                            [taskClass]=\"taskClass\"\n                            [hasChildren]=\"hasChildren\"\n                            [isTaskSelected]=\"isTaskSelected\"\n                        >\n                        </tbody>\n                    </table>\n                </div>\n                <svg class=\"k-gantt-dependencies-svg\">\n                    <polyline\n                        *ngFor=\"let dependency of dependencies\"\n                        kendoGanttDependency\n                        [dependency]=\"dependency\"\n                    />\n                </svg>\n            </div>\n        </div>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [ScrollSyncService,
             DependencyDomService,

package/dist/es/utils.js

@@ -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 { closestInScope, isDocumentAvailable, matchesClasses } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, closestInScope, matchesClasses } from '@progress/kendo-angular-common';
 import { addDays, addWeeks, cloneDate, firstDayInWeek } from '@progress/kendo-date-math';
 /**
  * @hidden
@@ -106,6 +106,10 @@ export var isColumnGroup = function (column) { return column.isColumnGroup; };
  * @hidden
  */
 export var isNumber = function (contender) { return typeof contender === 'number' && !isNaN(contender); };
+/**
+ * @hidden
+ */
+export var isString = function (contender) { return typeof contender === 'string'; };
 /**
  * @hidden
  *

package/dist/es2015/common/default-callbacks.d.ts

@@ -18,3 +18,7 @@ export declare const rowClassCallback: () => any;
  * @hidden
  */
 export declare const taskClassCallback: () => any;
+/**
+ * @hidden
+ */
+export declare const isSelected: () => boolean;

package/dist/es2015/common/default-callbacks.js

@@ -19,3 +19,7 @@ export const rowClassCallback = () => null;
  * @hidden
  */
 export const taskClassCallback = () => null;
+/**
+ * @hidden
+ */
+export const isSelected = () => false;

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

@@ -3,12 +3,13 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { EventEmitter, OnChanges, QueryList, SimpleChanges, Renderer2, AfterContentInit, OnDestroy, ElementRef, NgZone } from '@angular/core';
-import { CellClickEvent as TreeListCellClickEvent, DataBoundTreeComponent, ExpandableTreeComponent } from '@progress/kendo-angular-treelist';
-import { TreeListComponent } from '@progress/kendo-angular-treelist';
+import { FormGroup } from '@angular/forms';
+import { TreeListComponent, DataBoundTreeComponent, ExpandableTreeComponent, SelectionChangeEvent as TreeListSelectionChangeEvent, CellClickEvent as TreeListCellClickEvent } from '@progress/kendo-angular-treelist';
 import { CompositeFilterDescriptor, SortDescriptor } from '@progress/kendo-data-query';
+import { Day } from '@progress/kendo-date-math';
 import { Observable } from 'rxjs';
 import { GanttColumnBase } from './columns/columns';
-import { DataStateChangeEvent, ColumnMenuSettings, RowClassFn, TaskClassFn, ColumnVisibilityChangeEvent, ColumnResizeEvent, ColumnLockedChangeEvent, ColumnReorderEvent, ColumnReorderConfig, GanttTaskModelFields, GanttDependencyModelFields, SortSettings } from './models/models';
+import { DataStateChangeEvent, ColumnMenuSettings, RowClassFn, TaskClassFn, ColumnVisibilityChangeEvent, ColumnResizeEvent, ColumnLockedChangeEvent, ColumnReorderEvent, ColumnReorderConfig, GanttTaskModelFields, GanttDependencyModelFields, SortSettings, CellClickEvent, TaskClickEvent } from './models/models';
 import { TimelineViewService } from './timeline/timeline-view.service';
 import { TimelineViewType } from './models/timeline-view';
 import { TimelineBaseViewService } from './timeline/timeline-base-view.service';
@@ -26,11 +27,8 @@ import { ToolbarTemplateDirective } from './toolbar/toolbar-template.directive';
 import { ToolbarPosition } from './models/toolbar-position';
 import { ExpandEvent } from './expanded-state/expand-event';
 import { ViewBase } from './timeline/view-base';
-import { Day } from '@progress/kendo-date-math';
-import { FormGroup } from '@angular/forms';
-import { TaskClickEvent } from './models/events/task-click-event.interface';
+import { SelectionChangeEvent } from './selection/selection-change-event';
 import { TaskEditEvent } from './models/events/task-edit-event.interface';
-import { CellClickEvent } from './models/events/cell-click-event.interface';
 import { CellCloseEvent } from './models/events/cell-close-event.interface';
 /**
  * Represents the Kendo UI Gantt component for Angular.
@@ -163,6 +161,27 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
      * > The task data items should either conform to the [`GanttTask`]({% slug api_gantt_gantttask %}) interface, or a [`taskModelFields`]({% slug api_gantt_ganttcomponent %}#toc-taskmodelfields) object has to be provided.
      */
     data: any[];
+    /**
+     * 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.
+     */
+    isSelected: (dataItem: object) => boolean;
+    /**
+     * 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.
+     */
+    selectionChange: EventEmitter<SelectionChangeEvent>;
+    /**
+     * 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.
+     */
+    selectable: boolean;
     /**
      * The position of the toolbar.
      *
@@ -364,6 +383,14 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
      * Fires when the user changes the locked state of the columns from the column menu or by reordering the columns.
      */
     columnLockedChange: EventEmitter<ColumnLockedChangeEvent>;
+    /**
+     * Fires when a cell is clicked.
+     */
+    cellClick: EventEmitter<CellClickEvent>;
+    /**
+     * Fires when a task is clicked.
+     */
+    taskClick: EventEmitter<TaskClickEvent>;
     /**
      * @hidden
      */
@@ -388,6 +415,13 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
      * @hidden
      */
     readonly viewService: TimelineBaseViewService;
+    /**
+     * @hidden
+     *
+     * Retrieves the `isSelected` callback if `selectable` is set to `true`
+     * Otherwise returns the default callback, which always returns `false`.
+     */
+    readonly isTaskSelected: (dataItem: any) => boolean;
     /**
      * @hidden
      *
@@ -426,14 +460,14 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
     private _rowClass;
     private _taskClass;
     private _activeView;
-    private _cellClickEvent;
+    private lastTreeListCellClick;
     private direction;
     private rtl;
     private editItem;
     private optionChangesSubscriptions;
     private editServiceSubscription;
     private localizationSubscription;
-    constructor(timelineViewService: TimelineViewService, scrollSyncService: ScrollSyncService, renderer: Renderer2, mapper: MappingService, optionChangesService: OptionChangesService, dependencyDomService: DependencyDomService, editService: EditService, localizationService: LocalizationService, hostElement: ElementRef, zone: NgZone);
+    constructor(timelineViewService: TimelineViewService, scrollSyncService: ScrollSyncService, renderer: Renderer2, mapper: MappingService, optionChangesService: OptionChangesService, dependencyDomService: DependencyDomService, editService: EditService, localizationService: LocalizationService, hostElement: ElementRef<HTMLElement>, zone: NgZone);
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     ngAfterContentInit(): void;
@@ -468,6 +502,10 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
      * @param {ColumnReorderConfig} options - Additional options.
      */
     reorderColumn(source: GanttColumnBase, destIndex: number, options?: ColumnReorderConfig): void;
+    /**
+     * Updates the data of the Gantt and forces row-related callbacks to be called anew.
+     */
+    updateView(): void;
     /**
      * Opens the task editing dialog.
      */
@@ -500,12 +538,6 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
      * @hidden
      */
     onTimelineCollapsedChange(collapsed: boolean): void;
-    /**
-     * @hidden
-     *
-     * Used by the GanttExpandableDirective.
-     */
-    updateView(): void;
     /**
      * @hidden
      */
@@ -525,11 +557,23 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
     /**
      * @hidden
      */
-    handleCellClick(event: TreeListCellClickEvent): void;
+    handleTimelineRightClick(event: PointerEvent): void;
+    /**
+     * @hidden
+     */
+    handleTimelineClick(event: PointerEvent): void;
+    /**
+     * @hidden
+     */
+    handleTreeListDoubleClick(event: PointerEvent): void;
+    /**
+     * @hidden
+     */
+    handleTreeListSelectionChange(event: TreeListSelectionChangeEvent): void;
     /**
      * @hidden
      */
-    handleDoubleClick(event: MouseEvent): void;
+    handleTreeListCellClick(event: TreeListCellClickEvent): void;
     /**
      * @hidden
      */
@@ -541,15 +585,19 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
     /**
      * @hidden
      */
-    handleTimelineDblClick(event: MouseEvent): void;
+    handleTimelineDblClick(event: PointerEvent): void;
     /**
      * @hidden
      */
     getText(token: string): string;
+    private emitTaskClick;
+    private emitSelectionChange;
     private updateTreeListGroupClass;
     /**
      * Used to hide the vertical scrollbar
      */
     private updateTreeListMargin;
     private getActiveViewOptions;
+    private isSameSelection;
+    private getSelectionAction;
 }