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

package/dist/fesm2015/index.js

@@ -30,7 +30,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-gantt',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1639143747,
+    publishDate: 1639476447,
     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'
 };
@@ -1329,6 +1329,7 @@ let EditService = class EditService {
         this.showEditingDialog = new Subject();
         this.showConfirmationDialog = new Subject();
         this.editEvent = new Subject();
+        this.addEvent = new Subject();
     }
     createEditDialog(dataItem, formGroup) {
         this.dataItem = dataItem;
@@ -1759,17 +1760,6 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
          * > When applied, the [`SelectableDirective`]({% slug api_gantt_selectabledirective %}) sets `selectable` to `true` internally.
          */
         this.selectable = false;
-        /**
-         * The position of the toolbar.
-         *
-         * The possible values are:
-         * - `top`—Positions the toolbar above the Gantt panes.
-         * - `bottom`—Positions the toolbar below the Gantt panes.
-         * - `both`—Displays two toolbar instances. Positions the first one above,
-         * and the second one - below the Gantt panes.
-         * - `none`—No toolbar is rendered.
-         */
-        this.toolbarPosition = 'top';
         /**
          * Gets or sets the callback function that retrieves the child items for a particular item.
          */
@@ -1879,6 +1869,10 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
          * Fires when the user saves an edited task.
          */
         this.save = new EventEmitter();
+        /**
+         * Fires when the user adds a task.
+         */
+        this.taskAdd = new EventEmitter();
         /**
          * Fires when the sorting of the Gantt is changed.
          * You have to handle the event yourself and sort the data.
@@ -1956,6 +1950,11 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         this._rowClass = rowClassCallback;
         this._taskClass = taskClassCallback;
         this._activeView = DEFAULT_VIEW;
+        this._toolbarSettings = {
+            position: 'top',
+            addTaskTool: 'none',
+            viewSelectorTool: 'top'
+        };
         this.rtl = false;
         this.optionChangesSubscriptions = new Subscription();
         this.editServiceSubscription = new Subscription();
@@ -1966,6 +1965,7 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         this.optionChangesSubscriptions.add(this.optionChangesService.columnChanges.subscribe(() => {
             this.treeList.columns.notifyOnChanges();
         }));
+        this.editService.getSelectedItem = this.getFirstSelectedItem.bind(this);
         this.editServiceSubscription.add(this.editService.showEditingDialog.subscribe(show => this.showEditingDialog = show));
         this.editServiceSubscription.add(this.editService.showConfirmationDialog.subscribe(() => this.taskDelete.emit()));
         this.editServiceSubscription.add(this.editService.editEvent.subscribe(args => {
@@ -1978,6 +1978,14 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
             this.editService.dataItem = this.editService.formGroup = null;
             this.updateView();
         }));
+        this.editServiceSubscription.add(this.editService.addEvent.subscribe(args => {
+            const selectedItem = this.getFirstSelectedItem();
+            this.taskAdd.emit({
+                actionType: args.actionType,
+                selectedItem: selectedItem ? getEditItem(selectedItem, this.treeList.view.data, this.mapper) : null
+            });
+            this.updateView();
+        }));
         this.localizationSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
             this.rtl = rtl;
             this.direction = this.rtl ? 'rtl' : 'ltr';
@@ -2051,6 +2059,29 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
     get data() {
         return this._data;
     }
+    /**
+     * The toolbar configuration. Defines the position and content of the toolbar(s).
+     * The available properties are `position`, `addTaskTool`, and `viewSelectorTool`.
+     * All are optional and default to `top`.
+     *
+     * The possible values for each option are:
+     * - `top`—Positions the toolbar above the Gantt panes. Renders the respective tool in the top toolbar.
+     * - `bottom`—Positions the toolbar below the Gantt panes. Renders the respective tool in the bottom toolbar.
+     * - `both`—Displays two toolbar instances. Positions the first one above,
+     * and the second one - below the Gantt panes. Renders the respective tool in the both toolbars.
+     * - `none`—No toolbar is rendered when used for setting `position`.
+     * No add task or view selector tool is rendered when used for setting `addTaskTool` or `viewSelectorTool`.
+     */
+    set toolbarSettings(value) {
+        this._toolbarSettings = {
+            position: value.position || 'top',
+            addTaskTool: value.addTaskTool || 'none',
+            viewSelectorTool: value.viewSelectorTool || 'top'
+        };
+    }
+    get toolbarSettings() {
+        return this._toolbarSettings;
+    }
     /**
      * The options of the timeline splitter pane. By default the pane is `collapsible`,
      * `resizable`, not `collapsed`, and its `size` is `'50%'`.
@@ -2325,7 +2356,7 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
      * @hidden
      */
     showToolbar(position) {
-        return this.toolbarPosition !== 'none' && ([position, 'both'].indexOf(this.toolbarPosition) > -1);
+        return this.toolbarSettings.position !== 'none' && ([position, 'both'].indexOf(this.toolbarSettings.position) > -1);
     }
     /**
      * @hidden
@@ -2524,6 +2555,11 @@ let GanttComponent = GanttComponent_1 = class GanttComponent {
         const shouldToggleSelection = ctrlKey || metaKey;
         return (shouldToggleSelection && this.isSelected(dataItem)) ? 'remove' : 'select';
     }
+    getFirstSelectedItem() {
+        const isSelectedCallback = this.isSelected || isSelected;
+        const loadedItems = this.renderedTreeListItems || [];
+        return loadedItems.find(isSelectedCallback);
+    }
 };
 __decorate([
     ViewChild(TreeListComponent, { static: true }),
@@ -2597,8 +2633,9 @@ __decorate([
 ], GanttComponent.prototype, "selectable", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", String)
-], GanttComponent.prototype, "toolbarPosition", void 0);
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
+], GanttComponent.prototype, "toolbarSettings", null);
 __decorate([
     Input(),
     __metadata("design:type", Function)
@@ -2719,6 +2756,10 @@ __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
 ], GanttComponent.prototype, "save", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], GanttComponent.prototype, "taskAdd", void 0);
 __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
@@ -2797,6 +2838,27 @@ GanttComponent = GanttComponent_1 = __decorate([
         ],
         template: `
         <ng-container kendoGanttLocalizedMessages
+            i18n-taskEditingGeneralTabTitle="kendo.gantt.taskEditingGeneralTabTitle|The title of the 'General' tab of the editing dialog TabStrip"
+            taskEditingGeneralTabTitle="General"
+
+            i18n-taskEditingPredecessorsTabTitle="kendo.gantt.taskEditingPredecessorsTabTitle|The title of the 'Predecessors' dependencies tab of the editing dialog TabStrip"
+            taskEditingPredecessorsTabTitle="Predecessors"
+
+            i18n-taskEditingSuccessorsTabTitle="kendo.gantt.taskEditingSuccessorsTabTitle|The title of the 'Successors' dependencies tab of the editing dialog TabStrip"
+            taskEditingSuccessorsTabTitle="Successors"
+
+            i18n-taskEditingDependenciesAddButtonText="kendo.gantt.taskEditingDependenciesAddButtonText|The text of the 'Add' button in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesAddButtonText="Add"
+
+            i18n-taskEditingDependenciesRemoveButtonText="kendo.gantt.taskEditingDependenciesRemoveButtonText|The text of the 'Remove' button in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesRemoveButtonText="Remove"
+
+            i18n-taskEditingDependenciesGridNameColumnTitle="kendo.gantt.taskEditingDependenciesGridNameColumnTitle|The title of the 'Task Title' Grid column in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesGridNameColumnTitle="Task Title"
+
+            i18n-taskEditingDependenciesGridTypeColumnTitle="kendo.gantt.taskEditingDependenciesGridTypeColumnTitle|The title of the 'Type' Grid column in the dependencies tabs of the editing dialog TabStrip"
+            taskEditingDependenciesGridTypeColumnTitle="Type"
+
             i18n-taskDeleteLabel="kendo.gantt.taskDeleteLabel|The label of the task delete icon"
             taskDeleteLabel="Delete"
 
@@ -2848,6 +2910,18 @@ GanttComponent = GanttComponent_1 = __decorate([
             i18n-yearViewText-disabled="kendo.gantt.yearViewText|The text of the year view in the ViewSelector component"
             yearViewText="Year"
 
+            i18n-addTaskText="kendo.gantt.addTaskText|The text of the DropDownButton in the AddTask component"
+            addTaskText="Add Task"
+
+            i18n-addChildText="kendo.gantt.addChildText|The text of the 'Add Child' option in the AddTask component"
+            addChildText="Add Child"
+
+            i18n-addAboveText="kendo.gantt.addAboveText|The text of the 'Add Above' option in the AddTask component"
+            addAboveText="Add Above"
+
+            i18n-addBelowText="kendo.gantt.addBelowText|The text of the 'Add Below' option in the AddTask component"
+            addBelowText="Add Below"
+
             i18n-noRecords="kendo.gantt.noRecords|The label visible in the TreeList when there are no records"
             noRecords="No records available."
 
@@ -2969,6 +3043,8 @@ GanttComponent = GanttComponent_1 = __decorate([
             columnsReset="Reset"></ng-container>
         <kendo-gantt-toolbar
             *ngIf="showToolbar('top')"
+            [showAddTask]="toolbarSettings.addTaskTool === 'top' || toolbarSettings.addTaskTool === 'both'"
+            [showViewSelector]="toolbarSettings.viewSelectorTool === 'top' || toolbarSettings.viewSelectorTool === 'both'"
             class="k-gantt-header k-toolbar k-gantt-toolbar"
             position="top"></kendo-gantt-toolbar>
         <div class="k-gantt-content">
@@ -3098,6 +3174,8 @@ GanttComponent = GanttComponent_1 = __decorate([
         </div>
         <kendo-gantt-toolbar
             *ngIf="showToolbar('bottom')"
+            [showAddTask]="toolbarSettings.addTaskTool === 'bottom' || toolbarSettings.addTaskTool === 'both'"
+            [showViewSelector]="toolbarSettings.viewSelectorTool === 'bottom' || toolbarSettings.viewSelectorTool === 'both'"
             class="k-gantt-footer k-toolbar k-gantt-toolbar"
             position="bottom"></kendo-gantt-toolbar>
         <kendo-gantt-edit-dialog *ngIf="showEditingDialog" [formGroup]="editDialogFormGroup"></kendo-gantt-edit-dialog>
@@ -3967,6 +4045,14 @@ let ToolbarComponent = class ToolbarComponent {
         this.scrollSyncService.resetTimelineScrollLeft();
     }
 };
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], ToolbarComponent.prototype, "showAddTask", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], ToolbarComponent.prototype, "showViewSelector", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String),
@@ -3977,8 +4063,10 @@ ToolbarComponent = __decorate([
         selector: 'kendo-gantt-toolbar',
         template: `
         <ng-container *ngIf="!renderTemplate">
+            <kendo-gantt-add-task *ngIf="showAddTask"></kendo-gantt-add-task>
             <span class="k-spacer k-toolbar-spacer"></span>
             <kendo-gantt-view-selector
+                *ngIf="showViewSelector"
                 [views]="gantt.viewTypes"
                 [activeView]="gantt.activeView"
                 (activeViewChange)="onViewChange($event)"></kendo-gantt-view-selector>
@@ -4448,6 +4536,38 @@ EditDialogComponent = __decorate([
  */
 class Messages extends ComponentMessages {
 }
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], Messages.prototype, "taskEditingGeneralTabTitle", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], Messages.prototype, "taskEditingPredecessorsTabTitle", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], Messages.prototype, "taskEditingSuccessorsTabTitle", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], Messages.prototype, "taskEditingDependenciesAddButtonText", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], Messages.prototype, "taskEditingDependenciesRemoveButtonText", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], Messages.prototype, "taskEditingDependenciesGridNameColumnTitle", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], Messages.prototype, "taskEditingDependenciesGridTypeColumnTitle", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], Messages.prototype, "deleteButtonText", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String)
@@ -4471,7 +4591,19 @@ __decorate([
 __decorate([
     Input(),
     __metadata("design:type", String)
-], Messages.prototype, "deleteButtonText", void 0);
+], Messages.prototype, "addTaskText", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], Messages.prototype, "addChildText", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], Messages.prototype, "addAboveText", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], Messages.prototype, "addBelowText", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String)
@@ -4728,6 +4860,100 @@ LocalizedMessagesDirective = LocalizedMessagesDirective_1 = __decorate([
     __metadata("design:paramtypes", [LocalizationService])
 ], LocalizedMessagesDirective);
 
