ngx-drag-drop - npm Package Compare versions

Comparing version 1.0.0-beta.2 to 1.0.0-rc.0

dnd-draggable.directive.d.ts

@@ -1,4 +0,5 @@
-import { AfterContentInit, ElementRef, EventEmitter, OnChanges, Renderer2, SimpleChanges } from "@angular/core";
+import { AfterContentInit, ElementRef, EventEmitter, Renderer2 } from "@angular/core";
+import { DndDragImageOffsetFunction } from "./dnd-utils";
 import { EffectAllowed } from "./dnd-types";
-export declare class DndDraggableDirective implements AfterContentInit, OnChanges {
+export declare class DndDraggableDirective implements AfterContentInit {
     private elementRef;
@@ -9,5 +10,6 @@ private renderer;
     dndType?: string;
-    dndDisableIf: boolean;
     dndDraggingClass: string;
     dndDraggingSourceClass: string;
+    dndDraggableDisabledClass: string;
+    dndDragImageOffsetFunction: DndDragImageOffsetFunction;
     readonly dndStart: EventEmitter<DragEvent>;
@@ -23,7 +25,7 @@ readonly dndEnd: EventEmitter<DragEvent>;
     private dragImage;
+    dndDisableIf: boolean;
     constructor(elementRef: ElementRef, renderer: Renderer2);
     ngAfterContentInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
     private onDragStart(event);
     private onDragEnd(event);
 }

dnd-draggable.directive.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"DndDraggableDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDraggable]"}]}],"members":{"dndDraggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggingClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggingSourceClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndMoved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndCopied":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndLinked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndCanceled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.draggable"]}]}],"dndHandle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dnd-handle.directive","name":"DndHandleDirective"}]}]}],"dndDragImageRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragstart",["$event"]]}]}],"onDragEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragend",["$event"]]}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"DndDraggableDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDraggable]"}]}],"members":{"dndDraggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggingClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggingSourceClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndMoved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndCopied":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndLinked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndCanceled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.draggable"]}]}],"dndHandle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dnd-handle.directive","name":"DndHandleDirective"}]}]}],"dndDragImageRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragstart",["$event"]]}]}],"onDragEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragend",["$event"]]}]}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"DndDraggableDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDraggable]"}]}],"members":{"dndDraggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggingClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggingSourceClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggableDisabledClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragImageOffsetFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndMoved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndCopied":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndLinked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndCanceled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.draggable"]}]}],"dndHandle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dnd-handle.directive","name":"DndHandleDirective"}]}]}],"dndDragImageRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}]}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragstart",["$event"]]}]}],"onDragEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragend",["$event"]]}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"DndDraggableDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDraggable]"}]}],"members":{"dndDraggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggingClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggingSourceClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggableDisabledClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragImageOffsetFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndMoved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndCopied":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndLinked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndCanceled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.draggable"]}]}],"dndHandle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dnd-handle.directive","name":"DndHandleDirective"}]}]}],"dndDragImageRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}]}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragstart",["$event"]]}]}],"onDragEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragend",["$event"]]}]}]}}}}]

dnd-dropzone.directive.d.ts

@@ -15,6 +15,6 @@ import { AfterContentInit, ElementRef, EventEmitter, Renderer2 } from "@angular/core";
     dndEffectAllowed: EffectAllowed;
-    dndDisableIf: boolean;
     dndAllowExternal: boolean;
     dndHorizontal: boolean;
     dndDragoverClass: string;
+    dndDropzoneDisabledClass: string;
     readonly dndDragover: EventEmitter<DragEvent>;
@@ -24,2 +24,4 @@ readonly dndDrop: EventEmitter<DndDropEvent>;
     private placeholder;
+    private disabled;
+    dndDisableIf: boolean;
     constructor(elementRef: ElementRef, renderer: Renderer2);
@@ -26,0 +28,0 @@ ngAfterContentInit(): void;

