ng2-dnd - npm Package Compare versions

Comparing version 1.8.2 to 1.9.0

bundles/ng2-dnd.js

@@ -103,2 +103,4 @@ System.registerDynamic("src/dnd.draggable", ["@angular/core", "./dnd.component", "./dnd.config", "./dnd.service"], true, function($__require, exports, module) {
     __decorate([core_2.Input("effectCursor"), __metadata('design:type', String), __metadata('design:paramtypes', [String])], DraggableComponent.prototype, "effectcursor", null);
+    __decorate([core_2.Input(), __metadata('design:type', Object)], DraggableComponent.prototype, "dragImage", void 0);
+    __decorate([core_2.Input(), __metadata('design:type', Boolean)], DraggableComponent.prototype, "cloneItem", void 0);
     DraggableComponent = __decorate([core_2.Directive({selector: '[dnd-draggable]'}), __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, core_1.ChangeDetectorRef])], DraggableComponent);
@@ -328,3 +330,3 @@ return DraggableComponent;
           this._sortableDataService.sortableData.splice(this._sortableDataService.index, 1);
-          this._sortableData.push(item);
+          this._sortableData.unshift(item);
           this._sortableDataService.sortableData = this._sortableData;
@@ -453,3 +455,3 @@ this._sortableDataService.index = 0;
 