+/**
+ * The UI for adding new items to the Gantt.
+ * Use it within a toolbar template to provide a custom icon or list of options.
+ */
+let GanttAddTaskComponent = class GanttAddTaskComponent {
+    constructor(localizationService, editService, ngZone) {
+        this.localizationService = localizationService;
+        this.editService = editService;
+        this.ngZone = ngZone;
+        /**
+         * Sets the data of the DropDownButton.
+         * > The data has to be provided in an array-like list.
+         */
+        this.data = [{
+                text: this.getText('addChildText'),
+                type: 'addChild'
+            }, {
+                text: this.getText('addAboveText'),
+                type: 'addAbove'
+            }, {
+                text: this.getText('addBelowText'),
+                type: 'addBelow'
+            }];
+        /**
+         * Defines the name of an existing icon in a Kendo UI theme.
+         * @default 'plus'
+         */
+        this.icon = 'plus';
+    }
+    /**
+     * @hidden
+     */
+    getText(message) {
+        return this.localizationService.get(message);
+    }
+    /**
+     * @hidden
+     */
+    handleOpen(e) {
+        if (!this.editService.getSelectedItem()) {
+            e.preventDefault();
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleMouseClick() {
+        if (!this.editService.getSelectedItem()) {
+            this.ngZone.run(() => {
+                this.editService.addEvent.next({
+                    selectedItem: null,
+                    actionType: 'addTask'
+                });
+            });
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleItemClick(e) {
+        this.editService.addEvent.next({
+            actionType: e.type,
+            selectedItem: null
+        });
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", Array)
+], GanttAddTaskComponent.prototype, "data", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], GanttAddTaskComponent.prototype, "icon", void 0);
+GanttAddTaskComponent = __decorate([
+    Component({
+        selector: 'kendo-gantt-add-task',
+        template: `
+        <kendo-dropdownbutton
+            [data]="data"
+            [icon]="icon"
+            [kendoEventsOutsideAngular]="{ click: handleMouseClick }"
+            [scope]="this"
+            (itemClick)="handleItemClick($event)"
+            (open)="handleOpen($event)">
+            {{ getText('addTaskText') }}
+        </kendo-dropdownbutton>
+    `
+    }),
+    __metadata("design:paramtypes", [LocalizationService,
+        EditService,
+        NgZone])
+], GanttAddTaskComponent);
+
 const IMPORTED_MODULES = [
     CommonModule,
     ReactiveFormsModule,
@@ -4775,7 +5001,8 @@ const DECLARATIONS = [
     SelectableDirective,
     EditDialogComponent,
     CustomMessagesComponent,
-    LocalizedMessagesDirective
+    LocalizedMessagesDirective,
+    GanttAddTaskComponent
 ];
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
@@ -4863,4 +5090,4 @@ class CellCloseEvent extends PreventableEvent {
  * Generated bundle index. Do not edit.
  */
 
-export { MappingService, OptionChangesService, DependencyDomService, GanttDependencyDirective, EditDialogComponent, EditService, CustomMessagesComponent, LocalizedMessagesDirective, Messages, PreventableEvent, 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, CellCloseEvent, GanttColumnBase, GanttColumnComponent, GanttColumnGroupComponent, GanttSpanColumnComponent, CellTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ColumnMenuTemplateDirective, FilterCellTemplateDirective, FilterMenuTemplateDirective, EditTemplateDirective };
+export { MappingService, OptionChangesService, DependencyDomService, GanttDependencyDirective, GanttAddTaskComponent, EditDialogComponent, EditService, CustomMessagesComponent, LocalizedMessagesDirective, Messages, PreventableEvent, 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, CellCloseEvent, GanttColumnBase, GanttColumnComponent, GanttColumnGroupComponent, GanttSpanColumnComponent, CellTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ColumnMenuTemplateDirective, FilterCellTemplateDirective, FilterMenuTemplateDirective, EditTemplateDirective };