ngx-drag-drop - npm Package Compare versions

Comparing version 1.0.0-beta.1 to 1.0.0-beta.2

dnd-draggable.directive.d.ts

@@ -1,4 +0,4 @@
-import { ElementRef, EventEmitter, OnChanges, OnInit, Renderer2, SimpleChanges } from "@angular/core";
+import { AfterContentInit, ElementRef, EventEmitter, OnChanges, Renderer2, SimpleChanges } from "@angular/core";
 import { EffectAllowed } from "./dnd-types";
-export declare class DndDraggableDirective implements OnInit, OnChanges {
+export declare class DndDraggableDirective implements AfterContentInit, OnChanges {
     private elementRef;
@@ -23,3 +23,3 @@ private renderer;
     constructor(elementRef: ElementRef, renderer: Renderer2);
-    ngOnInit(): void;
+    ngAfterContentInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -26,0 +26,0 @@ private onDragStart(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"}]}],"ngOnInit":[{"__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"}]}],"ngOnInit":[{"__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"}}]}],"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"]]}]}]}}}}]

dnd-dropzone.directive.d.ts

@@ -1,2 +0,2 @@
-import { ElementRef, EventEmitter, OnInit, Renderer2 } from "@angular/core";
+import { AfterContentInit, ElementRef, EventEmitter, Renderer2 } from "@angular/core";
 import { DropEffect, EffectAllowed } from "./dnd-types";
@@ -10,3 +10,3 @@ export interface DndDropEvent {
 }
-export declare class DndDropzoneDirective implements OnInit {
+export declare class DndDropzoneDirective implements AfterContentInit {
     private elementRef;
@@ -22,6 +22,6 @@ private renderer;
     readonly dndDrop: EventEmitter<DndDropEvent>;
-    private readonly dndPlaceholder?;
+    private readonly dndPlaceholderRef?;
     private placeholder;
     constructor(elementRef: ElementRef, renderer: Renderer2);
-    ngOnInit(): void;
+    ngAfterContentInit(): void;
     private isDropAllowed(type?);
@@ -28,0 +28,0 @@ private checkAndUpdatePlaceholderPosition(event);

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"}}]}],"dndPlaceholder":[{"__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"}]}],"ngOnInit":[{"__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"}}]}],"dndPlaceholder":[{"__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"}]}],"ngOnInit":[{"__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"}}]}],"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"]]}]}]}}}}]

index.d.ts

 export * from "./dnd-draggable.directive";
 export * from "./dnd-dropzone.directive";
 export * from "./dnd-handle.directive";
+export * from "./dnd-element-ref.directive";
 export * from "./dnd-types";
 export declare class DndModule {
 }

index.js

@@ -134,5 +134,28 @@ import { ContentChild, Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, NgModule, Output, Renderer2 } from '@angular/core';
 function setDragImage(event, dragImage) {
-    // TODO include dragImage padding/border into offset calculation?
-    var /** @type {?} */ offX = event.offsetX;
-    var /** @type {?} */ offY = event.offsetY;
+    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);
@@ -310,3 +333,3 @@ }
      */
-    DndDraggableDirective.prototype.ngOnInit = function () {
+    DndDraggableDirective.prototype.ngAfterContentInit = function () {
         // evaluate custom drag image existence
@@ -450,5 +473,5 @@ if (typeof this.dndDragImageRef !== "undefined") {
      */
-    DndDropzoneDirective.prototype.ngOnInit = function () {
-        if (typeof this.dndPlaceholder !== "undefined") {
-            this.placeholder = (this.dndPlaceholder.elementRef.nativeElement);
+    DndDropzoneDirective.prototype.ngAfterContentInit = function () {
+        if (typeof this.dndPlaceholderRef !== "undefined") {
+            this.placeholder = (this.dndPlaceholderRef.elementRef.nativeElement);
             this.placeholder.remove();
@@ -660,3 +683,3 @@ }
     'dndDrop': [{ type: Output },],
-    'dndPlaceholder': [{ type: ContentChild, args: [DndElementRefDirective,] },],
+    'dndPlaceholderRef': [{ type: ContentChild, args: [DndElementRefDirective,] },],
     'onDragEnter': [{ type: HostListener, args: ["dragenter", ["$event"],] },],
@@ -697,2 +720,2 @@ 'onDragOver': [{ type: HostListener, args: ["dragover", ["$event"],] },],
 
-export { DndModule, DndDraggableDirective, DndDropzoneDirective, DndHandleDirective };
+export { DndModule, DndDraggableDirective, DndDropzoneDirective, DndHandleDirective, DndElementRefDirective };

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-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-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"}]},{"__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"}]}]

ngx-drag-drop.umd.js

@@ -137,5 +137,28 @@ (function (global, factory) {
 function setDragImage(event, dragImage) {
-    // TODO include dragImage padding/border into offset calculation?
-    var /** @type {?} */ offX = event.offsetX;
-    var /** @type {?} */ offY = event.offsetY;
+    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);
@@ -313,3 +336,3 @@ }
      */
-    DndDraggableDirective.prototype.ngOnInit = function () {
+    DndDraggableDirective.prototype.ngAfterContentInit = function () {
         // evaluate custom drag image existence
@@ -453,5 +476,5 @@ if (typeof this.dndDragImageRef !== "undefined") {
      */
-    DndDropzoneDirective.prototype.ngOnInit = function () {
-        if (typeof this.dndPlaceholder !== "undefined") {
-            this.placeholder = (this.dndPlaceholder.elementRef.nativeElement);
+    DndDropzoneDirective.prototype.ngAfterContentInit = function () {
+        if (typeof this.dndPlaceholderRef !== "undefined") {
+            this.placeholder = (this.dndPlaceholderRef.elementRef.nativeElement);
             this.placeholder.remove();
@@ -663,3 +686,3 @@ }
     'dndDrop': [{ type: _angular_core.Output },],
-    'dndPlaceholder': [{ type: _angular_core.ContentChild, args: [DndElementRefDirective,] },],
+    'dndPlaceholderRef': [{ type: _angular_core.ContentChild, args: [DndElementRefDirective,] },],
     'onDragEnter': [{ type: _angular_core.HostListener, args: ["dragenter", ["$event"],] },],
@@ -704,2 +727,3 @@ 'onDragOver': [{ type: _angular_core.HostListener, args: ["dragover", ["$event"],] },],
 exports.DndHandleDirective = DndHandleDirective;
+exports.DndElementRefDirective = DndElementRefDirective;
 
@@ -706,0 +730,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

package.json

 {
   "name": "ngx-drag-drop",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "Angular directives using the native HTML Drag And Drop API",
@@ -5,0 +5,0 @@ "repository": {

No alert changes

Improved metrics

Total package byte prevSize

87082

increased by3.31%

Lines of code

1541

increased by3.22%

No dependency changes