@progress/kendo-angular-scheduler 4.0.0-next.202204060921 → 4.1.0-dev.202205110813

package/esm2015/views/day-time/day-time-view.component.js

@@ -9,9 +9,10 @@ import { fromEvent } from 'rxjs';
 import { toInvariantTime, dateInRange, setCoordinates, dateWithTime, toUTCTime, toUTCDateTime } from '../utils';
 import { createTimeSlots } from './utils';
 import { BaseView } from '../common/base-view';
-import { MIDNIGHT_INVARIANT, MS_PER_MINUTE } from '../constants';
-import { fromClick, fromDoubleClick, isNumber } from '../../common/util';
+import { MIDNIGHT_INVARIANT, MS_PER_MINUTE, ONGOING_EVENT_CSS_CLASS } from '../constants';
+import { fromClick, fromDoubleClick, isNumber, isPresent } from '../../common/util';
 import { rtlScrollPosition, hasClasses } from '../../common/dom-queries';
+import { DayTimeViewItemComponent } from './day-time-view-item.component';
 import * as i0 from "@angular/core";
 import * as i1 from "../view-context.service";
 import * as i2 from "../view-state.service";
@@ -49,6 +50,8 @@ export class DayTimeViewComponent extends BaseView {
         this.verticalTime = true;
         this.initialUpdate = true;
         this.updateCurrentTime = this.updateCurrentTime.bind(this);
+        this.toggleOngoingClass = this.toggleOngoingClass.bind(this);
+        this.updateOngoingEvents = this.updateOngoingEvents.bind(this);
     }
     get classNames() {
         return `k-scheduler-${this.name}view`;
@@ -77,6 +80,7 @@ export class DayTimeViewComponent extends BaseView {
     ngOnDestroy() {
         super.ngOnDestroy();
         clearTimeout(this.currentTimeTimeout);
+        clearTimeout(this.ongoingEventsTimeout);
     }
     verticalItem(leafIndex, resourceIndex) {
         const data = this.verticalResources[resourceIndex].data || [];
@@ -97,6 +101,14 @@ export class DayTimeViewComponent extends BaseView {
             });
         }
     }
