fix: use appendStatusClasses

src/lib/droppable.directive.ts

@@ -34,21 +34,27 @@ export class DroppableDirective
   handleDragover(e: Event) {
     e.preventDefault();
     e.stopPropagation();
-    this.element.nativeElement.classList.add(this.dragOverClass);
+    if (this.appendStatusClasses) {
+      this.element.nativeElement.classList.add(this.dragOverClass);
+    }
   }
 
   @HostListener('dragleave', ['$event'])
   handleDragleave(e: Event) {
     e.preventDefault();
     e.stopPropagation();
-    this.element.nativeElement.classList.remove(this.dragOverClass);
+    if (this.appendStatusClasses) {
+      this.element.nativeElement.classList.remove(this.dragOverClass);
+    }
   }
 
   @HostListener('drop', ['$event'])
   handleDrop(e: Event) {
     e.preventDefault();
     e.stopPropagation();
-    this.element.nativeElement.classList.remove(this.dragOverClass);
+    if (this.appendStatusClasses) {
+      this.element.nativeElement.classList.remove(this.dragOverClass);
+    }
     this.onDroppableElementChange(e);
   }
 

src/lib/droppable.spec.ts

@@ -9,12 +9,14 @@ import { DroppableDirective } from './droppable.directive';
   template: `<div droppable #droppable="droppable"
     (filesDropped)="handleFilesDropped($event)"
     [acceptsMultipleFiles]="acceptsMultipleFiles"
-    ></div>
+    [appendStatusClasses]="appendStatusClasses"
+  ></div>
   `,
 })
 export class TestComponent {
   @ViewChild('droppable') droppable: DroppableDirective;
   acceptsMultipleFiles = true;
+  appendStatusClasses = true;
   files: File[] = [];
   handleFilesDropped(files: File[]) {
     this.files = files;
@@ -83,5 +85,19 @@ describe('Droppable', () => {
       tc.droppable.handleDragleave(fakeEvent);
       expect(nc.querySelector('div').classList.contains(tc.droppable.dragOverClass)).toBe(false);
     }));
+    it('should not add the dragOverClass to the element when appendStatusClasses is false', async(() => {
+      const fixture = TestBed.createComponent(TestComponent);
+      fixture.detectChanges();
+      const tc: TestComponent = fixture.debugElement.componentInstance;
+      tc.appendStatusClasses = false;
+      fixture.detectChanges();
+      const nc = fixture.debugElement.nativeElement;
+      tc.droppable.handleDragover(fakeEvent);
+      expect(nc.querySelector('div').classList.contains(tc.droppable.dragOverClass)).toBe(false);
+      expect(fakeEvent.preventDefault).toHaveBeenCalled();
+      expect(fakeEvent.stopPropagation).toHaveBeenCalled();
+      tc.droppable.handleDragleave(fakeEvent);
+      expect(nc.querySelector('div').classList.contains(tc.droppable.dragOverClass)).toBe(false);
+    }));
   });
 });