dnd-dropzone.directive.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"DndDropEvent":{"__symbolic":"interface"},"DndDropzoneDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDropzone]"}]}],"members":{"dndDropzone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndAllowExternal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndHorizontal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragoverClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndPlaceholderRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"isDropAllowed":[{"__symbolic":"method"}],"checkAndUpdatePlaceholderPosition":[{"__symbolic":"method"}],"getPlaceholderIndex":[{"__symbolic":"method"}],"cleanupDragoverState":[{"__symbolic":"method"}],"onDragEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragenter",["$event"]]}]}],"onDragOver":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragover",["$event"]]}]}],"onDrop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["drop",["$event"]]}]}],"onDragLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragleave",["$event"]]}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"DndDropEvent":{"__symbolic":"interface"},"DndDropzoneDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDropzone]"}]}],"members":{"dndDropzone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndAllowExternal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndHorizontal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragoverClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndPlaceholderRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"isDropAllowed":[{"__symbolic":"method"}],"checkAndUpdatePlaceholderPosition":[{"__symbolic":"method"}],"getPlaceholderIndex":[{"__symbolic":"method"}],"cleanupDragoverState":[{"__symbolic":"method"}],"onDragEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragenter",["$event"]]}]}],"onDragOver":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragover",["$event"]]}]}],"onDrop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["drop",["$event"]]}]}],"onDragLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragleave",["$event"]]}]}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"DndDropEvent":{"__symbolic":"interface"},"DndDropzoneDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDropzone]"}]}],"members":{"dndDropzone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndAllowExternal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndHorizontal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragoverClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDropzoneDisabledClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndPlaceholderRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}]}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"isDropAllowed":[{"__symbolic":"method"}],"checkAndUpdatePlaceholderPosition":[{"__symbolic":"method"}],"getPlaceholderIndex":[{"__symbolic":"method"}],"cleanupDragoverState":[{"__symbolic":"method"}],"onDragEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragenter",["$event"]]}]}],"onDragOver":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragover",["$event"]]}]}],"onDrop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["drop",["$event"]]}]}],"onDragLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragleave",["$event"]]}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"DndDropEvent":{"__symbolic":"interface"},"DndDropzoneDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDropzone]"}]}],"members":{"dndDropzone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndAllowExternal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndHorizontal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragoverClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDropzoneDisabledClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndPlaceholderRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}]}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"isDropAllowed":[{"__symbolic":"method"}],"checkAndUpdatePlaceholderPosition":[{"__symbolic":"method"}],"getPlaceholderIndex":[{"__symbolic":"method"}],"cleanupDragoverState":[{"__symbolic":"method"}],"onDragEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragenter",["$event"]]}]}],"onDragOver":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragover",["$event"]]}]}],"onDrop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["drop",["$event"]]}]}],"onDragLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragleave",["$event"]]}]}]}}}}]

dnd-utils.d.ts

@@ -10,2 +10,6 @@ import { DropEffect, EffectAllowed } from "./dnd-types";
 }
+export declare type DndDragImageOffsetFunction = (event: DragEvent, dragImage: Element) => {
+    x: number;
+    y: number;
+};
 export declare const DROP_EFFECTS: DropEffect[];
@@ -21,2 +25,6 @@ export declare const CUSTOM_MIME_TYPE = "application/x-dnd";
 export declare function shouldPositionPlaceholderBeforeElement(event: DragEvent, element: Element, horizontal: boolean): boolean;
-export declare function setDragImage(event: DragEvent, dragImage: Element): void;
+export declare function calculateDragImageOffset(event: DragEvent, dragImage: Element): {
+    x: number;
+    y: number;
+};
+export declare function setDragImage(event: DragEvent, dragImage: Element, offsetFunction: DndDragImageOffsetFunction): void;

