feat: upgrade the drag and drop library

BREAKING CHANGE: there were some minor breaking changes in the drag and drop library that might affect your app if you were using it outside of the calendar. See the changelog for more info: https://github.com/mattlewis92/angular-draggable-droppable/blob/master/CHANGELOG.md

Author: mattlewis92

demos/demo-modules/context-menu/template.html

@@ -49,7 +49,6 @@
       [class.cal-today]="day.isToday"
       [class.cal-future]="day.isFuture"
       [class.cal-weekend]="day.isWeekend"
-      [class.cal-drag-over]="day.dragOver"
       (click)="dayHeaderClicked.emit({day: day})"
       [contextMenu]="basicMenu"
       [contextMenuSubject]="day.date">
@@ -93,4 +92,4 @@
     [refresh]="refresh"
     [hourSegmentTemplate]="dayHourSegmentTemplate">
   </mwl-calendar-day-view>
-</div>
+</div>

karma.conf.ts

@@ -78,7 +78,7 @@ export default config => {
       },
       plugins: [
         new FilterWarningsPlugin({
-          exclude: /export '\w+' was not found in 'calendar-utils'/
+          exclude: /was not found in 'calendar-utils'/
         }),
         ...(config.singleRun
           ? [

package-lock.json

@@ -163,7 +163,7 @@
     "@angular/core": ">=6.0.0 <8.0.0"
   },
   "dependencies": {
-    "angular-draggable-droppable": "^3.0.0",
+    "angular-draggable-droppable": "^4.0.0-alpha.10",
     "angular-resizable-element": "^3.0.0",
     "calendar-utils": "^0.2.0-alpha.5",
     "positioning": "^1.3.1"

package.json

@@ -1,5 +1,4 @@
 import { NgModule, ModuleWithProviders, Provider } from '@angular/core';
-import { DraggableHelper } from 'angular-draggable-droppable';
 import {
   CalendarCommonModule,
   CalendarModuleConfig,
@@ -52,7 +51,6 @@ export class CalendarModule {
     return {
       ngModule: CalendarModule,
       providers: [
-        DraggableHelper,
         calendarUtils,
         config.eventTitleFormatter || CalendarEventTitleFormatter,
         config.dateFormatter || CalendarDateFormatter

src/modules/calendar.module.ts

@@ -1,6 +1,5 @@
 import { ModuleWithProviders, NgModule, Provider } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { DraggableHelper } from 'angular-draggable-droppable';
 import { CalendarEventActionsComponent } from './calendar-event-actions.component';
 import { CalendarEventTitleComponent } from './calendar-event-title.component';
 import {
@@ -90,7 +89,6 @@ export class CalendarCommonModule {
     return {
       ngModule: CalendarCommonModule,
       providers: [
-        DraggableHelper,
         calendarUtils,
         config.eventTitleFormatter || CalendarEventTitleFormatter,
         config.dateFormatter || CalendarDateFormatter

src/modules/common/calendar-common.module.ts

@@ -116,11 +116,9 @@ export interface DayViewEventResize {
             [locale]="locale"
             [customTemplate]="hourSegmentTemplate"
             (click)="hourSegmentClicked.emit({date: segment.date})"
-            [class.cal-drag-over]="segment.dragOver"
             mwlDroppable
-            (dragEnter)="segment.dragOver = true"
-            (dragLeave)="segment.dragOver = false"
-            (drop)="segment.dragOver = false; eventDropped($event, segment)">
+            dragOverClass="cal-drag-over"
+            (drop)="eventDropped($event, segment)">
           </mwl-calendar-day-view-hour-segment>
         </div>
       </div>

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

@@ -58,7 +58,6 @@ export interface CalendarMonthViewEventTimesChangedEvent
           <div class="cal-cell-row">
             <mwl-calendar-month-cell
               *ngFor="let day of (view.days | slice : rowIndex : rowIndex + (view.totalDaysVisibleInWeek)); trackBy:trackByDate"
-              [class.cal-drag-over]="day.dragOver"
               [ngClass]="day?.cssClass"
               [day]="day"
               [openDay]="openDay"
@@ -71,9 +70,8 @@ export interface CalendarMonthViewEventTimesChangedEvent
               (highlightDay)="toggleDayHighlight($event.event, true)"
               (unhighlightDay)="toggleDayHighlight($event.event, false)"
               mwlDroppable
-              (dragEnter)="day.dragOver = true"
-              (dragLeave)="day.dragOver = false"
-              (drop)="day.dragOver = false; eventDropped(day, $event.dropData.event)"
+              dragOverClass="cal-drag-over"
+              (drop)="eventDropped(day, $event.dropData.event)"
               (eventClicked)="eventClicked.emit({event: $event.event})">
             </mwl-calendar-month-cell>
           </div>

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

@@ -25,13 +25,11 @@ import { trackByWeekDayHeaderDate } from '../common/util';
           [class.cal-today]="day.isToday"
           [class.cal-future]="day.isFuture"
           [class.cal-weekend]="day.isWeekend"
-          [class.cal-drag-over]="day.dragOver"
           [ngClass]="day.cssClass"
           (mwlClick)="dayHeaderClicked.emit({day: day})"
           mwlDroppable
-          (dragEnter)="day.dragOver = true"
-          (dragLeave)="day.dragOver = false"
-          (drop)="day.dragOver = false; eventDropped.emit({event: $event.dropData.event, newStart: day.date})">
+          dragOVerClass="cal-drag-over"
+          (drop)="eventDropped.emit({event: $event.dropData.event, newStart: day.date})">
           <b>{{ day.date | calendarDate:'weekViewColumnHeader':locale }}</b><br>
           <span>{{ day.date | calendarDate:'weekViewColumnSubHeader':locale }}</span>
         </div>

src/modules/week/calendar-week-view-header.component.ts

@@ -653,7 +653,7 @@ describe('CalendarDayViewComponent component', () => {
     fixture.detectChanges();
     document.body.appendChild(fixture.nativeElement);
     const event: HTMLElement = fixture.nativeElement.querySelector(
-      '.cal-event'
+      '.cal-event-container'
     );
     const eventPosition: ClientRect = event.getBoundingClientRect();
     let dragEvent: CalendarEventTimesChangedEvent;
@@ -670,8 +670,11 @@ describe('CalendarDayViewComponent component', () => {
       clientX: eventPosition.left + 10
     });
     fixture.detectChanges();
-    expect(event.getBoundingClientRect().top).to.equal(eventPosition.top + 30);
-    expect(event.getBoundingClientRect().bottom).to.equal(
+    const ghostElement = event.nextSibling as HTMLElement;
+    expect(ghostElement.getBoundingClientRect().top).to.equal(
+      eventPosition.top + 30
+    );
+    expect(ghostElement.getBoundingClientRect().bottom).to.equal(
       eventPosition.bottom + 30
     );
     triggerDomEvent('mouseup', document.body, {
@@ -718,7 +721,7 @@ describe('CalendarDayViewComponent component', () => {
     fixture.detectChanges();
     document.body.appendChild(fixture.nativeElement);
     const event: HTMLElement = fixture.nativeElement.querySelector(
-      '.cal-event'
+      '.cal-event-container'
     );
     const eventPosition: ClientRect = event.getBoundingClientRect();
     const calendarPosition: ClientRect = fixture.nativeElement.getBoundingClientRect();
@@ -732,17 +735,22 @@ describe('CalendarDayViewComponent component', () => {
       clientX: eventPosition.left + 10
     });
     fixture.detectChanges();
-    expect(event.getBoundingClientRect().top).to.equal(calendarPosition.top);
-    expect(event.getBoundingClientRect().bottom).to.equal(
+    const ghostElement = event.nextSibling as HTMLElement;
+    expect(ghostElement.getBoundingClientRect().top).to.equal(
+      calendarPosition.top
+    );
+    expect(ghostElement.getBoundingClientRect().bottom).to.equal(
       calendarPosition.top + eventPosition.height
     );
     triggerDomEvent('mousemove', document.body, {
       clientY: calendarPosition.top - 60,
       clientX: eventPosition.left + 10
     });
     fixture.detectChanges();
-    expect(event.getBoundingClientRect().top).to.equal(calendarPosition.top);
-    expect(event.getBoundingClientRect().bottom).to.equal(
+    expect(ghostElement.getBoundingClientRect().top).to.equal(
+      calendarPosition.top
+    );
+    expect(ghostElement.getBoundingClientRect().bottom).to.equal(
       calendarPosition.top + eventPosition.height
     );
     triggerDomEvent('mouseup', document.body, {
@@ -888,7 +896,7 @@ describe('CalendarDayViewComponent component', () => {
     fixture.detectChanges();
     document.body.appendChild(fixture.nativeElement);
     const event: HTMLElement = fixture.nativeElement.querySelector(
-      '.cal-event'
+      '.cal-event-container'
     );
     const eventPosition: ClientRect = event.getBoundingClientRect();
     let dragEvent: CalendarEventTimesChangedEvent;
@@ -905,8 +913,11 @@ describe('CalendarDayViewComponent component', () => {
       clientX: eventPosition.left + 10
     });
     fixture.detectChanges();
-    expect(event.getBoundingClientRect().top).to.equal(eventPosition.top + 10);
-    expect(event.getBoundingClientRect().bottom).to.equal(
+    const ghostElement = event.nextSibling as HTMLElement;
+    expect(ghostElement.getBoundingClientRect().top).to.equal(
+      eventPosition.top + 10
+    );
+    expect(ghostElement.getBoundingClientRect().bottom).to.equal(
       eventPosition.bottom + 10
     );
     triggerDomEvent('mouseup', document.body, {

test/calendar-day-view.component.spec.ts

@@ -584,7 +584,8 @@ describe('calendarMonthView component', () => {
     });
     fixture.detectChanges();
     expect(cells[10].classList.contains('cal-drag-over')).to.equal(true);
-    const eventAfterDragPosition: ClientRect = event.getBoundingClientRect();
+    const ghostElement = event.nextSibling as HTMLElement;
+    const eventAfterDragPosition: ClientRect = ghostElement.getBoundingClientRect();
     const movedLeft: number = dragToCellPosition.left - eventStartPosition.left;
     expect(eventAfterDragPosition.left).to.equal(
       eventStartPosition.left + movedLeft

test/calendar-month-view.component.spec.ts

@@ -633,7 +633,8 @@ describe('calendarWeekView component', () => {
       clientY: eventPosition.top
     });
     fixture.detectChanges();
-    expect(Math.round(event.getBoundingClientRect().left)).to.equal(
+    const ghostElement = event.nextSibling as HTMLElement;
+    expect(Math.round(ghostElement.getBoundingClientRect().left)).to.equal(
       Math.round(eventPosition.left - dayWidth)
     );
     triggerDomEvent('mouseup', document.body, {
@@ -807,7 +808,6 @@ describe('calendarWeekView component', () => {
       clientX: headerPosition.left
     });
     fixture.detectChanges();
-    expect(header.classList.contains('cal-drag-over')).to.equal(true);
     triggerDomEvent('mouseup', document.body, {
       clientY: headerPosition.top,
       clientX: headerPosition.left