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

package/dist/npm/gantt.component.js

@@ -22,6 +22,8 @@ var scroll_sync_service_1 = require("./scrolling/scroll-sync.service");
 var dependency_dom_service_1 = require("./dependencies/dependency-dom.service");
 var mapping_service_1 = require("./common/mapping.service");
 var option_changes_service_1 = require("./common/option-changes.service");
+var edit_service_1 = require("./editing/edit.service");
+var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
 var utils_1 = require("./utils");
 var splitter_pane_options_interface_1 = require("./models/splitter-pane-options.interface");
 var task_template_directive_1 = require("./template-directives/task-template.directive");
@@ -30,13 +32,82 @@ var task_content_template_directive_1 = require("./template-directives/task-cont
 var toolbar_template_directive_1 = require("./toolbar/toolbar-template.directive");
 var view_base_1 = require("./timeline/view-base");
 var kendo_date_math_1 = require("@progress/kendo-date-math");
+var util_1 = require("./editing/util");
 var TREELIST_GROUP_COLUMNS_CLASS = 'k-gantt-treelist-nested-columns';
 var DEFAULT_VIEW = 'week';
 /**
- * The GiGantt
+ * Represents the Kendo UI Gantt component for Angular.
+ *
+ * @example
+ * ```ts-preview
+ * _@Component({
+ *    selector: 'my-app',
+ *    template: `
+ *        <kendo-gantt
+ *            [style.height.px]="500"
+ *            [kendoGanttHierarchyBinding]="data"
+ *            childrenField="subtasks"
+ *            [dependencies]="dependencies">
+ *            <kendo-gantt-column
+ *                field="title"
+ *                title="Task"
+ *                [width]="200"
+ *                [expandable]="true"></kendo-gantt-column>
+ *            <kendo-gantt-column
+ *                field="start"
+ *                title="Start"
+ *                format="dd-MMM-yyyy"
+ *                [width]="120"></kendo-gantt-column>
+ *            <kendo-gantt-column
+ *                field="end"
+ *                title="End"
+ *                format="dd-MMM-yyyy"
+ *                [width]="120"></kendo-gantt-column>
+ *            <kendo-gantt-timeline-day-view></kendo-gantt-timeline-day-view>
+ *            <kendo-gantt-timeline-week-view></kendo-gantt-timeline-week-view>
+ *            <kendo-gantt-timeline-month-view></kendo-gantt-timeline-month-view>
+ *        </kendo-gantt>
+ *    `
+ * })
+ * class AppComponent {
+ *     public data: Task[] = [{
+ *         id: 7, title: 'Validation and R&D', start: new Date('2014-06-02T00:00:00.000Z'),
+ *         end: new Date('2014-06-19T00:00:00.000Z'), completionRatio: 0.45708333333333334,
+ *         subtasks: [
+ *             { id: 18, title: 'Project Kickoff', start: new Date('2014-06-02T00:00:00.000Z'),
+ *                 end: new Date('2014-06-02T00:00:00.000Z'), completionRatio: 0.23 },
+ *             { id: 11, title: 'Research', start: new Date('2014-06-02T00:00:00.000Z'),
+ *                 end: new Date('2014-06-07T00:00:00.000Z'), completionRatio: 0.5766666666666667,
+ *                 subtasks: [
+ *                     { id: 19, title: 'Validation', start: new Date('2014-06-02T00:00:00.000Z'),
+ *                         end: new Date('2014-06-04T00:00:00.000Z'), completionRatio: 0.25 },
+ *                     { id: 39, title: 'Specification', start: new Date('2014-06-04T00:00:00.000Z'),
+ *                         end: new Date('2014-06-07T00:00:00.000Z'), completionRatio: 0.66 }]
+ *             }, { id: 13, title: 'Implementation', start: new Date('2014-06-08T00:00:00.000Z'),
+ *                 end: new Date('2014-06-19T00:00:00.000Z'), completionRatio: 0.77,
+ *                 subtasks: [
+ *                     { id: 24, title: 'Prototype', start: new Date('2014-06-08T00:00:00.000Z'),
+ *                         end: new Date('2014-06-14T00:00:00.000Z'), completionRatio: 0.77 },
+ *                     { id: 29, title: 'UI and Interaction', start: new Date('2014-06-14T00:00:00.000Z'),
+ *                         end: new Date('2014-06-19T00:00:00.000Z'), completionRatio: 0.6 }]
+ *             }, { id: 17, title: 'Release', start: new Date('2014-06-19T00:00:00.000Z'),
+ *                 end: new Date('2014-06-19T00:00:00.000Z'), completionRatio: 0 }]
+ *     }];
+ *
+ *     public dependencies: GanttDependency[] = [
+ *         { id: 528, fromId: 18, toId: 19, type: DependencyType.FS },
+ *         { id: 529, fromId: 19, toId: 39, type: DependencyType.FS },
+ *         { id: 535, fromId: 24, toId: 29, type: DependencyType.FS },
+ *         { id: 551, fromId: 13, toId: 29, type: DependencyType.FF },
+ *         { id: 777, fromId: 7, toId: 11, type: DependencyType.SF },
+ *         { id: 556, fromId: 39, toId: 24, type: DependencyType.FS },
+ *         { id: 546, fromId: 29, toId: 17, type: DependencyType.FS },
+ *     ];
+ * }
+ * ```
  */
 var GanttComponent = /** @class */ (function () {
-    function GanttComponent(timelineViewService, scrollSyncService, renderer, mapper, optionChangesService, dependencyDomService) {
+    function GanttComponent(timelineViewService, scrollSyncService, renderer, mapper, optionChangesService, dependencyDomService, editService, localizationService, hostElement, zone) {
         var _this = this;
         this.timelineViewService = timelineViewService;
         this.scrollSyncService = scrollSyncService;
@@ -44,6 +115,10 @@ var GanttComponent = /** @class */ (function () {
         this.mapper = mapper;
         this.optionChangesService = optionChangesService;
         this.dependencyDomService = dependencyDomService;
+        this.editService = editService;
+        this.localizationService = localizationService;
+        this.hostElement = hostElement;
+        this.zone = zone;
         this.hostClasses = true;
         /**
          * The position of the toolbar.
@@ -131,10 +206,40 @@ var GanttComponent = /** @class */ (function () {
          * Fires when an item is expanded.
          */
         this.rowExpand = new core_1.EventEmitter();
+        /**
+         * Fires when a Gantt task in the timeline pane is double-clicked. The data item, associated with the clicked task,
+         * is available in the event data. Use the event handler to open a task editing dialog as necessary.
+         */
+        this.taskDblClick = new core_1.EventEmitter();
+        /**
+         * Fires when the user double clicks a cell.
+         */
+        this.cellDblClick = new core_1.EventEmitter();
+        /**
+         * Fires when the user leaves an edited cell.
+         */
+        this.cellClose = new core_1.EventEmitter();
+        /**
+         * Fires when the end user clicks the `Delete` button in the task editing dialog or the task delete icon.
+         * Use the event handler to open a confirmation dialog when necessary.
+         */
+        this.taskDelete = new core_1.EventEmitter();
         /**
          * Fires when an item is collapsed.
          */
         this.rowCollapse = new core_1.EventEmitter();
+        /**
+         * Fires when the user confirms deleting a task.
+         */
+        this.remove = new core_1.EventEmitter();
+        /**
+         * Fires when the user cancels editing a task.
+         */
+        this.cancel = new core_1.EventEmitter();
+        /**
+         * Fires when the user saves an edited task.
+         */
+        this.save = new core_1.EventEmitter();
         /**
          * Fires when the sorting of the Gantt is changed.
          * You have to handle the event yourself and sort the data.
@@ -189,6 +294,14 @@ var GanttComponent = /** @class */ (function () {
          * Used by the GanttExpandableDirective.
          */
         this.expandStateChange = new core_1.EventEmitter();
+        /**
+         * @hidden
+         */
+        this.showEditingDialog = false;
+        /**
+         * @hidden
+         */
+        this.showConfirmationDialog = false;
         this._columns = new core_1.QueryList();
         this._data = [];
         this._timelinePaneOptions = tslib_1.__assign({}, splitter_pane_options_interface_1.DEFAULT_TIMELINE_PANE_SETTINGS);
@@ -196,14 +309,37 @@ var GanttComponent = /** @class */ (function () {
         this._rowClass = default_callbacks_1.rowClassCallback;
         this._taskClass = default_callbacks_1.taskClassCallback;
         this._activeView = DEFAULT_VIEW;
+        this.rtl = false;
         this.optionChangesSubscriptions = new rxjs_1.Subscription();
+        this.editServiceSubscription = new rxjs_1.Subscription();
         kendo_licensing_1.validatePackage(package_metadata_1.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(function () {
             _this.loadTimelineData();
         }));
         this.optionChangesSubscriptions.add(this.optionChangesService.columnChanges.subscribe(function () {
             _this.treeList.columns.notifyOnChanges();
         }));
+        this.editServiceSubscription.add(this.editService.showEditingDialog.subscribe(function (show) { return _this.showEditingDialog = show; }));
+        this.editServiceSubscription.add(this.editService.showConfirmationDialog.subscribe(function () { return _this.taskDelete.emit(); }));
+        this.editServiceSubscription.add(this.editService.editEvent.subscribe(function (args) {
+            _this[args.editResultType].emit({
+                formGroup: args.formGroup,
+                item: util_1.getEditItem(args.dataItem, _this.treeList.view.data, _this.mapper),
+                sender: _this
+            });
+            _this.showConfirmationDialog = _this.showEditingDialog = false;
+            _this.editService.dataItem = _this.editService.formGroup = null;
+            _this.updateView();
+            _this.dependencyDomService.notifyChanges();
+        }));
+        this.localizationSubscription = this.localizationService.changes.subscribe(function (_a) {
+            var rtl = _a.rtl;
+            _this.rtl = rtl;
+            _this.direction = _this.rtl ? 'rtl' : 'ltr';
+        });
     }
     GanttComponent_1 = GanttComponent;
     Object.defineProperty(GanttComponent.prototype, "toolbarTemplate", {
@@ -219,6 +355,13 @@ var GanttComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(GanttComponent.prototype, "dir", {
+        get: function () {
+            return this.direction;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(GanttComponent.prototype, "columns", {
         get: function () {
             return this._columns;
@@ -434,6 +577,16 @@ var GanttComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(GanttComponent.prototype, "editDialogFormGroup", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this.editService.formGroup;
+        },
+        enumerable: true,
+        configurable: true
+    });
     GanttComponent.prototype.ngOnChanges = function (changes) {
         if (kendo_angular_common_1.anyChanged(['data', 'activeView', 'workWeekStart', 'workWeekEnd', 'workDayStart', 'workDayEnd'], changes)) {
             this.loadTimelineData();
@@ -453,6 +606,10 @@ var GanttComponent = /** @class */ (function () {
     };
     GanttComponent.prototype.ngOnDestroy = function () {
         this.optionChangesSubscriptions.unsubscribe();
+        this.editServiceSubscription.unsubscribe();
+        if (this.localizationSubscription) {
+            this.localizationSubscription.unsubscribe();
+        }
     };
     /**
      * Applies the minimum possible width for the specified column,
@@ -502,6 +659,47 @@ var GanttComponent = /** @class */ (function () {
             this.treeList.reorderColumn(source, destIndex, options);
         }
     };
+    /**
+     * Opens the task editing dialog.
+     */
+    GanttComponent.prototype.editTask = function (dataItem, formGroup) {
+        if (!this.showEditingDialog) {
+            this.editService.createEditDialog(dataItem, formGroup);
+        }
+    };
+    /**
+     * Closes the task editing dialog.
+     */
+    GanttComponent.prototype.closeTaskDialog = function () {
+        if (this.showEditingDialog) {
+            this.editService.closeEditDialog();
+        }
+    };
+    /**
+     * Opens the delete task confirmation dialog.
+     */
+    GanttComponent.prototype.openConfirmationDialog = function () {
+        this.showConfirmationDialog = true;
+    };
+    /**
+     * Opens a cell for editing.
+     */
+    GanttComponent.prototype.editCell = function (dataItem, column, formGroup) {
+        this.treeList.editCell(dataItem, column, formGroup);
+    };
+    /**
+     * Closes an edited cell.
+     */
+    GanttComponent.prototype.closeCell = function () {
+        this.treeList.closeCell();
+    };
+    /**
+     * @hidden
+     */
+    GanttComponent.prototype.handleCellClose = function (e) {
+        this.cellClose.emit(Object.assign(e, { item: this.editItem, sender: this }));
+        this.dependencyDomService.notifyChanges();
+    };
     /**
      * @hidden
      */
@@ -565,6 +763,69 @@ var GanttComponent = /** @class */ (function () {
         this._timelinePaneOptions.size = e;
         this.timelinePaneSizeChange.emit(e);
     };
+    /**
+     * @hidden
+     */
+    GanttComponent.prototype.handleCellClick = function (event) {
+        this._cellClickEvent = event;
+    };
+    /**
+     * @hidden
+     */
+    GanttComponent.prototype.handleDoubleClick = function (event) {
+        var _this = this;
+        var cell = this._cellClickEvent.originalEvent.target;
+        if (event.target !== cell) {
+            return;
+        }
+        this.editItem = util_1.getEditItem(this._cellClickEvent.dataItem, this.treeList.view.data, this.mapper);
+        if (kendo_angular_common_1.hasObservers(this.cellDblClick)) {
+            this.zone.run(function () {
+                _this.cellDblClick.emit(tslib_1.__assign({}, _this._cellClickEvent, { sender: _this }));
+            });
+        }
+    };
+    /**
+     * @hidden
+     */
+    GanttComponent.prototype.handleDeleteConfirmation = function () {
+        this.editService.triggerEditEvent('remove');
+    };
+    /**
+     * @hidden
+     */
+    GanttComponent.prototype.handleTimelineMouseDown = function (event) {
+        var target = event.target;
+        var gantt = this.hostElement.nativeElement;
+        if (!utils_1.isTask(target, gantt) || utils_1.isClearButton(target, gantt)) {
+            return;
+        }
+        event.preventDefault();
+    };
+    /**
+     * @hidden
+     */
+    GanttComponent.prototype.handleTimelineDblClick = function (event) {
+        var _this = this;
+        var target = event.target;
+        var gantt = this.hostElement.nativeElement;
+        if (!utils_1.isTask(target, gantt) || utils_1.isClearButton(target, gantt)) {
+            return;
+        }
+        var taskIndex = utils_1.getClosestTaskIndex(target, gantt);
+        var task = this.renderedTreeListItems[taskIndex];
+        this.zone.run(function () { return _this.taskDblClick.emit({
+            dataItem: task,
+            originalEvent: event,
+            sender: _this
+        }); });
+    };
+    /**
+     * @hidden
+     */
+    GanttComponent.prototype.getText = function (token) {
+        return this.localizationService.get(token);
+    };
     GanttComponent.prototype.updateTreeListGroupClass = function (columns) {
         if (columns === void 0) { columns = this.columns; }
         if (!utils_1.isPresent(this.treeList)) {
@@ -620,6 +881,11 @@ var GanttComponent = /** @class */ (function () {
         core_1.HostBinding('class.k-gantt'),
         tslib_1.__metadata("design:type", Boolean)
     ], GanttComponent.prototype, "hostClasses", void 0);
+    tslib_1.__decorate([
+        core_1.HostBinding('attr.dir'),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], GanttComponent.prototype, "dir", null);
     tslib_1.__decorate([
         core_1.ContentChildren(columns_1.GanttColumnBase),
         tslib_1.__metadata("design:type", core_1.QueryList),
@@ -741,10 +1007,38 @@ var GanttComponent = /** @class */ (function () {
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
     ], GanttComponent.prototype, "rowExpand", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], GanttComponent.prototype, "taskDblClick", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], GanttComponent.prototype, "cellDblClick", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], GanttComponent.prototype, "cellClose", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], GanttComponent.prototype, "taskDelete", void 0);
     tslib_1.__decorate([
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
     ], GanttComponent.prototype, "rowCollapse", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], GanttComponent.prototype, "remove", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], GanttComponent.prototype, "cancel", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], GanttComponent.prototype, "save", void 0);
     tslib_1.__decorate([
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
@@ -792,7 +1086,9 @@ var GanttComponent = /** @class */ (function () {
     GanttComponent = GanttComponent_1 = tslib_1.__decorate([
         core_1.Component({
             selector: 'kendo-gantt',
+            exportAs: 'kendoGantt',
             providers: [
+                kendo_angular_l10n_1.LocalizationService,
                 {
                     provide: kendo_angular_treelist_1.DataBoundTreeComponent,
                     useExisting: core_1.forwardRef(function () { return GanttComponent_1; })
@@ -808,16 +1104,21 @@ var GanttComponent = /** @class */ (function () {
                 scroll_sync_service_1.ScrollSyncService,
                 dependency_dom_service_1.DependencyDomService,
                 mapping_service_1.MappingService,
-                option_changes_service_1.OptionChangesService
+                option_changes_service_1.OptionChangesService,
+                edit_service_1.EditService
             ],
-            template: "\n        <kendo-gantt-toolbar\n            *ngIf=\"showToolbar('top')\"\n            class=\"k-gantt-header k-toolbar k-gantt-toolbar\"\n            position=\"top\"></kendo-gantt-toolbar>\n        <div class=\"k-gantt-content\">\n            <kendo-splitter [style.border]=\"0\">\n                <kendo-splitter-pane\n                    class=\"k-gantt-treelist k-gantt-treelist-scrollable\"\n                    [collapsible]=\"treeListPaneOptions?.collapsible\"\n                    [collapsed]=\"treeListPaneOptions?.collapsed\"\n                    (collapsedChange)=\"onTreeListCollapsedChange($event)\"\n                    [scrollable]=\"false\">\n                    <kendo-treelist\n                        [idField]=\"taskIdField\"\n                        [columns]=\"columns\"\n                        [data]=\"data\"\n                        [hasChildren]=\"hasChildren\"\n                        [fetchChildren]=\"fetchChildren\"\n                        [isExpanded]=\"isExpanded\"\n                        [autoSize]=\"columnsAutoSize\"\n                        [columnMenu]=\"columnMenu\"\n                        [reorderable]=\"columnsReorderable\"\n                        [resizable]=\"columnsResizable\"\n                        [rowClass]=\"rowClass\"\n                        [sortable]=\"sortable\"\n                        [sort]=\"sort\"\n                        [filterable]=\"filterMenu\"\n                        [filter]=\"filter\"\n                        (filterChange)=\"filterChange.emit($event)\"\n                        (sortChange)=\"sortChange.emit($event)\"\n                        (dataStateChange)=\"dataStateChange.emit({\n                            filter: $event.filter,\n                            sort: $event.sort\n                        })\"\n                        (expandStateChange)=\"expandStateChange.emit($event)\"\n                        (expand)=\"rowExpand.emit({ dataItem: $event.dataItem })\"\n                        (collapse)=\"rowCollapse.emit({ dataItem: $event.dataItem })\"\n                        (columnReorder)=\"columnReorder.emit($event)\"\n                        (columnResize)=\"columnResize.emit($event)\"\n                        (columnVisibilityChange)=\"handleColumnVisibilityChange($event)\"\n                        (columnLockedChange)=\"columnLockedChange.emit($event)\"\n                    >\n                    </kendo-treelist>\n                </kendo-splitter-pane>\n                <kendo-splitter-pane\n                    [collapsible]=\"timelinePaneOptions?.collapsible\"\n                    [resizable]=\"timelinePaneOptions?.resizable\"\n                    [collapsed]=\"timelinePaneOptions?.collapsed\"\n                    [min]=\"timelinePaneOptions?.min\"\n                    [max]=\"timelinePaneOptions?.max\"\n                    [size]=\"timelinePaneOptions?.size\"\n                    (collapsedChange)=\"onTimelineCollapsedChange($event)\"\n                    (sizeChange)=\"onTimelinePaneSizeChange($event)\"\n                    [scrollable]=\"false\">\n                    <kendo-gantt-timeline\n                        *ngIf=\"views && views.length\"\n                        [rows]=\"renderedTreeListItems\"\n                        [slots]=\"timelineSlots\"\n                        [groupSlots]=\"timelineGroupSlots\"\n                        [tableWidth]=\"tableWidth\"\n                        [activeView]=\"activeView\"\n                        [taskContentTemplate]=\"taskContentTemplate?.templateRef\"\n                        [taskTemplate]=\"taskTemplate?.templateRef\"\n                        [summaryTaskTemplate]=\"summaryTaskTemplate?.templateRef\"\n                        [taskClass]=\"taskClass\"\n                        [dependencies]=\"dependencies\"\n                        [hasChildren]=\"hasChildren\"\n                    ></kendo-gantt-timeline>\n                </kendo-splitter-pane>\n            </kendo-splitter>\n        </div>\n        <kendo-gantt-toolbar\n            *ngIf=\"showToolbar('bottom')\"\n            class=\"k-gantt-footer k-toolbar k-gantt-toolbar\"\n            position=\"bottom\"></kendo-gantt-toolbar>\n   "
+            template: "\n        <ng-container kendoGanttLocalizedMessages\n            i18n-taskDeleteLabel=\"kendo.gantt.taskDeleteLabel|The label of the task delete icon\"\n            taskDeleteLabel=\"Delete\"\n\n            i18n-taskEditingDialogTitle=\"kendo.gantt.taskEditingDialogTitle|The title of the task editing dialog\"\n            taskEditingDialogTitle=\"Editing Task\"\n\n            i18n-taskEditingDialogCloseTitle=\"kendo.gantt.taskEditingDialogCloseTitle|The title of the task editing dialog close button\"\n            taskEditingDialogCloseTitle=\"Close\"\n\n            i18n-confirmationDialogCloseTitle=\"kendo.gantt.confirmationDialogCloseTitle|The title of the confirmation dialog close button\"\n            confirmationDialogCloseTitle=\"Close\"\n\n            i18n-confirmationDialogTitle=\"kendo.gantt.confirmationDialogTitle|The title of the delete task confirmation dialog\"\n            confirmationDialogTitle=\"Delete Task\"\n\n            i18n-confirmationDialogContent=\"kendo.gantt.confirmationDialogContent|The content of the delete task confirmation dialog\"\n            confirmationDialogContent=\"Are you sure you want to delete this task?\"\n\n            i18n-deleteButtonText=\"kendo.gantt.deleteButtonText|The text of the task editing dialog 'Delete' button\"\n            deleteButtonText=\"Delete\"\n\n            i18n-cancelButtonText=\"kendo.gantt.cancelButtonText|The text of the task editing dialog 'Cancel' button\"\n            cancelButtonText=\"Cancel\"\n\n            i18n-saveButtonText=\"kendo.gantt.saveButtonText|The text of the task editing dialog 'Save' button\"\n            saveButtonText=\"Save\"\n\n            i18n-titleFieldInputLabel=\"kendo.gantt.titleFieldInputLabel|The label of the 'title' field input in editing mode\"\n            titleFieldInputLabel=\"Title\"\n\n            i18n-startFieldInputLabel=\"kendo.gantt.startFieldInputLabel|The label of the 'start' field input in editing mode\"\n            startFieldInputLabel=\"Start\"\n\n            i18n-endFieldInputLabel=\"kendo.gantt.endFieldInputLabel|The label of the 'end' field input in editing mode\"\n            endFieldInputLabel=\"End\"\n\n            i18n-completionRatioFieldInputLabel=\"kendo.gantt.completionRatioFieldInputLabel|The label of the 'completionRatio' field input in editing mode\"\n            completionRatioFieldInputLabel=\"Progress\"\n\n            i18n-dayViewText=\"kendo.gantt.dayViewText|The text of the day view in the ViewSelector component\"\n            dayViewText=\"Day\"\n\n            i18n-weekViewText=\"kendo.gantt.weekViewText|The text of the week view in the ViewSelector component\"\n            weekViewText=\"Week\"\n\n            i18n-monthViewText=\"kendo.gantt.monthViewText|The text of the month view in the ViewSelector component\"\n            monthViewText=\"Month\"\n\n            i18n-yearViewText-disabled=\"kendo.gantt.yearViewText|The text of the year view in the ViewSelector component\"\n            yearViewText=\"Year\"\n\n            i18n-noRecords=\"kendo.gantt.noRecords|The label visible in the TreeList when there are no records\"\n            noRecords=\"No records available.\"\n\n            i18n-filter=\"kendo.gantt.filter|The label of the filter cell or icon\"\n            filter=\"Filter\"\n\n            i18n-filterEqOperator=\"kendo.gantt.filterEqOperator|The text of the equal filter operator\"\n            filterEqOperator=\"Is equal to\"\n\n            i18n-filterNotEqOperator=\"kendo.gantt.filterNotEqOperator|The text of the not equal filter operator\"\n            filterNotEqOperator=\"Is not equal to\"\n\n            i18n-filterIsNullOperator=\"kendo.gantt.filterIsNullOperator|The text of the is null filter operator\"\n            filterIsNullOperator=\"Is null\"\n\n            i18n-filterIsNotNullOperator=\"kendo.gantt.filterIsNotNullOperator|The text of the is not null filter operator\"\n            filterIsNotNullOperator=\"Is not null\"\n\n            i18n-filterIsEmptyOperator=\"kendo.gantt.filterIsEmptyOperator|The text of the is empty filter operator\"\n            filterIsEmptyOperator=\"Is empty\"\n\n            i18n-filterIsNotEmptyOperator=\"kendo.gantt.filterIsNotEmptyOperator|The text of the is not empty filter operator\"\n            filterIsNotEmptyOperator=\"Is not empty\"\n\n            i18n-filterStartsWithOperator=\"kendo.gantt.filterStartsWithOperator|The text of the starts with filter operator\"\n            filterStartsWithOperator=\"Starts with\"\n\n            i18n-filterContainsOperator=\"kendo.gantt.filterContainsOperator|The text of the contains filter operator\"\n            filterContainsOperator=\"Contains\"\n\n            i18n-filterNotContainsOperator=\"kendo.gantt.filterNotContainsOperator|The text of the does not contain filter operator\"\n            filterNotContainsOperator=\"Does not contain\"\n\n            i18n-filterEndsWithOperator=\"kendo.gantt.filterEndsWithOperator|The text of the ends with filter operator\"\n            filterEndsWithOperator=\"Ends with\"\n\n            i18n-filterGteOperator=\"kendo.gantt.filterGteOperator|The text of the greater than or equal filter operator\"\n            filterGteOperator=\"Is greater than or equal to\"\n\n            i18n-filterGtOperator=\"kendo.gantt.filterGtOperator|The text of the greater than filter operator\"\n            filterGtOperator=\"Is greater than\"\n\n            i18n-filterLteOperator=\"kendo.gantt.filterLteOperator|The text of the less than or equal filter operator\"\n            filterLteOperator=\"Is less than or equal to\"\n\n            i18n-filterLtOperator=\"kendo.gantt.filterLtOperator|The text of the less than filter operator\"\n            filterLtOperator=\"Is less than\"\n\n            i18n-filterIsTrue=\"kendo.gantt.filterIsTrue|The text of the IsTrue boolean filter option\"\n            filterIsTrue=\"Is True\"\n\n            i18n-filterIsFalse=\"kendo.gantt.filterIsFalse|The text of the IsFalse boolean filter option\"\n            filterIsFalse=\"Is False\"\n\n            i18n-filterBooleanAll=\"kendo.gantt.filterBooleanAll|The text of the (All) boolean filter option\"\n            filterBooleanAll=\"(All)\"\n\n            i18n-filterAfterOrEqualOperator=\"kendo.gantt.filterAfterOrEqualOperator|The text of the after or equal date filter operator\"\n            filterAfterOrEqualOperator=\"Is after or equal to\"\n\n            i18n-filterAfterOperator=\"kendo.gantt.filterAfterOperator|The text of the after date filter operator\"\n            filterAfterOperator=\"Is after\"\n\n            i18n-filterBeforeOperator=\"kendo.gantt.filterBeforeOperator|The text of the before date filter operator\"\n            filterBeforeOperator=\"Is before\"\n\n            i18n-filterBeforeOrEqualOperator=\"kendo.gantt.filterBeforeOrEqualOperator|The text of the before or equal date filter operator\"\n            filterBeforeOrEqualOperator=\"Is before or equal to\"\n\n            i18n-filterFilterButton=\"kendo.gantt.filterFilterButton|The text of the filter button\"\n            filterFilterButton=\"Filter\"\n\n            i18n-filterClearButton=\"kendo.gantt.filterClearButton|The text of the clear filter button\"\n            filterClearButton=\"Clear\"\n\n            i18n-filterAndLogic=\"kendo.gantt.filterAndLogic|The text of the And filter logic\"\n            filterAndLogic=\"And\"\n\n            i18n-filterOrLogic=\"kendo.gantt.filterOrLogic|The text of the Or filter logic\"\n            filterOrLogic=\"Or\"\n\n            i18n-loading=\"kendo.gantt.loading|The loading text\"\n            loading=\"Loading\"\n\n            i18n-columnMenu=\"kendo.gantt.columnMenu|The title of the column menu icon\"\n            columnMenu=\"Column Menu\"\n\n            i18n-columns=\"kendo.gantt.columns|The text shown in the column menu for the columns item\"\n            columns=\"Columns\"\n\n            i18n-lock-disabled=\"kendo.gantt.lock|The text shown in the column menu for the lock item\"\n            lock-disabled=\"Lock\"\n\n            i18n-unlock-disabled=\"kendo.gantt.unlock|The text shown in the column menu for the unlock item\"\n            unlock-disabled=\"Unlock\"\n\n            i18n-sortable=\"kendo.gantt.sortable|The label of the sort icon\"\n            sortable=\"Sortable\"\n\n            i18n-sortAscending=\"kendo.gantt.sortAscending|The text shown in the column menu for the sort ascending item\"\n            sortAscending=\"Sort Ascending\"\n\n            i18n-sortDescending=\"kendo.gantt.sortDescending|The text shown in the column menu for the sort descending item\"\n            sortDescending=\"Sort Descending\"\n\n            i18n-sortedAscending=\"kendo.gantt.sortedAscending|The status announcement when a column is sorted ascending\"\n            sortedAscending=\"Sorted Ascending\"\n\n            i18n-sortedDescending=\"kendo.gantt.sortedDescending|The status announcement when a column is sorted descending\"\n            sortedDescending=\"Sorted Descending\"\n\n            i18n-sortedDefault=\"kendo.gantt.sortedDefault|The status announcement when a column is no longer sorted\"\n            sortedDefault=\"Not Sorted\"\n\n            i18n-columnsApply=\"kendo.gantt.columnsApply|The text shown in the column menu or column chooser for the columns apply button\"\n            columnsApply=\"Apply\"\n\n            i18n-columnsReset=\"kendo.gantt.columnsReset|The text shown in the column menu or column chooser for the columns reset button\"\n            columnsReset=\"Reset\"></ng-container>\n        <kendo-gantt-toolbar\n            *ngIf=\"showToolbar('top')\"\n            class=\"k-gantt-header k-toolbar k-gantt-toolbar\"\n            position=\"top\"></kendo-gantt-toolbar>\n        <div class=\"k-gantt-content\">\n            <kendo-splitter [style.border]=\"0\">\n                <kendo-splitter-pane\n                    class=\"k-gantt-treelist k-gantt-treelist-scrollable\"\n                    [collapsible]=\"treeListPaneOptions?.collapsible\"\n                    [collapsed]=\"treeListPaneOptions?.collapsed\"\n                    (collapsedChange)=\"onTreeListCollapsedChange($event)\"\n                    [scrollable]=\"false\">\n                    <kendo-treelist\n                        [idField]=\"taskIdField\"\n                        [columns]=\"columns\"\n                        [data]=\"data\"\n                        [hasChildren]=\"hasChildren\"\n                        [fetchChildren]=\"fetchChildren\"\n                        [isExpanded]=\"isExpanded\"\n                        [autoSize]=\"columnsAutoSize\"\n                        [columnMenu]=\"columnMenu\"\n                        [reorderable]=\"columnsReorderable\"\n                        [resizable]=\"columnsResizable\"\n                        [rowClass]=\"rowClass\"\n                        [sortable]=\"sortable\"\n                        [sort]=\"sort\"\n                        [filterable]=\"filterMenu\"\n                        [filter]=\"filter\"\n                        (filterChange)=\"filterChange.emit($event)\"\n                        (sortChange)=\"sortChange.emit($event)\"\n                        (dataStateChange)=\"dataStateChange.emit({\n                            filter: $event.filter,\n                            sort: $event.sort\n                        })\"\n                        (expandStateChange)=\"expandStateChange.emit($event)\"\n                        (expand)=\"rowExpand.emit({ dataItem: $event.dataItem })\"\n                        (collapse)=\"rowCollapse.emit({ dataItem: $event.dataItem })\"\n                        (columnReorder)=\"columnReorder.emit($event)\"\n                        (columnResize)=\"columnResize.emit($event)\"\n                        (columnVisibilityChange)=\"handleColumnVisibilityChange($event)\"\n                        (columnLockedChange)=\"columnLockedChange.emit($event)\"\n                        (cellClick)=\"handleCellClick($event)\"\n                        (cellClose)=\"handleCellClose($event)\"\n                        [kendoEventsOutsideAngular]=\"{\n                            dblclick: handleDoubleClick\n                        }\">\n                        <kendo-treelist-messages [kendoGanttTreeListMessages]=\"localizationService\"></kendo-treelist-messages>\n                    </kendo-treelist>\n                </kendo-splitter-pane>\n                <kendo-splitter-pane\n                    [collapsible]=\"timelinePaneOptions?.collapsible\"\n                    [resizable]=\"timelinePaneOptions?.resizable\"\n                    [collapsed]=\"timelinePaneOptions?.collapsed\"\n                    [min]=\"timelinePaneOptions?.min\"\n                    [max]=\"timelinePaneOptions?.max\"\n                    [size]=\"timelinePaneOptions?.size\"\n                    (collapsedChange)=\"onTimelineCollapsedChange($event)\"\n                    (sizeChange)=\"onTimelinePaneSizeChange($event)\"\n                    [scrollable]=\"false\">\n                    <kendo-gantt-timeline\n                        *ngIf=\"views && views.length\"\n                        [rows]=\"renderedTreeListItems\"\n                        [slots]=\"timelineSlots\"\n                        [groupSlots]=\"timelineGroupSlots\"\n                        [tableWidth]=\"tableWidth\"\n                        [activeView]=\"activeView\"\n                        [taskContentTemplate]=\"taskContentTemplate?.templateRef\"\n                        [taskTemplate]=\"taskTemplate?.templateRef\"\n                        [summaryTaskTemplate]=\"summaryTaskTemplate?.templateRef\"\n                        [taskClass]=\"taskClass\"\n                        [dependencies]=\"dependencies\"\n                        [hasChildren]=\"hasChildren\"\n                        [kendoEventsOutsideAngular]=\"{\n                            dblclick: handleTimelineDblClick,\n                            mousedown: handleTimelineMouseDown\n                        }\"\n                    ></kendo-gantt-timeline>\n                </kendo-splitter-pane>\n            </kendo-splitter>\n        </div>\n        <kendo-gantt-toolbar\n            *ngIf=\"showToolbar('bottom')\"\n            class=\"k-gantt-footer k-toolbar k-gantt-toolbar\"\n            position=\"bottom\"></kendo-gantt-toolbar>\n        <kendo-gantt-edit-dialog *ngIf=\"showEditingDialog\" [formGroup]=\"editDialogFormGroup\"></kendo-gantt-edit-dialog>\n        <kendo-dialog\n            *ngIf=\"showConfirmationDialog\"\n            [width]=\"575\"\n            [height]=\"170\"\n            [title]=\"getText('confirmationDialogTitle')\"\n            (close)=\"showConfirmationDialog = false;\">\n            <span>{{getText('confirmationDialogContent')}}</span>\n            <kendo-dialog-actions layout=\"normal\">\n                <kendo-treelist-spacer></kendo-treelist-spacer>\n                <button kendoButton [primary]=\"true\" (click)=\"handleDeleteConfirmation()\">{{ getText('deleteButtonText') }}</button>\n                <button kendoButton (click)=\"showConfirmationDialog = false;\">{{ getText('cancelButtonText') }}</button>\n            </kendo-dialog-actions>\n        </kendo-dialog>\n   "
         }),
         tslib_1.__metadata("design:paramtypes", [timeline_view_service_1.TimelineViewService,
             scroll_sync_service_1.ScrollSyncService,
             core_1.Renderer2,
             mapping_service_1.MappingService,
             option_changes_service_1.OptionChangesService,
-            dependency_dom_service_1.DependencyDomService])
+            dependency_dom_service_1.DependencyDomService,
+            edit_service_1.EditService,
+            kendo_angular_l10n_1.LocalizationService,
+            core_1.ElementRef,
+            core_1.NgZone])
     ], GanttComponent);
     return GanttComponent;
 }());

package/dist/npm/gantt.module.js

@@ -10,6 +10,7 @@ var common_1 = require("@angular/common");
 var kendo_angular_layout_1 = require("@progress/kendo-angular-layout");
 var kendo_angular_treelist_1 = require("@progress/kendo-angular-treelist");
 var kendo_angular_buttons_1 = require("@progress/kendo-angular-buttons");
+var kendo_angular_dialog_1 = require("@progress/kendo-angular-dialog");
 var gantt_component_1 = require("./gantt.component");
 var gantt_timeline_component_1 = require("./timeline/gantt-timeline.component");
 var gantt_tasks_table_body_component_1 = require("./rendering/gantt-tasks-table-body.component");
@@ -31,11 +32,28 @@ var columns_1 = require("./columns/columns");
 var timeline_day_view_component_1 = require("./timeline/timeline-day-view.component");
 var timeline_week_view_component_1 = require("./timeline/timeline-week-view.component");
 var timeline_month_view_component_1 = require("./timeline/timeline-month-view.component");
+var edit_dialog_component_1 = require("./editing/edit-dialog.component");
+var forms_1 = require("@angular/forms");
+var kendo_angular_label_1 = require("@progress/kendo-angular-label");
+var kendo_angular_inputs_1 = require("@progress/kendo-angular-inputs");
+var kendo_angular_dateinputs_1 = require("@progress/kendo-angular-dateinputs");
+var custom_messages_component_1 = require("./localization/custom-messages.component");
+var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
+var localized_messages_directive_1 = require("./localization/localized-messages.directive");
+var treelist_messages_directive_1 = require("./localization/treelist-messages.directive");
+var kendo_angular_common_1 = require("@progress/kendo-angular-common");
 var IMPORTED_MODULES = [
     common_1.CommonModule,
+    forms_1.ReactiveFormsModule,
+    kendo_angular_label_1.LabelModule,
+    kendo_angular_inputs_1.InputsModule,
+    kendo_angular_dateinputs_1.DateInputsModule,
+    kendo_angular_buttons_1.ButtonsModule,
     kendo_angular_layout_1.SplitterModule,
     kendo_angular_treelist_1.TreeListModule,
-    kendo_angular_buttons_1.ButtonsModule
+    kendo_angular_buttons_1.ButtonsModule,
+    kendo_angular_dialog_1.DialogModule,
+    kendo_angular_common_1.EventsModule
 ];
 var DECLARATIONS = [
     gantt_component_1.GanttComponent,
@@ -59,6 +77,7 @@ var DECLARATIONS = [
     columns_1.FilterMenuTemplateDirective,
     columns_1.FilterCellTemplateDirective,
     columns_1.CellTemplateDirective,
+    columns_1.EditTemplateDirective,
     columns_1.ColumnMenuTemplateDirective,
     columns_1.HeaderTemplateDirective,
     columns_1.FooterTemplateDirective,
@@ -66,10 +85,42 @@ var DECLARATIONS = [
     gantt_dependency_directive_1.GanttDependencyDirective,
     timeline_day_view_component_1.TimelineDayViewComponent,
     timeline_week_view_component_1.TimelineWeekViewComponent,
-    timeline_month_view_component_1.TimelineMonthViewComponent
+    timeline_month_view_component_1.TimelineMonthViewComponent,
+    edit_dialog_component_1.EditDialogComponent,
+    custom_messages_component_1.CustomMessagesComponent,
+    localized_messages_directive_1.LocalizedMessagesDirective,
+    treelist_messages_directive_1.GanttTreeListMessagesDirective
 ];
 /**
- * Sample module
+ * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * definition for the Gantt component.
+ *
+ * @example
+ *
+ * ```ts-no-run
+ * // Import the Gantt module
+ * import { GanttModule } from '@progress/kendo-angular-gantt';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, GanttModule], // import Gantt module
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
  */
 var GanttModule = /** @class */ (function () {
     function GanttModule() {
@@ -78,7 +129,11 @@ var GanttModule = /** @class */ (function () {
         core_1.NgModule({
             imports: IMPORTED_MODULES.slice(),
             declarations: DECLARATIONS.slice(),
-            exports: DECLARATIONS.slice()
+            exports: DECLARATIONS.slice(),
+            providers: [{
+                    provide: kendo_angular_l10n_1.L10N_PREFIX,
+                    useValue: 'kendo.gantt'
+                }]
         })
     ], GanttModule);
     return GanttModule;

package/dist/npm/index.js

@@ -17,6 +17,18 @@ var dependency_dom_service_1 = require("./dependencies/dependency-dom.service");
 exports.DependencyDomService = dependency_dom_service_1.DependencyDomService
 var gantt_dependency_directive_1 = require("./dependencies/gantt-dependency.directive");
 exports.GanttDependencyDirective = gantt_dependency_directive_1.GanttDependencyDirective
+var edit_dialog_component_1 = require("./editing/edit-dialog.component");
+exports.EditDialogComponent = edit_dialog_component_1.EditDialogComponent
+var edit_service_1 = require("./editing/edit.service");
+exports.EditService = edit_service_1.EditService
+var custom_messages_component_1 = require("./localization/custom-messages.component");
+exports.CustomMessagesComponent = custom_messages_component_1.CustomMessagesComponent
+var localized_messages_directive_1 = require("./localization/localized-messages.directive");
+exports.LocalizedMessagesDirective = localized_messages_directive_1.LocalizedMessagesDirective
+var messages_1 = require("./localization/messages");
+exports.Messages = messages_1.Messages
+var treelist_messages_directive_1 = require("./localization/treelist-messages.directive");
+exports.GanttTreeListMessagesDirective = treelist_messages_directive_1.GanttTreeListMessagesDirective
 var gantt_header_table_body_component_1 = require("./rendering/gantt-header-table-body.component");
 exports.GanttHeaderTableBodyComponent = gantt_header_table_body_component_1.GanttHeaderTableBodyComponent
 var gantt_milestone_task_component_1 = require("./rendering/gantt-milestone-task.component");

package/dist/npm/localization/custom-messages.component.js

@@ -0,0 +1,46 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var core_1 = require("@angular/core");
+var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
+var messages_1 = require("./messages");
+/**
+ * Custom component messages override default component messages
+ * ([see example]({% slug globalization_treelist %}#toc-localization)).
+ */
+var CustomMessagesComponent = /** @class */ (function (_super) {
+    tslib_1.__extends(CustomMessagesComponent, _super);
+    function CustomMessagesComponent(service) {
+        var _this = _super.call(this) || this;
+        _this.service = service;
+        return _this;
+    }
+    CustomMessagesComponent_1 = CustomMessagesComponent;
+    Object.defineProperty(CustomMessagesComponent.prototype, "override", {
+        get: function () {
+            return true;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    var CustomMessagesComponent_1;
+    CustomMessagesComponent = CustomMessagesComponent_1 = tslib_1.__decorate([
+        core_1.Component({
+            providers: [
+                {
+                    provide: messages_1.Messages,
+                    useExisting: core_1.forwardRef(function () { return CustomMessagesComponent_1; })
+                }
+            ],
+            selector: 'kendo-gantt-messages',
+            template: ""
+        }),
+        tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService])
+    ], CustomMessagesComponent);
+    return CustomMessagesComponent;
+}(messages_1.Messages));
+exports.CustomMessagesComponent = CustomMessagesComponent;