dnd-utils.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"DragDropData":{"__symbolic":"interface"},"DndEvent":{"__symbolic":"interface"},"DROP_EFFECTS":{"__symbolic":"error","message":"Expression form not supported","line":12,"character":28},"CUSTOM_MIME_TYPE":"application/x-dnd","JSON_MIME_TYPE":"application/json","MSIE_MIME_TYPE":"Text","getWellKnownMimeType":{"__symbolic":"function"},"setDragData":{"__symbolic":"function"},"getDropData":{"__symbolic":"function"},"filterEffects":{"__symbolic":"function"},"getDirectChildElement":{"__symbolic":"function"},"shouldPositionPlaceholderBeforeElement":{"__symbolic":"function"},"setDragImage":{"__symbolic":"function"}}},{"__symbolic":"module","version":1,"metadata":{"DragDropData":{"__symbolic":"interface"},"DndEvent":{"__symbolic":"interface"},"DROP_EFFECTS":{"__symbolic":"error","message":"Expression form not supported","line":12,"character":28},"CUSTOM_MIME_TYPE":"application/x-dnd","JSON_MIME_TYPE":"application/json","MSIE_MIME_TYPE":"Text","getWellKnownMimeType":{"__symbolic":"function"},"setDragData":{"__symbolic":"function"},"getDropData":{"__symbolic":"function"},"filterEffects":{"__symbolic":"function"},"getDirectChildElement":{"__symbolic":"function"},"shouldPositionPlaceholderBeforeElement":{"__symbolic":"function"},"setDragImage":{"__symbolic":"function"}}}]
+[{"__symbolic":"module","version":3,"metadata":{"DragDropData":{"__symbolic":"interface"},"DndEvent":{"__symbolic":"interface"},"DROP_EFFECTS":{"__symbolic":"error","message":"Expression form not supported","line":14,"character":28},"CUSTOM_MIME_TYPE":"application/x-dnd","JSON_MIME_TYPE":"application/json","MSIE_MIME_TYPE":"Text","getWellKnownMimeType":{"__symbolic":"function"},"setDragData":{"__symbolic":"function"},"getDropData":{"__symbolic":"function"},"filterEffects":{"__symbolic":"function"},"getDirectChildElement":{"__symbolic":"function"},"shouldPositionPlaceholderBeforeElement":{"__symbolic":"function"},"calculateDragImageOffset":{"__symbolic":"function"},"setDragImage":{"__symbolic":"function"}}},{"__symbolic":"module","version":1,"metadata":{"DragDropData":{"__symbolic":"interface"},"DndEvent":{"__symbolic":"interface"},"DROP_EFFECTS":{"__symbolic":"error","message":"Expression form not supported","line":14,"character":28},"CUSTOM_MIME_TYPE":"application/x-dnd","JSON_MIME_TYPE":"application/json","MSIE_MIME_TYPE":"Text","getWellKnownMimeType":{"__symbolic":"function"},"setDragData":{"__symbolic":"function"},"getDropData":{"__symbolic":"function"},"filterEffects":{"__symbolic":"function"},"getDirectChildElement":{"__symbolic":"function"},"shouldPositionPlaceholderBeforeElement":{"__symbolic":"function"},"calculateDragImageOffset":{"__symbolic":"function"},"setDragImage":{"__symbolic":"function"}}}]

index.d.ts

@@ -6,3 +6,4 @@ export * from "./dnd-draggable.directive";
 export * from "./dnd-types";
+export { DndDragImageOffsetFunction } from "./dnd-utils";
 export declare class DndModule {
 }

index.js

