feat(tooltip): make event tooltip display delay configurable

projects/angular-calendar/src/modules/common/calendar-tooltip.directive.ts

@@ -74,8 +74,12 @@ export class CalendarTooltipDirective implements OnDestroy {
   @Input('tooltipAppendToBody')
   appendToBody: boolean; // tslint:disable-line no-input-rename
 
+  @Input('tooltipDelay')
+  delay: number | null = null; // tslint:disable-line no-input-rename
+
   private tooltipFactory: ComponentFactory<CalendarTooltipWindowComponent>;
   private tooltipRef: ComponentRef<CalendarTooltipWindowComponent>;
+  private showTooltipTimeoutId: number | null = null;
 
   constructor(
     private elementRef: ElementRef,
@@ -96,11 +100,22 @@ export class CalendarTooltipDirective implements OnDestroy {
 
   @HostListener('mouseenter')
   onMouseOver(): void {
-    this.show();
+    if (this.delay === null) {
+      this.show();
+    } else {
+      this.showTooltipTimeoutId = window.setTimeout(
+        () => this.show(),
+        this.delay
+      );
+    }
   }
 
   @HostListener('mouseleave')
   onMouseOut(): void {
+    if (this.showTooltipTimeoutId !== null) {
+      this.showTooltipTimeoutId = null;
+      clearTimeout(this.showTooltipTimeoutId);
+    }
     this.hide();
   }
 

projects/angular-calendar/src/modules/day/calendar-day-view-event.component.ts

@@ -17,7 +17,8 @@ import { PlacementArray } from 'positioning';
       let-tooltipPlacement="tooltipPlacement"
       let-eventClicked="eventClicked"
       let-tooltipTemplate="tooltipTemplate"
-      let-tooltipAppendToBody="tooltipAppendToBody">
+      let-tooltipAppendToBody="tooltipAppendToBody"
+      let-tooltipDelay="tooltipDelay">
       <div
         class="cal-event"
         [style.backgroundColor]="dayEvent.event.color?.secondary"
@@ -27,6 +28,7 @@ import { PlacementArray } from 'positioning';
         [tooltipEvent]="dayEvent.event"
         [tooltipTemplate]="tooltipTemplate"
         [tooltipAppendToBody]="tooltipAppendToBody"
+        [tooltipDelay]="tooltipDelay"
         (mwlClick)="eventClicked.emit()">
         <mwl-calendar-event-actions
           [event]="dayEvent.event"
@@ -47,7 +49,8 @@ import { PlacementArray } from 'positioning';
         tooltipPlacement: tooltipPlacement,
         eventClicked: eventClicked,
         tooltipTemplate: tooltipTemplate,
-        tooltipAppendToBody: tooltipAppendToBody
+        tooltipAppendToBody: tooltipAppendToBody,
+        tooltipDelay: tooltipDelay
       }">
     </ng-template>
   `
@@ -74,6 +77,9 @@ export class CalendarDayViewEventComponent {
   @Input()
   tooltipTemplate: TemplateRef<any>;
 
+  @Input()
+  tooltipDelay: number | null;
+
   @Output()
   eventClicked: EventEmitter<any> = new EventEmitter();
 }

projects/angular-calendar/src/modules/day/calendar-day-view.component.ts

@@ -89,6 +89,7 @@ export interface DayViewEventResize {
           [tooltipPlacement]="tooltipPlacement"
           [tooltipTemplate]="tooltipTemplate"
           [tooltipAppendToBody]="tooltipAppendToBody"
+          [tooltipDelay]="tooltipDelay"
           [customTemplate]="eventTemplate"
           [eventTitleTemplate]="eventTitleTemplate"
           [eventActionsTemplate]="eventActionsTemplate"
@@ -144,6 +145,7 @@ export interface DayViewEventResize {
               [tooltipPlacement]="tooltipPlacement"
               [tooltipTemplate]="tooltipTemplate"
               [tooltipAppendToBody]="tooltipAppendToBody"
+              [tooltipDelay]="tooltipDelay"
               [customTemplate]="eventTemplate"
               [eventTitleTemplate]="eventTitleTemplate"
               [eventActionsTemplate]="eventActionsTemplate"
@@ -268,6 +270,13 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
   @Input()
   tooltipAppendToBody: boolean = true;
 
+  /**
+   * The delay in milliseconds before the tooltip should be displayed. If not provided the tooltip
+   * will be displayed immediately.
+   */
+  @Input()
+  tooltipDelay: number | null = null;
+
   /**
    * A custom template to use to replace the hour segment
    */

projects/angular-calendar/src/modules/month/calendar-month-cell.component.ts

@@ -22,7 +22,8 @@ import { PlacementArray } from 'positioning';
       let-unhighlightDay="unhighlightDay"
       let-eventClicked="eventClicked"
       let-tooltipTemplate="tooltipTemplate"
-      let-tooltipAppendToBody="tooltipAppendToBody">
+      let-tooltipAppendToBody="tooltipAppendToBody"
+      let-tooltipDelay="tooltipDelay">
       <div class="cal-cell-top">
         <span class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{ day.badgeTotal }}</span>
         <span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
@@ -40,6 +41,7 @@ import { PlacementArray } from 'positioning';
           [tooltipEvent]="event"
           [tooltipTemplate]="tooltipTemplate"
           [tooltipAppendToBody]="tooltipAppendToBody"
+          [tooltipDelay]="tooltipDelay"
           mwlDraggable
           [class.cal-draggable]="event.draggable"
           dragActiveClass="cal-drag-active"
@@ -60,7 +62,8 @@ import { PlacementArray } from 'positioning';
         unhighlightDay: unhighlightDay,
         eventClicked: eventClicked,
         tooltipTemplate: tooltipTemplate,
-        tooltipAppendToBody: tooltipAppendToBody
+        tooltipAppendToBody: tooltipAppendToBody,
+        tooltipDelay: tooltipDelay
       }">
     </ng-template>
   `,
@@ -100,6 +103,9 @@ export class CalendarMonthCellComponent {
   @Input()
   tooltipTemplate: TemplateRef<any>;
 
+  @Input()
+  tooltipDelay: number | null;
+
   @Output()
   highlightDay: EventEmitter<any> = new EventEmitter();
 

projects/angular-calendar/src/modules/month/calendar-month-view.component.ts

@@ -72,6 +72,7 @@ export interface CalendarMonthViewEventTimesChangedEvent<
               [tooltipPlacement]="tooltipPlacement"
               [tooltipAppendToBody]="tooltipAppendToBody"
               [tooltipTemplate]="tooltipTemplate"
+              [tooltipDelay]="tooltipDelay"
               [customTemplate]="cellTemplate"
               (mwlClick)="dayClicked.emit({ day: day })"
               (highlightDay)="toggleDayHighlight($event.event, true)"
@@ -155,6 +156,13 @@ export class CalendarMonthViewComponent
   @Input()
   tooltipAppendToBody: boolean = true;
 
+  /**
+   * The delay in milliseconds before the tooltip should be displayed. If not provided the tooltip
+   * will be displayed immediately.
+   */
+  @Input()
+  tooltipDelay: number | null = null;
+
   /**
    * The start number of the week
    */

projects/angular-calendar/src/modules/week/calendar-week-view-event.component.ts

@@ -18,7 +18,8 @@ import { PlacementArray } from 'positioning';
       let-eventClicked="eventClicked"
       let-tooltipTemplate="tooltipTemplate"
       let-tooltipAppendToBody="tooltipAppendToBody"
-      let-tooltipDisabled="tooltipDisabled">
+      let-tooltipDisabled="tooltipDisabled"
+      let-tooltipDelay="tooltipDelay">
       <div
         class="cal-event"
         [style.backgroundColor]="weekEvent.event.color?.secondary"
@@ -28,6 +29,7 @@ import { PlacementArray } from 'positioning';
         [tooltipEvent]="weekEvent.event"
         [tooltipTemplate]="tooltipTemplate"
         [tooltipAppendToBody]="tooltipAppendToBody"
+        [tooltipDelay]="tooltipDelay"
         (mwlClick)="eventClicked.emit()">
         <mwl-calendar-event-actions
           [event]="weekEvent.event"
@@ -49,7 +51,8 @@ import { PlacementArray } from 'positioning';
         eventClicked: eventClicked,
         tooltipTemplate: tooltipTemplate,
         tooltipAppendToBody: tooltipAppendToBody,
-        tooltipDisabled: tooltipDisabled
+        tooltipDisabled: tooltipDisabled,
+        tooltipDelay: tooltipDelay
       }">
     </ng-template>
   `
@@ -67,6 +70,9 @@ export class CalendarWeekViewEventComponent {
   @Input()
   tooltipDisabled: boolean;
 
+  @Input()
+  tooltipDelay: number | null;
+
   @Input()
   customTemplate: TemplateRef<any>;
 

projects/angular-calendar/src/modules/week/calendar-week-view.component.ts

@@ -148,6 +148,7 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
               [tooltipPlacement]="tooltipPlacement"
               [tooltipTemplate]="tooltipTemplate"
               [tooltipAppendToBody]="tooltipAppendToBody"
+              [tooltipDelay]="tooltipDelay"
               [customTemplate]="eventTemplate"
               [eventTitleTemplate]="eventTitleTemplate"
               [eventActionsTemplate]="eventActionsTemplate"
@@ -238,6 +239,7 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
                 [tooltipTemplate]="tooltipTemplate"
                 [tooltipAppendToBody]="tooltipAppendToBody"
                 [tooltipDisabled]="dragActive || timeEventResizes.size > 0"
+                [tooltipDelay]="tooltipDelay"
                 [customTemplate]="eventTemplate"
                 [eventTitleTemplate]="eventTitleTemplate"
                 [eventActionsTemplate]="eventActionsTemplate"
@@ -328,6 +330,13 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
   @Input()
   tooltipAppendToBody: boolean = true;
 
+  /**
+   * The delay in milliseconds before the tooltip should be displayed. If not provided the tooltip
+   * will be displayed immediately.
+   */
+  @Input()
+  tooltipDelay: number | null = null;
+
   /**
    * The start number of the week
    */