ngx-drag-drop - npm Package Compare versions

Comparing version 1.0.0-rc.2 to 1.0.0-rc.3

bundles/ngx-drag-drop.umd.js

@@ -280,14 +280,14 @@ (function (global, factory) {
 var dndState = (_dndState);
-var DndElementRefDirective = /** @class */ (function () {
+var DndDragImageRefDirective = /** @class */ (function () {
     /**
      * @param {?} elementRef
      */
-    function DndElementRefDirective(elementRef) {
+    function DndDragImageRefDirective(elementRef) {
         this.elementRef = elementRef;
     }
-    return DndElementRefDirective;
+    return DndDragImageRefDirective;
 }());
-DndElementRefDirective.decorators = [
+DndDragImageRefDirective.decorators = [
     { type: core.Directive, args: [{
-                selector: "[dndPlaceholderRef], [dndDragImageRef]"
+                selector: "[dndDragImageRef]"
             },] },
@@ -298,3 +298,3 @@ ];
  */
-DndElementRefDirective.ctorParameters = function () { return [
+DndDragImageRefDirective.ctorParameters = function () { return [
     { type: core.ElementRef, },
@@ -449,3 +449,3 @@ ]; };
     'dndHandle': [{ type: core.ContentChild, args: [DndHandleDirective,] },],
-    'dndDragImageRef': [{ type: core.ContentChild, args: [DndElementRefDirective,] },],
+    'dndDragImageRef': [{ type: core.ContentChild, args: [DndDragImageRefDirective,] },],
     'dndDisableIf': [{ type: core.Input },],
@@ -455,2 +455,22 @@ 'onDragStart': [{ type: core.HostListener, args: ["dragstart", ["$event"],] },],
 };
+var DndPlaceholderRefDirective = /** @class */ (function () {
+    /**
+     * @param {?} elementRef
+     */
+    function DndPlaceholderRefDirective(elementRef) {
+        this.elementRef = elementRef;
+    }
+    return DndPlaceholderRefDirective;
+}());
+DndPlaceholderRefDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: "[dndPlaceholderRef]"
+            },] },
+];
+/**
+ * @nocollapse
+ */
+DndPlaceholderRefDirective.ctorParameters = function () { return [
+    { type: core.ElementRef, },
+]; };
 var DndDropzoneDirective = /** @class */ (function () {
@@ -493,5 +513,5 @@ /**
      */
-    DndDropzoneDirective.prototype.ngAfterContentInit = function () {
-        if (typeof this.dndPlaceholderRef !== "undefined") {
-            this.placeholder = /** @type {?} */ (this.dndPlaceholderRef.elementRef.nativeElement);
+    DndDropzoneDirective.prototype.ngAfterViewInit = function () {
+        this.placeholder = this.tryGetPlaceholder();
+        if (this.placeholder !== null) {
             this.placeholder.remove();
@@ -501,2 +521,13 @@ }
     /**
+     * @return {?}
+     */
+    DndDropzoneDirective.prototype.tryGetPlaceholder = function () {
+        if (typeof this.dndPlaceholderRef !== "undefined") {
+            return /** @type {?} */ (this.dndPlaceholderRef.elementRef.nativeElement);
+        }
+        // TODO nasty workaround needed because if ng-container / template is used @ContentChild() or DI will fail because of wrong context
+        // see angular bug https://github.com/angular/angular/issues/13517
+        return this.elementRef.nativeElement.querySelector("[dndPlaceholderRef]");
+    };
+    /**
      * @param {?=} type
@@ -707,3 +738,3 @@ * @return {?}
     'dndDrop': [{ type: core.Output },],
-    'dndPlaceholderRef': [{ type: core.ContentChild, args: [DndElementRefDirective,] },],
+    'dndPlaceholderRef': [{ type: core.ContentChild, args: [DndPlaceholderRefDirective,] },],
     'dndDisableIf': [{ type: core.Input },],
@@ -729,3 +760,4 @@ 'onDragEnter': [{ type: core.HostListener, args: ["dragenter", ["$event"],] },],
                     DndHandleDirective,
-                    DndElementRefDirective
+                    DndPlaceholderRefDirective,
+                    DndDragImageRefDirective
                 ],
@@ -736,3 +768,4 @@ exports: [
                     DndHandleDirective,
-                    DndElementRefDirective
+                    DndPlaceholderRefDirective,
+                    DndDragImageRefDirective
                 ]
@@ -746,6 +779,7 @@ },] },
 
+exports.DndDragImageRefDirective = DndDragImageRefDirective;
 exports.DndDraggableDirective = DndDraggableDirective;
+exports.DndPlaceholderRefDirective = DndPlaceholderRefDirective;
 exports.DndDropzoneDirective = DndDropzoneDirective;
 exports.DndHandleDirective = DndHandleDirective;
-exports.DndElementRefDirective = DndElementRefDirective;
 exports.DndModule = DndModule;
@@ -752,0 +786,0 @@

dnd-draggable.directive.d.ts

 import { AfterContentInit, ElementRef, EventEmitter, Renderer2 } from "@angular/core";
 import { DndDragImageOffsetFunction } from "./dnd-utils";
 import { EffectAllowed } from "./dnd-types";
+export declare class DndDragImageRefDirective {
+    readonly elementRef: ElementRef;
+    constructor(elementRef: ElementRef);
+}
 export declare class DndDraggableDirective implements AfterContentInit {
@@ -5,0 +9,0 @@ private elementRef;

dnd-dropzone.directive.d.ts

@@ -1,2 +0,2 @@
-import { AfterContentInit, ElementRef, EventEmitter, Renderer2 } from "@angular/core";
+import { AfterViewInit, ElementRef, EventEmitter, Renderer2 } from "@angular/core";
 import { DropEffect, EffectAllowed } from "./dnd-types";
@@ -10,3 +10,7 @@ export interface DndDropEvent {
 }
-export declare class DndDropzoneDirective implements AfterContentInit {
+export declare class DndPlaceholderRefDirective {
+    readonly elementRef: ElementRef;
+    constructor(elementRef: ElementRef);
+}
+export declare class DndDropzoneDirective implements AfterViewInit {
     private elementRef;
@@ -27,3 +31,4 @@ private renderer;
     constructor(elementRef: ElementRef, renderer: Renderer2);
-    ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
+    private tryGetPlaceholder();
     private isDropAllowed(type?);
@@ -30,0 +35,0 @@ private checkAndUpdatePlaceholderPosition(event);

ngx-drag-drop.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":3,"exports":[{"from":"./dnd-types"}],"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","name":"DndHandleDirective"}]}]}],"dndDragImageRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","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"]]}]}]}},"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","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"]]}]}]}},"DndHandleDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndHandle]"}]}],"members":{"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.draggable"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"onDragEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragstart",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragend",["$event"]]}]}]}},"DndElementRefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndPlaceholderRef], [dndDragImageRef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}]}},"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","name":"DndDraggableDirective"},{"__symbolic":"reference","name":"DndDropzoneDirective"},{"__symbolic":"reference","name":"DndHandleDirective"},{"__symbolic":"reference","name":"DndElementRefDirective"}],"exports":[{"__symbolic":"reference","name":"DndDraggableDirective"},{"__symbolic":"reference","name":"DndDropzoneDirective"},{"__symbolic":"reference","name":"DndHandleDirective"},{"__symbolic":"reference","name":"DndElementRefDirective"}]}]}],"members":{}}},"origins":{"DndDraggableDirective":"./dnd-draggable.directive","DndDropEvent":"./dnd-dropzone.directive","DndDropzoneDirective":"./dnd-dropzone.directive","DndHandleDirective":"./dnd-handle.directive","DndElementRefDirective":"./dnd-element-ref.directive","DndDragImageOffsetFunction":"./dnd-utils","DndModule":"./dnd.module"},"importAs":"ngx-drag-drop"}
+{"__symbolic":"module","version":3,"exports":[{"from":"./dnd-types"}],"metadata":{"DndDragImageRefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDragImageRef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}]}},"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","name":"DndHandleDirective"}]}]}],"dndDragImageRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","name":"DndDragImageRefDirective"}]}]}],"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"]]}]}]}},"DndDropEvent":{"__symbolic":"interface"},"DndPlaceholderRefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndPlaceholderRef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}]}},"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","name":"DndPlaceholderRefDirective"}]}]}],"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"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"tryGetPlaceholder":[{"__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"]]}]}]}},"DndHandleDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndHandle]"}]}],"members":{"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.draggable"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"onDragEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragstart",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragend",["$event"]]}]}]}},"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","name":"DndDraggableDirective"},{"__symbolic":"reference","name":"DndDropzoneDirective"},{"__symbolic":"reference","name":"DndHandleDirective"},{"__symbolic":"reference","name":"DndPlaceholderRefDirective"},{"__symbolic":"reference","name":"DndDragImageRefDirective"}],"exports":[{"__symbolic":"reference","name":"DndDraggableDirective"},{"__symbolic":"reference","name":"DndDropzoneDirective"},{"__symbolic":"reference","name":"DndHandleDirective"},{"__symbolic":"reference","name":"DndPlaceholderRefDirective"},{"__symbolic":"reference","name":"DndDragImageRefDirective"}]}]}],"members":{}}},"origins":{"DndDragImageRefDirective":"./dnd-draggable.directive","DndDraggableDirective":"./dnd-draggable.directive","DndDropEvent":"./dnd-dropzone.directive","DndPlaceholderRefDirective":"./dnd-dropzone.directive","DndDropzoneDirective":"./dnd-dropzone.directive","DndHandleDirective":"./dnd-handle.directive","DndDragImageOffsetFunction":"./dnd-utils","DndModule":"./dnd.module"},"importAs":"ngx-drag-drop"}

ngx-drag-drop/ngx-drag-drop.es5.js

@@ -276,14 +276,14 @@ import { ContentChild, Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, NgModule, Output, Renderer2 } from '@angular/core';
 var dndState = (_dndState);
-var DndElementRefDirective = /** @class */ (function () {
+var DndDragImageRefDirective = /** @class */ (function () {
     /**
      * @param {?} elementRef
      */
-    function DndElementRefDirective(elementRef) {
+    function DndDragImageRefDirective(elementRef) {
         this.elementRef = elementRef;
     }
-    return DndElementRefDirective;
+    return DndDragImageRefDirective;
 }());
-DndElementRefDirective.decorators = [
+DndDragImageRefDirective.decorators = [
     { type: Directive, args: [{
-                selector: "[dndPlaceholderRef], [dndDragImageRef]"
+                selector: "[dndDragImageRef]"
             },] },
@@ -294,3 +294,3 @@ ];
  */
-DndElementRefDirective.ctorParameters = function () { return [
+DndDragImageRefDirective.ctorParameters = function () { return [
     { type: ElementRef, },
@@ -445,3 +445,3 @@ ]; };
     'dndHandle': [{ type: ContentChild, args: [DndHandleDirective,] },],
-    'dndDragImageRef': [{ type: ContentChild, args: [DndElementRefDirective,] },],
+    'dndDragImageRef': [{ type: ContentChild, args: [DndDragImageRefDirective,] },],
     'dndDisableIf': [{ type: Input },],
@@ -451,2 +451,22 @@ 'onDragStart': [{ type: HostListener, args: ["dragstart", ["$event"],] },],
 };
+var DndPlaceholderRefDirective = /** @class */ (function () {
+    /**
+     * @param {?} elementRef
+     */
+    function DndPlaceholderRefDirective(elementRef) {
+        this.elementRef = elementRef;
+    }
+    return DndPlaceholderRefDirective;
+}());
+DndPlaceholderRefDirective.decorators = [
+    { type: Directive, args: [{
+                selector: "[dndPlaceholderRef]"
+            },] },
+];
+/**
+ * @nocollapse
+ */
+DndPlaceholderRefDirective.ctorParameters = function () { return [
+    { type: ElementRef, },
+]; };
 var DndDropzoneDirective = /** @class */ (function () {
@@ -489,5 +509,5 @@ /**
      */
-    DndDropzoneDirective.prototype.ngAfterContentInit = function () {
-        if (typeof this.dndPlaceholderRef !== "undefined") {
-            this.placeholder = /** @type {?} */ (this.dndPlaceholderRef.elementRef.nativeElement);
+    DndDropzoneDirective.prototype.ngAfterViewInit = function () {
+        this.placeholder = this.tryGetPlaceholder();
+        if (this.placeholder !== null) {
             this.placeholder.remove();
@@ -497,2 +517,13 @@ }
     /**
+     * @return {?}
+     */
+    DndDropzoneDirective.prototype.tryGetPlaceholder = function () {
+        if (typeof this.dndPlaceholderRef !== "undefined") {
+            return /** @type {?} */ (this.dndPlaceholderRef.elementRef.nativeElement);
+        }
+        // TODO nasty workaround needed because if ng-container / template is used @ContentChild() or DI will fail because of wrong context
+        // see angular bug https://github.com/angular/angular/issues/13517
+        return this.elementRef.nativeElement.querySelector("[dndPlaceholderRef]");
+    };
+    /**
      * @param {?=} type
@@ -703,3 +734,3 @@ * @return {?}
     'dndDrop': [{ type: Output },],
-    'dndPlaceholderRef': [{ type: ContentChild, args: [DndElementRefDirective,] },],
+    'dndPlaceholderRef': [{ type: ContentChild, args: [DndPlaceholderRefDirective,] },],
     'dndDisableIf': [{ type: Input },],
@@ -725,3 +756,4 @@ 'onDragEnter': [{ type: HostListener, args: ["dragenter", ["$event"],] },],
                     DndHandleDirective,
-                    DndElementRefDirective
+                    DndPlaceholderRefDirective,
+                    DndDragImageRefDirective
                 ],
@@ -732,3 +764,4 @@ exports: [
                     DndHandleDirective,
-                    DndElementRefDirective
+                    DndPlaceholderRefDirective,
+                    DndDragImageRefDirective
                 ]
@@ -744,3 +777,3 @@ },] },
  */
-export { DndDraggableDirective, DndDropzoneDirective, DndHandleDirective, DndElementRefDirective, DndModule };
+export { DndDragImageRefDirective, DndDraggableDirective, DndPlaceholderRefDirective, DndDropzoneDirective, DndHandleDirective, DndModule };
 //# sourceMappingURL=ngx-drag-drop.es5.js.map

ngx-drag-drop/ngx-drag-drop.js

@@ -279,3 +279,3 @@ import { ContentChild, Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, NgModule, Output, Renderer2 } from '@angular/core';
 
-class DndElementRefDirective {
+class DndDragImageRefDirective {
     /**
@@ -288,5 +288,5 @@ * @param {?} elementRef
 }
-DndElementRefDirective.decorators = [
+DndDragImageRefDirective.decorators = [
     { type: Directive, args: [{
-                selector: "[dndPlaceholderRef], [dndDragImageRef]"
+                selector: "[dndDragImageRef]"
             },] },
@@ -297,6 +297,5 @@ ];
  */
-DndElementRefDirective.ctorParameters = () => [
+DndDragImageRefDirective.ctorParameters = () => [
     { type: ElementRef, },
 ];
-
 class DndDraggableDirective {
@@ -442,3 +441,3 @@ /**
     'dndHandle': [{ type: ContentChild, args: [DndHandleDirective,] },],
-    'dndDragImageRef': [{ type: ContentChild, args: [DndElementRefDirective,] },],
+    'dndDragImageRef': [{ type: ContentChild, args: [DndDragImageRefDirective,] },],
     'dndDisableIf': [{ type: Input },],
@@ -449,2 +448,21 @@ 'onDragStart': [{ type: HostListener, args: ["dragstart", ["$event"],] },],
 
+class DndPlaceholderRefDirective {
+    /**
+     * @param {?} elementRef
+     */
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+}
+DndPlaceholderRefDirective.decorators = [
+    { type: Directive, args: [{
+                selector: "[dndPlaceholderRef]"
+            },] },
+];
+/**
+ * @nocollapse
+ */
+DndPlaceholderRefDirective.ctorParameters = () => [
+    { type: ElementRef, },
+];
 class DndDropzoneDirective {
@@ -483,5 +501,5 @@ /**
      */
-    ngAfterContentInit() {
-        if (typeof this.dndPlaceholderRef !== "undefined") {
-            this.placeholder = /** @type {?} */ (this.dndPlaceholderRef.elementRef.nativeElement);
+    ngAfterViewInit() {
+        this.placeholder = this.tryGetPlaceholder();
+        if (this.placeholder !== null) {
             this.placeholder.remove();
@@ -491,2 +509,13 @@ }
     /**
+     * @return {?}
+     */
+    tryGetPlaceholder() {
+        if (typeof this.dndPlaceholderRef !== "undefined") {
+            return /** @type {?} */ (this.dndPlaceholderRef.elementRef.nativeElement);
+        }
+        // TODO nasty workaround needed because if ng-container / template is used @ContentChild() or DI will fail because of wrong context
+        // see angular bug https://github.com/angular/angular/issues/13517
+        return this.elementRef.nativeElement.querySelector("[dndPlaceholderRef]");
+    }
+    /**
      * @param {?=} type
@@ -696,3 +725,3 @@ * @return {?}
     'dndDrop': [{ type: Output },],
-    'dndPlaceholderRef': [{ type: ContentChild, args: [DndElementRefDirective,] },],
+    'dndPlaceholderRef': [{ type: ContentChild, args: [DndPlaceholderRefDirective,] },],
     'dndDisableIf': [{ type: Input },],
@@ -716,3 +745,4 @@ 'onDragEnter': [{ type: HostListener, args: ["dragenter", ["$event"],] },],
                     DndHandleDirective,
-                    DndElementRefDirective
+                    DndPlaceholderRefDirective,
+                    DndDragImageRefDirective
                 ],
@@ -723,3 +753,4 @@ exports: [
                     DndHandleDirective,
-                    DndElementRefDirective
+                    DndPlaceholderRefDirective,
+                    DndDragImageRefDirective
                 ]
@@ -737,3 +768,3 @@ },] },
 
-export { DndDraggableDirective, DndDropzoneDirective, DndHandleDirective, DndElementRefDirective, DndModule };
+export { DndDragImageRefDirective, DndDraggableDirective, DndPlaceholderRefDirective, DndDropzoneDirective, DndHandleDirective, DndModule };
 //# sourceMappingURL=ngx-drag-drop.js.map

package.json

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

public_api.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 { DndDragImageOffsetFunction } from "./dnd-utils";
 export * from "./dnd.module";

README.md

@@ -7,6 +7,8 @@ [![npm](https://img.shields.io/npm/v/ngx-drag-drop.svg)](https://www.npmjs.com/package/ngx-drag-drop)
 
-Set of Angular directives for declarative drag and drop using the HTML5 Drag-And-Drop API.
+[_Demo_](https://github.com/reppners/ngx-drag-drop)
 
-* nesting
+**Angular directives for declarative drag and drop using the HTML5 Drag-And-Drop API**
+
 * sortable lists by using placeholder element (vertical and horizontal)
+* nestable
 * dropzones optionally support external/native draggables (img, txt, file)
@@ -287,7 +289,13 @@ * conditional drag/drop
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.6.
-For the library build it uses the workflow from [generator-angular2-library](https://github.com/jvandemo/generator-angular2-library).
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli).
 
-#### Library
+For the library build it uses [ng-packagr](https://github.com/dherges/ng-packagr).
 
+#### Edit Library
+
+* edit lib code
+* run `npm start` (currently needs to be re-run on every lib code change)
+
+#### Release Library
+
 * assure correct version is set in `package.json`
@@ -297,5 +305,5 @@ * build library with `npm run build:lib`
 
-#### Docs
+#### Release Docs
 
 * build docs site with `npm run build`
 * commit and push changes in `docs` to `master`

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

263354

increased by3.27%

Lines of code

2438

increased by4.37%

Number of lines in readme file

307

increased by2.68%

Worsened metrics

Number of package files

19

decreased by-5%

No dependency changes