@progress/kendo-angular-gantt 13.5.1-develop.3 → 13.6.0-develop.1

package/esm2020/gantt.component.mjs

@@ -37,6 +37,7 @@ import { ViewBase } from './timeline/view-base';
 import { getEditItem } from './editing/utils';
 import { CellCloseEvent } from './models/events/cell-close-event.interface';
 import { TimeLineYearViewService } from './timeline/timeline-year-view.service';
+import { CurrentTimeMarkerService } from './timeline/current-time-marker.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./timeline/timeline-view.service";
 import * as i2 from "./scrolling/scroll-sync.service";
@@ -46,16 +47,17 @@ import * as i5 from "./dependencies/dependency-dom.service";
 import * as i6 from "./editing/edit.service";
 import * as i7 from "@progress/kendo-angular-l10n";
 import * as i8 from "./navigation/navigation.service";
-import * as i9 from "./toolbar/toolbar.component";
-import * as i10 from "@progress/kendo-angular-layout";
-import * as i11 from "@progress/kendo-angular-treelist";
-import * as i12 from "./timeline/gantt-timeline.component";
-import * as i13 from "./editing/edit-dialog.component";
-import * as i14 from "@progress/kendo-angular-dialog";
-import * as i15 from "@progress/kendo-angular-buttons";
-import * as i16 from "@progress/kendo-angular-common";
-import * as i17 from "./localization/localized-messages.directive";
-import * as i18 from "@angular/common";
+import * as i9 from "./timeline/current-time-marker.service";
+import * as i10 from "./toolbar/toolbar.component";
+import * as i11 from "@progress/kendo-angular-layout";
+import * as i12 from "@progress/kendo-angular-treelist";
+import * as i13 from "./timeline/gantt-timeline.component";
+import * as i14 from "./editing/edit-dialog.component";
+import * as i15 from "@progress/kendo-angular-dialog";
+import * as i16 from "@progress/kendo-angular-buttons";
+import * as i17 from "@progress/kendo-angular-common";
+import * as i18 from "./localization/localized-messages.directive";
+import * as i19 from "@angular/common";
 const TREELIST_GROUP_COLUMNS_CLASS = 'k-gantt-treelist-nested-columns';
 const DEFAULT_VIEW = 'week';
 const DEFAULT_DRAG_SCROLL_SETTINGS = {
@@ -136,7 +138,7 @@ const DEFAULT_DRAG_SCROLL_SETTINGS = {
  * ```
  */
 export class GanttComponent {
-    constructor(timelineViewService, scrollSyncService, renderer, mapper, optionChangesService, dependencyDomService, editService, localizationService, hostElement, zone, navigation) {
+    constructor(timelineViewService, scrollSyncService, renderer, mapper, optionChangesService, dependencyDomService, editService, localizationService, hostElement, zone, navigation, currentTimeMarkerService) {
         this.timelineViewService = timelineViewService;
         this.scrollSyncService = scrollSyncService;
         this.renderer = renderer;
@@ -148,6 +150,7 @@ export class GanttComponent {
         this.hostElement = hostElement;
         this.zone = zone;
         this.navigation = navigation;
+        this.currentTimeMarkerService = currentTimeMarkerService;
         /**
          * @hidden
          */
@@ -245,6 +248,14 @@ export class GanttComponent {
          * @default false
          */
         this.columnsAutoSize = false;
+        /**
+         * Specifies the Gantt current time marker settings.
+         * The settings will be applied for all views.
+         * If the `currentTimeMarker` is set for a view then it takes precedence.
+         *
+         * @default true
+         */
+        this.currentTimeMarker = true;
         /**
          * Specifies if the column menu of the columns will be displayed.
          *
@@ -455,6 +466,7 @@ export class GanttComponent {
         this.localizationSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
             this.rtl = rtl;
             this.direction = this.rtl ? 'rtl' : 'ltr';
+            this.currentTimeMarkerService.rtl = rtl;
         });
     }
     get toolbarTemplate() {
@@ -517,8 +529,17 @@ export class GanttComponent {
         const view = this.views.find(view => view.type === this._activeView) ?
             this._activeView :
             this.views.first.type;
+        this.currentTimeMarkerService.activeView = view;
         return view;
     }
+    /**
+     * @hidden
+     *
+     */
+    get activeViewCurrentTimeMarker() {
+        const activeViewCurrentTimeMarker = this.views.find(view => view.type === this._activeView)?.currentTimeMarker;
+        return activeViewCurrentTimeMarker || this.currentTimeMarker;
+    }
     /**
      * Gets or sets the data of the Gantt.
      *
@@ -1086,6 +1107,9 @@ export class GanttComponent {
             this.loadTimelineData();
             this.scrollSyncService.resetTimelineScrollLeft();
             this.activeViewChange.emit(view);
+            this.currentTimeMarkerService.slots = this.timelineSlots;
+            this.currentTimeMarkerService.rows = this.viewItems;
+            this.currentTimeMarkerService.activeView = view;
         }
     }
     /**
@@ -1302,8 +1326,8 @@ export class GanttComponent {
         }
     }
 }
-GanttComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GanttComponent, deps: [{ token: i1.TimelineViewService }, { token: i2.ScrollSyncService }, { token: i0.Renderer2 }, { token: i3.MappingService }, { token: i4.OptionChangesService }, { token: i5.DependencyDomService }, { token: i6.EditService }, { token: i7.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i8.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GanttComponent, selector: "kendo-gantt", inputs: { roleDescription: ["aria-roledescription", "roleDescription"], role: "role", taskModelFields: "taskModelFields", dependencyModelFields: "dependencyModelFields", activeView: "activeView", data: "data", isSelected: "isSelected", validateNewDependency: "validateNewDependency", selectable: "selectable", toolbarSettings: "toolbarSettings", toolbarAriaLabel: "toolbarAriaLabel", fetchChildren: "fetchChildren", hasChildren: "hasChildren", dependencies: "dependencies", sortable: "sortable", sort: "sort", filterable: "filterable", filter: "filter", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", navigable: "navigable", timelinePaneOptions: "timelinePaneOptions", treeListPaneOptions: "treeListPaneOptions", taskClass: "taskClass", rowClass: "rowClass", isExpanded: "isExpanded", columnsAutoSize: "columnsAutoSize", columnMenu: "columnMenu", columnsReorderable: "columnsReorderable", columnsResizable: "columnsResizable", dragScrollSettings: "dragScrollSettings" }, outputs: { selectionChange: "selectionChange", rowExpand: "rowExpand", taskDblClick: "taskDblClick", cellDblClick: "cellDblClick", cellClose: "cellClose", taskDelete: "taskDelete", rowCollapse: "rowCollapse", remove: "remove", cancel: "cancel", save: "save", taskAdd: "taskAdd", dependencyAdd: "dependencyAdd", sortChange: "sortChange", filterChange: "filterChange", dataStateChange: "dataStateChange", treeListPaneCollapsedChange: "treeListPaneCollapsedChange", timelinePaneCollapsedChange: "timelinePaneCollapsedChange", timelinePaneSizeChange: "timelinePaneSizeChange", activeViewChange: "activeViewChange", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", cellClick: "cellClick", taskClick: "taskClick" }, host: { properties: { "attr.aria-roledescription": "this.hostRoleDescriptionAttr", "attr.role": "this.hostRoleAttr", "class.k-gantt": "this.hostClasses", "attr.dir": "this.dir" } }, providers: [
+GanttComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GanttComponent, deps: [{ token: i1.TimelineViewService }, { token: i2.ScrollSyncService }, { token: i0.Renderer2 }, { token: i3.MappingService }, { token: i4.OptionChangesService }, { token: i5.DependencyDomService }, { token: i6.EditService }, { token: i7.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i8.NavigationService }, { token: i9.CurrentTimeMarkerService }], target: i0.ɵɵFactoryTarget.Component });
+GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GanttComponent, selector: "kendo-gantt", inputs: { roleDescription: ["aria-roledescription", "roleDescription"], role: "role", taskModelFields: "taskModelFields", dependencyModelFields: "dependencyModelFields", activeView: "activeView", data: "data", isSelected: "isSelected", validateNewDependency: "validateNewDependency", selectable: "selectable", toolbarSettings: "toolbarSettings", toolbarAriaLabel: "toolbarAriaLabel", fetchChildren: "fetchChildren", hasChildren: "hasChildren", dependencies: "dependencies", sortable: "sortable", sort: "sort", filterable: "filterable", filter: "filter", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", navigable: "navigable", timelinePaneOptions: "timelinePaneOptions", treeListPaneOptions: "treeListPaneOptions", taskClass: "taskClass", rowClass: "rowClass", isExpanded: "isExpanded", columnsAutoSize: "columnsAutoSize", currentTimeMarker: "currentTimeMarker", columnMenu: "columnMenu", columnsReorderable: "columnsReorderable", columnsResizable: "columnsResizable", dragScrollSettings: "dragScrollSettings" }, outputs: { selectionChange: "selectionChange", rowExpand: "rowExpand", taskDblClick: "taskDblClick", cellDblClick: "cellDblClick", cellClose: "cellClose", taskDelete: "taskDelete", rowCollapse: "rowCollapse", remove: "remove", cancel: "cancel", save: "save", taskAdd: "taskAdd", dependencyAdd: "dependencyAdd", sortChange: "sortChange", filterChange: "filterChange", dataStateChange: "dataStateChange", treeListPaneCollapsedChange: "treeListPaneCollapsedChange", timelinePaneCollapsedChange: "timelinePaneCollapsedChange", timelinePaneSizeChange: "timelinePaneSizeChange", activeViewChange: "activeViewChange", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", cellClick: "cellClick", taskClick: "taskClick" }, host: { properties: { "attr.aria-roledescription": "this.hostRoleDescriptionAttr", "attr.role": "this.hostRoleAttr", "class.k-gantt": "this.hostClasses", "attr.dir": "this.dir" } }, providers: [
         GanttLocalizationService,
         LocalizationService,
         {
@@ -1325,7 +1349,8 @@ GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
         OptionChangesService,
         EditService,
         TimelineScrollService,
-        NavigationService
+        NavigationService,
+        CurrentTimeMarkerService
     ], queries: [{ propertyName: "taskContentTemplate", first: true, predicate: GanttTaskContentTemplateDirective, descendants: true }, { propertyName: "taskTemplate", first: true, predicate: GanttTaskTemplateDirective, descendants: true }, { propertyName: "summaryTaskTemplate", first: true, predicate: GanttSummaryTaskTemplateDirective, descendants: true }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columns", predicate: GanttColumnBase }, { propertyName: "views", predicate: ViewBase }], viewQueries: [{ propertyName: "treeList", first: true, predicate: TreeListComponent, descendants: true, static: true }, { propertyName: "timeline", first: true, predicate: GanttTimelineComponent, descendants: true }], exportAs: ["kendoGantt"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoGanttLocalizedMessages
             i18n-taskEditingGeneralTabTitle="kendo.gantt.taskEditingGeneralTabTitle|The title of the 'General' tab of the editing dialog TabStrip"
@@ -1644,6 +1669,7 @@ GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
                         [dragScrollSettings]="dragScrollSettings"
                         [rows]="viewItems"
                         [slots]="timelineSlots"
+                        [currentTimeMarker]="activeViewCurrentTimeMarker"
                         [groupSlots]="timelineGroupSlots"
                         [tableWidth]="tableWidth"
                         [activeView]="activeView"
@@ -1696,7 +1722,7 @@ GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
         </kendo-dialog>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-   `, isInline: true, components: [{ type: i9.ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: ["showAddTask", "showViewSelector", "views", "activeView", "toolbarTemplate", "navigable", "position"], outputs: ["activeViewChange"] }, { type: i10.SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "resizeStep"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { type: i10.SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "separatorLabel", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { type: i11.TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "navigatable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "rowReorderable", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange", "rowReorder"], exportAs: ["kendoTreeList"] }, { type: i11.CustomMessagesComponent, selector: "kendo-treelist-messages" }, { type: i12.GanttTimelineComponent, selector: "kendo-gantt-timeline", inputs: ["rows", "slots", "groupSlots", "tableWidth", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "renderDependencyDragClues", "dragScrollSettings", "selectable", "isTaskSelected", "isExpanded", "dependencies"], outputs: ["timelineContainerPress", "timelineContainerDrag", "timelineContainerRelease"] }, { type: i13.EditDialogComponent, selector: "kendo-gantt-edit-dialog", inputs: ["data"] }, { type: i14.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: i14.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i11.TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }, { type: i15.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i16.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], directives: [{ type: i17.LocalizedMessagesDirective, selector: "[kendoGanttLocalizedMessages]" }, { type: i18.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i16.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+   `, isInline: true, components: [{ type: i10.ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: ["showAddTask", "showViewSelector", "views", "activeView", "toolbarTemplate", "navigable", "position"], outputs: ["activeViewChange"] }, { type: i11.SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "resizeStep"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { type: i11.SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "separatorLabel", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { type: i12.TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "navigatable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "rowReorderable", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange", "rowReorder"], exportAs: ["kendoTreeList"] }, { type: i12.CustomMessagesComponent, selector: "kendo-treelist-messages" }, { type: i13.GanttTimelineComponent, selector: "kendo-gantt-timeline", inputs: ["rows", "slots", "groupSlots", "tableWidth", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "renderDependencyDragClues", "dragScrollSettings", "currentTimeMarker", "selectable", "isTaskSelected", "isExpanded", "dependencies"], outputs: ["timelineContainerPress", "timelineContainerDrag", "timelineContainerRelease"] }, { type: i14.EditDialogComponent, selector: "kendo-gantt-edit-dialog", inputs: ["data"] }, { type: i15.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: i15.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i12.TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }, { type: i16.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i17.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], directives: [{ type: i18.LocalizedMessagesDirective, selector: "[kendoGanttLocalizedMessages]" }, { type: i19.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i17.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GanttComponent, decorators: [{
             type: Component,
             args: [{
@@ -1724,7 +1750,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         OptionChangesService,
                         EditService,
                         TimelineScrollService,
-                        NavigationService
+                        NavigationService,
+                        CurrentTimeMarkerService
                     ],
                     template: `
         <ng-container kendoGanttLocalizedMessages
@@ -2044,6 +2071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         [dragScrollSettings]="dragScrollSettings"
                         [rows]="viewItems"
                         [slots]="timelineSlots"
+                        [currentTimeMarker]="activeViewCurrentTimeMarker"
                         [groupSlots]="timelineGroupSlots"
                         [tableWidth]="tableWidth"
                         [activeView]="activeView"
@@ -2098,7 +2126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
    `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.TimelineViewService }, { type: i2.ScrollSyncService }, { type: i0.Renderer2 }, { type: i3.MappingService }, { type: i4.OptionChangesService }, { type: i5.DependencyDomService }, { type: i6.EditService }, { type: i7.LocalizationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i8.NavigationService }]; }, propDecorators: { treeList: [{
+        }], ctorParameters: function () { return [{ type: i1.TimelineViewService }, { type: i2.ScrollSyncService }, { type: i0.Renderer2 }, { type: i3.MappingService }, { type: i4.OptionChangesService }, { type: i5.DependencyDomService }, { type: i6.EditService }, { type: i7.LocalizationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i8.NavigationService }, { type: i9.CurrentTimeMarkerService }]; }, propDecorators: { treeList: [{
                 type: ViewChild,
                 args: [TreeListComponent, { static: true }]
             }], timeline: [{
@@ -2196,6 +2224,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], columnsAutoSize: [{
                 type: Input
+            }], currentTimeMarker: [{
+                type: Input
             }], columnMenu: [{
                 type: Input
             }], columnsReorderable: [{

package/esm2020/models/current-time-settings.interface.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-gantt',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1695231780,
-    version: '13.5.1-develop.3',
+    publishDate: 1695633813,
+    version: '13.6.0-develop.1',
     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'
 };

package/esm2020/timeline/current-time-marker.service.mjs

@@ -0,0 +1,85 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable, NgZone, Renderer2 } from '@angular/core';
+import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import * as i0 from "@angular/core";
+const MS_PER_SECOND = 1000;
+const MS_PER_MINUTE = 60 * MS_PER_SECOND;
+/**
+ * @hidden
+ */
+export { MS_PER_DAY } from '@progress/kendo-date-math';
+/**
+ * @hidden
+ */
+export class CurrentTimeMarkerService {
+    constructor(renderer, zone) {
+        this.renderer = renderer;
+        this.zone = zone;
+        this.slots = [];
+        this.rows = [];
+        this.now = new Date(Date.now());
+        this.createTimeMarker = () => {
+            if (!isDocumentAvailable()) {
+                return;
+            }
+            this.removeTimeMarker();
+            if (this.slotIndex >= 0) {
+                this.now = new Date(Date.now());
+                this.timeMarkerDiv = this.renderer.createElement('div');
+                this.renderer.addClass(this.timeMarkerDiv, 'k-current-time');
+                this.renderer.setStyle(this.timeMarkerDiv, 'width', '1px');
+                this.renderer.setStyle(this.timeMarkerDiv, 'top', '0px');
+                this.renderer.setStyle(this.timeMarkerDiv, `${this.rtl ? 'right' : 'left'}`, this.deltaOffset + 'px');
+                this.renderer.appendChild(this.container.nativeElement, this.timeMarkerDiv);
+                this.renderer.setStyle(this.timeMarkerDiv, 'height', this.height + 'px');
+                this.currentTimeTimeout = setTimeout(this.createTimeMarker, this.interval || MS_PER_MINUTE);
+            }
+        };
+    }
+    get deltaOffset() {
+        if (this.slotIndex >= 0) {
+            const total = this.slots[this.slotIndex].end.getTime() - this.slots[this.slotIndex].start.getTime();
+            if (total > 0) {
+                const currentTimeValue = this.now.getTime() - this.slots[this.slotIndex].start.getTime();
+                const fractionInsideCell = currentTimeValue / total;
+                const deltaOffsetToSlot = this.slotIndex * this.slotWidth;
+                const deltaOffsetInsideSlot = fractionInsideCell * this.slotWidth;
+                return deltaOffsetToSlot + deltaOffsetInsideSlot;
+            }
+            return 0;
+        }
+    }
+    ;
+    get slotWidth() {
+        return this.slots[0]?.slotWidth;
+    }
+    get slotIndex() {
+        return this.slots.indexOf(this.slots.find((slot) => slot.start <= this.now && slot.end > this.now));
+    }
+    get height() {
+        return this.rows.length * this.rowHeight;
+    }
+    get interval() {
+        if (typeof (this.currentTimeMarker) === 'boolean') {
+            return MS_PER_MINUTE;
+        }
+        return this.currentTimeMarker.updateInterval || MS_PER_MINUTE;
+    }
+    ngOnDestroy() {
+        clearInterval(this.currentTimeTimeout);
+    }
+    removeTimeMarker() {
+        if (this.timeMarkerDiv) {
+            this.renderer.removeChild(this.container.nativeElement, this.timeMarkerDiv);
+            clearInterval(this.currentTimeTimeout);
+        }
+    }
+}
+CurrentTimeMarkerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CurrentTimeMarkerService, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+CurrentTimeMarkerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CurrentTimeMarkerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CurrentTimeMarkerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.NgZone }]; } });

package/esm2020/timeline/gantt-timeline.component.mjs

@@ -9,24 +9,27 @@ import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { ScrollSyncService } from '../scrolling/scroll-sync.service';
 import { DependencyDomService } from '../dependencies/dependency-dom.service';
 import { isPresent } from '../utils';
+import { CurrentTimeMarkerService } from './current-time-marker.service';
 import * as i0 from "@angular/core";
 import * as i1 from "../scrolling/scroll-sync.service";
 import * as i2 from "../dependencies/dependency-dom.service";
-import * as i3 from "../rendering/gantt-header-table-body.component";
-import * as i4 from "../rendering/gantt-tasks-table-body.component";
-import * as i5 from "../scrolling/timeline-scroll.directive";
-import * as i6 from "@progress/kendo-angular-common";
-import * as i7 from "@angular/common";
-import * as i8 from "../dependencies/gantt-dependency.directive";
+import * as i3 from "./current-time-marker.service";
+import * as i4 from "../rendering/gantt-header-table-body.component";
+import * as i5 from "../rendering/gantt-tasks-table-body.component";
+import * as i6 from "../scrolling/timeline-scroll.directive";
+import * as i7 from "@progress/kendo-angular-common";
+import * as i8 from "@angular/common";
+import * as i9 from "../dependencies/gantt-dependency.directive";
 /**
  * @hidden
  */
 export class GanttTimelineComponent {
-    constructor(scrollSyncService, dependencyDomService, renderer, zone) {
+    constructor(scrollSyncService, dependencyDomService, renderer, zone, currentTimeMarkerService) {
         this.scrollSyncService = scrollSyncService;
         this.dependencyDomService = dependencyDomService;
         this.renderer = renderer;
         this.zone = zone;
+        this.currentTimeMarkerService = currentTimeMarkerService;
         this.hostClass = true;
         this.dependencies = [];
         // as all drag-and-drop operations are on the timeline container, use a single draggable instance
@@ -41,6 +44,14 @@ export class GanttTimelineComponent {
         )
             .subscribe(({ timelineRow }) => {
             const timelineRowHeight = isDocumentAvailable() ? timelineRow.getBoundingClientRect().height : 0;
+            this.currentTimeMarkerService.rowHeight = timelineRowHeight;
+            this.currentTimeMarkerService.currentTimeMarker = this.currentTimeMarker;
+            this.currentTimeMarkerService.removeTimeMarker();
+            if ((typeof this.currentTimeMarker === 'boolean' && this.currentTimeMarker) || this.currentTimeMarker?.enabled) {
+                this.zone.runOutsideAngular(() => {
+                    this.currentTimeMarkerService.createTimeMarker();
+                });
+            }
             this.renderer.setStyle(this.timelineColumns.nativeElement, 'height', `${(this.rows || []).length * timelineRowHeight}px`);
         }));
     }
@@ -51,6 +62,9 @@ export class GanttTimelineComponent {
         return this.renderDependencyDragClues;
     }
     ngAfterViewInit() {
+        this.currentTimeMarkerService.slots = this.slots;
+        this.currentTimeMarkerService.rows = this.rows;
+        this.currentTimeMarkerService.container = this.timelineContent;
         const timelineHeader = this.timelineHeaderWrap.nativeElement;
         const rightContainer = this.timelineContent.nativeElement;
         this.scrollSyncService.registerElement(rightContainer, 'timeline');
@@ -64,8 +78,8 @@ export class GanttTimelineComponent {
         return item.hasOwnProperty('isWorking') && !item.isWorking;
     }
 }
-GanttTimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GanttTimelineComponent, deps: [{ token: i1.ScrollSyncService }, { token: i2.DependencyDomService }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-GanttTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GanttTimelineComponent, selector: "kendo-gantt-timeline", inputs: { rows: "rows", slots: "slots", groupSlots: "groupSlots", tableWidth: "tableWidth", activeView: "activeView", taskContentTemplate: "taskContentTemplate", taskTemplate: "taskTemplate", summaryTaskTemplate: "summaryTaskTemplate", taskClass: "taskClass", renderDependencyDragClues: "renderDependencyDragClues", dragScrollSettings: "dragScrollSettings", selectable: "selectable", isTaskSelected: "isTaskSelected", isExpanded: "isExpanded", dependencies: "dependencies" }, outputs: { timelineContainerPress: "timelineContainerPress", timelineContainerDrag: "timelineContainerDrag", timelineContainerRelease: "timelineContainerRelease" }, host: { properties: { "class.k-gantt-timeline": "this.hostClass" } }, viewQueries: [{ propertyName: "timelineContent", first: true, predicate: ["timelineContent"], descendants: true, static: true }, { propertyName: "timelineColumns", first: true, predicate: ["timelineColumns"], descendants: true, static: true }, { propertyName: "timelineHeaderWrap", first: true, predicate: ["timelineHeaderWrap"], descendants: true, static: true }, { propertyName: "tasksContainer", first: true, predicate: ["tasksContainer"], descendants: true, static: true }, { propertyName: "dragPopupContainer", first: true, predicate: ["dragPopupContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "dependencyDragCreatePolyline", first: true, predicate: ["dependencyDragCreatePolyline"], descendants: true }], ngImport: i0, template: `
+GanttTimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GanttTimelineComponent, deps: [{ token: i1.ScrollSyncService }, { token: i2.DependencyDomService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.CurrentTimeMarkerService }], target: i0.ɵɵFactoryTarget.Component });
+GanttTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GanttTimelineComponent, selector: "kendo-gantt-timeline", inputs: { rows: "rows", slots: "slots", groupSlots: "groupSlots", tableWidth: "tableWidth", activeView: "activeView", taskContentTemplate: "taskContentTemplate", taskTemplate: "taskTemplate", summaryTaskTemplate: "summaryTaskTemplate", taskClass: "taskClass", renderDependencyDragClues: "renderDependencyDragClues", dragScrollSettings: "dragScrollSettings", currentTimeMarker: "currentTimeMarker", selectable: "selectable", isTaskSelected: "isTaskSelected", isExpanded: "isExpanded", dependencies: "dependencies" }, outputs: { timelineContainerPress: "timelineContainerPress", timelineContainerDrag: "timelineContainerDrag", timelineContainerRelease: "timelineContainerRelease" }, host: { properties: { "class.k-gantt-timeline": "this.hostClass" } }, viewQueries: [{ propertyName: "timelineContent", first: true, predicate: ["timelineContent"], descendants: true, static: true }, { propertyName: "timelineColumns", first: true, predicate: ["timelineColumns"], descendants: true, static: true }, { propertyName: "timelineHeaderWrap", first: true, predicate: ["timelineHeaderWrap"], descendants: true, static: true }, { propertyName: "tasksContainer", first: true, predicate: ["tasksContainer"], descendants: true, static: true }, { propertyName: "dragPopupContainer", first: true, predicate: ["dragPopupContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "dependencyDragCreatePolyline", first: true, predicate: ["dependencyDragCreatePolyline"], descendants: true }], ngImport: i0, template: `
         <div class="k-timeline k-grid k-grid-md">
             <div class="k-grid-header">
                 <div #timelineHeaderWrap class="k-grid-header-wrap">
@@ -168,7 +182,7 @@ GanttTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 <ng-container #dragPopupContainer></ng-container>
             </div>
         </div>
-    `, isInline: true, components: [{ type: i3.GanttHeaderTableBodyComponent, selector: "[kendoGanttHeaderTableBody]", inputs: ["groupSlots", "slots"] }, { type: i4.GanttTasksTableBodyComponent, selector: "[kendoGanttTasksTableBody]", inputs: ["selectable", "rows", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "isExpanded", "isTaskSelected", "renderDependencyDragClues"] }], directives: [{ type: i5.TimelineScrollableDirective, selector: "[kendoGanttTimelineScrollable]", inputs: ["scrollSettings"] }, { type: i6.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.GanttDependencyDirective, selector: "[kendoGanttDependency]", inputs: ["dependency"] }] });
+    `, isInline: true, components: [{ type: i4.GanttHeaderTableBodyComponent, selector: "[kendoGanttHeaderTableBody]", inputs: ["groupSlots", "slots"] }, { type: i5.GanttTasksTableBodyComponent, selector: "[kendoGanttTasksTableBody]", inputs: ["selectable", "rows", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "isExpanded", "isTaskSelected", "renderDependencyDragClues"] }], directives: [{ type: i6.TimelineScrollableDirective, selector: "[kendoGanttTimelineScrollable]", inputs: ["scrollSettings"] }, { type: i7.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.GanttDependencyDirective, selector: "[kendoGanttDependency]", inputs: ["dependency"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GanttTimelineComponent, decorators: [{
             type: Component,
             args: [{
@@ -278,7 +292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ScrollSyncService }, { type: i2.DependencyDomService }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { timelineContent: [{
+        }], ctorParameters: function () { return [{ type: i1.ScrollSyncService }, { type: i2.DependencyDomService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.CurrentTimeMarkerService }]; }, propDecorators: { timelineContent: [{
                 type: ViewChild,
                 args: ['timelineContent', { static: true }]
             }], timelineColumns: [{
@@ -321,6 +335,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], dragScrollSettings: [{
                 type: Input
+            }], currentTimeMarker: [{
+                type: Input
             }], selectable: [{
                 type: Input
             }], isTaskSelected: [{

package/esm2020/timeline/timeline-base-view.service.mjs

@@ -7,8 +7,13 @@ import { IntlService } from '@progress/kendo-angular-intl';
 import { orderBy } from '@progress/kendo-data-query';
 import { MappingService } from '../common/mapping.service';
 import { isWorkDay, isWorkHour, lastDayOfWeek } from '../utils';
-import { addDays, firstDayInWeek, getDate, firstDayOfMonth, lastDayOfMonth, addMonths, addWeeks, lastMonthOfYear } from '@progress/kendo-date-math';
+import { addDays, firstDayInWeek, getDate, firstDayOfMonth, lastDayOfMonth, addMonths, addWeeks, lastMonthOfYear, cloneDate } from '@progress/kendo-date-math';
 import { Inject, LOCALE_ID } from '@angular/core';
+const setTime = (origin, candidate) => {
+    const date = cloneDate(origin);
+    date.setHours(candidate.getHours(), candidate.getMinutes(), candidate.getSeconds(), candidate.getMilliseconds());
+    return date;
+};
 /**
  * @hidden
  */
@@ -25,6 +30,7 @@ export const MONTH_FORMAT = 'MMM';
  * @hidden
  */
 export const YEAR_FORMAT = 'yyyy';
+const END_OF_DAY_DATE = new Date(1980, 0, 1, 23, 59, 59, 999);
 /**
  * @hidden
  */
@@ -135,7 +141,7 @@ let TimelineBaseViewService = class TimelineBaseViewService {
             if (span > 0) {
                 slots.push({
                     start: daySlots[0].start,
-                    end: daySlots[span - 1].end,
+                    end: setTime(daySlots[span - 1].end, END_OF_DAY_DATE),
                     text: `${firstDay} - ${lastDay}`,
                     span: span,
                     slotWidth: this.options.slotWidth
@@ -161,7 +167,7 @@ let TimelineBaseViewService = class TimelineBaseViewService {
             if (span > 0) {
                 slots.push({
                     start: isMainViewType ? daySlots[0].start : weekSlots[0].start,
-                    end: isMainViewType ? daySlots[span - 1] : weekSlots[span - 1].end,
+                    end: isMainViewType ? daySlots[span - 1] : setTime(weekSlots[span - 1].end, END_OF_DAY_DATE),
                     span: span,
                     text: shortText,
                     slotWidth: this.options.slotWidth
@@ -184,7 +190,7 @@ let TimelineBaseViewService = class TimelineBaseViewService {
             if (span > 0) {
                 slots.push({
                     start: monthSlots[0].start,
-                    end: monthSlots[span - 1].end,
+                    end: setTime(monthSlots[span - 1].end, END_OF_DAY_DATE),
                     span: span,
                     text: this.intlService.formatDate(slotEnd, yearFormat),
                     slotWidth: this.options.slotWidth

package/esm2020/timeline/view-base.mjs

@@ -38,7 +38,7 @@ export class ViewBase {
     }
 }
 ViewBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ViewBase, deps: [{ token: i1.OptionChangesService }, { token: i2.DependencyDomService }], target: i0.ɵɵFactoryTarget.Directive });
-ViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ViewBase, selector: "kendo-gantt-view-base", inputs: { slotWidth: "slotWidth", timelineHeadersDateFormat: "timelineHeadersDateFormat" }, usesOnChanges: true, ngImport: i0 });
+ViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ViewBase, selector: "kendo-gantt-view-base", inputs: { slotWidth: "slotWidth", timelineHeadersDateFormat: "timelineHeadersDateFormat", currentTimeMarker: "currentTimeMarker" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ViewBase, decorators: [{
             type: Directive,
             args: [{
@@ -49,4 +49,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], timelineHeadersDateFormat: [{
                 type: Input
+            }], currentTimeMarker: [{
+                type: Input
             }] } });