fix: ensure compatibility with angular 9 and ivy

BREAKING CHANGE: If extending the week view component the trackBy function `trackByDayOrWeekEvent` was split into `trackByWeekAllDayEvent` and `trackByWeekTimeEvent`

Closes #1086

package.json

@@ -142,9 +142,9 @@
     "zone.js": "~0.9.1"
   },
   "peerDependencies": {
-    "@angular/animations": ">=6.0.0 <9.0.0",
-    "@angular/common": ">=6.0.0 <9.0.0",
-    "@angular/core": ">=6.0.0 <9.0.0"
+    "@angular/animations": ">=6.0.0 <10.0.0",
+    "@angular/common": ">=6.0.0 <10.0.0",
+    "@angular/core": ">=6.0.0 <10.0.0"
   },
   "dependencies": {
     "angular-draggable-droppable": "^4.3.2",

projects/angular-calendar/src/modules/common/calendar-a11y.provider.ts

@@ -10,12 +10,14 @@ import { A11yParams } from './calendar-a11y.interface';
  * ```typescript
  * import { A11yParams, CalendarA11y } from 'angular-calendar';
  * import { formatDate, I18nPluralPipe } from '@angular/common';
+ * import { Injectable } from '@angular/core';
  *
  * // adding your own a11y params
  * export interface CustomA11yParams extends A11yParams {
  *   isDrSuess?: boolean;
  * }
  *
+ * @Injectable()
  * export class CustomCalendarA11y extends CalendarA11y {
  *   constructor(protected i18nPlural: I18nPluralPipe) {
  *     super(i18nPlural);

projects/angular-calendar/src/modules/common/calendar-date-formatter.provider.ts

@@ -9,7 +9,9 @@ import { Injectable } from '@angular/core';
  * ```typescript
  * import { CalendarDateFormatter, DateFormatterParams } from 'angular-calendar';
  * import { formatDate } from '@angular/common';
+ * import { Injectable } from '@angular/core';
  *
+ * @Injectable()
  * class CustomDateFormatter extends CalendarDateFormatter {
  *
  *   public monthViewColumnHeader({date, locale}: DateFormatterParams): string {

projects/angular-calendar/src/modules/common/calendar-event-title-formatter.provider.ts

@@ -4,8 +4,10 @@ import { CalendarEvent } from 'calendar-utils';
  * This class is responsible for displaying all event titles within the calendar. You may override any of its methods via angulars DI to suit your requirements. For example:
  *
  * ```typescript
+ * import { Injectable } from '@angular/core';
  * import { CalendarEventTitleFormatter, CalendarEvent } from 'angular-calendar';
  *
+ * @Injectable()
  * class CustomEventTitleFormatter extends CalendarEventTitleFormatter {
  *
  *   month(event: CalendarEvent): string {

projects/angular-calendar/src/modules/common/calendar-next-view.directive.ts

@@ -28,7 +28,7 @@ export class CalendarNextViewDirective {
   /**
    * The current view
    */
-  @Input() view: CalendarView;
+  @Input() view: CalendarView | 'month' | 'week' | 'day';
 
   /**
    * The current view date

projects/angular-calendar/src/modules/common/calendar-previous-view.directive.ts

@@ -28,7 +28,7 @@ export class CalendarPreviousViewDirective {
   /**
    * The current view
    */
-  @Input() view: CalendarView;
+  @Input() view: CalendarView | 'month' | 'week' | 'day';
 
   /**
    * The current view date

projects/angular-calendar/src/modules/common/util.ts

@@ -46,9 +46,14 @@ export const trackByHourSegment = (
 export const trackByHour = (index: number, hour: WeekViewHour) =>
   hour.segments[0].date.toISOString();
 
-export const trackByDayOrWeekEvent = (
+export const trackByWeekAllDayEvent = (
   index: number,
-  weekEvent: WeekViewAllDayEvent | WeekViewTimeEvent
+  weekEvent: WeekViewAllDayEvent
+) => (weekEvent.event.id ? weekEvent.event.id : weekEvent.event);
+
+export const trackByWeekTimeEvent = (
+  index: number,
+  weekEvent: WeekViewTimeEvent
 ) => (weekEvent.event.id ? weekEvent.event.id : weekEvent.event);
 
 const MINUTES_IN_HOUR = 60;

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

@@ -1,5 +1,5 @@
 import { Component, Input, TemplateRef } from '@angular/core';
-import { WeekViewHourColumn } from 'calendar-utils';
+import { WeekViewHourSegment } from 'calendar-utils';
 
 @Component({
   selector: 'mwl-calendar-week-view-hour-segment',
@@ -50,7 +50,7 @@ import { WeekViewHourColumn } from 'calendar-utils';
   `
 })
 export class CalendarWeekViewHourSegmentComponent {
-  @Input() segment: WeekViewHourColumn;
+  @Input() segment: WeekViewHourSegment;
 
   @Input() segmentHeight: number;
 

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

@@ -42,10 +42,11 @@ import {
   getDefaultEventEnd,
   getMinimumEventHeightInMinutes,
   addDaysWithExclusions,
-  trackByDayOrWeekEvent,
   isDraggedWithinPeriod,
   shouldFireDroppedEvent,
-  getWeekViewPeriod
+  getWeekViewPeriod,
+  trackByWeekAllDayEvent,
+  trackByWeekTimeEvent
 } from '../common/util';
 import { DateAdapter } from '../../date-adapters/date-adapter';
 import {
@@ -121,7 +122,7 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
           <div
             *ngFor="
               let allDayEvent of eventRow.row;
-              trackBy: trackByDayOrWeekEvent
+              trackBy: trackByWeekAllDayEvent
             "
             #event
             class="cal-event-container"
@@ -244,7 +245,7 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
               <div
                 *ngFor="
                   let timeEvent of column.events;
-                  trackBy: trackByDayOrWeekEvent
+                  trackBy: trackByWeekTimeEvent
                 "
                 #event
                 class="cal-event-container"
@@ -654,7 +655,12 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
   /**
    * @hidden
    */
-  trackByDayOrWeekEvent = trackByDayOrWeekEvent;
+  trackByWeekAllDayEvent = trackByWeekAllDayEvent;
+
+  /**
+   * @hidden
+   */
+  trackByWeekTimeEvent = trackByWeekTimeEvent;
 
   /**
    * @hidden

projects/demos/app/demo-modules/additional-event-properties/component.ts

@@ -1,5 +1,5 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { CalendarEvent } from 'angular-calendar';
+import { CalendarEvent, CalendarView } from 'angular-calendar';
 import { colors } from '../demo-utils/colors';
 
 @Component({
@@ -8,7 +8,7 @@ import { colors } from '../demo-utils/colors';
   templateUrl: 'template.html'
 })
 export class DemoComponent {
-  view: string = 'month';
+  view: CalendarView = CalendarView.Month;
 
   viewDate: Date = new Date();
 

projects/demos/app/demo-modules/async-events/component.ts

@@ -1,7 +1,7 @@
 import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { map } from 'rxjs/operators';
-import { CalendarEvent } from 'angular-calendar';
+import { CalendarEvent, CalendarView } from 'angular-calendar';
 import {
   isSameMonth,
   isSameDay,
@@ -39,7 +39,7 @@ function getTimezoneOffsetString(date: Date): string {
   templateUrl: 'template.html'
 })
 export class DemoComponent implements OnInit {
-  view: string = 'month';
+  view: CalendarView = CalendarView.Month;
 
   viewDate: Date = new Date();
 

projects/demos/app/demo-modules/before-view-render/component.ts

@@ -7,7 +7,8 @@ import {
   CalendarEvent,
   CalendarMonthViewBeforeRenderEvent,
   CalendarWeekViewBeforeRenderEvent,
-  CalendarDayViewBeforeRenderEvent
+  CalendarDayViewBeforeRenderEvent,
+  CalendarView
 } from 'angular-calendar';
 
 @Component({
@@ -24,7 +25,7 @@ import {
   ]
 })
 export class DemoComponent {
-  view: string = 'month';
+  view: CalendarView = CalendarView.Month;
 
   viewDate: Date = new Date();
 

projects/demos/app/demo-modules/clickable-days/component.ts

@@ -1,13 +1,13 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { CalendarEvent } from 'angular-calendar';
+import { CalendarEvent, CalendarView } from 'angular-calendar';
 
 @Component({
   selector: 'mwl-demo-component',
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: 'template.html'
 })
 export class DemoComponent {
-  view: string = 'month';
+  view: CalendarView = CalendarView.Month;
 
   viewDate: Date = new Date();
 

projects/demos/app/demo-modules/clickable-events/component.ts

@@ -1,5 +1,5 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { CalendarEvent } from 'angular-calendar';
+import { CalendarEvent, CalendarView } from 'angular-calendar';
 import { colors } from '../demo-utils/colors';
 
 @Component({
@@ -8,7 +8,7 @@ import { colors } from '../demo-utils/colors';
   templateUrl: 'template.html'
 })
 export class DemoComponent {
-  view: string = 'month';
+  view: CalendarView = CalendarView.Month;
 
   viewDate: Date = new Date();
 

projects/demos/app/demo-modules/context-menu/component.ts

@@ -1,5 +1,5 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { CalendarEvent } from 'angular-calendar';
+import { CalendarEvent, CalendarView } from 'angular-calendar';
 import { Subject } from 'rxjs';
 import { colors } from '../demo-utils/colors';
 
@@ -19,7 +19,7 @@ import { colors } from '../demo-utils/colors';
   ]
 })
 export class DemoComponent {
-  view: string = 'month';
+  view: CalendarView = CalendarView.Month;
 
   viewDate: Date = new Date();
 

projects/demos/app/demo-modules/custom-event-class/component.ts

@@ -3,7 +3,7 @@ import {
   ChangeDetectionStrategy,
   ViewEncapsulation
 } from '@angular/core';
-import { CalendarEvent } from 'angular-calendar';
+import { CalendarEvent, CalendarView } from 'angular-calendar';
 import { colors } from '../demo-utils/colors';
 
 @Component({
@@ -21,7 +21,7 @@ import { colors } from '../demo-utils/colors';
   ]
 })
 export class DemoComponent {
-  view: string = 'month';
+  view: CalendarView = CalendarView.Month;
 
   viewDate: Date = new Date();
 

projects/demos/app/demo-modules/custom-templates/component.ts

@@ -1,13 +1,13 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { CalendarEvent } from 'angular-calendar';
+import { CalendarEvent, CalendarView } from 'angular-calendar';
 
 @Component({
   selector: 'mwl-demo-component',
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: 'template.html'
 })
 export class DemoComponent {
-  view: string = 'month';
+  view: CalendarView = CalendarView.Month;
 
   viewDate: Date = new Date();
 

projects/demos/app/demo-modules/customise-date-formats/component.ts

@@ -1,5 +1,9 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { CalendarEvent, CalendarDateFormatter } from 'angular-calendar';
+import {
+  CalendarEvent,
+  CalendarDateFormatter,
+  CalendarView
+} from 'angular-calendar';
 import { CustomDateFormatter } from './custom-date-formatter.provider';
 
 @Component({
@@ -14,7 +18,7 @@ import { CustomDateFormatter } from './custom-date-formatter.provider';
   ]
 })
 export class DemoComponent {
-  view: string = 'month';
+  view: CalendarView = CalendarView.Month;
 
   viewDate: Date = new Date();
 

projects/demos/app/demo-modules/customise-date-formats/custom-date-formatter.provider.ts

@@ -1,6 +1,8 @@
 import { CalendarDateFormatter, DateFormatterParams } from 'angular-calendar';
 import { DatePipe } from '@angular/common';
+import { Injectable } from '@angular/core';
 
+@Injectable()
 export class CustomDateFormatter extends CalendarDateFormatter {
   // you can override any of the methods defined in the parent class
 

projects/demos/app/demo-modules/day-view-hour-split/component.ts

@@ -1,13 +1,13 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { CalendarEvent } from 'angular-calendar';
+import { CalendarEvent, CalendarView } from 'angular-calendar';
 
 @Component({
   selector: 'mwl-demo-component',
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: 'template.html'
 })
 export class DemoComponent {
-  view: string = 'day';
+  view: CalendarView = CalendarView.Day;
 
   viewDate: Date = new Date();
 

projects/demos/app/demo-modules/day-view-scheduler/day-view-scheduler.component.html

@@ -42,10 +42,7 @@
         *ngFor="let column of view.hourColumns; trackBy: trackByHourColumn"
       >
         <div
-          *ngFor="
-            let timeEvent of column.events;
-            trackBy: trackByDayOrWeekEvent
-          "
+          *ngFor="let timeEvent of column.events; trackBy: trackByWeekTimeEvent"
           #event
           class="cal-event-container"
           [class.cal-draggable]="
@@ -113,7 +110,12 @@
             [eventTitleTemplate]="eventTitleTemplate"
             [eventActionsTemplate]="eventActionsTemplate"
             [column]="column"
-            (eventClicked)="eventClicked.emit({ event: timeEvent.event })"
+            (eventClicked)="
+              eventClicked.emit({
+                event: timeEvent.event,
+                sourceEvent: $event.sourceEvent
+              })
+            "
           >
           </mwl-calendar-week-view-event>
           <div
@@ -141,7 +143,12 @@
             [segmentHeight]="hourSegmentHeight"
             [locale]="locale"
             [customTemplate]="hourSegmentTemplate"
-            (mwlClick)="hourSegmentClicked.emit({ date: segment.date })"
+            (mwlClick)="
+              hourSegmentClicked.emit({
+                date: segment.date,
+                sourceEvent: $event
+              })
+            "
             [clickListenerDisabled]="hourSegmentClicked.observers.length === 0"
             mwlDroppable
             [dragOverClass]="

projects/demos/app/demo-modules/day-view-start-end/component.ts

@@ -1,13 +1,13 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { CalendarEvent } from 'angular-calendar';
+import { CalendarEvent, CalendarView } from 'angular-calendar';
 
 @Component({
   selector: 'mwl-demo-component',
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: 'template.html'
 })
 export class DemoComponent {
-  view: string = 'day';
+  view: CalendarView = CalendarView.Day;
 
   viewDate: Date = new Date();
 

projects/demos/app/demo-modules/demo-utils/calendar-header.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CalendarView } from 'angular-calendar';
 
 @Component({
   selector: 'mwl-demo-utils-calendar-header',
@@ -67,7 +68,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
   `
 })
 export class CalendarHeaderComponent {
-  @Input() view: string;
+  @Input() view: CalendarView | 'month' | 'week' | 'day';
 
   @Input() viewDate: Date;