-System.registerDynamic("src/dnd.config", ["@angular/core"], true, function($__require, exports, module) {
+System.registerDynamic("src/dnd.config", ["@angular/core", "./dnd.utils"], true, function($__require, exports, module) {
   "use strict";
@@ -477,2 +479,3 @@ ;
   var core_1 = $__require('@angular/core');
+  var dnd_utils_1 = $__require('./dnd.utils');
   var DataTransferEffect = (function() {
@@ -501,4 +504,9 @@ function DataTransferEffect(name) {
       this.y_offset = y_offset;
+      if (dnd_utils_1.isString(this.imageElement)) {
+        var imgScr = this.imageElement;
+        this.imageElement = new HTMLImageElement();
+        this.imageElement.src = imgScr;
+      }
     }
-    DragImage = __decorate([core_1.Injectable(), __metadata('design:paramtypes', [HTMLElement, Number, Number])], DragImage);
+    DragImage = __decorate([core_1.Injectable(), __metadata('design:paramtypes', [Object, Number, Number])], DragImage);
     return DragImage;
@@ -524,3 +532,3 @@ }());
 
-System.registerDynamic("src/dnd.service", ["@angular/core", "@angular/common/src/facade/lang", "./dnd.config"], true, function($__require, exports, module) {
+System.registerDynamic("src/dnd.service", ["@angular/core", "./dnd.config", "./dnd.utils"], true, function($__require, exports, module) {
   "use strict";
@@ -548,4 +556,4 @@ ;
   var core_1 = $__require('@angular/core');
-  var lang_1 = $__require('@angular/common/src/facade/lang');
   var dnd_config_1 = $__require('./dnd.config');
+  var dnd_utils_1 = $__require('./dnd.utils');
   var DragDropService = (function() {
@@ -571,6 +579,6 @@ function DragDropService() {
     DragDropSortableService.prototype.markSortable = function(elem) {
-      if (lang_1.isPresent(this._elem)) {
+      if (dnd_utils_1.isPresent(this._elem)) {
         this._elem.classList.remove(this._config.onSortableDragClass);
       }
-      if (lang_1.isPresent(elem)) {
+      if (dnd_utils_1.isPresent(elem)) {
         this._elem = elem;
@@ -587,3 +595,3 @@ this._elem.classList.add(this._config.onSortableDragClass);
 
-System.registerDynamic("src/dnd.component", ["@angular/core", "./dnd.config", "./dnd.service"], true, function($__require, exports, module) {
+System.registerDynamic("src/dnd.utils", [], true, function($__require, exports, module) {
   "use strict";
@@ -594,2 +602,33 @@ ;
       GLOBAL = this;
+  function isString(obj) {
+    return typeof obj === "string";
+  }
+  exports.isString = isString;
+  function isPresent(obj) {
+    return obj !== undefined && obj !== null;
+  }
+  exports.isPresent = isPresent;
+  function isFunction(obj) {
+    return typeof obj === "function";
+  }
+  exports.isFunction = isFunction;
+  function createImage(src) {
+    var img = new HTMLImageElement();
+    img.src = src;
+    return img;
+  }
+  exports.createImage = createImage;
+  function callFun(fun) {
+    return fun();
+  }
+  exports.callFun = callFun;
+  return module.exports;
+});
+
+System.registerDynamic("src/dnd.component", ["@angular/core", "./dnd.config", "./dnd.service", "./dnd.utils"], true, function($__require, exports, module) {
+  "use strict";
+  ;
+  var define,
+      global = this,
+      GLOBAL = this;
   var __decorate = (this && this.__decorate) || function(decorators, target, key, desc) {
@@ -615,2 +654,3 @@ var c = arguments.length,
   var dnd_service_1 = $__require('./dnd.service');
+  var dnd_utils_1 = $__require('./dnd.utils');
   var AbstractComponent = (function() {
@@ -647,3 +687,12 @@ function AbstractComponent(elemRef, _dragDropService, _config, _cdr) {
           event.dataTransfer.effectAllowed = _this.effectAllowed || _this._config.dragEffect.name;
-          if (_this._config.dragImage != null) {
+          if (dnd_utils_1.isPresent(_this.dragImage)) {
+            if (dnd_utils_1.isString(_this.dragImage)) {
+              event.dataTransfer.setDragImage(dnd_utils_1.createImage(_this.dragImage));
+            } else if (dnd_utils_1.isFunction(_this.dragImage)) {
+              event.dataTransfer.setDragImage(dnd_utils_1.callFun(_this.dragImage));
+            } else {
+              var img = _this.dragImage;
+              event.dataTransfer.setDragImage(img.imageElement, img.x_offset, img.y_offset);
+            }
+          } else if (dnd_utils_1.isPresent(_this._config.dragImage)) {
             var dragImage = _this._config.dragImage;
@@ -650,0 +699,0 @@ event.dataTransfer.setDragImage(dragImage.imageElement, dragImage.x_offset, dragImage.y_offset);

bundles/ng2-dnd.min.js

@@ -1,2 +0,2 @@
-System.registerDynamic("src/dnd.draggable",["@angular/core","./dnd.component","./dnd.config","./dnd.service"],!0,function(e,t,r){"use strict";var a=this&&this.__extends||function(e,t){function r(){this.constructor=e}for(var a in t)t.hasOwnProperty(a)&&(e[a]=t[a]);e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)},o=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},n=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},i=e("@angular/core"),s=e("@angular/core"),c=e("./dnd.component"),l=e("./dnd.config"),d=e("./dnd.service"),p=function(e){function t(t,r,a,o){e.call(this,t,r,a,o),this.onDragStart=new s.EventEmitter,this.onDragEnd=new s.EventEmitter,this.onDragSuccessCallback=new s.EventEmitter,this._defaultCursor=this._elem.style.cursor,this.dragEnabled=!0}return a(t,e),Object.defineProperty(t.prototype,"draggable",{set:function(e){this.dragEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"dropzones",{set:function(e){this.dropZones=e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"effectallowed",{set:function(e){this.effectAllowed=e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"effectcursor",{set:function(e){this.effectCursor=e},enumerable:!0,configurable:!0}),t.prototype._onDragStartCallback=function(e){this._dragDropService.isDragged=!0,this._dragDropService.dragData=this.dragData,this._dragDropService.onDragSuccessCallback=this.onDragSuccessCallback,this._elem.classList.add(this._config.onDragStartClass),this.onDragStart.emit({dragData:this.dragData,mouseEvent:e})},t.prototype._onDragEndCallback=function(e){this._dragDropService.isDragged=!1,this._dragDropService.dragData=null,this._dragDropService.onDragSuccessCallback=null,this._elem.classList.remove(this._config.onDragStartClass),this.onDragEnd.emit({dragData:this.dragData,mouseEvent:e})},o([s.Input("dragEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"draggable",null),o([s.Output(),n("design:type",s.EventEmitter)],t.prototype,"onDragStart",void 0),o([s.Output(),n("design:type",s.EventEmitter)],t.prototype,"onDragEnd",void 0),o([s.Input(),n("design:type",Object)],t.prototype,"dragData",void 0),o([s.Output("onDragSuccess"),n("design:type",s.EventEmitter)],t.prototype,"onDragSuccessCallback",void 0),o([s.Input("dropZones"),n("design:type",Array),n("design:paramtypes",[Array])],t.prototype,"dropzones",null),o([s.Input("effectAllowed"),n("design:type",String),n("design:paramtypes",[String])],t.prototype,"effectallowed",null),o([s.Input("effectCursor"),n("design:type",String),n("design:paramtypes",[String])],t.prototype,"effectcursor",null),t=o([s.Directive({selector:"[dnd-draggable]"}),n("design:paramtypes",[s.ElementRef,d.DragDropService,l.DragDropConfig,i.ChangeDetectorRef])],t)}(c.AbstractComponent);return t.DraggableComponent=p,r.exports}),System.registerDynamic("src/dnd.droppable",["@angular/core","./dnd.component","./dnd.config","./dnd.service"],!0,function(e,t,r){"use strict";var a=this&&this.__extends||function(e,t){function r(){this.constructor=e}for(var a in t)t.hasOwnProperty(a)&&(e[a]=t[a]);e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)},o=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},n=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},i=e("@angular/core"),s=e("@angular/core"),c=e("./dnd.component"),l=e("./dnd.config"),d=e("./dnd.service"),p=function(e){function t(t,r,a,o){e.call(this,t,r,a,o),this.onDropSuccess=new s.EventEmitter,this.onDragEnter=new s.EventEmitter,this.onDragOver=new s.EventEmitter,this.onDragLeave=new s.EventEmitter,this.dropEnabled=!0}return a(t,e),Object.defineProperty(t.prototype,"droppable",{set:function(e){this.dropEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"allowdrop",{set:function(e){this.allowDrop=e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"dropzones",{set:function(e){this.dropZones=e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"effectallowed",{set:function(e){this.effectAllowed=e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"effectcursor",{set:function(e){this.effectCursor=e},enumerable:!0,configurable:!0}),t.prototype._onDragEnterCallback=function(e){this._dragDropService.isDragged&&(this._elem.classList.add(this._config.onDragEnterClass),this.onDragEnter.emit({dragData:this._dragDropService.dragData,mouseEvent:e}))},t.prototype._onDragOverCallback=function(e){this._dragDropService.isDragged&&(this._elem.classList.add(this._config.onDragOverClass),this.onDragOver.emit({dragData:this._dragDropService.dragData,mouseEvent:e}))},t.prototype._onDragLeaveCallback=function(e){this._dragDropService.isDragged&&(this._elem.classList.remove(this._config.onDragOverClass),this._elem.classList.remove(this._config.onDragEnterClass),this.onDragLeave.emit({dragData:this._dragDropService.dragData,mouseEvent:e}))},t.prototype._onDropCallback=function(e){this._dragDropService.isDragged&&(this.onDropSuccess.emit({dragData:this._dragDropService.dragData,mouseEvent:e}),this._dragDropService.onDragSuccessCallback&&this._dragDropService.onDragSuccessCallback.emit({dragData:this._dragDropService.dragData,mouseEvent:e}),this._elem.classList.remove(this._config.onDragOverClass),this._elem.classList.remove(this._config.onDragEnterClass))},o([s.Input("dropEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"droppable",null),o([s.Output(),n("design:type",s.EventEmitter)],t.prototype,"onDropSuccess",void 0),o([s.Output(),n("design:type",s.EventEmitter)],t.prototype,"onDragEnter",void 0),o([s.Output(),n("design:type",s.EventEmitter)],t.prototype,"onDragOver",void 0),o([s.Output(),n("design:type",s.EventEmitter)],t.prototype,"onDragLeave",void 0),o([s.Input("allowDrop"),n("design:type",Function),n("design:paramtypes",[Function])],t.prototype,"allowdrop",null),o([s.Input("dropZones"),n("design:type",Array),n("design:paramtypes",[Array])],t.prototype,"dropzones",null),o([s.Input("effectAllowed"),n("design:type",String),n("design:paramtypes",[String])],t.prototype,"effectallowed",null),o([s.Input("effectCursor"),n("design:type",String),n("design:paramtypes",[String])],t.prototype,"effectcursor",null),t=o([s.Directive({selector:"[dnd-droppable]"}),n("design:paramtypes",[s.ElementRef,d.DragDropService,l.DragDropConfig,i.ChangeDetectorRef])],t)}(c.AbstractComponent);return t.DroppableComponent=p,r.exports}),System.registerDynamic("src/dnd.sortable",["@angular/core","./dnd.component","./dnd.config","./dnd.service"],!0,function(e,t,r){"use strict";var a=this&&this.__extends||function(e,t){function r(){this.constructor=e}for(var a in t)t.hasOwnProperty(a)&&(e[a]=t[a]);e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)},o=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},n=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},i=e("@angular/core"),s=e("@angular/core"),c=e("./dnd.component"),l=e("./dnd.config"),d=e("./dnd.service"),p=function(e){function t(t,r,a,o,n){e.call(this,t,r,a,o),this._sortableDataService=n,this._sortableData=[],this.dragEnabled=!1}return a(t,e),Object.defineProperty(t.prototype,"draggable",{set:function(e){this.dragEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"sortableData",{get:function(){return this._sortableData},set:function(e){this._sortableData=e,this.dropEnabled=0===this._sortableData.length},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"dropzones",{set:function(e){this.dropZones=e},enumerable:!0,configurable:!0}),t.prototype._onDragEnterCallback=function(e){if(this._sortableDataService.isDragged){var t=this._sortableDataService.sortableData[this._sortableDataService.index];-1===this._sortableData.indexOf(t)&&(this._sortableDataService.sortableData.splice(this._sortableDataService.index,1),this._sortableData.push(t),this._sortableDataService.sortableData=this._sortableData,this._sortableDataService.index=0),this.detectChanges()}},o([s.Input("dragEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"draggable",null),o([s.Input(),n("design:type",Array),n("design:paramtypes",[Array])],t.prototype,"sortableData",null),o([s.Input("dropZones"),n("design:type",Array),n("design:paramtypes",[Array])],t.prototype,"dropzones",null),t=o([s.Directive({selector:"[dnd-sortable-container]"}),n("design:paramtypes",[s.ElementRef,d.DragDropService,l.DragDropConfig,i.ChangeDetectorRef,d.DragDropSortableService])],t)}(c.AbstractComponent);t.SortableContainer=p;var g=function(e){function t(t,r,a,o,n,i){e.call(this,t,r,a,i),this._sortableContainer=o,this._sortableDataService=n,this.onDragSuccessCallback=new s.EventEmitter,this.onDragStartCallback=new s.EventEmitter,this.onDragOverCallback=new s.EventEmitter,this.onDragEndCallback=new s.EventEmitter,this.onDropSuccessCallback=new s.EventEmitter,this.dropZones=this._sortableContainer.dropZones,this.dragEnabled=!0,this.dropEnabled=!0}return a(t,e),Object.defineProperty(t.prototype,"draggable",{set:function(e){this.dragEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"droppable",{set:function(e){this.dropEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"effectallowed",{set:function(e){this.effectAllowed=e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"effectcursor",{set:function(e){this.effectCursor=e},enumerable:!0,configurable:!0}),t.prototype._onDragStartCallback=function(e){this._sortableDataService.isDragged=!0,this._sortableDataService.sortableData=this._sortableContainer.sortableData,this._sortableDataService.index=this.index,this._sortableDataService.markSortable(this._elem),this._dragDropService.isDragged=!0,this._dragDropService.dragData=this.dragData,this._dragDropService.onDragSuccessCallback=this.onDragSuccessCallback,this.onDragStartCallback.emit(this._dragDropService.dragData)},t.prototype._onDragOverCallback=function(e){this._sortableDataService.isDragged&&this._elem!=this._sortableDataService.elem&&(this._sortableDataService.sortableData=this._sortableContainer.sortableData,this._sortableDataService.index=this.index,this._sortableDataService.markSortable(this._elem),this.onDragOverCallback.emit(this._dragDropService.dragData))},t.prototype._onDragEndCallback=function(e){this._sortableDataService.isDragged=!1,this._sortableDataService.sortableData=null,this._sortableDataService.index=null,this._sortableDataService.markSortable(null),this._dragDropService.isDragged=!1,this._dragDropService.dragData=null,this._dragDropService.onDragSuccessCallback=null,this.onDragEndCallback.emit(this._dragDropService.dragData)},t.prototype._onDragEnterCallback=function(e){if(this._sortableDataService.isDragged&&(this._sortableDataService.markSortable(this._elem),this.index!==this._sortableDataService.index||this._sortableDataService.sortableData!=this._sortableContainer.sortableData)){var t=this._sortableDataService.sortableData[this._sortableDataService.index];this._sortableDataService.sortableData.splice(this._sortableDataService.index,1),this._sortableContainer.sortableData.splice(this.index,0,t),this._sortableDataService.sortableData=this._sortableContainer.sortableData,this._sortableDataService.index=this.index}},t.prototype._onDropCallback=function(e){this._sortableDataService.isDragged&&(this.onDropSuccessCallback.emit(this._dragDropService.dragData),this._dragDropService.onDragSuccessCallback&&this._dragDropService.onDragSuccessCallback.emit(this._dragDropService.dragData),this._sortableContainer.detectChanges())},o([s.Input("sortableIndex"),n("design:type",Number)],t.prototype,"index",void 0),o([s.Input("dragEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"draggable",null),o([s.Input("dropEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"droppable",null),o([s.Input(),n("design:type",Object)],t.prototype,"dragData",void 0),o([s.Input("effectAllowed"),n("design:type",String),n("design:paramtypes",[String])],t.prototype,"effectallowed",null),o([s.Input("effectCursor"),n("design:type",String),n("design:paramtypes",[String])],t.prototype,"effectcursor",null),o([s.Output("onDragSuccess"),n("design:type",s.EventEmitter)],t.prototype,"onDragSuccessCallback",void 0),o([s.Output("onDragStart"),n("design:type",s.EventEmitter)],t.prototype,"onDragStartCallback",void 0),o([s.Output("onDragOver"),n("design:type",s.EventEmitter)],t.prototype,"onDragOverCallback",void 0),o([s.Output("onDragEnd"),n("design:type",s.EventEmitter)],t.prototype,"onDragEndCallback",void 0),o([s.Output("onDropSuccess"),n("design:type",s.EventEmitter)],t.prototype,"onDropSuccessCallback",void 0),t=o([s.Directive({selector:"[dnd-sortable]"}),n("design:paramtypes",[s.ElementRef,d.DragDropService,l.DragDropConfig,p,d.DragDropSortableService,i.ChangeDetectorRef])],t)}(c.AbstractComponent);return t.SortableComponent=g,r.exports}),System.registerDynamic("src/dnd.config",["@angular/core"],!0,function(e,t,r){"use strict";var a=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},o=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},n=e("@angular/core"),i=function(){function e(e){this.name=e}return e.COPY=new e("copy"),e.LINK=new e("link"),e.MOVE=new e("move"),e.NONE=new e("none"),e=a([n.Injectable(),o("design:paramtypes",[String])],e)}();t.DataTransferEffect=i;var s=function(){function e(e,t,r){void 0===t&&(t=0),void 0===r&&(r=0),this.imageElement=e,this.x_offset=t,this.y_offset=r}return e=a([n.Injectable(),o("design:paramtypes",[HTMLElement,Number,Number])],e)}();t.DragImage=s;var c=function(){function e(){this.onDragStartClass="dnd-drag-start",this.onDragEnterClass="dnd-drag-enter",this.onDragOverClass="dnd-drag-over",this.onSortableDragClass="dnd-sortable-drag",this.dragEffect=i.MOVE,this.dropEffect=i.MOVE,this.dragCursor="move"}return e=a([n.Injectable(),o("design:paramtypes",[])],e)}();return t.DragDropConfig=c,r.exports}),System.registerDynamic("src/dnd.service",["@angular/core","@angular/common/src/facade/lang","./dnd.config"],!0,function(e,t,r){"use strict";var a=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},o=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},n=e("@angular/core"),i=e("@angular/common/src/facade/lang"),s=e("./dnd.config"),c=function(){function e(){this.allowedDropZones=[]}return e=a([n.Injectable(),o("design:paramtypes",[])],e)}();t.DragDropService=c;var l=function(){function e(e){this._config=e}return Object.defineProperty(e.prototype,"elem",{get:function(){return this._elem},enumerable:!0,configurable:!0}),e.prototype.markSortable=function(e){i.isPresent(this._elem)&&this._elem.classList.remove(this._config.onSortableDragClass),i.isPresent(e)&&(this._elem=e,this._elem.classList.add(this._config.onSortableDragClass))},e=a([n.Injectable(),o("design:paramtypes",[s.DragDropConfig])],e)}();return t.DragDropSortableService=l,r.exports}),System.registerDynamic("src/dnd.component",["@angular/core","./dnd.config","./dnd.service"],!0,function(e,t,r){"use strict";var a=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},o=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},n=e("@angular/core"),i=e("@angular/core"),s=e("./dnd.config"),c=e("./dnd.service"),l=function(){function e(e,t,r,a){var o=this;this._dragDropService=t,this._config=r,this._cdr=a,this._dragEnabled=!1,this.dropEnabled=!1,this.dropZones=[],this._elem=e.nativeElement,this._elem.ondragenter=function(e){o._onDragEnter(e)},this._elem.ondragover=function(e){return o._onDragOver(e),null!=e.dataTransfer&&(e.dataTransfer.dropEffect=o._config.dropEffect.name),!1},this._elem.ondragleave=function(e){o._onDragLeave(e)},this._elem.ondrop=function(e){o._onDrop(e)},this._elem.ondragstart=function(e){if(o._onDragStart(e),null!=e.dataTransfer){if(e.dataTransfer.setData("text",""),e.dataTransfer.effectAllowed=o.effectAllowed||o._config.dragEffect.name,null!=o._config.dragImage){var t=o._config.dragImage;e.dataTransfer.setDragImage(t.imageElement,t.x_offset,t.y_offset)}o._dragEnabled?o._elem.style.cursor=o.effectCursor?o.effectCursor:o._config.dragCursor:o._elem.style.cursor=o._defaultCursor}},this._elem.ondragend=function(e){o._onDragEnd(e),o._elem.style.cursor=o._defaultCursor}}return Object.defineProperty(e.prototype,"dragEnabled",{get:function(){return this._dragEnabled},set:function(e){this._dragEnabled=!!e,this._elem.draggable=this._dragEnabled},enumerable:!0,configurable:!0}),e.prototype.detectChanges=function(){var e=this;setTimeout(function(){e._cdr.detectChanges()},250)},e.prototype._onDragEnter=function(e){this._isDropAllowed&&this._onDragEnterCallback(e)},e.prototype._onDragOver=function(e){this._isDropAllowed&&(e.preventDefault&&e.preventDefault(),this._onDragOverCallback(e))},e.prototype._onDragLeave=function(e){this._isDropAllowed&&this._onDragLeaveCallback(e)},e.prototype._onDrop=function(e){this._isDropAllowed&&(e.preventDefault&&e.preventDefault(),e.stopPropagation&&e.stopPropagation(),this._onDropCallback(e),this.detectChanges())},Object.defineProperty(e.prototype,"_isDropAllowed",{get:function(){if(this._dragDropService.isDragged&&this.dropEnabled){if(this.allowDrop)return this.allowDrop(this._dragDropService.dragData);if(0===this.dropZones.length&&0===this._dragDropService.allowedDropZones.length)return!0;for(var e=0;e<this._dragDropService.allowedDropZones.length;e++){var t=this._dragDropService.allowedDropZones[e];if(-1!==this.dropZones.indexOf(t))return!0}}return!1},enumerable:!0,configurable:!0}),e.prototype._onDragStart=function(e){this._dragEnabled&&(this._dragDropService.allowedDropZones=this.dropZones,this._onDragStartCallback(e))},e.prototype._onDragEnd=function(e){this._dragDropService.allowedDropZones=[],this._onDragEndCallback(e)},e.prototype._onDragEnterCallback=function(e){},e.prototype._onDragOverCallback=function(e){},e.prototype._onDragLeaveCallback=function(e){},e.prototype._onDropCallback=function(e){},e.prototype._onDragStartCallback=function(e){},e.prototype._onDragEndCallback=function(e){},e=a([n.Injectable(),o("design:paramtypes",[i.ElementRef,c.DragDropService,s.DragDropConfig,n.ChangeDetectorRef])],e)}();return t.AbstractComponent=l,r.exports}),System.registerDynamic("ng2-dnd",["./src/dnd.config","./src/dnd.service","./src/dnd.draggable","./src/dnd.droppable","./src/dnd.sortable","./src/dnd.component"],!0,function(e,t,r){"use strict";function a(e){for(var r in e)t.hasOwnProperty(r)||(t[r]=e[r])}var o=e("./src/dnd.config"),n=e("./src/dnd.service"),i=e("./src/dnd.draggable"),s=e("./src/dnd.droppable"),c=e("./src/dnd.sortable");return a(e("./src/dnd.component")),a(e("./src/dnd.config")),a(e("./src/dnd.service")),a(e("./src/dnd.draggable")),a(e("./src/dnd.droppable")),a(e("./src/dnd.sortable")),t.DND_PROVIDERS=[o.DragDropConfig,n.DragDropService,n.DragDropSortableService],t.DND_DIRECTIVES=[i.DraggableComponent,s.DroppableComponent,c.SortableContainer,c.SortableComponent],r.exports});
+System.registerDynamic("src/dnd.draggable",["@angular/core","./dnd.component","./dnd.config","./dnd.service"],!0,function(e,t,r){"use strict";var a=this&&this.__extends||function(e,t){function r(){this.constructor=e}for(var a in t)t.hasOwnProperty(a)&&(e[a]=t[a]);e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)},n=this&&this.__decorate||function(e,t,r,a){var n,o=arguments.length,i=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(o<3?n(i):o>3?n(t,r,i):n(t,r))||i);return o>3&&i&&Object.defineProperty(t,r,i),i},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},i=e("@angular/core"),s=e("@angular/core"),c=e("./dnd.component"),l=e("./dnd.config"),d=e("./dnd.service"),p=function(e){function t(t,r,a,n){e.call(this,t,r,a,n),this.onDragStart=new s.EventEmitter,this.onDragEnd=new s.EventEmitter,this.onDragSuccessCallback=new s.EventEmitter,this._defaultCursor=this._elem.style.cursor,this.dragEnabled=!0}return a(t,e),Object.defineProperty(t.prototype,"draggable",{set:function(e){this.dragEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"dropzones",{set:function(e){this.dropZones=e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"effectallowed",{set:function(e){this.effectAllowed=e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"effectcursor",{set:function(e){this.effectCursor=e},enumerable:!0,configurable:!0}),t.prototype._onDragStartCallback=function(e){this._dragDropService.isDragged=!0,this._dragDropService.dragData=this.dragData,this._dragDropService.onDragSuccessCallback=this.onDragSuccessCallback,this._elem.classList.add(this._config.onDragStartClass),this.onDragStart.emit({dragData:this.dragData,mouseEvent:e})},t.prototype._onDragEndCallback=function(e){this._dragDropService.isDragged=!1,this._dragDropService.dragData=null,this._dragDropService.onDragSuccessCallback=null,this._elem.classList.remove(this._config.onDragStartClass),this.onDragEnd.emit({dragData:this.dragData,mouseEvent:e})},n([s.Input("dragEnabled"),o("design:type",Boolean),o("design:paramtypes",[Boolean])],t.prototype,"draggable",null),n([s.Output(),o("design:type",s.EventEmitter)],t.prototype,"onDragStart",void 0),n([s.Output(),o("design:type",s.EventEmitter)],t.prototype,"onDragEnd",void 0),n([s.Input(),o("design:type",Object)],t.prototype,"dragData",void 0),n([s.Output("onDragSuccess"),o("design:type",s.EventEmitter)],t.prototype,"onDragSuccessCallback",void 0),n([s.Input("dropZones"),o("design:type",Array),o("design:paramtypes",[Array])],t.prototype,"dropzones",null),n([s.Input("effectAllowed"),o("design:type",String),o("design:paramtypes",[String])],t.prototype,"effectallowed",null),n([s.Input("effectCursor"),o("design:type",String),o("design:paramtypes",[String])],t.prototype,"effectcursor",null),n([s.Input(),o("design:type",Object)],t.prototype,"dragImage",void 0),n([s.Input(),o("design:type",Boolean)],t.prototype,"cloneItem",void 0),t=n([s.Directive({selector:"[dnd-draggable]"}),o("design:paramtypes",[s.ElementRef,d.DragDropService,l.DragDropConfig,i.ChangeDetectorRef])],t)}(c.AbstractComponent);return t.DraggableComponent=p,r.exports}),System.registerDynamic("src/dnd.droppable",["@angular/core","./dnd.component","./dnd.config","./dnd.service"],!0,function(e,t,r){"use strict";var a=this&&this.__extends||function(e,t){function r(){this.constructor=e}for(var a in t)t.hasOwnProperty(a)&&(e[a]=t[a]);e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)},n=this&&this.__decorate||function(e,t,r,a){var n,o=arguments.length,i=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(o<3?n(i):o>3?n(t,r,i):n(t,r))||i);return o>3&&i&&Object.defineProperty(t,r,i),i},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},i=e("@angular/core"),s=e("@angular/core"),c=e("./dnd.component"),l=e("./dnd.config"),d=e("./dnd.service"),p=function(e){function t(t,r,a,n){e.call(this,t,r,a,n),this.onDropSuccess=new s.EventEmitter,this.onDragEnter=new s.EventEmitter,this.onDragOver=new s.EventEmitter,this.onDragLeave=new s.EventEmitter,this.dropEnabled=!0}return a(t,e),Object.defineProperty(t.prototype,"droppable",{set:function(e){this.dropEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"allowdrop",{set:function(e){this.allowDrop=e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"dropzones",{set:function(e){this.dropZones=e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"effectallowed",{set:function(e){this.effectAllowed=e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"effectcursor",{set:function(e){this.effectCursor=e},enumerable:!0,configurable:!0}),t.prototype._onDragEnterCallback=function(e){this._dragDropService.isDragged&&(this._elem.classList.add(this._config.onDragEnterClass),this.onDragEnter.emit({dragData:this._dragDropService.dragData,mouseEvent:e}))},t.prototype._onDragOverCallback=function(e){this._dragDropService.isDragged&&(this._elem.classList.add(this._config.onDragOverClass),this.onDragOver.emit({dragData:this._dragDropService.dragData,mouseEvent:e}))},t.prototype._onDragLeaveCallback=function(e){this._dragDropService.isDragged&&(this._elem.classList.remove(this._config.onDragOverClass),this._elem.classList.remove(this._config.onDragEnterClass),this.onDragLeave.emit({dragData:this._dragDropService.dragData,mouseEvent:e}))},t.prototype._onDropCallback=function(e){this._dragDropService.isDragged&&(this.onDropSuccess.emit({dragData:this._dragDropService.dragData,mouseEvent:e}),this._dragDropService.onDragSuccessCallback&&this._dragDropService.onDragSuccessCallback.emit({dragData:this._dragDropService.dragData,mouseEvent:e}),this._elem.classList.remove(this._config.onDragOverClass),this._elem.classList.remove(this._config.onDragEnterClass))},n([s.Input("dropEnabled"),o("design:type",Boolean),o("design:paramtypes",[Boolean])],t.prototype,"droppable",null),n([s.Output(),o("design:type",s.EventEmitter)],t.prototype,"onDropSuccess",void 0),n([s.Output(),o("design:type",s.EventEmitter)],t.prototype,"onDragEnter",void 0),n([s.Output(),o("design:type",s.EventEmitter)],t.prototype,"onDragOver",void 0),n([s.Output(),o("design:type",s.EventEmitter)],t.prototype,"onDragLeave",void 0),n([s.Input("allowDrop"),o("design:type",Function),o("design:paramtypes",[Function])],t.prototype,"allowdrop",null),n([s.Input("dropZones"),o("design:type",Array),o("design:paramtypes",[Array])],t.prototype,"dropzones",null),n([s.Input("effectAllowed"),o("design:type",String),o("design:paramtypes",[String])],t.prototype,"effectallowed",null),n([s.Input("effectCursor"),o("design:type",String),o("design:paramtypes",[String])],t.prototype,"effectcursor",null),t=n([s.Directive({selector:"[dnd-droppable]"}),o("design:paramtypes",[s.ElementRef,d.DragDropService,l.DragDropConfig,i.ChangeDetectorRef])],t)}(c.AbstractComponent);return t.DroppableComponent=p,r.exports}),System.registerDynamic("src/dnd.sortable",["@angular/core","./dnd.component","./dnd.config","./dnd.service"],!0,function(e,t,r){"use strict";var a=this&&this.__extends||function(e,t){function r(){this.constructor=e}for(var a in t)t.hasOwnProperty(a)&&(e[a]=t[a]);e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)},n=this&&this.__decorate||function(e,t,r,a){var n,o=arguments.length,i=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(o<3?n(i):o>3?n(t,r,i):n(t,r))||i);return o>3&&i&&Object.defineProperty(t,r,i),i},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},i=e("@angular/core"),s=e("@angular/core"),c=e("./dnd.component"),l=e("./dnd.config"),d=e("./dnd.service"),p=function(e){function t(t,r,a,n,o){e.call(this,t,r,a,n),this._sortableDataService=o,this._sortableData=[],this.dragEnabled=!1}return a(t,e),Object.defineProperty(t.prototype,"draggable",{set:function(e){this.dragEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"sortableData",{get:function(){return this._sortableData},set:function(e){this._sortableData=e,this.dropEnabled=0===this._sortableData.length},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"dropzones",{set:function(e){this.dropZones=e},enumerable:!0,configurable:!0}),t.prototype._onDragEnterCallback=function(e){if(this._sortableDataService.isDragged){var t=this._sortableDataService.sortableData[this._sortableDataService.index];this._sortableData.indexOf(t)===-1&&(this._sortableDataService.sortableData.splice(this._sortableDataService.index,1),this._sortableData.unshift(t),this._sortableDataService.sortableData=this._sortableData,this._sortableDataService.index=0),this.detectChanges()}},n([s.Input("dragEnabled"),o("design:type",Boolean),o("design:paramtypes",[Boolean])],t.prototype,"draggable",null),n([s.Input(),o("design:type",Array),o("design:paramtypes",[Array])],t.prototype,"sortableData",null),n([s.Input("dropZones"),o("design:type",Array),o("design:paramtypes",[Array])],t.prototype,"dropzones",null),t=n([s.Directive({selector:"[dnd-sortable-container]"}),o("design:paramtypes",[s.ElementRef,d.DragDropService,l.DragDropConfig,i.ChangeDetectorRef,d.DragDropSortableService])],t)}(c.AbstractComponent);t.SortableContainer=p;var g=function(e){function t(t,r,a,n,o,i){e.call(this,t,r,a,i),this._sortableContainer=n,this._sortableDataService=o,this.onDragSuccessCallback=new s.EventEmitter,this.onDragStartCallback=new s.EventEmitter,this.onDragOverCallback=new s.EventEmitter,this.onDragEndCallback=new s.EventEmitter,this.onDropSuccessCallback=new s.EventEmitter,this.dropZones=this._sortableContainer.dropZones,this.dragEnabled=!0,this.dropEnabled=!0}return a(t,e),Object.defineProperty(t.prototype,"draggable",{set:function(e){this.dragEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"droppable",{set:function(e){this.dropEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"effectallowed",{set:function(e){this.effectAllowed=e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"effectcursor",{set:function(e){this.effectCursor=e},enumerable:!0,configurable:!0}),t.prototype._onDragStartCallback=function(e){this._sortableDataService.isDragged=!0,this._sortableDataService.sortableData=this._sortableContainer.sortableData,this._sortableDataService.index=this.index,this._sortableDataService.markSortable(this._elem),this._dragDropService.isDragged=!0,this._dragDropService.dragData=this.dragData,this._dragDropService.onDragSuccessCallback=this.onDragSuccessCallback,this.onDragStartCallback.emit(this._dragDropService.dragData)},t.prototype._onDragOverCallback=function(e){this._sortableDataService.isDragged&&this._elem!=this._sortableDataService.elem&&(this._sortableDataService.sortableData=this._sortableContainer.sortableData,this._sortableDataService.index=this.index,this._sortableDataService.markSortable(this._elem),this.onDragOverCallback.emit(this._dragDropService.dragData))},t.prototype._onDragEndCallback=function(e){this._sortableDataService.isDragged=!1,this._sortableDataService.sortableData=null,this._sortableDataService.index=null,this._sortableDataService.markSortable(null),this._dragDropService.isDragged=!1,this._dragDropService.dragData=null,this._dragDropService.onDragSuccessCallback=null,this.onDragEndCallback.emit(this._dragDropService.dragData)},t.prototype._onDragEnterCallback=function(e){if(this._sortableDataService.isDragged&&(this._sortableDataService.markSortable(this._elem),this.index!==this._sortableDataService.index||this._sortableDataService.sortableData!=this._sortableContainer.sortableData)){var t=this._sortableDataService.sortableData[this._sortableDataService.index];this._sortableDataService.sortableData.splice(this._sortableDataService.index,1),this._sortableContainer.sortableData.splice(this.index,0,t),this._sortableDataService.sortableData=this._sortableContainer.sortableData,this._sortableDataService.index=this.index}},t.prototype._onDropCallback=function(e){this._sortableDataService.isDragged&&(this.onDropSuccessCallback.emit(this._dragDropService.dragData),this._dragDropService.onDragSuccessCallback&&this._dragDropService.onDragSuccessCallback.emit(this._dragDropService.dragData),this._sortableContainer.detectChanges())},n([s.Input("sortableIndex"),o("design:type",Number)],t.prototype,"index",void 0),n([s.Input("dragEnabled"),o("design:type",Boolean),o("design:paramtypes",[Boolean])],t.prototype,"draggable",null),n([s.Input("dropEnabled"),o("design:type",Boolean),o("design:paramtypes",[Boolean])],t.prototype,"droppable",null),n([s.Input(),o("design:type",Object)],t.prototype,"dragData",void 0),n([s.Input("effectAllowed"),o("design:type",String),o("design:paramtypes",[String])],t.prototype,"effectallowed",null),n([s.Input("effectCursor"),o("design:type",String),o("design:paramtypes",[String])],t.prototype,"effectcursor",null),n([s.Output("onDragSuccess"),o("design:type",s.EventEmitter)],t.prototype,"onDragSuccessCallback",void 0),n([s.Output("onDragStart"),o("design:type",s.EventEmitter)],t.prototype,"onDragStartCallback",void 0),n([s.Output("onDragOver"),o("design:type",s.EventEmitter)],t.prototype,"onDragOverCallback",void 0),n([s.Output("onDragEnd"),o("design:type",s.EventEmitter)],t.prototype,"onDragEndCallback",void 0),n([s.Output("onDropSuccess"),o("design:type",s.EventEmitter)],t.prototype,"onDropSuccessCallback",void 0),t=n([s.Directive({selector:"[dnd-sortable]"}),o("design:paramtypes",[s.ElementRef,d.DragDropService,l.DragDropConfig,p,d.DragDropSortableService,i.ChangeDetectorRef])],t)}(c.AbstractComponent);return t.SortableComponent=g,r.exports}),System.registerDynamic("src/dnd.config",["@angular/core","./dnd.utils"],!0,function(e,t,r){"use strict";var a=this&&this.__decorate||function(e,t,r,a){var n,o=arguments.length,i=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(o<3?n(i):o>3?n(t,r,i):n(t,r))||i);return o>3&&i&&Object.defineProperty(t,r,i),i},n=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},o=e("@angular/core"),i=e("./dnd.utils"),s=function(){function e(e){this.name=e}return e.COPY=new e("copy"),e.LINK=new e("link"),e.MOVE=new e("move"),e.NONE=new e("none"),e=a([o.Injectable(),n("design:paramtypes",[String])],e)}();t.DataTransferEffect=s;var c=function(){function e(e,t,r){if(void 0===t&&(t=0),void 0===r&&(r=0),this.imageElement=e,this.x_offset=t,this.y_offset=r,i.isString(this.imageElement)){var a=this.imageElement;this.imageElement=new HTMLImageElement,this.imageElement.src=a}}return e=a([o.Injectable(),n("design:paramtypes",[Object,Number,Number])],e)}();t.DragImage=c;var l=function(){function e(){this.onDragStartClass="dnd-drag-start",this.onDragEnterClass="dnd-drag-enter",this.onDragOverClass="dnd-drag-over",this.onSortableDragClass="dnd-sortable-drag",this.dragEffect=s.MOVE,this.dropEffect=s.MOVE,this.dragCursor="move"}return e=a([o.Injectable(),n("design:paramtypes",[])],e)}();return t.DragDropConfig=l,r.exports}),System.registerDynamic("src/dnd.service",["@angular/core","./dnd.config","./dnd.utils"],!0,function(e,t,r){"use strict";var a=this&&this.__decorate||function(e,t,r,a){var n,o=arguments.length,i=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(o<3?n(i):o>3?n(t,r,i):n(t,r))||i);return o>3&&i&&Object.defineProperty(t,r,i),i},n=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},o=e("@angular/core"),i=e("./dnd.config"),s=e("./dnd.utils"),c=function(){function e(){this.allowedDropZones=[]}return e=a([o.Injectable(),n("design:paramtypes",[])],e)}();t.DragDropService=c;var l=function(){function e(e){this._config=e}return Object.defineProperty(e.prototype,"elem",{get:function(){return this._elem},enumerable:!0,configurable:!0}),e.prototype.markSortable=function(e){s.isPresent(this._elem)&&this._elem.classList.remove(this._config.onSortableDragClass),s.isPresent(e)&&(this._elem=e,this._elem.classList.add(this._config.onSortableDragClass))},e=a([o.Injectable(),n("design:paramtypes",[i.DragDropConfig])],e)}();return t.DragDropSortableService=l,r.exports}),System.registerDynamic("src/dnd.utils",[],!0,function(e,t,r){"use strict";function a(e){return"string"==typeof e}function n(e){return void 0!==e&&null!==e}function o(e){return"function"==typeof e}function i(e){var t=new HTMLImageElement;return t.src=e,t}function s(e){return e()}return t.isString=a,t.isPresent=n,t.isFunction=o,t.createImage=i,t.callFun=s,r.exports}),System.registerDynamic("src/dnd.component",["@angular/core","./dnd.config","./dnd.service","./dnd.utils"],!0,function(e,t,r){"use strict";var a=this&&this.__decorate||function(e,t,r,a){var n,o=arguments.length,i=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(o<3?n(i):o>3?n(t,r,i):n(t,r))||i);return o>3&&i&&Object.defineProperty(t,r,i),i},n=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},o=e("@angular/core"),i=e("@angular/core"),s=e("./dnd.config"),c=e("./dnd.service"),l=e("./dnd.utils"),d=function(){function e(e,t,r,a){var n=this;this._dragDropService=t,this._config=r,this._cdr=a,this._dragEnabled=!1,this.dropEnabled=!1,this.dropZones=[],this._elem=e.nativeElement,this._elem.ondragenter=function(e){n._onDragEnter(e)},this._elem.ondragover=function(e){return n._onDragOver(e),null!=e.dataTransfer&&(e.dataTransfer.dropEffect=n._config.dropEffect.name),!1},this._elem.ondragleave=function(e){n._onDragLeave(e)},this._elem.ondrop=function(e){n._onDrop(e)},this._elem.ondragstart=function(e){if(n._onDragStart(e),null!=e.dataTransfer){if(e.dataTransfer.setData("text",""),e.dataTransfer.effectAllowed=n.effectAllowed||n._config.dragEffect.name,l.isPresent(n.dragImage))if(l.isString(n.dragImage))e.dataTransfer.setDragImage(l.createImage(n.dragImage));else if(l.isFunction(n.dragImage))e.dataTransfer.setDragImage(l.callFun(n.dragImage));else{var t=n.dragImage;e.dataTransfer.setDragImage(t.imageElement,t.x_offset,t.y_offset)}else if(l.isPresent(n._config.dragImage)){var r=n._config.dragImage;e.dataTransfer.setDragImage(r.imageElement,r.x_offset,r.y_offset)}n._dragEnabled?n._elem.style.cursor=n.effectCursor?n.effectCursor:n._config.dragCursor:n._elem.style.cursor=n._defaultCursor}},this._elem.ondragend=function(e){n._onDragEnd(e),n._elem.style.cursor=n._defaultCursor}}return Object.defineProperty(e.prototype,"dragEnabled",{get:function(){return this._dragEnabled},set:function(e){this._dragEnabled=!!e,this._elem.draggable=this._dragEnabled},enumerable:!0,configurable:!0}),e.prototype.detectChanges=function(){var e=this;setTimeout(function(){e._cdr.detectChanges()},250)},e.prototype._onDragEnter=function(e){this._isDropAllowed&&this._onDragEnterCallback(e)},e.prototype._onDragOver=function(e){this._isDropAllowed&&(e.preventDefault&&e.preventDefault(),this._onDragOverCallback(e))},e.prototype._onDragLeave=function(e){this._isDropAllowed&&this._onDragLeaveCallback(e)},e.prototype._onDrop=function(e){this._isDropAllowed&&(e.preventDefault&&e.preventDefault(),e.stopPropagation&&e.stopPropagation(),this._onDropCallback(e),this.detectChanges())},Object.defineProperty(e.prototype,"_isDropAllowed",{get:function(){if(this._dragDropService.isDragged&&this.dropEnabled){if(this.allowDrop)return this.allowDrop(this._dragDropService.dragData);if(0===this.dropZones.length&&0===this._dragDropService.allowedDropZones.length)return!0;for(var e=0;e<this._dragDropService.allowedDropZones.length;e++){var t=this._dragDropService.allowedDropZones[e];if(this.dropZones.indexOf(t)!==-1)return!0}}return!1},enumerable:!0,configurable:!0}),e.prototype._onDragStart=function(e){this._dragEnabled&&(this._dragDropService.allowedDropZones=this.dropZones,this._onDragStartCallback(e))},e.prototype._onDragEnd=function(e){this._dragDropService.allowedDropZones=[],this._onDragEndCallback(e)},e.prototype._onDragEnterCallback=function(e){},e.prototype._onDragOverCallback=function(e){},e.prototype._onDragLeaveCallback=function(e){},e.prototype._onDropCallback=function(e){},e.prototype._onDragStartCallback=function(e){},e.prototype._onDragEndCallback=function(e){},e=a([o.Injectable(),n("design:paramtypes",[i.ElementRef,c.DragDropService,s.DragDropConfig,o.ChangeDetectorRef])],e)}();return t.AbstractComponent=d,r.exports}),System.registerDynamic("ng2-dnd",["./src/dnd.config","./src/dnd.service","./src/dnd.draggable","./src/dnd.droppable","./src/dnd.sortable","./src/dnd.component"],!0,function(e,t,r){"use strict";function a(e){for(var r in e)t.hasOwnProperty(r)||(t[r]=e[r])}var n=e("./src/dnd.config"),o=e("./src/dnd.service"),i=e("./src/dnd.draggable"),s=e("./src/dnd.droppable"),c=e("./src/dnd.sortable");return a(e("./src/dnd.component")),a(e("./src/dnd.config")),a(e("./src/dnd.service")),a(e("./src/dnd.draggable")),a(e("./src/dnd.droppable")),a(e("./src/dnd.sortable")),t.DND_PROVIDERS=[n.DragDropConfig,o.DragDropService,o.DragDropSortableService],t.DND_DIRECTIVES=[i.DraggableComponent,s.DroppableComponent,c.SortableContainer,c.SortableComponent],r.exports});
 //# sourceMappingURL=bundles/ng2-dnd.min.js.map

karma.conf.js

@@ -22,2 +22,3 @@ // Karma configuration
             'node_modules/zone.js/dist/jasmine-patch.js',
+            'node_modules/zone.js/dist/async-test.js',
             'node_modules/systemjs/dist/system.src.js',
@@ -24,0 +25,0 @@ 'node_modules/reflect-metadata/Reflect.js',

package.json

@@ -31,7 +31,7 @@ {
   "dependencies": {
-    "@angular/common": "^2.0.0-rc.1",
-    "@angular/compiler": "^2.0.0-rc.1",
-    "@angular/core": "^2.0.0-rc.1",
-    "@angular/platform-browser": "^2.0.0-rc.1",
-    "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
+    "@angular/common": "^2.0.0-rc.4",
+    "@angular/compiler": "^2.0.0-rc.4",
+    "@angular/core": "^2.0.0-rc.4",
+    "@angular/platform-browser": "^2.0.0-rc.4",
+    "@angular/platform-browser-dynamic": "^2.0.0-rc.4",
     "es6-shim": "~0.35.0",
@@ -62,3 +62,3 @@ "reflect-metadata": "0.1.2",
   },
-  "version": "1.8.2"
+  "version": "1.9.0"
 }

README.md

@@ -25,2 +25,4 @@ # Angular 2 Drag-and-Drop [![npm version](https://badge.fury.io/js/ng2-dnd.svg)](https://badge.fury.io/js/ng2-dnd) [![npm monthly downloads](https://img.shields.io/npm/dm/ng2-dnd.svg?style=flat-square)](https://www.npmjs.com/package/ng2-dnd)
 
+Plunker demo available [here](http://embed.plnkr.co/JbG8Si)
+
 ## Usage
@@ -27,0 +29,0 @@

src/dnd.component.d.ts

 import { ChangeDetectorRef } from '@angular/core';
 import { ElementRef } from '@angular/core';
-import { DragDropConfig } from './dnd.config';
+import { DragDropConfig, DragImage } from './dnd.config';
 import { DragDropService } from './dnd.service';
@@ -45,2 +45,26 @@ export declare abstract class AbstractComponent {
     dropZones: string[];
+    /**
+     * Here is the property dragImage you can use:
+     * - The string value as url to the image
+     *   <div class="panel panel-default"
+     *        dnd-draggable [dragEnabled]="true"
+     *        [dragImage]="/images/simpler.png">
+     * ...
+     * - The DragImage value with Image and optional offset by x and y:
+     *   let myDragImage: DragImage = new DragImage("/images/simpler1.png", 0, 0);
+     * ...
+     *   <div class="panel panel-default"
+     *        dnd-draggable [dragEnabled]="true"
+     *        [dragImage]="myDragImage">
+     * ...
+     * - The custom function to return the value of dragImage programmatically:
+     *   <div class="panel panel-default"
+     *        dnd-draggable [dragEnabled]="true"
+     *        [dragImage]="getDragImage(someData)">
+     * ...
+     *   getDragImage(value:any): string {
+     *     return value ? "/images/simpler1.png" : "/images/simpler2.png"
+     *   }
+     */
+    dragImage: string | DragImage | Function;
     constructor(elemRef: ElementRef, _dragDropService: DragDropService, _config: DragDropConfig, _cdr: ChangeDetectorRef);
@@ -47,0 +71,0 @@ /******* Change detection ******/

src/dnd.component.js

@@ -18,2 +18,3 @@ // Copyright (C) 2016 Sergey Akopkokhyants
 var dnd_service_1 = require('./dnd.service');
+var dnd_utils_1 = require('./dnd.utils');
 var AbstractComponent = (function () {
@@ -67,3 +68,15 @@ function AbstractComponent(elemRef, _dragDropService, _config, _cdr) {
                 // Change drag image
-                if (_this._config.dragImage != null) {
+                if (dnd_utils_1.isPresent(_this.dragImage)) {
+                    if (dnd_utils_1.isString(_this.dragImage)) {
+                        event.dataTransfer.setDragImage(dnd_utils_1.createImage(_this.dragImage));
+                    }
+                    else if (dnd_utils_1.isFunction(_this.dragImage)) {
+                        event.dataTransfer.setDragImage(dnd_utils_1.callFun(_this.dragImage));
+                    }
+                    else {
+                        var img = _this.dragImage;
+                        event.dataTransfer.setDragImage(img.imageElement, img.x_offset, img.y_offset);
+                    }
+                }
+                else if (dnd_utils_1.isPresent(_this._config.dragImage)) {
                     var dragImage = _this._config.dragImage;
@@ -70,0 +83,0 @@ event.dataTransfer.setDragImage(dragImage.imageElement, dragImage.x_offset, dragImage.y_offset);

src/dnd.component.ts

@@ -10,2 +10,3 @@ // Copyright (C) 2016 Sergey Akopkokhyants
 import {DragDropService} from './dnd.service';
+import {isString, isFunction, isPresent, createImage, callFun} from './dnd.utils';
 
@@ -60,2 +61,27 @@ @Injectable()
 
+    /**
+     * Here is the property dragImage you can use:
+     * - The string value as url to the image
+     *   <div class="panel panel-default"
+     *        dnd-draggable [dragEnabled]="true"
+     *        [dragImage]="/images/simpler.png">
+     * ...
+     * - The DragImage value with Image and optional offset by x and y:
+     *   let myDragImage: DragImage = new DragImage("/images/simpler1.png", 0, 0);
+     * ...
+     *   <div class="panel panel-default"
+     *        dnd-draggable [dragEnabled]="true"
+     *        [dragImage]="myDragImage">
+     * ...
+     * - The custom function to return the value of dragImage programmatically:
+     *   <div class="panel panel-default"
+     *        dnd-draggable [dragEnabled]="true"
+     *        [dragImage]="getDragImage(someData)">
+     * ...
+     *   getDragImage(value:any): string {
+     *     return value ? "/images/simpler1.png" : "/images/simpler2.png"
+     *   }
+     */
+    dragImage: string | DragImage | Function;
+
     constructor(elemRef: ElementRef, public _dragDropService: DragDropService, public _config: DragDropConfig,
@@ -98,3 +124,12 @@ private _cdr: ChangeDetectorRef) {
                 // Change drag image
-                if (this._config.dragImage != null) {
+                if (isPresent(this.dragImage)) {
+                    if (isString(this.dragImage)) {
+                        (<any>event.dataTransfer).setDragImage(createImage(<string>this.dragImage));
+                    } else if (isFunction(this.dragImage)) {
+                        (<any>event.dataTransfer).setDragImage(callFun(<Function>this.dragImage));
+                    } else {
+                        let img: DragImage = <DragImage>this.dragImage;
+                        (<any>event.dataTransfer).setDragImage(img.imageElement, img.x_offset, img.y_offset);
+                    }
+                } else if (isPresent(this._config.dragImage)) {
                     let dragImage: DragImage = this._config.dragImage;
@@ -101,0 +136,0 @@ (<any>event.dataTransfer).setDragImage(dragImage.imageElement, dragImage.x_offset, dragImage.y_offset);

src/dnd.config.d.ts

@@ -10,6 +10,6 @@ export declare class DataTransferEffect {
 export declare class DragImage {
-    imageElement: HTMLElement;
+    imageElement: string | HTMLElement;
     x_offset: number;
     y_offset: number;
-    constructor(imageElement: HTMLElement, x_offset?: number, y_offset?: number);
+    constructor(imageElement: string | HTMLElement, x_offset?: number, y_offset?: number);
 }
@@ -16,0 +16,0 @@ export declare class DragDropConfig {

src/dnd.config.js

@@ -15,2 +15,3 @@ // Copyright (C) 2016 Sergey Akopkokhyants
 var core_1 = require('@angular/core');
+var dnd_utils_1 = require('./dnd.utils');
 var DataTransferEffect = (function () {
@@ -38,6 +39,12 @@ function DataTransferEffect(name) {
         this.y_offset = y_offset;
+        if (dnd_utils_1.isString(this.imageElement)) {
+            // Create real image from string source
+            var imgScr = this.imageElement;
+            this.imageElement = new HTMLImageElement();
+            this.imageElement.src = imgScr;
+        }
     }
     DragImage = __decorate([
         core_1.Injectable(), 
-        __metadata('design:paramtypes', [HTMLElement, Number, Number])
+        __metadata('design:paramtypes', [Object, Number, Number])
     ], DragImage);
@@ -44,0 +51,0 @@ return DragImage;

src/dnd.config.ts

@@ -6,2 +6,3 @@ // Copyright (C) 2016 Sergey Akopkokhyants
 import {Injectable} from '@angular/core';
+import {isString} from './dnd.utils';
 
@@ -22,5 +23,12 @@ @Injectable()
     constructor(
-        public imageElement: HTMLElement,
+        public imageElement: string | HTMLElement,
         public x_offset: number = 0,
-        public y_offset: number = 0) { }
+        public y_offset: number = 0) {
+            if (isString(this.imageElement)) {
+                // Create real image from string source
+                let imgScr: string = <string>this.imageElement;
+                this.imageElement = new HTMLImageElement();
+                (<HTMLImageElement>this.imageElement).src = imgScr;
+            }
+        }
 }
@@ -34,3 +42,3 @@
     public onSortableDragClass: string = "dnd-sortable-drag";
-    
+
     public dragEffect: DataTransferEffect = DataTransferEffect.MOVE;
@@ -37,0 +45,0 @@ public dropEffect: DataTransferEffect = DataTransferEffect.MOVE;

src/dnd.draggable.d.ts

 import { ChangeDetectorRef } from '@angular/core';
 import { EventEmitter, ElementRef } from '@angular/core';
 import { AbstractComponent } from './dnd.component';
-import { DragDropConfig } from './dnd.config';
+import { DragDropConfig, DragImage } from './dnd.config';
 import { DragDropService, DragDropData } from './dnd.service';
@@ -31,2 +31,27 @@ export declare class DraggableComponent extends AbstractComponent {
     effectcursor: string;
+    /**
+     * Here is the property dragImage you can use:
+     * - The string value as url to the image
+     *   <div class="panel panel-default"
+     *        dnd-draggable [dragEnabled]="true"
+     *        [dragImage]="/images/simpler.png">
+     * ...
+     * - The DragImage value with Image and offset by x and y:
+     *   let myDragImage: DragImage = new DragImage("/images/simpler1.png", 0, 0);
+     * ...
+     *   <div class="panel panel-default"
+     *        dnd-draggable [dragEnabled]="true"
+     *        [dragImage]="myDragImage">
+     * ...
+     * - The custom function to return the value of dragImage programmatically:
+     *   <div class="panel panel-default"
+     *        dnd-draggable [dragEnabled]="true"
+     *        [dragImage]="getDragImage(someData)">
+     * ...
+     *   getDragImage(value:any): string {
+     *     return value ? "/images/simpler1.png" : "/images/simpler2.png"
+     *   }
+     */
+    dragImage: string | DragImage | Function;
+    cloneItem: boolean;
     constructor(elemRef: ElementRef, dragDropService: DragDropService, config: DragDropConfig, cdr: ChangeDetectorRef);
@@ -33,0 +58,0 @@ _onDragStartCallback(event: MouseEvent): void;

src/dnd.draggable.js

@@ -127,2 +127,10 @@ // Copyright (C) 2016 Sergey Akopkokhyants
     ], DraggableComponent.prototype, "effectcursor", null);
+    __decorate([
+        core_2.Input(), 
+        __metadata('design:type', Object)
+    ], DraggableComponent.prototype, "dragImage", void 0);
+    __decorate([
+        core_2.Input(), 
+        __metadata('design:type', Boolean)
+    ], DraggableComponent.prototype, "cloneItem", void 0);
     DraggableComponent = __decorate([
@@ -129,0 +137,0 @@ core_2.Directive({ selector: '[dnd-draggable]' }),

src/dnd.draggable.ts

@@ -9,3 +9,3 @@ // Copyright (C) 2016 Sergey Akopkokhyants
 import {AbstractComponent} from './dnd.component';
-import {DragDropConfig} from './dnd.config';
+import {DragDropConfig, DragImage} from './dnd.config';
 import {DragDropService, DragDropData} from './dnd.service';
@@ -55,2 +55,30 @@
 
+    /**
+     * Here is the property dragImage you can use:
+     * - The string value as url to the image
+     *   <div class="panel panel-default"
+     *        dnd-draggable [dragEnabled]="true"
+     *        [dragImage]="/images/simpler.png">
+     * ...
+     * - The DragImage value with Image and offset by x and y:
+     *   let myDragImage: DragImage = new DragImage("/images/simpler1.png", 0, 0);
+     * ...
+     *   <div class="panel panel-default"
+     *        dnd-draggable [dragEnabled]="true"
+     *        [dragImage]="myDragImage">
+     * ...
+     * - The custom function to return the value of dragImage programmatically:
+     *   <div class="panel panel-default"
+     *        dnd-draggable [dragEnabled]="true"
+     *        [dragImage]="getDragImage(someData)">
+     * ...
+     *   getDragImage(value:any): string {
+     *     return value ? "/images/simpler1.png" : "/images/simpler2.png"
+     *   }
+     */
+    @Input() dragImage: string | DragImage | Function;
+
+    
+    @Input() cloneItem: boolean;
+
     constructor(elemRef: ElementRef, dragDropService: DragDropService, config:DragDropConfig,
@@ -57,0 +85,0 @@ cdr:ChangeDetectorRef) {

src/dnd.service.js

@@ -15,4 +15,4 @@ // Copyright (C) 2016 Sergey Akopkokhyants
 var core_1 = require('@angular/core');
-var lang_1 = require('@angular/common/src/facade/lang');
 var dnd_config_1 = require('./dnd.config');
+var dnd_utils_1 = require('./dnd.utils');
 var DragDropService = (function () {
@@ -41,6 +41,6 @@ function DragDropService() {
     DragDropSortableService.prototype.markSortable = function (elem) {
-        if (lang_1.isPresent(this._elem)) {
+        if (dnd_utils_1.isPresent(this._elem)) {
             this._elem.classList.remove(this._config.onSortableDragClass);
         }
-        if (lang_1.isPresent(elem)) {
+        if (dnd_utils_1.isPresent(elem)) {
             this._elem = elem;
@@ -47,0 +47,0 @@ this._elem.classList.add(this._config.onSortableDragClass);

src/dnd.service.ts

@@ -6,5 +6,5 @@ // Copyright (C) 2016 Sergey Akopkokhyants
 import {Injectable, ElementRef, EventEmitter} from '@angular/core';
-import {isPresent} from '@angular/common/src/facade/lang';
 
 import {DragDropConfig} from './dnd.config';
+import {isPresent} from './dnd.utils';
 
@@ -11,0 +11,0 @@ export interface DragDropData {

src/dnd.sortable.js

@@ -69,3 +69,3 @@ // Copyright (C) 2016 Sergey Akopkokhyants
                 // Add item to new list
-                this._sortableData.push(item);
+                this._sortableData.unshift(item);
                 this._sortableDataService.sortableData = this._sortableData;
@@ -72,0 +72,0 @@ this._sortableDataService.index = 0;

src/dnd.sortable.ts

@@ -54,3 +54,3 @@ // Copyright (C) 2016 Sergey Akopkokhyants
                 // Add item to new list
-                this._sortableData.push(item);
+                this._sortableData.unshift(item);
                 this._sortableDataService.sortableData = this._sortableData;
@@ -57,0 +57,0 @@ this._sortableDataService.index = 0;

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

215836

increased by6.97%

Number of package files

48

increased by9.09%

Lines of code

3016

increased by10.44%

Number of lines in readme file

528

increased by0.38%

Dependency changes

• Updated@angular/common@^2.0.0-rc.4

• Updated@angular/compiler@^2.0.0-rc.4

• Updated@angular/core@^2.0.0-rc.4

• Updated@angular/platform-browser@^2.0.0-rc.4

• Updated@angular/platform-browser-dynamic@^2.0.0-rc.4