@@ -103,3 +103,3 @@ import { ContentChild, Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, NgModule, Output, Renderer2 } from '@angular/core';
 function getDirectChildElement(parentElement, childElement) {
-    var /** @type {?} */ directChild = childElement.parentNode;
+    var /** @type {?} */ directChild = childElement;
     while (directChild.parentNode !== parentElement) {
@@ -134,31 +134,23 @@ // reached root node without finding given parent
  */
-function setDragImage(event, dragImage) {
-    var /** @type {?} */ offX = 0;
-    var /** @type {?} */ offY = 0;
-    var /** @type {?} */ currentTargetElement = (event.currentTarget);
-    if (dragImage === currentTargetElement) {
-        var /** @type {?} */ dragImageComputedStyle = window.getComputedStyle(dragImage);
-        var /** @type {?} */ paddingTop = parseFloat(dragImageComputedStyle.paddingTop) || 0;
-        var /** @type {?} */ paddingLeft = parseFloat(dragImageComputedStyle.paddingLeft) || 0;
-        var /** @type {?} */ borderTop = parseFloat(dragImageComputedStyle.borderTopWidth) || 0;
-        var /** @type {?} */ borderLeft = parseFloat(dragImageComputedStyle.borderLeftWidth) || 0;
-        offX += event.offsetX + paddingLeft + borderLeft;
-        offY += event.offsetY + paddingTop + borderTop;
-    }
-    // TODO handle custom drag image child offset calculation?
-    // else {
-    // const dragImageComputedStyle = window.getComputedStyle( dragImage );
-    // const paddingTop = parseFloat( dragImageComputedStyle.paddingTop ) || 0;
-    // const paddingLeft = parseFloat( dragImageComputedStyle.paddingLeft ) || 0;
-    //
-    // offX += paddingLeft;
-    // offY += paddingTop;
-    // }
-    // console.log( `event offsetX: ${event.offsetX}` );
-    // console.log( `event offsetY: ${event.offsetY}` );
-    //
-    // console.log( `offsetX: ${offX}` );
-    // console.log( `offsetY: ${offY}` );
-    ((event.dataTransfer)).setDragImage(dragImage, offX, offY);
+function calculateDragImageOffset(event, dragImage) {
+    var /** @type {?} */ dragImageComputedStyle = window.getComputedStyle(dragImage);
+    var /** @type {?} */ paddingTop = parseFloat(dragImageComputedStyle.paddingTop) || 0;
+    var /** @type {?} */ paddingLeft = parseFloat(dragImageComputedStyle.paddingLeft) || 0;
+    var /** @type {?} */ borderTop = parseFloat(dragImageComputedStyle.borderTopWidth) || 0;
+    var /** @type {?} */ borderLeft = parseFloat(dragImageComputedStyle.borderLeftWidth) || 0;
+    return {
+        x: event.offsetX + paddingLeft + borderLeft,
+        y: event.offsetY + paddingTop + borderTop
+    };
 }
+/**
+ * @param {?} event
+ * @param {?} dragImage
+ * @param {?} offsetFunction
+ * @return {?}
+ */
+function setDragImage(event, dragImage, offsetFunction) {
+    var /** @type {?} */ offset = offsetFunction(event, dragImage) || { x: 0, y: 0 };
+    ((event.dataTransfer)).setDragImage(dragImage, offset.x, offset.y);
+}
 
@@ -320,5 +312,6 @@ var DndHandleDirective = (function () {
         this.dndEffectAllowed = "copy";
-        this.dndDisableIf = false;
         this.dndDraggingClass = "dndDragging";
         this.dndDraggingSourceClass = "dndDraggingSource";
+        this.dndDraggableDisabledClass = "dndDraggableDisabled";
+        this.dndDragImageOffsetFunction = calculateDragImageOffset;
         this.dndStart = new EventEmitter();
@@ -332,2 +325,19 @@ this.dndEnd = new EventEmitter();
     }
+    Object.defineProperty(DndDraggableDirective.prototype, "dndDisableIf", {
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        set: function (value) {
+            this.draggable = !value;
+            if (this.draggable) {
+                this.renderer.removeClass(this.elementRef.nativeElement, this.dndDraggableDisabledClass);
+            }
+            else {
+                this.renderer.addClass(this.elementRef.nativeElement, this.dndDraggableDisabledClass);
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
@@ -346,12 +356,2 @@ * @return {?}
     /**
-     * @param {?} changes
-     * @return {?}
-     */
-    DndDraggableDirective.prototype.ngOnChanges = function (changes) {
-        // reevaluate dragability
-        if (changes.dndDisableIf) {
-            this.draggable = !changes.dndDisableIf.currentValue;
-        }
-    };
-    /**
      * @param {?} event
@@ -384,3 +384,3 @@ * @return {?}
             || typeof event._dndHandle !== "undefined") {
-            setDragImage(event, this.dragImage);
+            setDragImage(event, this.dragImage, this.dndDragImageOffsetFunction);
         }
@@ -442,5 +442,6 @@ this.dndStart.emit(event);
     'dndType': [{ type: Input },],
-    'dndDisableIf': [{ type: Input },],
     'dndDraggingClass': [{ type: Input },],
     'dndDraggingSourceClass': [{ type: Input },],
+    'dndDraggableDisabledClass': [{ type: Input },],
+    'dndDragImageOffsetFunction': [{ type: Input },],
     'dndStart': [{ type: Output },],
@@ -455,2 +456,3 @@ 'dndEnd': [{ type: Output },],
     'dndDragImageRef': [{ type: ContentChild, args: [DndElementRefDirective,] },],
+    'dndDisableIf': [{ type: Input },],
     'onDragStart': [{ type: HostListener, args: ["dragstart", ["$event"],] },],
@@ -468,10 +470,28 @@ 'onDragEnd': [{ type: HostListener, args: ["dragend", ["$event"],] },],
         this.renderer = renderer;
-        this.dndDisableIf = false;
         this.dndAllowExternal = false;
         this.dndHorizontal = false;
         this.dndDragoverClass = "dndDragover";
+        this.dndDropzoneDisabledClass = "dndDropzoneDisabled";
         this.dndDragover = new EventEmitter();
         this.dndDrop = new EventEmitter();
         this.placeholder = null;
+        this.disabled = false;
     }
+    Object.defineProperty(DndDropzoneDirective.prototype, "dndDisableIf", {
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        set: function (value) {
+            this.disabled = !!value;
+            if (this.disabled) {
+                this.renderer.addClass(this.elementRef.nativeElement, this.dndDropzoneDisabledClass);
+            }
+            else {
+                this.renderer.removeClass(this.elementRef.nativeElement, this.dndDropzoneDisabledClass);
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
@@ -492,3 +512,3 @@ * @return {?}
         // dropzone is disabled -> deny it
-        if (this.dndDisableIf === true) {
+        if (this.disabled === true) {
             return false;
@@ -684,9 +704,10 @@ }
     'dndEffectAllowed': [{ type: Input },],
-    'dndDisableIf': [{ type: Input },],
     'dndAllowExternal': [{ type: Input },],
     'dndHorizontal': [{ type: Input },],
     'dndDragoverClass': [{ type: Input },],
+    'dndDropzoneDisabledClass': [{ type: Input },],
     'dndDragover': [{ type: Output },],
     'dndDrop': [{ type: Output },],
     'dndPlaceholderRef': [{ type: ContentChild, args: [DndElementRefDirective,] },],
+    'dndDisableIf': [{ type: Input },],
     'onDragEnter': [{ type: HostListener, args: ["dragenter", ["$event"],] },],
@@ -693,0 +714,0 @@ 'onDragOver': [{ type: HostListener, args: ["dragover", ["$event"],] },],

index.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"DndModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","module":"./dnd-draggable.directive","name":"DndDraggableDirective"},{"__symbolic":"reference","module":"./dnd-dropzone.directive","name":"DndDropzoneDirective"},{"__symbolic":"reference","module":"./dnd-handle.directive","name":"DndHandleDirective"},{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}],"exports":[{"__symbolic":"reference","module":"./dnd-draggable.directive","name":"DndDraggableDirective"},{"__symbolic":"reference","module":"./dnd-dropzone.directive","name":"DndDropzoneDirective"},{"__symbolic":"reference","module":"./dnd-handle.directive","name":"DndHandleDirective"},{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}]}]}]}},"exports":[{"from":"./dnd-draggable.directive"},{"from":"./dnd-dropzone.directive"},{"from":"./dnd-handle.directive"},{"from":"./dnd-element-ref.directive"},{"from":"./dnd-types"}]},{"__symbolic":"module","version":1,"metadata":{"DndModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","module":"./dnd-draggable.directive","name":"DndDraggableDirective"},{"__symbolic":"reference","module":"./dnd-dropzone.directive","name":"DndDropzoneDirective"},{"__symbolic":"reference","module":"./dnd-handle.directive","name":"DndHandleDirective"},{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}],"exports":[{"__symbolic":"reference","module":"./dnd-draggable.directive","name":"DndDraggableDirective"},{"__symbolic":"reference","module":"./dnd-dropzone.directive","name":"DndDropzoneDirective"},{"__symbolic":"reference","module":"./dnd-handle.directive","name":"DndHandleDirective"},{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}]}]}]}},"exports":[{"from":"./dnd-draggable.directive"},{"from":"./dnd-dropzone.directive"},{"from":"./dnd-handle.directive"},{"from":"./dnd-element-ref.directive"},{"from":"./dnd-types"}]}]
+[{"__symbolic":"module","version":3,"metadata":{"DndModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","module":"./dnd-draggable.directive","name":"DndDraggableDirective"},{"__symbolic":"reference","module":"./dnd-dropzone.directive","name":"DndDropzoneDirective"},{"__symbolic":"reference","module":"./dnd-handle.directive","name":"DndHandleDirective"},{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}],"exports":[{"__symbolic":"reference","module":"./dnd-draggable.directive","name":"DndDraggableDirective"},{"__symbolic":"reference","module":"./dnd-dropzone.directive","name":"DndDropzoneDirective"},{"__symbolic":"reference","module":"./dnd-handle.directive","name":"DndHandleDirective"},{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}]}]}]}},"exports":[{"from":"./dnd-draggable.directive"},{"from":"./dnd-dropzone.directive"},{"from":"./dnd-handle.directive"},{"from":"./dnd-element-ref.directive"},{"from":"./dnd-types"},{"from":"./dnd-utils","export":["DndDragImageOffsetFunction"]}]},{"__symbolic":"module","version":1,"metadata":{"DndModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","module":"./dnd-draggable.directive","name":"DndDraggableDirective"},{"__symbolic":"reference","module":"./dnd-dropzone.directive","name":"DndDropzoneDirective"},{"__symbolic":"reference","module":"./dnd-handle.directive","name":"DndHandleDirective"},{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}],"exports":[{"__symbolic":"reference","module":"./dnd-draggable.directive","name":"DndDraggableDirective"},{"__symbolic":"reference","module":"./dnd-dropzone.directive","name":"DndDropzoneDirective"},{"__symbolic":"reference","module":"./dnd-handle.directive","name":"DndHandleDirective"},{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}]}]}]}},"exports":[{"from":"./dnd-draggable.directive"},{"from":"./dnd-dropzone.directive"},{"from":"./dnd-handle.directive"},{"from":"./dnd-element-ref.directive"},{"from":"./dnd-types"},{"from":"./dnd-utils","export":["DndDragImageOffsetFunction"]}]}]

ngx-drag-drop.umd.js

@@ -106,3 +106,3 @@ (function (global, factory) {
 function getDirectChildElement(parentElement, childElement) {
-    var /** @type {?} */ directChild = childElement.parentNode;
+    var /** @type {?} */ directChild = childElement;
     while (directChild.parentNode !== parentElement) {
@@ -137,31 +137,23 @@ // reached root node without finding given parent
  */
-function setDragImage(event, dragImage) {
-    var /** @type {?} */ offX = 0;
-    var /** @type {?} */ offY = 0;
-    var /** @type {?} */ currentTargetElement = (event.currentTarget);
-    if (dragImage === currentTargetElement) {
-        var /** @type {?} */ dragImageComputedStyle = window.getComputedStyle(dragImage);
-        var /** @type {?} */ paddingTop = parseFloat(dragImageComputedStyle.paddingTop) || 0;
-        var /** @type {?} */ paddingLeft = parseFloat(dragImageComputedStyle.paddingLeft) || 0;
-        var /** @type {?} */ borderTop = parseFloat(dragImageComputedStyle.borderTopWidth) || 0;
-        var /** @type {?} */ borderLeft = parseFloat(dragImageComputedStyle.borderLeftWidth) || 0;
-        offX += event.offsetX + paddingLeft + borderLeft;
-        offY += event.offsetY + paddingTop + borderTop;
-    }
-    // TODO handle custom drag image child offset calculation?
-    // else {
-    // const dragImageComputedStyle = window.getComputedStyle( dragImage );
-    // const paddingTop = parseFloat( dragImageComputedStyle.paddingTop ) || 0;
-    // const paddingLeft = parseFloat( dragImageComputedStyle.paddingLeft ) || 0;
-    //
-    // offX += paddingLeft;
-    // offY += paddingTop;
-    // }
-    // console.log( `event offsetX: ${event.offsetX}` );
-    // console.log( `event offsetY: ${event.offsetY}` );
-    //
-    // console.log( `offsetX: ${offX}` );
-    // console.log( `offsetY: ${offY}` );
-    ((event.dataTransfer)).setDragImage(dragImage, offX, offY);
+function calculateDragImageOffset(event, dragImage) {
+    var /** @type {?} */ dragImageComputedStyle = window.getComputedStyle(dragImage);
+    var /** @type {?} */ paddingTop = parseFloat(dragImageComputedStyle.paddingTop) || 0;
+    var /** @type {?} */ paddingLeft = parseFloat(dragImageComputedStyle.paddingLeft) || 0;
+    var /** @type {?} */ borderTop = parseFloat(dragImageComputedStyle.borderTopWidth) || 0;
+    var /** @type {?} */ borderLeft = parseFloat(dragImageComputedStyle.borderLeftWidth) || 0;
+    return {
+        x: event.offsetX + paddingLeft + borderLeft,
+        y: event.offsetY + paddingTop + borderTop
+    };
 }
+/**
+ * @param {?} event
+ * @param {?} dragImage
+ * @param {?} offsetFunction
+ * @return {?}
+ */
+function setDragImage(event, dragImage, offsetFunction) {
+    var /** @type {?} */ offset = offsetFunction(event, dragImage) || { x: 0, y: 0 };
+    ((event.dataTransfer)).setDragImage(dragImage, offset.x, offset.y);
+}
 
@@ -323,5 +315,6 @@ var DndHandleDirective = (function () {
         this.dndEffectAllowed = "copy";
-        this.dndDisableIf = false;
         this.dndDraggingClass = "dndDragging";
         this.dndDraggingSourceClass = "dndDraggingSource";
+        this.dndDraggableDisabledClass = "dndDraggableDisabled";
+        this.dndDragImageOffsetFunction = calculateDragImageOffset;
         this.dndStart = new _angular_core.EventEmitter();
@@ -335,2 +328,19 @@ this.dndEnd = new _angular_core.EventEmitter();
     }
+    Object.defineProperty(DndDraggableDirective.prototype, "dndDisableIf", {
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        set: function (value) {
+            this.draggable = !value;
+            if (this.draggable) {
+                this.renderer.removeClass(this.elementRef.nativeElement, this.dndDraggableDisabledClass);
+            }
+            else {
+                this.renderer.addClass(this.elementRef.nativeElement, this.dndDraggableDisabledClass);
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
@@ -349,12 +359,2 @@ * @return {?}
     /**
-     * @param {?} changes
-     * @return {?}
-     */
-    DndDraggableDirective.prototype.ngOnChanges = function (changes) {
-        // reevaluate dragability
-        if (changes.dndDisableIf) {
-            this.draggable = !changes.dndDisableIf.currentValue;
-        }
-    };
-    /**
      * @param {?} event
@@ -387,3 +387,3 @@ * @return {?}
             || typeof event._dndHandle !== "undefined") {
-            setDragImage(event, this.dragImage);
+            setDragImage(event, this.dragImage, this.dndDragImageOffsetFunction);
         }
@@ -445,5 +445,6 @@ this.dndStart.emit(event);
     'dndType': [{ type: _angular_core.Input },],
-    'dndDisableIf': [{ type: _angular_core.Input },],
     'dndDraggingClass': [{ type: _angular_core.Input },],
     'dndDraggingSourceClass': [{ type: _angular_core.Input },],
+    'dndDraggableDisabledClass': [{ type: _angular_core.Input },],
+    'dndDragImageOffsetFunction': [{ type: _angular_core.Input },],
     'dndStart': [{ type: _angular_core.Output },],
@@ -458,2 +459,3 @@ 'dndEnd': [{ type: _angular_core.Output },],
     'dndDragImageRef': [{ type: _angular_core.ContentChild, args: [DndElementRefDirective,] },],
+    'dndDisableIf': [{ type: _angular_core.Input },],
     'onDragStart': [{ type: _angular_core.HostListener, args: ["dragstart", ["$event"],] },],
@@ -471,10 +473,28 @@ 'onDragEnd': [{ type: _angular_core.HostListener, args: ["dragend", ["$event"],] },],
         this.renderer = renderer;
-        this.dndDisableIf = false;
         this.dndAllowExternal = false;
         this.dndHorizontal = false;
         this.dndDragoverClass = "dndDragover";
+        this.dndDropzoneDisabledClass = "dndDropzoneDisabled";
         this.dndDragover = new _angular_core.EventEmitter();
         this.dndDrop = new _angular_core.EventEmitter();
         this.placeholder = null;
+        this.disabled = false;
     }
+    Object.defineProperty(DndDropzoneDirective.prototype, "dndDisableIf", {
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        set: function (value) {
+            this.disabled = !!value;
+            if (this.disabled) {
+                this.renderer.addClass(this.elementRef.nativeElement, this.dndDropzoneDisabledClass);
+            }
+            else {
+                this.renderer.removeClass(this.elementRef.nativeElement, this.dndDropzoneDisabledClass);
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
@@ -495,3 +515,3 @@ * @return {?}
         // dropzone is disabled -> deny it
-        if (this.dndDisableIf === true) {
+        if (this.disabled === true) {
             return false;
@@ -687,9 +707,10 @@ }
     'dndEffectAllowed': [{ type: _angular_core.Input },],
-    'dndDisableIf': [{ type: _angular_core.Input },],
     'dndAllowExternal': [{ type: _angular_core.Input },],
     'dndHorizontal': [{ type: _angular_core.Input },],
     'dndDragoverClass': [{ type: _angular_core.Input },],
+    'dndDropzoneDisabledClass': [{ type: _angular_core.Input },],
     'dndDragover': [{ type: _angular_core.Output },],
     'dndDrop': [{ type: _angular_core.Output },],
     'dndPlaceholderRef': [{ type: _angular_core.ContentChild, args: [DndElementRefDirective,] },],
+    'dndDisableIf': [{ type: _angular_core.Input },],
     'onDragEnter': [{ type: _angular_core.HostListener, args: ["dragenter", ["$event"],] },],
@@ -696,0 +717,0 @@ 'onDragOver': [{ type: _angular_core.HostListener, args: ["dragover", ["$event"],] },],

package.json

 {
   "name": "ngx-drag-drop",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-rc.0",
   "description": "Angular directives using the native HTML Drag And Drop API",
@@ -30,3 +30,3 @@ "repository": {
     "start": "ng serve",
-    "build": "ng build",
+    "build": "ng build --prod",
     "build:lib": "gulp build",
@@ -33,0 +33,0 @@ "publish:stable": "npm publish dist",

README.MD

@@ -14,6 +14,6 @@ [![npm](https://img.shields.io/npm/v/ngx-drag-drop.svg)](https://www.npmjs.com/package/ngx-drag-drop)
 * typed drag/drop
-* utilize EffectAllowed
+* utilize [EffectAllowed](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed)
 * custom CSS classes
 * touch support by using a [polyfill](https://github.com/timruffles/ios-html5-drag-drop-shim/tree/rewrite)
-* AOT compatible
+* [AOT](https://angular.io/guide/aot-compiler) compatible
 
@@ -49,2 +49,5 @@ Install with `npm install ngx-drag-drop@next --save`
     
+    <!--optionally select a child element as drag image-->
+    <div dndDragImageRef>DRAG_IMAGE</div>
+    
 </div>
@@ -162,6 +165,11 @@
 // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed
-export type EffectAllowed = DropEffect | "move" | "copy" | "link" | "copyMove" | "copyLink" | "linkMove" | "all";
+export type EffectAllowed = DropEffect | "copyMove" | "copyLink" | "linkMove" | "all";
 ```
 
 ```TS
+export type DndDragImageOffsetFunction = ( event:DragEvent, dragImage:Element ) => { x:number, y:number };
+
+@Directive( {
+  selector: "[dndDraggable]"
+} )
 export declare class DndDraggableDirective {
@@ -187,2 +195,8 @@
     
+    // set the class that is applied when draggable is disabled by [dndDisableIf]
+    dndDraggableDisabledClass = "dndDraggableDisabled";
+    
+    // enables to set a function for calculating custom dragimage offset
+    dndDragImageOffsetFunction:DndDragImageOffsetFunction = calculateDragImageOffset;
+    
     // emits on drag start
@@ -228,2 +242,5 @@ readonly dndStart: EventEmitter<DragEvent>;
 
+@Directive( {
+  selector: "[dndDropzone]"
+} )
 export declare class DndDropzoneDirective {
@@ -252,2 +269,6 @@
     
+    // set the class applied to the dropzone
+    // when the dropzone is disabled by [dndDisableIf] 
+    dndDropzoneDisabledClass = "dndDropzoneDisabled";
+    
     // emits when a draggable is dragged over the dropzone
@@ -254,0 +275,0 @@ readonly dndDragover: EventEmitter<DragEvent>;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

91028

increased by4.53%

Lines of code

1596

increased by3.57%

Number of lines in readme file

299

increased by7.55%

No dependency changes