+    toggleOngoingClass() {
+        const now = this.currentTime();
+        const cssClass = isPresent(this.highlightOngoingEvents.cssClass) ? this.highlightOngoingEvents.cssClass : ONGOING_EVENT_CSS_CLASS;
+        this.eventElements.forEach((event) => {
+            const isOngoing = dateInRange(now, event.item.start, event.item.end);
+            this.renderer[isOngoing ? 'addClass' : 'removeClass'](event.nativeElement, cssClass);
+        });
+    }
     scrollToTime(time = this.scrollTime) {
         let date;
         if (typeof time === 'string') {
@@ -124,6 +136,7 @@ export class DayTimeViewComponent extends BaseView {
     updateView() {
         super.updateView();
         this.updateCurrentTime();
+        this.updateOngoingEvents();
         if (this.initialUpdate) {
             this.scrollToTime();
             this.initialUpdate = false;
@@ -162,6 +175,17 @@ export class DayTimeViewComponent extends BaseView {
             this.positionCurrentTime();
         }
     }
+    updateOngoingEvents() {
+        const disabled = !this.highlightOngoingEvents || this.highlightOngoingEvents.enabled === false;
+        if (!isDocumentAvailable() || disabled) {
+            return;
+        }
+        clearTimeout(this.ongoingEventsTimeout);
+        this.zone.runOutsideAngular(() => {
+            this.ongoingEventsTimeout = setTimeout(this.updateOngoingEvents, this.highlightOngoingEvents.updateInterval || MS_PER_MINUTE);
+        });
+        this.toggleOngoingClass();
+    }
     positionCurrentTime() {
         if (this.currentTimeElements && this.currentTimeElements.length) {
             const date = this.currentDate.toUTCDate();
@@ -308,7 +332,7 @@ export class DayTimeViewComponent extends BaseView {
     }
 }
 DayTimeViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ViewContextService }, { token: i2.ViewStateService }, { token: i3.IntlService }, { token: i4.DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i5.PDFService }, { token: i6.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-DayTimeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DayTimeViewComponent, selector: "kendo-day-time-view", inputs: { timeSlotTemplate: "timeSlotTemplate", dateHeaderTemplate: "dateHeaderTemplate", numberOfDays: "numberOfDays", scrollTime: "scrollTime", startTime: "startTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", slotDuration: "slotDuration", slotDivisions: "slotDivisions", showWorkHours: "showWorkHours", getStartDate: "getStartDate", getEndDate: "getEndDate", getNextDate: "getNextDate", currentTimeMarker: "currentTimeMarker" }, viewQueries: [{ propertyName: "currentTimeElements", predicate: ["currentTimeMarker"], descendants: true }, { propertyName: "currentTimeArrows", predicate: ["currentTimeArrow"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
+DayTimeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DayTimeViewComponent, selector: "kendo-day-time-view", inputs: { timeSlotTemplate: "timeSlotTemplate", dateHeaderTemplate: "dateHeaderTemplate", numberOfDays: "numberOfDays", scrollTime: "scrollTime", startTime: "startTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", slotDuration: "slotDuration", slotDivisions: "slotDivisions", showWorkHours: "showWorkHours", getStartDate: "getStartDate", getEndDate: "getEndDate", getNextDate: "getNextDate", currentTimeMarker: "currentTimeMarker", highlightOngoingEvents: "highlightOngoingEvents" }, viewQueries: [{ propertyName: "currentTimeElements", predicate: ["currentTimeMarker"], descendants: true }, { propertyName: "eventElements", predicate: DayTimeViewItemComponent, descendants: true }, { propertyName: "currentTimeArrows", predicate: ["currentTimeArrow"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kendo-day-time-view', template: '' }]
@@ -346,9 +370,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], currentTimeMarker: [{
                 type: Input
+            }], highlightOngoingEvents: [{
+                type: Input
             }], currentTimeElements: [{
                 type: ViewChildren,
                 args: ['currentTimeMarker']
+            }], eventElements: [{
+                type: ViewChildren,
+                args: [DayTimeViewItemComponent]
             }], currentTimeArrows: [{
                 type: ViewChildren,
                 args: ['currentTimeArrow']

package/esm2015/views/month/month-view-renderer.component.js

@@ -2,14 +2,17 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input } from '@angular/core';
-import { isChanged } from '@progress/kendo-angular-common';
+import { Component, Input, ViewChildren } from '@angular/core';
+import { isChanged, isDocumentAvailable } from '@progress/kendo-angular-common';
 import { addDays, addMonths, firstDayInWeek, firstDayOfMonth, getDate, toLocalDate } from '@progress/kendo-date-math';
 import { closestInScope, hasClasses } from '../../common/dom-queries';
 import { MonthSlotService } from './month-slot.service';
 import { updateTaskData, createTasks } from './utils';
-import { toPx } from '../utils';
+import { toPx, dateInRange } from '../utils';
 import { BaseView } from '../common/base-view';
+import { MonthViewItemComponent } from './month-view-item.component';
+import { isPresent } from '../../common/util';
+import { DAYS_IN_WEEK_COUNT, WEEKS_COUNT, MS_PER_MINUTE, ONGOING_EVENT_CSS_CLASS } from '../constants';
 import * as i0 from "@angular/core";
 import * as i1 from "../view-context.service";
 import * as i2 from "../view-state.service";
@@ -25,8 +28,6 @@ import * as i11 from "./month-slot.directive";
 import * as i12 from "../../navigation/focusable.directive";
 import * as i13 from "../common/resource-iterator.pipe";
 import * as i14 from "../common/repeat.pipe";
-const DAYS_IN_WEEK_COUNT = 7;
-const WEEKS_COUNT = 6;
 /**
  * @hidden
  */
@@ -35,6 +36,7 @@ export class MonthViewRendererComponent extends BaseView {
         super(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, changeDetector);
         this.resizeHintFormat = { skeleton: 'Md' };
         this.weeks = [];
+        this.updateOngoingEvents = this.updateOngoingEvents.bind(this);
     }
     get monthDaySlotTemplateRef() {
         return this.monthDaySlotTemplate || (this.schedulerMonthDaySlotTemplate || {}).templateRef;
@@ -45,6 +47,14 @@ export class MonthViewRendererComponent extends BaseView {
         }
         super.ngOnChanges(changes);
     }
+    ngAfterViewInit() {
+        this.updateOngoingEvents();
+        super.ngAfterViewInit();
+    }
+    ngOnDestroy() {
+        clearTimeout(this.ongoingEventsTimeout);
+        super.ngOnDestroy();
+    }
     horizontalColspan(resourceIndex) {
         const resources = this.horizontalResources;
         let result = DAYS_IN_WEEK_COUNT;
@@ -172,6 +182,28 @@ export class MonthViewRendererComponent extends BaseView {
     slotByPosition(x, y) {
         return this.slotService.slotByPosition(x, y);
     }
+    updateOngoingEvents() {
+        const disabled = !this.highlightOngoingEvents || this.highlightOngoingEvents.enabled === false;
+        if (!isDocumentAvailable() || disabled) {
+            return;
+        }
+        clearTimeout(this.ongoingEventsTimeout);
+        this.zone.runOutsideAngular(() => {
+            this.ongoingEventsTimeout = setTimeout(this.updateOngoingEvents, this.highlightOngoingEvents.updateInterval || MS_PER_MINUTE);
+        });
+        this.toggleOngoingClass();
+    }
+    currentTime() {
+        return new Date();
+    }
+    toggleOngoingClass() {
+        const now = this.currentTime();
+        const cssClass = isPresent(this.highlightOngoingEvents.cssClass) ? this.highlightOngoingEvents.cssClass : ONGOING_EVENT_CSS_CLASS;
+        this.eventElements.forEach((event) => {
+            const isOngoing = dateInRange(now, event.item.start, event.item.end);
+            this.renderer[isOngoing ? 'addClass' : 'removeClass'](event.nativeElement, cssClass);
+        });
+    }
     createDaySlots({ start }) {
         const weeks = [];
         let date = start;
@@ -187,9 +219,9 @@ export class MonthViewRendererComponent extends BaseView {
     }
 }
 MonthViewRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthViewRendererComponent, deps: [{ token: i1.ViewContextService }, { token: i2.ViewStateService }, { token: i3.IntlService }, { token: i4.MonthSlotService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i5.PDFService }, { token: i6.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MonthViewRendererComponent, selector: "month-view", inputs: { monthDaySlotTemplate: "monthDaySlotTemplate" }, providers: [
+MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MonthViewRendererComponent, selector: "month-view", inputs: { monthDaySlotTemplate: "monthDaySlotTemplate", highlightOngoingEvents: "highlightOngoingEvents" }, providers: [
         MonthSlotService
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "eventElements", predicate: MonthViewItemComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <div class="k-scheduler-layout k-scheduler-monthview k-scheduler-flex-layout">
             <div class="k-scheduler-pane">
                 <div class="k-scheduler-times" #timesHeader *ngIf="verticalResources.length">
@@ -436,4 +468,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.ViewContextService }, { type: i2.ViewStateService }, { type: i3.IntlService }, { type: i4.MonthSlotService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i5.PDFService }, { type: i6.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { monthDaySlotTemplate: [{
                 type: Input
+            }], highlightOngoingEvents: [{
+                type: Input
+            }], eventElements: [{
+                type: ViewChildren,
+                args: [MonthViewItemComponent]
             }] } });

package/esm2015/views/month/month-view.component.js

@@ -64,10 +64,11 @@ MonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 [monthDaySlotTemplate]="monthDaySlotTemplate?.templateRef"
                 [selectedDateFormat]="selectedDateFormat"
                 [selectedShortDateFormat]="selectedShortDateFormat"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [weekStart]="viewWeekStart">
             </month-view>
         </ng-template>
-    `, isInline: true, components: [{ type: i4.MonthViewRendererComponent, selector: "month-view", inputs: ["monthDaySlotTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i4.MonthViewRendererComponent, selector: "month-view", inputs: ["monthDaySlotTemplate", "highlightOngoingEvents"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -89,6 +90,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [monthDaySlotTemplate]="monthDaySlotTemplate?.templateRef"
                 [selectedDateFormat]="selectedDateFormat"
                 [selectedShortDateFormat]="selectedShortDateFormat"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [weekStart]="viewWeekStart">
             </month-view>
         </ng-template>

package/esm2015/views/multi-day/day-view.component.js

@@ -69,6 +69,7 @@ DayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
                 [name]="name"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -112,6 +113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [name]="name"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"

package/esm2015/views/multi-day/multi-day-view.component.js

@@ -77,6 +77,7 @@ MultiDayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [numberOfDays]="numberOfDays"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -122,6 +123,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [numberOfDays]="numberOfDays"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"

package/esm2015/views/multi-day/week-view.component.js

@@ -69,6 +69,7 @@ WeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 [getStartDate]="getStartDate"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -115,6 +116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [getStartDate]="getStartDate"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"

package/esm2015/views/multi-day/work-week-view.component.js

@@ -69,6 +69,7 @@ WorkWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [getNextDate]="getNextDate"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -116,6 +117,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [getNextDate]="getNextDate"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"

package/esm2015/views/timeline/timeline-month-view.component.js

@@ -78,6 +78,7 @@ TimelineMonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -121,6 +122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"

package/esm2015/views/timeline/timeline-view.component.js

@@ -55,6 +55,7 @@ TimelineViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -94,6 +95,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"

package/esm2015/views/timeline/timeline-week-view.component.js

@@ -68,6 +68,7 @@ TimelineWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -111,6 +112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"

package/esm2015/views/utils.js

@@ -145,7 +145,11 @@ export function eventResources(event, { taskResources, hasGroups, spans, allReso
         for (let valueIdx = 0; valueIdx < values.length; valueIdx++) {
             const dataIdx = getDataIdx(values[valueIdx], resource);
             if (dataIdx < 0) {
-                return [{ leafIdx: hasGroups ? -1 : 0, resources: [] }];
+                if (hasGroups) {
+                    // No match for this resource, but the event might still match other resources.
+                    continue;
+                }
+                return [{ leafIdx: 0, resources: [] }];
             }
             const item = resource.data[dataIdx];
             // has groups - need all copies of the multiple resource