New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

ng2-dnd

Package Overview
Dependencies
Maintainers
1
Versions
53
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ng2-dnd - npm Package Compare versions

Comparing version 1.13.1 to 2.0.0

1654

bundles/ng2-dnd.js

@@ -1,593 +0,617 @@

System.registerDynamic("src/draggable.component", ["@angular/core", "./abstract.component", "./dnd.config", "./dnd.service"], true, function($__require, exports, module) {
"use strict";
;
var define,
global = this,
GLOBAL = this;
var __extends = (this && this.__extends) || function(d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() {
this.constructor = d;
}
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __decorate = (this && this.__decorate) || function(decorators, target, key, desc) {
var c = arguments.length,
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function(k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(k, v);
};
var core_1 = $__require('@angular/core');
var core_2 = $__require('@angular/core');
var abstract_component_1 = $__require('./abstract.component');
var dnd_config_1 = $__require('./dnd.config');
var dnd_service_1 = $__require('./dnd.service');
var DraggableComponent = (function(_super) {
__extends(DraggableComponent, _super);
function DraggableComponent(elemRef, dragDropService, config, cdr) {
_super.call(this, elemRef, dragDropService, config, cdr);
this.onDragStart = new core_2.EventEmitter();
this.onDragEnd = new core_2.EventEmitter();
this.onDragSuccessCallback = new core_2.EventEmitter();
this._defaultCursor = this._elem.style.cursor;
this.dragEnabled = true;
}
Object.defineProperty(DraggableComponent.prototype, "draggable", {
set: function(value) {
this.dragEnabled = !!value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DraggableComponent.prototype, "dropzones", {
set: function(value) {
this.dropZones = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DraggableComponent.prototype, "effectallowed", {
set: function(value) {
this.effectAllowed = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DraggableComponent.prototype, "effectcursor", {
set: function(value) {
this.effectCursor = value;
},
enumerable: true,
configurable: true
});
DraggableComponent.prototype._onDragStartCallback = function(event) {
this._dragDropService.isDragged = true;
this._dragDropService.dragData = this.dragData;
this._dragDropService.onDragSuccessCallback = this.onDragSuccessCallback;
this._elem.classList.add(this._config.onDragStartClass);
this.onDragStart.emit({
dragData: this.dragData,
mouseEvent: event
});
System.registerDynamic("src/draggable.component", ["@angular/core", "./abstract.component", "./dnd.config", "./dnd.service"], true, function ($__require, exports, module) {
// Copyright (C) 2016 Sergey Akopkokhyants
// This project is licensed under the terms of the MIT license.
// https://github.com/akserg/ng2-dnd
"use strict";
var define,
global = this || self,
GLOBAL = global;
var __extends = this && this.__extends || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() {
this.constructor = d;
}
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
DraggableComponent.prototype._onDragEndCallback = function(event) {
this._dragDropService.isDragged = false;
this._dragDropService.dragData = null;
this._dragDropService.onDragSuccessCallback = null;
this._elem.classList.remove(this._config.onDragStartClass);
this.onDragEnd.emit({
dragData: this.dragData,
mouseEvent: event
});
var __decorate = this && this.__decorate || function (decorators, target, key, desc) {
var c = arguments.length,
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
__decorate([core_2.Input("dragEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], DraggableComponent.prototype, "draggable", null);
__decorate([core_2.Output(), __metadata('design:type', core_2.EventEmitter)], DraggableComponent.prototype, "onDragStart", void 0);
__decorate([core_2.Output(), __metadata('design:type', core_2.EventEmitter)], DraggableComponent.prototype, "onDragEnd", void 0);
__decorate([core_2.Input(), __metadata('design:type', Object)], DraggableComponent.prototype, "dragData", void 0);
__decorate([core_2.Output("onDragSuccess"), __metadata('design:type', core_2.EventEmitter)], DraggableComponent.prototype, "onDragSuccessCallback", void 0);
__decorate([core_2.Input("dropZones"), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], DraggableComponent.prototype, "dropzones", null);
__decorate([core_2.Input("effectAllowed"), __metadata('design:type', String), __metadata('design:paramtypes', [String])], DraggableComponent.prototype, "effectallowed", null);
__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);
return DraggableComponent;
}(abstract_component_1.AbstractComponent));
exports.DraggableComponent = DraggableComponent;
return module.exports;
var __metadata = this && this.__metadata || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = $__require("@angular/core");
var core_2 = $__require("@angular/core");
var abstract_component_1 = $__require("./abstract.component");
var dnd_config_1 = $__require("./dnd.config");
var dnd_service_1 = $__require("./dnd.service");
var DraggableComponent = function (_super) {
__extends(DraggableComponent, _super);
function DraggableComponent(elemRef, dragDropService, config, cdr) {
_super.call(this, elemRef, dragDropService, config, cdr);
/**
* Callback function called when the drag actions happened.
*/
this.onDragStart = new core_2.EventEmitter();
this.onDragEnd = new core_2.EventEmitter();
/**
* Callback function called when the drag action ends with a valid drop action.
* It is activated after the on-drop-success callback
*/
this.onDragSuccessCallback = new core_2.EventEmitter();
this._defaultCursor = this._elem.style.cursor;
this.dragEnabled = true;
}
Object.defineProperty(DraggableComponent.prototype, "draggable", {
set: function (value) {
this.dragEnabled = !!value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DraggableComponent.prototype, "dropzones", {
set: function (value) {
this.dropZones = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DraggableComponent.prototype, "effectallowed", {
/**
* Drag allowed effect
*/
set: function (value) {
this.effectAllowed = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DraggableComponent.prototype, "effectcursor", {
/**
* Drag effect cursor
*/
set: function (value) {
this.effectCursor = value;
},
enumerable: true,
configurable: true
});
DraggableComponent.prototype._onDragStartCallback = function (event) {
this._dragDropService.isDragged = true;
this._dragDropService.dragData = this.dragData;
this._dragDropService.onDragSuccessCallback = this.onDragSuccessCallback;
this._elem.classList.add(this._config.onDragStartClass);
//
this.onDragStart.emit({ dragData: this.dragData, mouseEvent: event });
};
DraggableComponent.prototype._onDragEndCallback = function (event) {
this._dragDropService.isDragged = false;
this._dragDropService.dragData = null;
this._dragDropService.onDragSuccessCallback = null;
this._elem.classList.remove(this._config.onDragStartClass);
//
this.onDragEnd.emit({ dragData: this.dragData, mouseEvent: event });
};
__decorate([core_2.Input("dragEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], DraggableComponent.prototype, "draggable", null);
__decorate([core_2.Output(), __metadata('design:type', core_2.EventEmitter)], DraggableComponent.prototype, "onDragStart", void 0);
__decorate([core_2.Output(), __metadata('design:type', core_2.EventEmitter)], DraggableComponent.prototype, "onDragEnd", void 0);
__decorate([core_2.Input(), __metadata('design:type', Object)], DraggableComponent.prototype, "dragData", void 0);
__decorate([core_2.Output("onDragSuccess"), __metadata('design:type', core_2.EventEmitter)], DraggableComponent.prototype, "onDragSuccessCallback", void 0);
__decorate([core_2.Input("dropZones"), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], DraggableComponent.prototype, "dropzones", null);
__decorate([core_2.Input("effectAllowed"), __metadata('design:type', String), __metadata('design:paramtypes', [String])], DraggableComponent.prototype, "effectallowed", null);
__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);
return DraggableComponent;
}(abstract_component_1.AbstractComponent);
exports.DraggableComponent = DraggableComponent;
return module.exports;
});
System.registerDynamic("src/droppable.component", ["@angular/core", "./abstract.component", "./dnd.config", "./dnd.service"], true, function ($__require, exports, module) {
// Copyright (C) 2016 Sergey Akopkokhyants
// This project is licensed under the terms of the MIT license.
// https://github.com/akserg/ng2-dnd
"use strict";
System.registerDynamic("src/droppable.component", ["@angular/core", "./abstract.component", "./dnd.config", "./dnd.service"], true, function($__require, exports, module) {
"use strict";
;
var define,
global = this,
GLOBAL = this;
var __extends = (this && this.__extends) || function(d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() {
this.constructor = d;
}
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __decorate = (this && this.__decorate) || function(decorators, target, key, desc) {
var c = arguments.length,
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function(k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(k, v);
};
var core_1 = $__require('@angular/core');
var core_2 = $__require('@angular/core');
var abstract_component_1 = $__require('./abstract.component');
var dnd_config_1 = $__require('./dnd.config');
var dnd_service_1 = $__require('./dnd.service');
var DroppableComponent = (function(_super) {
__extends(DroppableComponent, _super);
function DroppableComponent(elemRef, dragDropService, config, cdr) {
_super.call(this, elemRef, dragDropService, config, cdr);
this.onDropSuccess = new core_2.EventEmitter();
this.onDragEnter = new core_2.EventEmitter();
this.onDragOver = new core_2.EventEmitter();
this.onDragLeave = new core_2.EventEmitter();
this.dropEnabled = true;
}
Object.defineProperty(DroppableComponent.prototype, "droppable", {
set: function(value) {
this.dropEnabled = !!value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DroppableComponent.prototype, "allowdrop", {
set: function(value) {
this.allowDrop = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DroppableComponent.prototype, "dropzones", {
set: function(value) {
this.dropZones = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DroppableComponent.prototype, "effectallowed", {
set: function(value) {
this.effectAllowed = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DroppableComponent.prototype, "effectcursor", {
set: function(value) {
this.effectCursor = value;
},
enumerable: true,
configurable: true
});
DroppableComponent.prototype._onDragEnterCallback = function(event) {
if (this._dragDropService.isDragged) {
this._elem.classList.add(this._config.onDragEnterClass);
this.onDragEnter.emit({
dragData: this._dragDropService.dragData,
mouseEvent: event
});
}
var define,
global = this || self,
GLOBAL = global;
var __extends = this && this.__extends || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() {
this.constructor = d;
}
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
DroppableComponent.prototype._onDragOverCallback = function(event) {
if (this._dragDropService.isDragged) {
this._elem.classList.add(this._config.onDragOverClass);
this.onDragOver.emit({
dragData: this._dragDropService.dragData,
mouseEvent: event
});
}
var __decorate = this && this.__decorate || function (decorators, target, key, desc) {
var c = arguments.length,
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
;
DroppableComponent.prototype._onDragLeaveCallback = function(event) {
if (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: event
});
}
var __metadata = this && this.__metadata || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
;
DroppableComponent.prototype._onDropCallback = function(event) {
if (this._dragDropService.isDragged) {
this.onDropSuccess.emit({
dragData: this._dragDropService.dragData,
mouseEvent: event
var core_1 = $__require("@angular/core");
var core_2 = $__require("@angular/core");
var abstract_component_1 = $__require("./abstract.component");
var dnd_config_1 = $__require("./dnd.config");
var dnd_service_1 = $__require("./dnd.service");
var DroppableComponent = function (_super) {
__extends(DroppableComponent, _super);
function DroppableComponent(elemRef, dragDropService, config, cdr) {
_super.call(this, elemRef, dragDropService, config, cdr);
/**
* Callback function called when the drop action completes correctly.
* It is activated before the on-drag-success callback.
*/
this.onDropSuccess = new core_2.EventEmitter();
this.onDragEnter = new core_2.EventEmitter();
this.onDragOver = new core_2.EventEmitter();
this.onDragLeave = new core_2.EventEmitter();
this.dropEnabled = true;
}
Object.defineProperty(DroppableComponent.prototype, "droppable", {
set: function (value) {
this.dropEnabled = !!value;
},
enumerable: true,
configurable: true
});
if (this._dragDropService.onDragSuccessCallback) {
this._dragDropService.onDragSuccessCallback.emit({
dragData: this._dragDropService.dragData,
mouseEvent: event
});
}
this._elem.classList.remove(this._config.onDragOverClass);
this._elem.classList.remove(this._config.onDragEnterClass);
}
};
__decorate([core_2.Input("dropEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], DroppableComponent.prototype, "droppable", null);
__decorate([core_2.Output(), __metadata('design:type', core_2.EventEmitter)], DroppableComponent.prototype, "onDropSuccess", void 0);
__decorate([core_2.Output(), __metadata('design:type', core_2.EventEmitter)], DroppableComponent.prototype, "onDragEnter", void 0);
__decorate([core_2.Output(), __metadata('design:type', core_2.EventEmitter)], DroppableComponent.prototype, "onDragOver", void 0);
__decorate([core_2.Output(), __metadata('design:type', core_2.EventEmitter)], DroppableComponent.prototype, "onDragLeave", void 0);
__decorate([core_2.Input("allowDrop"), __metadata('design:type', Function), __metadata('design:paramtypes', [Function])], DroppableComponent.prototype, "allowdrop", null);
__decorate([core_2.Input("dropZones"), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], DroppableComponent.prototype, "dropzones", null);
__decorate([core_2.Input("effectAllowed"), __metadata('design:type', String), __metadata('design:paramtypes', [String])], DroppableComponent.prototype, "effectallowed", null);
__decorate([core_2.Input("effectCursor"), __metadata('design:type', String), __metadata('design:paramtypes', [String])], DroppableComponent.prototype, "effectcursor", null);
DroppableComponent = __decorate([core_2.Directive({selector: '[dnd-droppable]'}), __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, core_1.ChangeDetectorRef])], DroppableComponent);
return DroppableComponent;
}(abstract_component_1.AbstractComponent));
exports.DroppableComponent = DroppableComponent;
return module.exports;
Object.defineProperty(DroppableComponent.prototype, "allowdrop", {
set: function (value) {
this.allowDrop = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DroppableComponent.prototype, "dropzones", {
set: function (value) {
this.dropZones = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DroppableComponent.prototype, "effectallowed", {
/**
* Drag allowed effect
*/
set: function (value) {
this.effectAllowed = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DroppableComponent.prototype, "effectcursor", {
/**
* Drag effect cursor
*/
set: function (value) {
this.effectCursor = value;
},
enumerable: true,
configurable: true
});
DroppableComponent.prototype._onDragEnterCallback = function (event) {
if (this._dragDropService.isDragged) {
this._elem.classList.add(this._config.onDragEnterClass);
this.onDragEnter.emit({ dragData: this._dragDropService.dragData, mouseEvent: event });
}
};
DroppableComponent.prototype._onDragOverCallback = function (event) {
if (this._dragDropService.isDragged) {
this._elem.classList.add(this._config.onDragOverClass);
this.onDragOver.emit({ dragData: this._dragDropService.dragData, mouseEvent: event });
}
};
;
DroppableComponent.prototype._onDragLeaveCallback = function (event) {
if (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: event });
}
};
;
DroppableComponent.prototype._onDropCallback = function (event) {
if (this._dragDropService.isDragged) {
this.onDropSuccess.emit({ dragData: this._dragDropService.dragData, mouseEvent: event });
if (this._dragDropService.onDragSuccessCallback) {
this._dragDropService.onDragSuccessCallback.emit({ dragData: this._dragDropService.dragData, mouseEvent: event });
}
this._elem.classList.remove(this._config.onDragOverClass);
this._elem.classList.remove(this._config.onDragEnterClass);
}
};
__decorate([core_2.Input("dropEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], DroppableComponent.prototype, "droppable", null);
__decorate([core_2.Output(), __metadata('design:type', core_2.EventEmitter)], DroppableComponent.prototype, "onDropSuccess", void 0);
__decorate([core_2.Output(), __metadata('design:type', core_2.EventEmitter)], DroppableComponent.prototype, "onDragEnter", void 0);
__decorate([core_2.Output(), __metadata('design:type', core_2.EventEmitter)], DroppableComponent.prototype, "onDragOver", void 0);
__decorate([core_2.Output(), __metadata('design:type', core_2.EventEmitter)], DroppableComponent.prototype, "onDragLeave", void 0);
__decorate([core_2.Input("allowDrop"), __metadata('design:type', Function), __metadata('design:paramtypes', [Function])], DroppableComponent.prototype, "allowdrop", null);
__decorate([core_2.Input("dropZones"), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], DroppableComponent.prototype, "dropzones", null);
__decorate([core_2.Input("effectAllowed"), __metadata('design:type', String), __metadata('design:paramtypes', [String])], DroppableComponent.prototype, "effectallowed", null);
__decorate([core_2.Input("effectCursor"), __metadata('design:type', String), __metadata('design:paramtypes', [String])], DroppableComponent.prototype, "effectcursor", null);
DroppableComponent = __decorate([core_2.Directive({ selector: '[dnd-droppable]' }), __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, core_1.ChangeDetectorRef])], DroppableComponent);
return DroppableComponent;
}(abstract_component_1.AbstractComponent);
exports.DroppableComponent = DroppableComponent;
return module.exports;
});
System.registerDynamic("src/sortable.component", ["@angular/core", "./abstract.component", "./dnd.config", "./dnd.service"], true, function ($__require, exports, module) {
// Copyright (C) 2016 Sergey Akopkokhyants
// This project is licensed under the terms of the MIT license.
// https://github.com/akserg/ng2-dnd
"use strict";
System.registerDynamic("src/sortable.component", ["@angular/core", "./abstract.component", "./dnd.config", "./dnd.service"], true, function($__require, exports, module) {
"use strict";
;
var define,
global = this,
GLOBAL = this;
var __extends = (this && this.__extends) || function(d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() {
this.constructor = d;
}
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __decorate = (this && this.__decorate) || function(decorators, target, key, desc) {
var c = arguments.length,
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function(k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(k, v);
};
var core_1 = $__require('@angular/core');
var core_2 = $__require('@angular/core');
var abstract_component_1 = $__require('./abstract.component');
var dnd_config_1 = $__require('./dnd.config');
var dnd_service_1 = $__require('./dnd.service');
var SortableContainer = (function(_super) {
__extends(SortableContainer, _super);
function SortableContainer(elemRef, dragDropService, config, cdr, _sortableDataService) {
_super.call(this, elemRef, dragDropService, config, cdr);
this._sortableDataService = _sortableDataService;
this._sortableData = [];
this.dragEnabled = false;
}
Object.defineProperty(SortableContainer.prototype, "draggable", {
set: function(value) {
this.dragEnabled = !!value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SortableContainer.prototype, "sortableData", {
get: function() {
return this._sortableData;
},
set: function(sortableData) {
this._sortableData = sortableData;
this.dropEnabled = this._sortableData.length === 0;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SortableContainer.prototype, "dropzones", {
set: function(value) {
this.dropZones = value;
},
enumerable: true,
configurable: true
});
SortableContainer.prototype._onDragEnterCallback = function(event) {
if (this._sortableDataService.isDragged) {
var item = this._sortableDataService.sortableData[this._sortableDataService.index];
if (this._sortableData.indexOf(item) === -1) {
this._sortableDataService.sortableData.splice(this._sortableDataService.index, 1);
this._sortableData.unshift(item);
this._sortableDataService.sortableData = this._sortableData;
this._sortableDataService.index = 0;
var define,
global = this || self,
GLOBAL = global;
var __extends = this && this.__extends || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() {
this.constructor = d;
}
this.detectChanges();
}
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
__decorate([core_2.Input("dragEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], SortableContainer.prototype, "draggable", null);
__decorate([core_2.Input(), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], SortableContainer.prototype, "sortableData", null);
__decorate([core_2.Input("dropZones"), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], SortableContainer.prototype, "dropzones", null);
SortableContainer = __decorate([core_2.Directive({selector: '[dnd-sortable-container]'}), __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, core_1.ChangeDetectorRef, dnd_service_1.DragDropSortableService])], SortableContainer);
return SortableContainer;
}(abstract_component_1.AbstractComponent));
exports.SortableContainer = SortableContainer;
var SortableComponent = (function(_super) {
__extends(SortableComponent, _super);
function SortableComponent(elemRef, dragDropService, config, _sortableContainer, _sortableDataService, cdr) {
_super.call(this, elemRef, dragDropService, config, cdr);
this._sortableContainer = _sortableContainer;
this._sortableDataService = _sortableDataService;
this.onDragSuccessCallback = new core_2.EventEmitter();
this.onDragStartCallback = new core_2.EventEmitter();
this.onDragOverCallback = new core_2.EventEmitter();
this.onDragEndCallback = new core_2.EventEmitter();
this.onDropSuccessCallback = new core_2.EventEmitter();
this.dropZones = this._sortableContainer.dropZones;
this.dragEnabled = true;
this.dropEnabled = true;
}
Object.defineProperty(SortableComponent.prototype, "draggable", {
set: function(value) {
this.dragEnabled = !!value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SortableComponent.prototype, "droppable", {
set: function(value) {
this.dropEnabled = !!value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SortableComponent.prototype, "effectallowed", {
set: function(value) {
this.effectAllowed = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SortableComponent.prototype, "effectcursor", {
set: function(value) {
this.effectCursor = value;
},
enumerable: true,
configurable: true
});
SortableComponent.prototype._onDragStartCallback = function(event) {
this._sortableDataService.isDragged = true;
this._sortableDataService.sortableData = this._sortableContainer.sortableData;
this._sortableDataService.index = this.index;
this._sortableDataService.markSortable(this._elem);
this._dragDropService.isDragged = true;
this._dragDropService.dragData = this.dragData;
this._dragDropService.onDragSuccessCallback = this.onDragSuccessCallback;
this.onDragStartCallback.emit(this._dragDropService.dragData);
var __decorate = this && this.__decorate || function (decorators, target, key, desc) {
var c = arguments.length,
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
SortableComponent.prototype._onDragOverCallback = function(event) {
if (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);
}
var __metadata = this && this.__metadata || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
SortableComponent.prototype._onDragEndCallback = function(event) {
this._sortableDataService.isDragged = false;
this._sortableDataService.sortableData = null;
this._sortableDataService.index = null;
this._sortableDataService.markSortable(null);
this._dragDropService.isDragged = false;
this._dragDropService.dragData = null;
this._dragDropService.onDragSuccessCallback = null;
this.onDragEndCallback.emit(this._dragDropService.dragData);
};
SortableComponent.prototype._onDragEnterCallback = function(event) {
if (this._sortableDataService.isDragged) {
this._sortableDataService.markSortable(this._elem);
if ((this.index !== this._sortableDataService.index) || (this._sortableDataService.sortableData != this._sortableContainer.sortableData)) {
var item = this._sortableDataService.sortableData[this._sortableDataService.index];
this._sortableDataService.sortableData.splice(this._sortableDataService.index, 1);
this._sortableContainer.sortableData.splice(this.index, 0, item);
this._sortableDataService.sortableData = this._sortableContainer.sortableData;
this._sortableDataService.index = this.index;
var core_1 = $__require("@angular/core");
var core_2 = $__require("@angular/core");
var abstract_component_1 = $__require("./abstract.component");
var dnd_config_1 = $__require("./dnd.config");
var dnd_service_1 = $__require("./dnd.service");
var SortableContainer = function (_super) {
__extends(SortableContainer, _super);
function SortableContainer(elemRef, dragDropService, config, cdr, _sortableDataService) {
_super.call(this, elemRef, dragDropService, config, cdr);
this._sortableDataService = _sortableDataService;
this._sortableData = [];
this.dragEnabled = false;
}
}
};
SortableComponent.prototype._onDropCallback = function(event) {
if (this._sortableDataService.isDragged) {
this.onDropSuccessCallback.emit(this._dragDropService.dragData);
if (this._dragDropService.onDragSuccessCallback) {
this._dragDropService.onDragSuccessCallback.emit(this._dragDropService.dragData);
Object.defineProperty(SortableContainer.prototype, "draggable", {
set: function (value) {
this.dragEnabled = !!value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SortableContainer.prototype, "sortableData", {
get: function () {
return this._sortableData;
},
set: function (sortableData) {
this._sortableData = sortableData;
//
this.dropEnabled = this._sortableData.length === 0;
// console.log("collection is changed, drop enabled: " + this.dropEnabled);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SortableContainer.prototype, "dropzones", {
set: function (value) {
this.dropZones = value;
},
enumerable: true,
configurable: true
});
SortableContainer.prototype._onDragEnterCallback = function (event) {
if (this._sortableDataService.isDragged) {
var item = this._sortableDataService.sortableData[this._sortableDataService.index];
// Check does element exist in sortableData of this Container
if (this._sortableData.indexOf(item) === -1) {
// Let's add it
// console.log('Container._onDragEnterCallback. drag node [' + this._sortableDataService.index.toString() + '] over parent node');
// Remove item from previouse list
this._sortableDataService.sortableData.splice(this._sortableDataService.index, 1);
// Add item to new list
this._sortableData.unshift(item);
this._sortableDataService.sortableData = this._sortableData;
this._sortableDataService.index = 0;
}
// Refresh changes in properties of container component
this.detectChanges();
}
};
__decorate([core_2.Input("dragEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], SortableContainer.prototype, "draggable", null);
__decorate([core_2.Input(), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], SortableContainer.prototype, "sortableData", null);
__decorate([core_2.Input("dropZones"), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], SortableContainer.prototype, "dropzones", null);
SortableContainer = __decorate([core_2.Directive({ selector: '[dnd-sortable-container]' }), __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, core_1.ChangeDetectorRef, dnd_service_1.DragDropSortableService])], SortableContainer);
return SortableContainer;
}(abstract_component_1.AbstractComponent);
exports.SortableContainer = SortableContainer;
var SortableComponent = function (_super) {
__extends(SortableComponent, _super);
function SortableComponent(elemRef, dragDropService, config, _sortableContainer, _sortableDataService, cdr) {
_super.call(this, elemRef, dragDropService, config, cdr);
this._sortableContainer = _sortableContainer;
this._sortableDataService = _sortableDataService;
/**
* Callback function called when the drag action ends with a valid drop action.
* It is activated after the on-drop-success callback
*/
this.onDragSuccessCallback = new core_2.EventEmitter();
this.onDragStartCallback = new core_2.EventEmitter();
this.onDragOverCallback = new core_2.EventEmitter();
this.onDragEndCallback = new core_2.EventEmitter();
this.onDropSuccessCallback = new core_2.EventEmitter();
this.dropZones = this._sortableContainer.dropZones;
this.dragEnabled = true;
this.dropEnabled = true;
}
this._sortableContainer.detectChanges();
}
};
__decorate([core_2.Input('sortableIndex'), __metadata('design:type', Number)], SortableComponent.prototype, "index", void 0);
__decorate([core_2.Input("dragEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], SortableComponent.prototype, "draggable", null);
__decorate([core_2.Input("dropEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], SortableComponent.prototype, "droppable", null);
__decorate([core_2.Input(), __metadata('design:type', Object)], SortableComponent.prototype, "dragData", void 0);
__decorate([core_2.Input("effectAllowed"), __metadata('design:type', String), __metadata('design:paramtypes', [String])], SortableComponent.prototype, "effectallowed", null);
__decorate([core_2.Input("effectCursor"), __metadata('design:type', String), __metadata('design:paramtypes', [String])], SortableComponent.prototype, "effectcursor", null);
__decorate([core_2.Output("onDragSuccess"), __metadata('design:type', core_2.EventEmitter)], SortableComponent.prototype, "onDragSuccessCallback", void 0);
__decorate([core_2.Output("onDragStart"), __metadata('design:type', core_2.EventEmitter)], SortableComponent.prototype, "onDragStartCallback", void 0);
__decorate([core_2.Output("onDragOver"), __metadata('design:type', core_2.EventEmitter)], SortableComponent.prototype, "onDragOverCallback", void 0);
__decorate([core_2.Output("onDragEnd"), __metadata('design:type', core_2.EventEmitter)], SortableComponent.prototype, "onDragEndCallback", void 0);
__decorate([core_2.Output("onDropSuccess"), __metadata('design:type', core_2.EventEmitter)], SortableComponent.prototype, "onDropSuccessCallback", void 0);
SortableComponent = __decorate([core_2.Directive({selector: '[dnd-sortable]'}), __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, SortableContainer, dnd_service_1.DragDropSortableService, core_1.ChangeDetectorRef])], SortableComponent);
return SortableComponent;
}(abstract_component_1.AbstractComponent));
exports.SortableComponent = SortableComponent;
return module.exports;
Object.defineProperty(SortableComponent.prototype, "draggable", {
set: function (value) {
this.dragEnabled = !!value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SortableComponent.prototype, "droppable", {
set: function (value) {
this.dropEnabled = !!value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SortableComponent.prototype, "effectallowed", {
/**
* Drag allowed effect
*/
set: function (value) {
this.effectAllowed = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SortableComponent.prototype, "effectcursor", {
/**
* Drag effect cursor
*/
set: function (value) {
this.effectCursor = value;
},
enumerable: true,
configurable: true
});
SortableComponent.prototype._onDragStartCallback = function (event) {
// console.log('_onDragStartCallback. dragging elem with index ' + this.index);
this._sortableDataService.isDragged = true;
this._sortableDataService.sortableData = this._sortableContainer.sortableData;
this._sortableDataService.index = this.index;
this._sortableDataService.markSortable(this._elem);
// Add dragData
this._dragDropService.isDragged = true;
this._dragDropService.dragData = this.dragData;
this._dragDropService.onDragSuccessCallback = this.onDragSuccessCallback;
//
this.onDragStartCallback.emit(this._dragDropService.dragData);
};
SortableComponent.prototype._onDragOverCallback = function (event) {
if (this._sortableDataService.isDragged && this._elem != this._sortableDataService.elem) {
// console.log('_onDragOverCallback. dragging elem with index ' + this.index);
this._sortableDataService.sortableData = this._sortableContainer.sortableData;
this._sortableDataService.index = this.index;
this._sortableDataService.markSortable(this._elem);
this.onDragOverCallback.emit(this._dragDropService.dragData);
}
};
SortableComponent.prototype._onDragEndCallback = function (event) {
// console.log('_onDragEndCallback. end dragging elem with index ' + this.index);
this._sortableDataService.isDragged = false;
this._sortableDataService.sortableData = null;
this._sortableDataService.index = null;
this._sortableDataService.markSortable(null);
// Add dragGata
this._dragDropService.isDragged = false;
this._dragDropService.dragData = null;
this._dragDropService.onDragSuccessCallback = null;
//
this.onDragEndCallback.emit(this._dragDropService.dragData);
};
SortableComponent.prototype._onDragEnterCallback = function (event) {
if (this._sortableDataService.isDragged) {
this._sortableDataService.markSortable(this._elem);
if (this.index !== this._sortableDataService.index || this._sortableDataService.sortableData != this._sortableContainer.sortableData) {
// console.log('Component._onDragEnterCallback. drag node [' + this.index + '] over node [' + this._sortableDataService.index + ']');
// Get item
var item = this._sortableDataService.sortableData[this._sortableDataService.index];
// Remove item from previouse list
this._sortableDataService.sortableData.splice(this._sortableDataService.index, 1);
// Add item to new list
this._sortableContainer.sortableData.splice(this.index, 0, item);
this._sortableDataService.sortableData = this._sortableContainer.sortableData;
this._sortableDataService.index = this.index;
}
}
};
SortableComponent.prototype._onDropCallback = function (event) {
if (this._sortableDataService.isDragged) {
// console.log('onDropCallback.onDropSuccessCallback.dragData', this._dragDropService.dragData);
this.onDropSuccessCallback.emit(this._dragDropService.dragData);
if (this._dragDropService.onDragSuccessCallback) {
// console.log('onDropCallback.onDragSuccessCallback.dragData', this._dragDropService.dragData);
this._dragDropService.onDragSuccessCallback.emit(this._dragDropService.dragData);
}
// Refresh changes in properties of container component
this._sortableContainer.detectChanges();
}
};
__decorate([core_2.Input('sortableIndex'), __metadata('design:type', Number)], SortableComponent.prototype, "index", void 0);
__decorate([core_2.Input("dragEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], SortableComponent.prototype, "draggable", null);
__decorate([core_2.Input("dropEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], SortableComponent.prototype, "droppable", null);
__decorate([core_2.Input(), __metadata('design:type', Object)], SortableComponent.prototype, "dragData", void 0);
__decorate([core_2.Input("effectAllowed"), __metadata('design:type', String), __metadata('design:paramtypes', [String])], SortableComponent.prototype, "effectallowed", null);
__decorate([core_2.Input("effectCursor"), __metadata('design:type', String), __metadata('design:paramtypes', [String])], SortableComponent.prototype, "effectcursor", null);
__decorate([core_2.Output("onDragSuccess"), __metadata('design:type', core_2.EventEmitter)], SortableComponent.prototype, "onDragSuccessCallback", void 0);
__decorate([core_2.Output("onDragStart"), __metadata('design:type', core_2.EventEmitter)], SortableComponent.prototype, "onDragStartCallback", void 0);
__decorate([core_2.Output("onDragOver"), __metadata('design:type', core_2.EventEmitter)], SortableComponent.prototype, "onDragOverCallback", void 0);
__decorate([core_2.Output("onDragEnd"), __metadata('design:type', core_2.EventEmitter)], SortableComponent.prototype, "onDragEndCallback", void 0);
__decorate([core_2.Output("onDropSuccess"), __metadata('design:type', core_2.EventEmitter)], SortableComponent.prototype, "onDropSuccessCallback", void 0);
SortableComponent = __decorate([core_2.Directive({ selector: '[dnd-sortable]' }), __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, SortableContainer, dnd_service_1.DragDropSortableService, core_1.ChangeDetectorRef])], SortableComponent);
return SortableComponent;
}(abstract_component_1.AbstractComponent);
exports.SortableComponent = SortableComponent;
return module.exports;
});
System.registerDynamic("src/dnd.config", ["@angular/core", "./dnd.utils"], true, function ($__require, exports, module) {
// Copyright (C) 2016 Sergey Akopkokhyants
// This project is licensed under the terms of the MIT license.
// https://github.com/akserg/ng2-dnd
"use strict";
System.registerDynamic("src/dnd.config", ["@angular/core", "./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) {
var c = arguments.length,
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function(k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(k, v);
};
var core_1 = $__require('@angular/core');
var dnd_utils_1 = $__require('./dnd.utils');
var DataTransferEffect = (function() {
function DataTransferEffect(name) {
this.name = name;
}
DataTransferEffect.COPY = new DataTransferEffect('copy');
DataTransferEffect.LINK = new DataTransferEffect('link');
DataTransferEffect.MOVE = new DataTransferEffect('move');
DataTransferEffect.NONE = new DataTransferEffect('none');
DataTransferEffect = __decorate([core_1.Injectable(), __metadata('design:paramtypes', [String])], DataTransferEffect);
return DataTransferEffect;
}());
exports.DataTransferEffect = DataTransferEffect;
var DragImage = (function() {
function DragImage(imageElement, x_offset, y_offset) {
if (x_offset === void 0) {
x_offset = 0;
}
if (y_offset === void 0) {
y_offset = 0;
}
this.imageElement = imageElement;
this.x_offset = x_offset;
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', [Object, Number, Number])], DragImage);
return DragImage;
}());
exports.DragImage = DragImage;
var DragDropConfig = (function() {
function DragDropConfig() {
this.onDragStartClass = "dnd-drag-start";
this.onDragEnterClass = "dnd-drag-enter";
this.onDragOverClass = "dnd-drag-over";
this.onSortableDragClass = "dnd-sortable-drag";
this.dragEffect = DataTransferEffect.MOVE;
this.dropEffect = DataTransferEffect.MOVE;
this.dragCursor = "move";
}
DragDropConfig = __decorate([core_1.Injectable(), __metadata('design:paramtypes', [])], DragDropConfig);
return DragDropConfig;
}());
exports.DragDropConfig = DragDropConfig;
return module.exports;
var define,
global = this || self,
GLOBAL = global;
var __decorate = this && this.__decorate || function (decorators, target, key, desc) {
var c = arguments.length,
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = this && this.__metadata || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = $__require("@angular/core");
var dnd_utils_1 = $__require("./dnd.utils");
var DataTransferEffect = function () {
function DataTransferEffect(name) {
this.name = name;
}
DataTransferEffect.COPY = new DataTransferEffect('copy');
DataTransferEffect.LINK = new DataTransferEffect('link');
DataTransferEffect.MOVE = new DataTransferEffect('move');
DataTransferEffect.NONE = new DataTransferEffect('none');
DataTransferEffect = __decorate([core_1.Injectable(), __metadata('design:paramtypes', [String])], DataTransferEffect);
return DataTransferEffect;
}();
exports.DataTransferEffect = DataTransferEffect;
var DragImage = function () {
function DragImage(imageElement, x_offset, y_offset) {
if (x_offset === void 0) {
x_offset = 0;
}
if (y_offset === void 0) {
y_offset = 0;
}
this.imageElement = imageElement;
this.x_offset = x_offset;
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', [Object, Number, Number])], DragImage);
return DragImage;
}();
exports.DragImage = DragImage;
var DragDropConfig = function () {
function DragDropConfig() {
this.onDragStartClass = "dnd-drag-start";
this.onDragEnterClass = "dnd-drag-enter";
this.onDragOverClass = "dnd-drag-over";
this.onSortableDragClass = "dnd-sortable-drag";
this.dragEffect = DataTransferEffect.MOVE;
this.dropEffect = DataTransferEffect.MOVE;
this.dragCursor = "move";
}
DragDropConfig = __decorate([core_1.Injectable(), __metadata('design:paramtypes', [])], DragDropConfig);
return DragDropConfig;
}();
exports.DragDropConfig = DragDropConfig;
return module.exports;
});
System.registerDynamic("src/dnd.service", ["@angular/core", "./dnd.config", "./dnd.utils"], true, function ($__require, exports, module) {
// Copyright (C) 2016 Sergey Akopkokhyants
// This project is licensed under the terms of the MIT license.
// https://github.com/akserg/ng2-dnd
"use strict";
System.registerDynamic("src/dnd.service", ["@angular/core", "./dnd.config", "./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) {
var c = arguments.length,
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function(k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(k, v);
};
var core_1 = $__require('@angular/core');
var dnd_config_1 = $__require('./dnd.config');
var dnd_utils_1 = $__require('./dnd.utils');
var DragDropService = (function() {
function DragDropService() {
this.allowedDropZones = [];
}
DragDropService = __decorate([core_1.Injectable(), __metadata('design:paramtypes', [])], DragDropService);
return DragDropService;
}());
exports.DragDropService = DragDropService;
var DragDropSortableService = (function() {
function DragDropSortableService(_config) {
this._config = _config;
}
Object.defineProperty(DragDropSortableService.prototype, "elem", {
get: function() {
return this._elem;
},
enumerable: true,
configurable: true
});
DragDropSortableService.prototype.markSortable = function(elem) {
if (dnd_utils_1.isPresent(this._elem)) {
this._elem.classList.remove(this._config.onSortableDragClass);
}
if (dnd_utils_1.isPresent(elem)) {
this._elem = elem;
this._elem.classList.add(this._config.onSortableDragClass);
}
var define,
global = this || self,
GLOBAL = global;
var __decorate = this && this.__decorate || function (decorators, target, key, desc) {
var c = arguments.length,
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
DragDropSortableService = __decorate([core_1.Injectable(), __metadata('design:paramtypes', [dnd_config_1.DragDropConfig])], DragDropSortableService);
return DragDropSortableService;
}());
exports.DragDropSortableService = DragDropSortableService;
return module.exports;
var __metadata = this && this.__metadata || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = $__require("@angular/core");
var dnd_config_1 = $__require("./dnd.config");
var dnd_utils_1 = $__require("./dnd.utils");
var DragDropService = function () {
function DragDropService() {
this.allowedDropZones = [];
}
DragDropService = __decorate([core_1.Injectable(), __metadata('design:paramtypes', [])], DragDropService);
return DragDropService;
}();
exports.DragDropService = DragDropService;
var DragDropSortableService = function () {
function DragDropSortableService(_config) {
this._config = _config;
}
Object.defineProperty(DragDropSortableService.prototype, "elem", {
get: function () {
return this._elem;
},
enumerable: true,
configurable: true
});
DragDropSortableService.prototype.markSortable = function (elem) {
if (dnd_utils_1.isPresent(this._elem)) {
this._elem.classList.remove(this._config.onSortableDragClass);
}
if (dnd_utils_1.isPresent(elem)) {
this._elem = elem;
this._elem.classList.add(this._config.onSortableDragClass);
}
};
DragDropSortableService = __decorate([core_1.Injectable(), __metadata('design:paramtypes', [dnd_config_1.DragDropConfig])], DragDropSortableService);
return DragDropSortableService;
}();
exports.DragDropSortableService = DragDropSortableService;
return module.exports;
});
System.registerDynamic("src/dnd.utils", [], true, function ($__require, exports, module) {
"use strict";
/**
* Check and return true if an object is type of string
*/
System.registerDynamic("src/dnd.utils", [], true, function($__require, exports, module) {
"use strict";
;
var define,
global = this,
GLOBAL = this;
global = this || self,
GLOBAL = global;
function isString(obj) {

@@ -597,2 +621,5 @@ return typeof obj === "string";

exports.isString = isString;
/**
* Check and return true if an object not undefined or null
*/
function isPresent(obj) {

@@ -602,2 +629,5 @@ return obj !== undefined && obj !== null;

exports.isPresent = isPresent;
/**
* Check and return true if an object is type of Function
*/
function isFunction(obj) {

@@ -607,2 +637,5 @@ return typeof obj === "function";

exports.isFunction = isFunction;
/**
* Create Image element with specified url string
*/
function createImage(src) {

@@ -614,2 +647,5 @@ var img = new HTMLImageElement();

exports.createImage = createImage;
/**
* Call the function
*/
function callFun(fun) {

@@ -619,216 +655,288 @@ return fun();

exports.callFun = callFun;
return module.exports;
});
System.registerDynamic("src/abstract.component", ["@angular/core", "./dnd.config", "./dnd.service", "./dnd.utils"], true, function ($__require, exports, module) {
// Copyright (C) 2016 Sergey Akopkokhyants
// This project is licensed under the terms of the MIT license.
// https://github.com/akserg/ng2-dnd
"use strict";
System.registerDynamic("src/abstract.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) {
var c = arguments.length,
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function(k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(k, v);
};
var core_1 = $__require('@angular/core');
var core_2 = $__require('@angular/core');
var dnd_config_1 = $__require('./dnd.config');
var dnd_service_1 = $__require('./dnd.service');
var dnd_utils_1 = $__require('./dnd.utils');
var AbstractComponent = (function() {
function AbstractComponent(elemRef, _dragDropService, _config, _cdr) {
var _this = this;
this._dragDropService = _dragDropService;
this._config = _config;
this._cdr = _cdr;
this._dragEnabled = false;
this.dropEnabled = false;
this.dropZones = [];
this.cloneItem = false;
this._elem = elemRef.nativeElement;
this._elem.ondragenter = function(event) {
_this._onDragEnter(event);
};
this._elem.ondragover = function(event) {
_this._onDragOver(event);
if (event.dataTransfer != null) {
event.dataTransfer.dropEffect = _this._config.dropEffect.name;
}
return false;
};
this._elem.ondragleave = function(event) {
_this._onDragLeave(event);
};
this._elem.ondrop = function(event) {
_this._onDrop(event);
};
this._elem.ondragstart = function(event) {
_this._onDragStart(event);
if (event.dataTransfer != null) {
event.dataTransfer.setData('text', '');
event.dataTransfer.effectAllowed = _this.effectAllowed || _this._config.dragEffect.name;
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;
event.dataTransfer.setDragImage(dragImage.imageElement, dragImage.x_offset, dragImage.y_offset);
} else if (_this.cloneItem) {
_this._dragHelper = _this._elem.cloneNode(true);
_this._dragHelper.classList.add('dnd-drag-item');
_this._dragHelper.style.position = "absolute";
_this._dragHelper.style.top = "0px";
_this._dragHelper.style.left = "-1000px";
_this._elem.parentElement.appendChild(_this._dragHelper);
event.dataTransfer.setDragImage(_this._dragHelper, event.offsetX, event.offsetY);
}
if (_this._dragEnabled) {
_this._elem.style.cursor = _this.effectCursor ? _this.effectCursor : _this._config.dragCursor;
} else {
_this._elem.style.cursor = _this._defaultCursor;
}
}
};
this._elem.ondragend = function(event) {
if (_this._elem.parentElement && _this._dragHelper) {
_this._elem.parentElement.removeChild(_this._dragHelper);
}
_this._onDragEnd(event);
_this._elem.style.cursor = _this._defaultCursor;
};
}
Object.defineProperty(AbstractComponent.prototype, "dragEnabled", {
get: function() {
return this._dragEnabled;
},
set: function(enabled) {
this._dragEnabled = !!enabled;
this._elem.draggable = this._dragEnabled;
},
enumerable: true,
configurable: true
});
AbstractComponent.prototype.detectChanges = function() {
var _this = this;
setTimeout(function() {
_this._cdr.detectChanges();
}, 250);
var define,
global = this || self,
GLOBAL = global;
var __decorate = this && this.__decorate || function (decorators, target, key, desc) {
var c = arguments.length,
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
AbstractComponent.prototype._onDragEnter = function(event) {
if (this._isDropAllowed) {
this._onDragEnterCallback(event);
}
var __metadata = this && this.__metadata || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
AbstractComponent.prototype._onDragOver = function(event) {
if (this._isDropAllowed) {
if (event.preventDefault) {
event.preventDefault();
var core_1 = $__require("@angular/core");
var core_2 = $__require("@angular/core");
var dnd_config_1 = $__require("./dnd.config");
var dnd_service_1 = $__require("./dnd.service");
var dnd_utils_1 = $__require("./dnd.utils");
var AbstractComponent = function () {
function AbstractComponent(elemRef, _dragDropService, _config, _cdr) {
var _this = this;
this._dragDropService = _dragDropService;
this._config = _config;
this._cdr = _cdr;
/**
* Whether the object is draggable. Default is true.
*/
this._dragEnabled = false;
/**
* Allows drop on this element
*/
this.dropEnabled = false;
this.dropZones = [];
this.cloneItem = false;
this._elem = elemRef.nativeElement;
//
// DROP events
//
this._elem.ondragenter = function (event) {
_this._onDragEnter(event);
};
this._elem.ondragover = function (event) {
_this._onDragOver(event);
//
if (event.dataTransfer != null) {
event.dataTransfer.dropEffect = _this._config.dropEffect.name;
}
return false;
};
this._elem.ondragleave = function (event) {
_this._onDragLeave(event);
};
this._elem.ondrop = function (event) {
_this._onDrop(event);
};
//
// Drag events
//
this._elem.ondragstart = function (event) {
// console.log('ondragstart', event.target);
_this._onDragStart(event);
//
if (event.dataTransfer != null) {
event.dataTransfer.setData('text', '');
// Change drag effect
event.dataTransfer.effectAllowed = _this.effectAllowed || _this._config.dragEffect.name;
// Change drag image
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;
event.dataTransfer.setDragImage(dragImage.imageElement, dragImage.x_offset, dragImage.y_offset);
} else if (_this.cloneItem) {
_this._dragHelper = _this._elem.cloneNode(true);
_this._dragHelper.classList.add('dnd-drag-item');
_this._dragHelper.style.position = "absolute";
_this._dragHelper.style.top = "0px";
_this._dragHelper.style.left = "-1000px";
_this._elem.parentElement.appendChild(_this._dragHelper);
event.dataTransfer.setDragImage(_this._dragHelper, event.offsetX, event.offsetY);
}
// Change drag cursor
if (_this._dragEnabled) {
_this._elem.style.cursor = _this.effectCursor ? _this.effectCursor : _this._config.dragCursor;
} else {
_this._elem.style.cursor = _this._defaultCursor;
}
}
};
this._elem.ondragend = function (event) {
if (_this._elem.parentElement && _this._dragHelper) {
_this._elem.parentElement.removeChild(_this._dragHelper);
}
// console.log('ondragend', event.target);
_this._onDragEnd(event);
// Restore style of dragged element
_this._elem.style.cursor = _this._defaultCursor;
};
}
this._onDragOverCallback(event);
}
};
AbstractComponent.prototype._onDragLeave = function(event) {
if (this._isDropAllowed) {
this._onDragLeaveCallback(event);
}
};
AbstractComponent.prototype._onDrop = function(event) {
if (this._isDropAllowed) {
if (event.preventDefault) {
event.preventDefault();
}
if (event.stopPropagation) {
event.stopPropagation();
}
this._onDropCallback(event);
this.detectChanges();
}
};
Object.defineProperty(AbstractComponent.prototype, "_isDropAllowed", {
get: function() {
if (this._dragDropService.isDragged && this.dropEnabled) {
if (this.allowDrop) {
return this.allowDrop(this._dragDropService.dragData);
}
if (this.dropZones.length === 0 && this._dragDropService.allowedDropZones.length === 0) {
return true;
}
for (var i = 0; i < this._dragDropService.allowedDropZones.length; i++) {
var dragZone = this._dragDropService.allowedDropZones[i];
if (this.dropZones.indexOf(dragZone) !== -1) {
return true;
Object.defineProperty(AbstractComponent.prototype, "dragEnabled", {
get: function () {
return this._dragEnabled;
},
set: function (enabled) {
this._dragEnabled = !!enabled;
this._elem.draggable = this._dragEnabled;
},
enumerable: true,
configurable: true
});
/******* Change detection ******/
AbstractComponent.prototype.detectChanges = function () {
var _this = this;
// Programmatically run change detection to fix issue in Safari
setTimeout(function () {
_this._cdr.detectChanges();
}, 250);
};
//****** Droppable *******//
AbstractComponent.prototype._onDragEnter = function (event) {
// console.log('ondragenter._isDropAllowed', this._isDropAllowed);
if (this._isDropAllowed) {
// event.preventDefault();
this._onDragEnterCallback(event);
}
}
}
return false;
},
enumerable: true,
configurable: true
});
AbstractComponent.prototype._onDragStart = function(event) {
if (this._dragEnabled) {
this._dragDropService.allowedDropZones = this.dropZones;
this._onDragStartCallback(event);
}
};
AbstractComponent.prototype._onDragOver = function (event) {
// // console.log('ondragover._isDropAllowed', this._isDropAllowed);
if (this._isDropAllowed) {
// The element is over the same source element - do nothing
if (event.preventDefault) {
// Necessary. Allows us to drop.
event.preventDefault();
}
this._onDragOverCallback(event);
}
};
AbstractComponent.prototype._onDragLeave = function (event) {
// console.log('ondragleave._isDropAllowed', this._isDropAllowed);
if (this._isDropAllowed) {
// event.preventDefault();
this._onDragLeaveCallback(event);
}
};
AbstractComponent.prototype._onDrop = function (event) {
// console.log('ondrop._isDropAllowed', this._isDropAllowed);
if (this._isDropAllowed) {
if (event.preventDefault) {
// Necessary. Allows us to drop.
event.preventDefault();
}
if (event.stopPropagation) {
// Necessary. Allows us to drop.
event.stopPropagation();
}
this._onDropCallback(event);
this.detectChanges();
}
};
Object.defineProperty(AbstractComponent.prototype, "_isDropAllowed", {
get: function () {
if (this._dragDropService.isDragged && this.dropEnabled) {
// First, if `allowDrop` is set, call it to determine whether the
// dragged element can be dropped here.
if (this.allowDrop) {
return this.allowDrop(this._dragDropService.dragData);
}
// Otherwise, use dropZones if they are set.
if (this.dropZones.length === 0 && this._dragDropService.allowedDropZones.length === 0) {
return true;
}
for (var i = 0; i < this._dragDropService.allowedDropZones.length; i++) {
var dragZone = this._dragDropService.allowedDropZones[i];
if (this.dropZones.indexOf(dragZone) !== -1) {
return true;
}
}
}
return false;
},
enumerable: true,
configurable: true
});
//*********** Draggable **********//
AbstractComponent.prototype._onDragStart = function (event) {
// console.log('ondragstart.dragEnabled', this._dragEnabled);
if (this._dragEnabled) {
this._dragDropService.allowedDropZones = this.dropZones;
// console.log('ondragstart.allowedDropZones', this._dragDropService.allowedDropZones);
this._onDragStartCallback(event);
}
};
AbstractComponent.prototype._onDragEnd = function (event) {
this._dragDropService.allowedDropZones = [];
// console.log('ondragend.allowedDropZones', this._dragDropService.allowedDropZones);
this._onDragEndCallback(event);
};
//**** Drop Callbacks ****//
AbstractComponent.prototype._onDragEnterCallback = function (event) {};
AbstractComponent.prototype._onDragOverCallback = function (event) {};
AbstractComponent.prototype._onDragLeaveCallback = function (event) {};
AbstractComponent.prototype._onDropCallback = function (event) {};
//**** Drag Callbacks ****//
AbstractComponent.prototype._onDragStartCallback = function (event) {};
AbstractComponent.prototype._onDragEndCallback = function (event) {};
AbstractComponent = __decorate([core_1.Injectable(), __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, core_1.ChangeDetectorRef])], AbstractComponent);
return AbstractComponent;
}();
exports.AbstractComponent = AbstractComponent;
return module.exports;
});
System.registerDynamic("index", ["@angular/core", "@angular/common", "./src/dnd.config", "./src/dnd.service", "./src/draggable.component", "./src/droppable.component", "./src/sortable.component", "./src/abstract.component"], true, function ($__require, exports, module) {
// Copyright (C) 2016 Sergey Akopkokhyants
// This project is licensed under the terms of the MIT license.
// https://github.com/akserg/ng2-dnd
"use strict";
var define,
global = this || self,
GLOBAL = global;
var __decorate = this && this.__decorate || function (decorators, target, key, desc) {
var c = arguments.length,
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
AbstractComponent.prototype._onDragEnd = function(event) {
this._dragDropService.allowedDropZones = [];
this._onDragEndCallback(event);
var __metadata = this && this.__metadata || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
AbstractComponent.prototype._onDragEnterCallback = function(event) {};
AbstractComponent.prototype._onDragOverCallback = function(event) {};
AbstractComponent.prototype._onDragLeaveCallback = function(event) {};
AbstractComponent.prototype._onDropCallback = function(event) {};
AbstractComponent.prototype._onDragStartCallback = function(event) {};
AbstractComponent.prototype._onDragEndCallback = function(event) {};
AbstractComponent = __decorate([core_1.Injectable(), __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, core_1.ChangeDetectorRef])], AbstractComponent);
return AbstractComponent;
}());
exports.AbstractComponent = AbstractComponent;
return module.exports;
});
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
var core_1 = $__require("@angular/core");
var common_1 = $__require("@angular/common");
var dnd_config_1 = $__require("./src/dnd.config");
var dnd_service_1 = $__require("./src/dnd.service");
var draggable_component_1 = $__require("./src/draggable.component");
var droppable_component_1 = $__require("./src/droppable.component");
var sortable_component_1 = $__require("./src/sortable.component");
__export($__require("./src/abstract.component"));
__export($__require("./src/dnd.config"));
__export($__require("./src/dnd.service"));
__export($__require("./src/draggable.component"));
__export($__require("./src/droppable.component"));
__export($__require("./src/sortable.component"));
exports.DND_PROVIDERS = [dnd_config_1.DragDropConfig, dnd_service_1.DragDropService, dnd_service_1.DragDropSortableService];
exports.DND_DIRECTIVES = [draggable_component_1.DraggableComponent, droppable_component_1.DroppableComponent, sortable_component_1.SortableContainer, sortable_component_1.SortableComponent];
var DndModule = function () {
function DndModule() {}
DndModule.forRoot = function () {
return {
ngModule: DndModule,
providers: [dnd_config_1.DragDropConfig, dnd_service_1.DragDropService, dnd_service_1.DragDropSortableService]
};
};
DndModule = __decorate([core_1.NgModule({
imports: [common_1.CommonModule],
declarations: [draggable_component_1.DraggableComponent, droppable_component_1.DroppableComponent, sortable_component_1.SortableContainer, sortable_component_1.SortableComponent],
exports: [draggable_component_1.DraggableComponent, droppable_component_1.DroppableComponent, sortable_component_1.SortableContainer, sortable_component_1.SortableComponent]
}), __metadata('design:paramtypes', [])], DndModule);
return DndModule;
}();
exports.DndModule = DndModule;
System.registerDynamic("index", ["./src/dnd.config", "./src/dnd.service", "./src/draggable.component", "./src/droppable.component", "./src/sortable.component", "./src/abstract.component"], true, function($__require, exports, module) {
"use strict";
;
var define,
global = this,
GLOBAL = this;
function __export(m) {
for (var p in m)
if (!exports.hasOwnProperty(p))
exports[p] = m[p];
}
var dnd_config_1 = $__require('./src/dnd.config');
var dnd_service_1 = $__require('./src/dnd.service');
var draggable_component_1 = $__require('./src/draggable.component');
var droppable_component_1 = $__require('./src/droppable.component');
var sortable_component_1 = $__require('./src/sortable.component');
__export($__require('./src/abstract.component'));
__export($__require('./src/dnd.config'));
__export($__require('./src/dnd.service'));
__export($__require('./src/draggable.component'));
__export($__require('./src/droppable.component'));
__export($__require('./src/sortable.component'));
exports.DND_PROVIDERS = [dnd_config_1.DragDropConfig, dnd_service_1.DragDropService, dnd_service_1.DragDropSortableService];
exports.DND_DIRECTIVES = [draggable_component_1.DraggableComponent, droppable_component_1.DroppableComponent, sortable_component_1.SortableContainer, sortable_component_1.SortableComponent];
return module.exports;
});
return module.exports;
});

2

bundles/ng2-dnd.min.js

@@ -1,2 +0,2 @@

System.registerDynamic("src/draggable.component",["@angular/core","./abstract.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=n<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--)(o=e[s])&&(i=(n<3?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){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},i=e("@angular/core"),s=e("@angular/core"),c=e("./abstract.component"),l=e("./dnd.config"),p=e("./dnd.service"),d=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),o([s.Input(),n("design:type",Object)],t.prototype,"dragImage",void 0),o([s.Input(),n("design:type",Boolean)],t.prototype,"cloneItem",void 0),t=o([s.Directive({selector:"[dnd-draggable]"}),n("design:paramtypes",[s.ElementRef,p.DragDropService,l.DragDropConfig,i.ChangeDetectorRef])],t)}(c.AbstractComponent);return t.DraggableComponent=d,r.exports}),System.registerDynamic("src/droppable.component",["@angular/core","./abstract.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=n<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--)(o=e[s])&&(i=(n<3?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){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},i=e("@angular/core"),s=e("@angular/core"),c=e("./abstract.component"),l=e("./dnd.config"),p=e("./dnd.service"),d=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,p.DragDropService,l.DragDropConfig,i.ChangeDetectorRef])],t)}(c.AbstractComponent);return t.DroppableComponent=d,r.exports}),System.registerDynamic("src/sortable.component",["@angular/core","./abstract.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=n<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--)(o=e[s])&&(i=(n<3?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){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},i=e("@angular/core"),s=e("@angular/core"),c=e("./abstract.component"),l=e("./dnd.config"),p=e("./dnd.service"),d=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];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()}},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,p.DragDropService,l.DragDropConfig,i.ChangeDetectorRef,p.DragDropSortableService])],t)}(c.AbstractComponent);t.SortableContainer=d;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,p.DragDropService,l.DragDropConfig,d,p.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 o,n=arguments.length,i=n<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--)(o=e[s])&&(i=(n<3?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){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},n=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([n.Injectable(),o("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([n.Injectable(),o("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([n.Injectable(),o("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 o,n=arguments.length,i=n<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--)(o=e[s])&&(i=(n<3?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){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},n=e("@angular/core"),i=e("./dnd.config"),s=e("./dnd.utils"),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){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([n.Injectable(),o("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 o(e){return void 0!==e&&null!==e}function n(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=o,t.isFunction=n,t.createImage=i,t.callFun=s,r.exports}),System.registerDynamic("src/abstract.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 o,n=arguments.length,i=n<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--)(o=e[s])&&(i=(n<3?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){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},n=e("@angular/core"),i=e("@angular/core"),s=e("./dnd.config"),c=e("./dnd.service"),l=e("./dnd.utils"),p=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.cloneItem=!1,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,l.isPresent(o.dragImage))if(l.isString(o.dragImage))e.dataTransfer.setDragImage(l.createImage(o.dragImage));else if(l.isFunction(o.dragImage))e.dataTransfer.setDragImage(l.callFun(o.dragImage));else{var t=o.dragImage;e.dataTransfer.setDragImage(t.imageElement,t.x_offset,t.y_offset)}else if(l.isPresent(o._config.dragImage)){var r=o._config.dragImage;e.dataTransfer.setDragImage(r.imageElement,r.x_offset,r.y_offset)}else o.cloneItem&&(o._dragHelper=o._elem.cloneNode(!0),o._dragHelper.classList.add("dnd-drag-item"),o._dragHelper.style.position="absolute",o._dragHelper.style.top="0px",o._dragHelper.style.left="-1000px",o._elem.parentElement.appendChild(o._dragHelper),e.dataTransfer.setDragImage(o._dragHelper,e.offsetX,e.offsetY));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._elem.parentElement&&o._dragHelper&&o._elem.parentElement.removeChild(o._dragHelper),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(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([n.Injectable(),o("design:paramtypes",[i.ElementRef,c.DragDropService,s.DragDropConfig,n.ChangeDetectorRef])],e)}();return t.AbstractComponent=p,r.exports}),System.registerDynamic("index",["./src/dnd.config","./src/dnd.service","./src/draggable.component","./src/droppable.component","./src/sortable.component","./src/abstract.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/draggable.component"),s=e("./src/droppable.component"),c=e("./src/sortable.component");return a(e("./src/abstract.component")),a(e("./src/dnd.config")),a(e("./src/dnd.service")),a(e("./src/draggable.component")),a(e("./src/droppable.component")),a(e("./src/sortable.component")),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/draggable.component",["@angular/core","./abstract.component","./dnd.config","./dnd.service"],!0,function(e,t,r){"use strict";var a=(this||self,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=n<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--)(o=e[s])&&(i=(n<3?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){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},i=e("@angular/core"),s=e("@angular/core"),c=e("./abstract.component"),l=e("./dnd.config"),p=e("./dnd.service"),d=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),o([s.Input(),n("design:type",Object)],t.prototype,"dragImage",void 0),o([s.Input(),n("design:type",Boolean)],t.prototype,"cloneItem",void 0),t=o([s.Directive({selector:"[dnd-draggable]"}),n("design:paramtypes",[s.ElementRef,p.DragDropService,l.DragDropConfig,i.ChangeDetectorRef])],t)}(c.AbstractComponent);return t.DraggableComponent=d,r.exports}),System.registerDynamic("src/droppable.component",["@angular/core","./abstract.component","./dnd.config","./dnd.service"],!0,function(e,t,r){"use strict";var a=(this||self,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=n<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--)(o=e[s])&&(i=(n<3?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){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},i=e("@angular/core"),s=e("@angular/core"),c=e("./abstract.component"),l=e("./dnd.config"),p=e("./dnd.service"),d=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,p.DragDropService,l.DragDropConfig,i.ChangeDetectorRef])],t)}(c.AbstractComponent);return t.DroppableComponent=d,r.exports}),System.registerDynamic("src/sortable.component",["@angular/core","./abstract.component","./dnd.config","./dnd.service"],!0,function(e,t,r){"use strict";var a=(this||self,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=n<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--)(o=e[s])&&(i=(n<3?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){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},i=e("@angular/core"),s=e("@angular/core"),c=e("./abstract.component"),l=e("./dnd.config"),p=e("./dnd.service"),d=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];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()}},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,p.DragDropService,l.DragDropConfig,i.ChangeDetectorRef,p.DragDropSortableService])],t)}(c.AbstractComponent);t.SortableContainer=d;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,p.DragDropService,l.DragDropConfig,d,p.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||self,this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=n<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--)(o=e[s])&&(i=(n<3?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){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},n=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([n.Injectable(),o("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([n.Injectable(),o("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([n.Injectable(),o("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||self,this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=n<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--)(o=e[s])&&(i=(n<3?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){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},n=e("@angular/core"),i=e("./dnd.config"),s=e("./dnd.utils"),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){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([n.Injectable(),o("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 o(e){return void 0!==e&&null!==e}function n(e){return"function"==typeof e}function i(e){var t=new HTMLImageElement;return t.src=e,t}function s(e){return e()}this||self;return t.isString=a,t.isPresent=o,t.isFunction=n,t.createImage=i,t.callFun=s,r.exports}),System.registerDynamic("src/abstract.component",["@angular/core","./dnd.config","./dnd.service","./dnd.utils"],!0,function(e,t,r){"use strict";var a=(this||self,this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=n<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--)(o=e[s])&&(i=(n<3?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){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},n=e("@angular/core"),i=e("@angular/core"),s=e("./dnd.config"),c=e("./dnd.service"),l=e("./dnd.utils"),p=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.cloneItem=!1,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,l.isPresent(o.dragImage))if(l.isString(o.dragImage))e.dataTransfer.setDragImage(l.createImage(o.dragImage));else if(l.isFunction(o.dragImage))e.dataTransfer.setDragImage(l.callFun(o.dragImage));else{var t=o.dragImage;e.dataTransfer.setDragImage(t.imageElement,t.x_offset,t.y_offset)}else if(l.isPresent(o._config.dragImage)){var r=o._config.dragImage;e.dataTransfer.setDragImage(r.imageElement,r.x_offset,r.y_offset)}else o.cloneItem&&(o._dragHelper=o._elem.cloneNode(!0),o._dragHelper.classList.add("dnd-drag-item"),o._dragHelper.style.position="absolute",o._dragHelper.style.top="0px",o._dragHelper.style.left="-1000px",o._elem.parentElement.appendChild(o._dragHelper),e.dataTransfer.setDragImage(o._dragHelper,e.offsetX,e.offsetY));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._elem.parentElement&&o._dragHelper&&o._elem.parentElement.removeChild(o._dragHelper),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(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([n.Injectable(),o("design:paramtypes",[i.ElementRef,c.DragDropService,s.DragDropConfig,n.ChangeDetectorRef])],e)}();return t.AbstractComponent=p,r.exports}),System.registerDynamic("index",["@angular/core","@angular/common","./src/dnd.config","./src/dnd.service","./src/draggable.component","./src/droppable.component","./src/sortable.component","./src/abstract.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=(this||self,this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=n<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--)(o=e[s])&&(i=(n<3?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){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},i=e("@angular/core"),s=e("@angular/common"),c=e("./src/dnd.config"),l=e("./src/dnd.service"),p=e("./src/draggable.component"),d=e("./src/droppable.component"),g=e("./src/sortable.component");a(e("./src/abstract.component")),a(e("./src/dnd.config")),a(e("./src/dnd.service")),a(e("./src/draggable.component")),a(e("./src/droppable.component")),a(e("./src/sortable.component")),t.DND_PROVIDERS=[c.DragDropConfig,l.DragDropService,l.DragDropSortableService],t.DND_DIRECTIVES=[p.DraggableComponent,d.DroppableComponent,g.SortableContainer,g.SortableComponent];var f=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[c.DragDropConfig,l.DragDropService,l.DragDropSortableService]}},e=o([i.NgModule({imports:[s.CommonModule],declarations:[p.DraggableComponent,d.DroppableComponent,g.SortableContainer,g.SortableComponent],exports:[p.DraggableComponent,d.DroppableComponent,g.SortableContainer,g.SortableComponent]}),n("design:paramtypes",[])],e)}();return t.DndModule=f,r.exports});
//# sourceMappingURL=bundles/ng2-dnd.min.js.map

4

index.d.ts

@@ -0,1 +1,2 @@

import { ModuleWithProviders } from "@angular/core";
export * from './src/abstract.component';

@@ -9,1 +10,4 @@ export * from './src/dnd.config';

export declare const DND_DIRECTIVES: any[];
export declare class DndModule {
static forRoot(): ModuleWithProviders;
}

33

index.js
// Copyright (C) 2016 Sergey Akopkokhyants
// This project is licensed under the terms of the MIT license.
// https://github.com/akserg/ng2-dnd
'use strict';
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
var core_1 = require("@angular/core");
var common_1 = require("@angular/common");
var dnd_config_1 = require('./src/dnd.config');

@@ -21,2 +32,22 @@ var dnd_service_1 = require('./src/dnd.service');

exports.DND_DIRECTIVES = [draggable_component_1.DraggableComponent, droppable_component_1.DroppableComponent, sortable_component_1.SortableContainer, sortable_component_1.SortableComponent];
var DndModule = (function () {
function DndModule() {
}
DndModule.forRoot = function () {
return {
ngModule: DndModule,
providers: [dnd_config_1.DragDropConfig, dnd_service_1.DragDropService, dnd_service_1.DragDropSortableService]
};
};
DndModule = __decorate([
core_1.NgModule({
imports: [common_1.CommonModule],
declarations: [draggable_component_1.DraggableComponent, droppable_component_1.DroppableComponent, sortable_component_1.SortableContainer, sortable_component_1.SortableComponent],
exports: [draggable_component_1.DraggableComponent, droppable_component_1.DroppableComponent, sortable_component_1.SortableContainer, sortable_component_1.SortableComponent]
}),
__metadata('design:paramtypes', [])
], DndModule);
return DndModule;
}());
exports.DndModule = DndModule;
//# sourceMappingURL=index.js.map

36

package.json
{
"name": "ng2-dnd",
"description": "Angular 2 Drag-and-Drop without dependencies",
"version": "1.13.1",
"version": "2.0.0",
"scripts": {

@@ -35,24 +35,24 @@ "test": "tsc && karma start",

"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.11",
"zone.js": "^0.6.17"
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.23"
},
"devDependencies": {
"@angular/common": "^2.0.0-rc.5",
"@angular/compiler": "^2.0.0-rc.5",
"@angular/core": "^2.0.0-rc.5",
"@angular/platform-browser": "^2.0.0-rc.5",
"@angular/platform-browser-dynamic": "^2.0.0-rc.5",
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"commitizen": "^2.7.6",
"cz-conventional-changelog": "^1.1.5",
"jasmine-core": "~2.3.4",
"karma": "~0.13.20",
"karma-chrome-launcher": "~0.2.2",
"karma-firefox-launcher": "~0.1.7",
"karma-jasmine": "~0.3.6",
"karma-typescript-preprocessor": "0.0.21",
"jasmine-core": "~2.5.1",
"karma": "~1.3.0",
"karma-chrome-launcher": "~2.0.0",
"karma-firefox-launcher": "~1.0.0",
"karma-htmlfile-reporter": "^0.3.4",
"karma-jasmine": "~1.0.2",
"semantic-release": "^4.3.5",
"systemjs": "~0.19.6",
"systemjs": "~0.19.27",
"systemjs-builder": "^0.15.6",
"typescript": "^1.8.7",
"typings": "^0.8.1",
"typescript": "^2.0.2",
"typings": "^1.3.3",
"uglify-js": "^2.6.2"

@@ -65,2 +65,2 @@ },

}
}
}

80

README.md

@@ -42,17 +42,48 @@ # 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)

Finally, you can use *ng2-dnd* in your Angular 2 project:
- Import `DND_PROVIDERS, DND_DIRECTIVES` from `ng2-dnd`;
- Use `DND_PROVIDERS` in the `providers` property of your application component;
- Add `DND_DIRECTIVES` to the `directives` property of your application component;
- Use `dnd-draggable`, `dnd-droppable`, `dnd-sortable` and `dnd-sortable-container` properties in template of your components.
- Inject style into your web page
#### 1. Update the markup
- Import the `style.css` into your web page
- Add `<ng2-dnd></ng2-dnd>` tag in template of your application component.
#### 2. Import the `DndModule`
Import `DndModule.forRoot()` in the NgModule of your application.
The `forRoot` method is a convention for modules that provide a singleton service.
```ts
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from '@angular/core';
import {DndModule} from 'ng2-dnd';
@NgModule({
imports: [
BrowserModule,
DndModule.forRoot()
],
bootstrap: [AppComponent]
})
export class AppModule {
}
```
If you have multiple NgModules and you use one as a shared NgModule (that you import in all of your other NgModules),
don't forget that you can use it to export the `DndModule` that you imported in order to avoid having to import it multiple times.
```ts
@NgModule({
imports: [
BrowserModule,
DndModule.forRoot()
],
exports: [BrowserModule, DndModule],
})
export class SharedModule {
}
```
#### 3. Use Drag-and-Drop operations with no code
```js
import {Component} from '@angular/core';
import {DND_PROVIDERS, DND_DIRECTIVES} from 'ng2-dnd';
@Component({
selector: 'app',
directives: [DND_DIRECTIVES],
providers: [DND_PROVIDERS]
template: `

@@ -93,3 +124,3 @@ <h4>Simple Drag-and-Drop</h4>

# Restriction Drag-and-Drop operations with drop zones
###$ 4. Restriction Drag-and-Drop operations with drop zones
You can use property *dropZones* (actually an array) to specify in which place you would like to drop the draggable element:

@@ -99,8 +130,5 @@

import {Component} from '@angular/core';
import {DND_PROVIDERS, DND_DIRECTIVES} from 'ng2-dnd';
@Component({
selector: 'app',
directives: [DND_DIRECTIVES],
providers: [DND_PROVIDERS]
template: `

@@ -156,3 +184,3 @@ <h4>Restricting Drag-and-Drop with zones</h4>

# Transfer custom data via Drag-and-Drop
#### 5. Transfer custom data via Drag-and-Drop
You can transfer data from draggable to droppable component via *dragData* property of Draggable component:

@@ -162,8 +190,5 @@

import {Component} from '@angular/core';
import {DND_PROVIDERS, DND_DIRECTIVES} from 'ng2-dnd';
@Component({
selector: 'app',
directives: [DND_DIRECTIVES],
providers: [DND_PROVIDERS]
template: `

@@ -219,3 +244,3 @@ <h4>Transfer custom data in Drag-and-Drop</h4>

# Use a custom function to determine where dropping is allowed
#### 6. Use a custom function to determine where dropping is allowed
For use-cases when a static set of `dropZone`s is not possible, a custom

@@ -231,8 +256,5 @@ function can be used to dynamically determine whether an item can be dropped or

import {Component} from '@angular/core';
import {DND_PROVIDERS, DND_DIRECTIVES} from 'ng2-dnd';
@Component({
selector: 'app',
directives: [DND_DIRECTIVES],
providers: [DND_PROVIDERS]
template: `

@@ -303,3 +325,3 @@ <h4>Use a custom function to determine where dropping is allowed</h4>

# Complex example (includes all shown above) with Drag-and-Drop
#### 7. Complex example (includes all shown above) with Drag-and-Drop
Here is an example of shopping backet with products adding via drag and drop operation:

@@ -309,8 +331,5 @@

import {Component} from '@angular/core';
import {DND_PROVIDERS, DND_DIRECTIVES} from 'ng2-dnd';
@Component({
selector: 'app',
directives: [DND_DIRECTIVES],
providers: [DND_PROVIDERS]
template: `

@@ -399,3 +418,3 @@ <h4>Shopping basket</h4>

# Simple sortable with Drag-and-Drop
#### 8. Simple sortable with Drag-and-Drop
Here is an example of simple sortable of favorite drinks moving in container via drag and drop operation:

@@ -405,8 +424,5 @@

import {Component} from '@angular/core';
import {DND_PROVIDERS, DND_DIRECTIVES} from 'ng2-dnd';
@Component({
selector: 'app',
directives: [DND_DIRECTIVES],
providers: [DND_PROVIDERS]
template: `

@@ -442,3 +458,3 @@ <h4>Simple sortable</h4>

# Multi list sortable with Drag-and-Drop
#### 9. Multi list sortable with Drag-and-Drop
Here is an example of multi list sortable of boxers moving in container and between containers via drag and drop operation:

@@ -448,8 +464,5 @@

import {Component} from '@angular/core';
import {DND_PROVIDERS, DND_DIRECTIVES} from 'ng2-dnd';
@Component({
selector: 'app',
directives: [DND_DIRECTIVES],
providers: [DND_PROVIDERS]
template: `

@@ -502,2 +515,3 @@ <h4>Multi list sortable</h4>

```
# Credits

@@ -504,0 +518,0 @@ - [Francesco Cina](https://github.com/ufoscout)

2

src/abstract.component.d.ts

@@ -78,3 +78,3 @@ import { ChangeDetectorRef } from '@angular/core';

private _onDrop(event);
private _isDropAllowed;
private readonly _isDropAllowed;
private _onDragStart(event);

@@ -81,0 +81,0 @@ private _onDragEnd(event);

2

src/dnd.service.d.ts

@@ -19,5 +19,5 @@ import { EventEmitter } from '@angular/core';

private _elem;
elem: HTMLElement;
readonly elem: HTMLElement;
constructor(_config: DragDropConfig);
markSortable(elem: HTMLElement): void;
}

15

tests/dnd.component.factory.js

@@ -12,5 +12,2 @@ "use strict";

var core_1 = require('@angular/core');
var draggable_component_1 = require('../src/draggable.component');
var droppable_component_1 = require('../src/droppable.component');
var sortable_component_1 = require('../src/sortable.component');
function triggerEvent(elem, eventName, eventType) {

@@ -76,4 +73,3 @@ var event = document.createEvent(eventType);

selector: 'container',
template: "\n<div id='dragIdOne' dnd-draggable [dropZones]=\"['zone-one']\" (onDragSuccess)=\"dragOneSuccessCallback($event)\"></div>\n<div id='dragIdTwo' dnd-draggable [dropZones]=\"['zone-two']\" (onDragSuccess)=\"dragTwoSuccessCallback($event)\"></div>\n<div id='dragIdOneTwo' dnd-draggable [dropZones]=\"['zone-one', 'zone-two']\" (onDragSuccess)=\"dragOneTwoSuccessCallback($event)\"></div>\n\n<div id='dropIdOne' dnd-droppable [dropZones]=\"['zone-one']\" (onDropSuccess)=\"dropOneSuccessCallback($event)\"></div>\n<div id='dropIdTwo' dnd-droppable [dropZones]=\"['zone-two']\" (onDropSuccess)=\"dropTwoSuccessCallback($event)\"></div>\n<div id='dropIdOneTwo' dnd-droppable [dropZones]=\"['zone-one', 'zone-two']\" (onDropSuccess)=\"dropOneTwoSuccessCallback($event)\"></div>\n",
directives: [draggable_component_1.DraggableComponent, droppable_component_1.DroppableComponent]
template: "\n<div id='dragIdOne' dnd-draggable [dropZones]=\"['zone-one']\" (onDragSuccess)=\"dragOneSuccessCallback($event)\"></div>\n<div id='dragIdTwo' dnd-draggable [dropZones]=\"['zone-two']\" (onDragSuccess)=\"dragTwoSuccessCallback($event)\"></div>\n<div id='dragIdOneTwo' dnd-draggable [dropZones]=\"['zone-one', 'zone-two']\" (onDragSuccess)=\"dragOneTwoSuccessCallback($event)\"></div>\n\n<div id='dropIdOne' dnd-droppable [dropZones]=\"['zone-one']\" (onDropSuccess)=\"dropOneSuccessCallback($event)\"></div>\n<div id='dropIdTwo' dnd-droppable [dropZones]=\"['zone-two']\" (onDropSuccess)=\"dropTwoSuccessCallback($event)\"></div>\n<div id='dropIdOneTwo' dnd-droppable [dropZones]=\"['zone-one', 'zone-two']\" (onDropSuccess)=\"dropOneTwoSuccessCallback($event)\"></div>\n"
}),

@@ -117,4 +113,3 @@ __metadata('design:paramtypes', [])

selector: 'container2',
template: "\n<div id='dragId' dnd-draggable [dragEnabled]=\"dragEnabled\" [dragData]=\"dragData\" [dropZones]=\"['test1']\" (onDragSuccess)=\"dragSuccessCallback($event)\"></div>\n<div id='dropId' dnd-droppable [dropZones]=\"['test1']\" (onDropSuccess)=\"dropSuccessCallback($event)\"></div>\n",
directives: [draggable_component_1.DraggableComponent, droppable_component_1.DroppableComponent]
template: "\n<div id='dragId' dnd-draggable [dragEnabled]=\"dragEnabled\" [dragData]=\"dragData\" [dropZones]=\"['test1']\" (onDragSuccess)=\"dragSuccessCallback($event)\"></div>\n<div id='dropId' dnd-droppable [dropZones]=\"['test1']\" (onDropSuccess)=\"dropSuccessCallback($event)\"></div>\n"
}),

@@ -137,4 +132,3 @@ __metadata('design:paramtypes', [])

selector: 'container3',
template: "\n<div>\n <ul class=\"list-group\" dnd-sortable-container [sortableData]=\"sortableList\">\n <li *ngFor=\"let item of sortableList; let i = index\" dnd-sortable [sortableIndex]=\"i\">{{item}}</li>\n </ul>\n</div>\n",
directives: [sortable_component_1.SortableContainer, sortable_component_1.SortableComponent]
template: "\n<div>\n <ul class=\"list-group\" dnd-sortable-container [sortableData]=\"sortableList\">\n <li *ngFor=\"let item of sortableList; let i = index\" dnd-sortable [sortableIndex]=\"i\">{{item}}</li>\n </ul>\n</div>\n"
}),

@@ -167,4 +161,3 @@ __metadata('design:paramtypes', [])

selector: 'container4',
template: "\n<div>\n <div id='single'>\n <ul class=\"list-group\" dnd-sortable-container [sortableData]=\"singleList\">\n <li *ngFor=\"let item of singleList; let i = index\" dnd-sortable [sortableIndex]=\"i\">{{item}}</li>\n </ul>\n </div>\n <div id='multiOne' dnd-sortable-container [dropZones]=\"['multiList']\" [sortableData]=\"multiOneList\">\n <ul class=\"list-group\" >\n <li *ngFor=\"let item of multiOneList; let i = index\" dnd-sortable [sortableIndex]=\"i\">{{item}}</li>\n </ul>\n </div>\n <div id='multiTwo' dnd-sortable-container [dropZones]=\"['multiList']\" [sortableData]=\"multiTwoList\">\n <ul class=\"list-group\" >\n <li *ngFor=\"let item of multiTwoList; let i = index\" dnd-sortable [sortableIndex]=\"i\">{{item}}</li>\n </ul>\n </div>\n</div>\n",
directives: [sortable_component_1.SortableContainer, sortable_component_1.SortableComponent]
template: "\n<div>\n <div id='single'>\n <ul class=\"list-group\" dnd-sortable-container [sortableData]=\"singleList\">\n <li *ngFor=\"let item of singleList; let i = index\" dnd-sortable [sortableIndex]=\"i\">{{item}}</li>\n </ul>\n </div>\n <div id='multiOne' dnd-sortable-container [dropZones]=\"['multiList']\" [sortableData]=\"multiOneList\">\n <ul class=\"list-group\" >\n <li *ngFor=\"let item of multiOneList; let i = index\" dnd-sortable [sortableIndex]=\"i\">{{item}}</li>\n </ul>\n </div>\n <div id='multiTwo' dnd-sortable-container [dropZones]=\"['multiList']\" [sortableData]=\"multiTwoList\">\n <ul class=\"list-group\" >\n <li *ngFor=\"let item of multiTwoList; let i = index\" dnd-sortable [sortableIndex]=\"i\">{{item}}</li>\n </ul>\n </div>\n</div>\n"
}),

@@ -171,0 +164,0 @@ __metadata('design:paramtypes', [])

439

tests/dnd.sortable.spec.js
"use strict";
var testing_1 = require('@angular/core/testing');
var testing_2 = require('@angular/platform-browser-dynamic/testing');
var dnd_config_1 = require('../src/dnd.config');
var sortable_component_1 = require('../src/sortable.component');
var dnd_service_1 = require('../src/dnd.service');
var dnd_component_factory_1 = require('./dnd.component.factory');
testing_1.TestBed.resetTestEnvironment();
testing_1.TestBed.initTestEnvironment(testing_2.BrowserDynamicTestingModule, testing_2.platformBrowserDynamicTesting());
function main() {
describe('Sortable Drag and Drop', function () {
var componentFixture;
var dragdropService;
var config;
var container;
var sortableService;
beforeEach(function () {
testing_1.TestBed.configureTestingModule({
declarations: [dnd_component_factory_1.Container3],
providers: [dnd_config_1.DragDropConfig,
dnd_service_1.DragDropService,
dnd_service_1.DragDropSortableService]
});
testing_1.TestBed.compileComponents();
describe('Sortable Drag and Drop', function () {
var componentFixture;
var dragdropService;
var config;
var container;
var sortableService;
beforeEach(function () {
testing_1.TestBed.configureTestingModule({
declarations: [sortable_component_1.SortableContainer, sortable_component_1.SortableComponent, dnd_component_factory_1.Container3],
providers: [dnd_config_1.DragDropConfig,
dnd_service_1.DragDropService,
dnd_service_1.DragDropSortableService]
});
beforeEach(testing_1.inject([dnd_config_1.DragDropConfig, dnd_service_1.DragDropService, dnd_service_1.DragDropSortableService], function (c, dd, ds) {
dragdropService = dd;
config = c;
sortableService = ds;
componentFixture = testing_1.TestBed.createComponent(dnd_component_factory_1.Container3);
componentFixture.detectChanges();
container = componentFixture.componentInstance;
}));
it('should be defined', function () {
expect(componentFixture).toBeDefined();
});
it('The elements of the list should be draggable', function () {
var values = ['one', 'two', 'three', 'four', 'five', 'six'];
container.sortableList = values;
componentFixture.detectChanges();
var ulElem = componentFixture.elementRef.nativeElement.querySelector('ul');
expect(ulElem).toBeDefined();
expect(ulElem.children.length).toBe(values.length);
for (var i = 0; i < ulElem.children.length; i++) {
var childElem = ulElem.children[i];
expect(childElem.attributes['draggable']).toBeTruthy();
}
});
it('It should sort in the same list', function () {
var values = ['one', 'two', 'three', 'four'];
container.sortableList = values;
componentFixture.detectChanges();
var ulElem = componentFixture.elementRef.nativeElement.querySelector('ul');
expect(ulElem).toBeDefined();
expect(ulElem.children.length).toBe(values.length);
expect(sortableService.sortableData).not.toBeDefined();
expect(sortableService.index).not.toBeDefined();
dnd_component_factory_1.triggerEvent(ulElem.children[0], 'dragstart', 'MouseEvent');
componentFixture.detectChanges();
expect(sortableService.sortableData).toBe(values);
expect(sortableService.index).toBe(0);
swap(ulElem.children, 0, 1);
componentFixture.detectChanges();
expect(values[0]).toBe('two');
expect(ulElem.children[0].textContent).toBe('two');
expect(values[1]).toBe('one');
expect(ulElem.children[1].textContent).toBe('one');
});
it('It should work with arbitrary objects', function () {
var elemOne = document.createElement('div');
var elemTwo = 'elemTwo';
var elemThree = { 'key': 'value' };
var values = [elemOne, elemTwo, elemThree];
container.sortableList = values;
componentFixture.detectChanges();
var ulElem = componentFixture.elementRef.nativeElement.querySelector('ul');
expect(ulElem).toBeDefined();
expect(ulElem.children.length).toBe(values.length);
swap(ulElem.children, 0, 1);
expect(values[0]).toBe(elemTwo);
expect(values[1]).toBe(elemOne);
swap(ulElem.children, 1, 2);
expect(values[1]).toBe(elemThree);
expect(values[2]).toBe(elemOne);
swap(ulElem.children, 0, 1);
expect(values[0]).toBe(elemThree);
expect(values[1]).toBe(elemTwo);
});
testing_1.TestBed.compileComponents();
});
describe('Multi List Sortable Drag and Drop', function () {
var componentFixture;
var dragdropService;
var config;
var container;
var sortableService;
beforeEach(function () {
testing_1.TestBed.configureTestingModule({
declarations: [dnd_component_factory_1.Container4],
providers: [dnd_config_1.DragDropConfig, dnd_service_1.DragDropService, dnd_service_1.DragDropSortableService]
});
testing_1.TestBed.compileComponents();
beforeEach(testing_1.inject([dnd_config_1.DragDropConfig, dnd_service_1.DragDropService, dnd_service_1.DragDropSortableService], function (c, dd, ds) {
dragdropService = dd;
config = c;
sortableService = ds;
componentFixture = testing_1.TestBed.createComponent(dnd_component_factory_1.Container3);
componentFixture.detectChanges();
container = componentFixture.componentInstance;
}));
it('should be defined', function () {
expect(componentFixture).toBeDefined();
});
it('The elements of the list should be draggable', function () {
var values = ['one', 'two', 'three', 'four', 'five', 'six'];
container.sortableList = values;
componentFixture.detectChanges();
var ulElem = componentFixture.elementRef.nativeElement.querySelector('ul');
expect(ulElem).toBeDefined();
expect(ulElem.children.length).toBe(values.length);
for (var i = 0; i < ulElem.children.length; i++) {
var childElem = ulElem.children[i];
expect(childElem.attributes['draggable']).toBeTruthy();
}
});
it('It should sort in the same list', function () {
var values = ['one', 'two', 'three', 'four'];
container.sortableList = values;
componentFixture.detectChanges();
var ulElem = componentFixture.elementRef.nativeElement.querySelector('ul');
expect(ulElem).toBeDefined();
expect(ulElem.children.length).toBe(values.length);
expect(sortableService.sortableData).not.toBeDefined();
expect(sortableService.index).not.toBeDefined();
dnd_component_factory_1.triggerEvent(ulElem.children[0], 'dragstart', 'MouseEvent');
componentFixture.detectChanges();
expect(sortableService.sortableData).toBe(values);
expect(sortableService.index).toBe(0);
swap(ulElem.children, 0, 1);
componentFixture.detectChanges();
expect(values[0]).toBe('two');
expect(ulElem.children[0].textContent).toBe('two');
expect(values[1]).toBe('one');
expect(ulElem.children[1].textContent).toBe('one');
});
it('It should work with arbitrary objects', function () {
var elemOne = document.createElement('div');
var elemTwo = 'elemTwo';
var elemThree = { 'key': 'value' };
var values = [elemOne, elemTwo, elemThree];
container.sortableList = values;
componentFixture.detectChanges();
var ulElem = componentFixture.elementRef.nativeElement.querySelector('ul');
expect(ulElem).toBeDefined();
expect(ulElem.children.length).toBe(values.length);
swap(ulElem.children, 0, 1);
expect(values[0]).toBe(elemTwo);
expect(values[1]).toBe(elemOne);
swap(ulElem.children, 1, 2);
expect(values[1]).toBe(elemThree);
expect(values[2]).toBe(elemOne);
swap(ulElem.children, 0, 1);
expect(values[0]).toBe(elemThree);
expect(values[1]).toBe(elemTwo);
});
});
describe('Multi List Sortable Drag and Drop', function () {
var componentFixture;
var dragdropService;
var config;
var container;
var sortableService;
beforeEach(function () {
testing_1.TestBed.configureTestingModule({
declarations: [sortable_component_1.SortableContainer, sortable_component_1.SortableComponent, dnd_component_factory_1.Container4],
providers: [dnd_config_1.DragDropConfig, dnd_service_1.DragDropService, dnd_service_1.DragDropSortableService]
});
beforeEach(testing_1.inject([dnd_config_1.DragDropConfig, dnd_service_1.DragDropService, dnd_service_1.DragDropSortableService], function (c, dd, ds) {
dragdropService = dd;
config = c;
sortableService = ds;
componentFixture = testing_1.TestBed.createComponent(dnd_component_factory_1.Container4);
componentFixture.detectChanges();
container = componentFixture.componentInstance;
}));
it('should be defined', function () {
expect(componentFixture).toBeDefined();
});
it('It should sort in the same list', function () {
var singleList = ['sOne', 'sTwo', 'sThree'];
var multiOneList = ['mOne', 'mTwo', 'mThree'];
var multiTwoList = ['mFour', 'mFive', 'mSix'];
container.singleList = singleList;
container.multiOneList = multiOneList;
container.multiTwoList = multiTwoList;
componentFixture.detectChanges();
var divElem = componentFixture.elementRef.nativeElement.querySelector('div');
expect(divElem).toBeDefined();
expect(divElem.children.length).toBe(3);
var singleElem = divElem.querySelector('#single ul');
swap(singleElem.children, 0, 1);
componentFixture.detectChanges();
expect(singleList[0]).toBe('sTwo');
expect(singleElem.children[0].textContent).toEqual('sTwo');
expect(singleList[1]).toBe('sOne');
expect(singleElem.children[1].textContent).toEqual('sOne');
var multiOneElem = divElem.querySelector('#multiOne ul');
swap(multiOneElem.children, 1, 2);
componentFixture.detectChanges();
expect(multiOneList[1]).toBe('mThree');
expect(multiOneElem.children[1].textContent).toEqual('mThree');
expect(multiOneList[2]).toBe('mTwo');
expect(multiOneElem.children[2].textContent).toEqual('mTwo');
var multiTwoElem = divElem.querySelector('#multiTwo ul');
swap(multiTwoElem.children, 1, 2);
componentFixture.detectChanges();
expect(multiTwoList[1]).toBe('mSix');
expect(multiTwoElem.children[1].textContent).toEqual('mSix');
expect(multiTwoList[2]).toBe('mFive');
expect(multiTwoElem.children[2].textContent).toEqual('mFive');
});
it('It should be possible to move items from list one to list two', function () {
var singleList = ['sOne', 'sTwo', 'sThree'];
var multiOneList = ['mOne', 'mTwo', 'mThree'];
var multiTwoList = ['mFour', 'mFive', 'mSix'];
container.singleList = singleList;
container.multiOneList = multiOneList;
container.multiTwoList = multiTwoList;
componentFixture.detectChanges();
var divElem = componentFixture.elementRef.nativeElement.querySelector('div');
expect(divElem).toBeDefined();
expect(divElem.children.length).toBe(3);
var multiOneElem = divElem.querySelector('#multiOne ul');
var multiTwoElem = divElem.querySelector('#multiTwo ul');
swapMultiple(multiOneElem.children, 0, multiTwoElem.children, 0);
componentFixture.detectChanges();
expect(multiOneList.length).toBe(2);
expect(multiTwoList.length).toBe(4);
expect(multiOneList[0]).toBe('mTwo');
expect(multiTwoList[0]).toBe('mOne');
expect(multiTwoList[1]).toBe('mFour');
});
it('It should not be possible to move items between lists not in the same sortable-zone', function () {
var singleList = ['sOne', 'sTwo', 'sThree'];
var multiOneList = ['mOne', 'mTwo', 'mThree'];
var multiTwoList = ['mFour', 'mFive', 'mSix'];
container.singleList = singleList;
container.multiOneList = multiOneList;
container.multiTwoList = multiTwoList;
componentFixture.detectChanges();
var divElem = componentFixture.elementRef.nativeElement.querySelector('div');
expect(divElem).toBeDefined();
expect(divElem.children.length).toBe(3);
var singleElem = divElem.querySelector('#single ul');
var multiOneElem = divElem.querySelector('#multiOne ul');
swapMultiple(singleElem.children, 0, multiOneElem.children, 0);
componentFixture.detectChanges();
expect(singleList.length).toBe(3);
expect(multiOneList.length).toBe(3);
expect(singleList[0]).toBe('sOne');
expect(multiOneList[0]).toBe('mOne');
});
it('When the list is empty the parent must handle dragenter events', function () {
var singleList = ['sOne', 'sTwo', 'sThree'];
var multiOneList = [];
var multiTwoList = ['mOne', 'mTwo', 'mThree', 'mFour', 'mFive', 'mSix'];
container.singleList = singleList;
container.multiOneList = multiOneList;
container.multiTwoList = multiTwoList;
componentFixture.detectChanges();
var divElem = componentFixture.elementRef.nativeElement.querySelector('div');
expect(divElem).toBeDefined();
expect(divElem.children.length).toBe(3);
var multiOneElem = divElem.querySelector('#multiOne');
var multiTwoUlElem = divElem.querySelector('#multiTwo ul');
dnd_component_factory_1.triggerEvent(multiTwoUlElem.children[3], 'dragstart', 'MouseEvent');
dnd_component_factory_1.triggerEvent(multiOneElem, 'dragenter', 'MouseEvent');
componentFixture.detectChanges();
expect(multiOneList.length).toBe(1);
expect(multiTwoList.length).toBe(5);
expect(multiTwoList[3]).toBe('mFive');
expect(multiOneList[0]).toBe('mFour');
});
it('When the list is NOT empty the parent must NOT handle dragenter events', function () {
var singleList = ['sOne', 'sTwo', 'sThree'];
var multiOneList = ['mOne'];
var multiTwoList = ['mTwo', 'mThree', 'mFour', 'mFive', 'mSix'];
container.singleList = singleList;
container.multiOneList = multiOneList;
container.multiTwoList = multiTwoList;
componentFixture.detectChanges();
var divElem = componentFixture.elementRef.nativeElement.querySelector('div');
expect(divElem).toBeDefined();
expect(divElem.children.length).toBe(3);
var multiOneElem = divElem.querySelector('#multiOne');
var multiTwoUlElem = divElem.querySelector('#multiTwo ul');
dnd_component_factory_1.triggerEvent(multiTwoUlElem.children[0], 'dragstart', 'MouseEvent');
dnd_component_factory_1.triggerEvent(multiOneElem, 'dragenter', 'MouseEvent');
componentFixture.detectChanges();
expect(multiOneList.length).toBe(1);
expect(multiTwoList.length).toBe(5);
expect(multiOneList[0]).toBe('mOne');
expect(multiTwoList[0]).toBe('mTwo');
});
testing_1.TestBed.compileComponents();
});
}
exports.main = main;
beforeEach(testing_1.inject([dnd_config_1.DragDropConfig, dnd_service_1.DragDropService, dnd_service_1.DragDropSortableService], function (c, dd, ds) {
dragdropService = dd;
config = c;
sortableService = ds;
componentFixture = testing_1.TestBed.createComponent(dnd_component_factory_1.Container4);
componentFixture.detectChanges();
container = componentFixture.componentInstance;
}));
it('should be defined', function () {
expect(componentFixture).toBeDefined();
});
it('It should sort in the same list', function () {
var singleList = ['sOne', 'sTwo', 'sThree'];
var multiOneList = ['mOne', 'mTwo', 'mThree'];
var multiTwoList = ['mFour', 'mFive', 'mSix'];
container.singleList = singleList;
container.multiOneList = multiOneList;
container.multiTwoList = multiTwoList;
componentFixture.detectChanges();
var divElem = componentFixture.elementRef.nativeElement.querySelector('div');
expect(divElem).toBeDefined();
expect(divElem.children.length).toBe(3);
var singleElem = divElem.querySelector('#single ul');
swap(singleElem.children, 0, 1);
componentFixture.detectChanges();
expect(singleList[0]).toBe('sTwo');
expect(singleElem.children[0].textContent).toEqual('sTwo');
expect(singleList[1]).toBe('sOne');
expect(singleElem.children[1].textContent).toEqual('sOne');
var multiOneElem = divElem.querySelector('#multiOne ul');
swap(multiOneElem.children, 1, 2);
componentFixture.detectChanges();
expect(multiOneList[1]).toBe('mThree');
expect(multiOneElem.children[1].textContent).toEqual('mThree');
expect(multiOneList[2]).toBe('mTwo');
expect(multiOneElem.children[2].textContent).toEqual('mTwo');
var multiTwoElem = divElem.querySelector('#multiTwo ul');
swap(multiTwoElem.children, 1, 2);
componentFixture.detectChanges();
expect(multiTwoList[1]).toBe('mSix');
expect(multiTwoElem.children[1].textContent).toEqual('mSix');
expect(multiTwoList[2]).toBe('mFive');
expect(multiTwoElem.children[2].textContent).toEqual('mFive');
});
it('It should be possible to move items from list one to list two', function () {
var singleList = ['sOne', 'sTwo', 'sThree'];
var multiOneList = ['mOne', 'mTwo', 'mThree'];
var multiTwoList = ['mFour', 'mFive', 'mSix'];
container.singleList = singleList;
container.multiOneList = multiOneList;
container.multiTwoList = multiTwoList;
componentFixture.detectChanges();
var divElem = componentFixture.elementRef.nativeElement.querySelector('div');
expect(divElem).toBeDefined();
expect(divElem.children.length).toBe(3);
var multiOneElem = divElem.querySelector('#multiOne ul');
var multiTwoElem = divElem.querySelector('#multiTwo ul');
swapMultiple(multiOneElem.children, 0, multiTwoElem.children, 0);
componentFixture.detectChanges();
expect(multiOneList.length).toBe(2);
expect(multiTwoList.length).toBe(4);
expect(multiOneList[0]).toBe('mTwo');
expect(multiTwoList[0]).toBe('mOne');
expect(multiTwoList[1]).toBe('mFour');
});
it('It should not be possible to move items between lists not in the same sortable-zone', function () {
var singleList = ['sOne', 'sTwo', 'sThree'];
var multiOneList = ['mOne', 'mTwo', 'mThree'];
var multiTwoList = ['mFour', 'mFive', 'mSix'];
container.singleList = singleList;
container.multiOneList = multiOneList;
container.multiTwoList = multiTwoList;
componentFixture.detectChanges();
var divElem = componentFixture.elementRef.nativeElement.querySelector('div');
expect(divElem).toBeDefined();
expect(divElem.children.length).toBe(3);
var singleElem = divElem.querySelector('#single ul');
var multiOneElem = divElem.querySelector('#multiOne ul');
swapMultiple(singleElem.children, 0, multiOneElem.children, 0);
componentFixture.detectChanges();
expect(singleList.length).toBe(3);
expect(multiOneList.length).toBe(3);
expect(singleList[0]).toBe('sOne');
expect(multiOneList[0]).toBe('mOne');
});
it('When the list is empty the parent must handle dragenter events', function () {
var singleList = ['sOne', 'sTwo', 'sThree'];
var multiOneList = [];
var multiTwoList = ['mOne', 'mTwo', 'mThree', 'mFour', 'mFive', 'mSix'];
container.singleList = singleList;
container.multiOneList = multiOneList;
container.multiTwoList = multiTwoList;
componentFixture.detectChanges();
var divElem = componentFixture.elementRef.nativeElement.querySelector('div');
expect(divElem).toBeDefined();
expect(divElem.children.length).toBe(3);
var multiOneElem = divElem.querySelector('#multiOne');
var multiTwoUlElem = divElem.querySelector('#multiTwo ul');
dnd_component_factory_1.triggerEvent(multiTwoUlElem.children[3], 'dragstart', 'MouseEvent');
dnd_component_factory_1.triggerEvent(multiOneElem, 'dragenter', 'MouseEvent');
componentFixture.detectChanges();
expect(multiOneList.length).toBe(1);
expect(multiTwoList.length).toBe(5);
expect(multiTwoList[3]).toBe('mFive');
expect(multiOneList[0]).toBe('mFour');
});
it('When the list is NOT empty the parent must NOT handle dragenter events', function () {
var singleList = ['sOne', 'sTwo', 'sThree'];
var multiOneList = ['mOne'];
var multiTwoList = ['mTwo', 'mThree', 'mFour', 'mFive', 'mSix'];
container.singleList = singleList;
container.multiOneList = multiOneList;
container.multiTwoList = multiTwoList;
componentFixture.detectChanges();
var divElem = componentFixture.elementRef.nativeElement.querySelector('div');
expect(divElem).toBeDefined();
expect(divElem.children.length).toBe(3);
var multiOneElem = divElem.querySelector('#multiOne');
var multiTwoUlElem = divElem.querySelector('#multiTwo ul');
dnd_component_factory_1.triggerEvent(multiTwoUlElem.children[0], 'dragstart', 'MouseEvent');
dnd_component_factory_1.triggerEvent(multiOneElem, 'dragenter', 'MouseEvent');
componentFixture.detectChanges();
expect(multiOneList.length).toBe(1);
expect(multiTwoList.length).toBe(5);
expect(multiOneList[0]).toBe('mOne');
expect(multiTwoList[0]).toBe('mTwo');
});
});
function swap(nodes, firstNodeId, secondNodeId) {

@@ -233,0 +228,0 @@ swapMultiple(nodes, firstNodeId, nodes, secondNodeId);

262

tests/dnd.with.draggable.data.spec.js
"use strict";
var testing_1 = require('@angular/core/testing');
var testing_2 = require('@angular/platform-browser-dynamic/testing');
var dnd_config_1 = require('../src/dnd.config');
var draggable_component_1 = require('../src/draggable.component');
var droppable_component_1 = require('../src/droppable.component');
var dnd_service_1 = require('../src/dnd.service');
var dnd_component_factory_1 = require('./dnd.component.factory');
testing_1.TestBed.resetTestEnvironment();
testing_1.TestBed.initTestEnvironment(testing_2.BrowserDynamicTestingModule, testing_2.platformBrowserDynamicTesting());
function main() {
describe('Drag and Drop without draggable data', function () {
var componentFixture;
var dragdropService;
var config;
var container;
beforeEach(function () {
testing_1.TestBed.configureTestingModule({
declarations: [dnd_component_factory_1.Container2],
providers: [dnd_config_1.DragDropConfig, dnd_service_1.DragDropService]
});
testing_1.TestBed.compileComponents();
describe('Drag and Drop without draggable data', function () {
var componentFixture;
var dragdropService;
var config;
var container;
beforeEach(function () {
testing_1.TestBed.configureTestingModule({
declarations: [draggable_component_1.DraggableComponent, droppable_component_1.DroppableComponent, dnd_component_factory_1.Container2],
providers: [dnd_config_1.DragDropConfig, dnd_service_1.DragDropService]
});
beforeEach(testing_1.inject([dnd_config_1.DragDropConfig, dnd_service_1.DragDropService], function (c, dd) {
dragdropService = dd;
config = c;
componentFixture = testing_1.TestBed.createComponent(dnd_component_factory_1.Container2);
componentFixture.detectChanges();
container = componentFixture.componentInstance;
}));
it('should be defined', function () {
expect(componentFixture).toBeDefined();
testing_1.TestBed.compileComponents();
});
beforeEach(testing_1.inject([dnd_config_1.DragDropConfig, dnd_service_1.DragDropService], function (c, dd) {
dragdropService = dd;
config = c;
componentFixture = testing_1.TestBed.createComponent(dnd_component_factory_1.Container2);
componentFixture.detectChanges();
container = componentFixture.componentInstance;
}));
it('should be defined', function () {
expect(componentFixture).toBeDefined();
});
it('It should add the "draggable" attribute', function (done) {
var dragElem = componentFixture.elementRef.nativeElement.querySelector('#dragId');
expect(dragElem).toBeDefined();
expect(dragElem.attributes['draggable']).toBeTruthy();
done();
});
it('Drag events should add/remove the draggable data to/from the DragDropService', function (done) {
var dragElem = componentFixture.elementRef.nativeElement.querySelector('#dragId');
expect(dragdropService.dragData).not.toBeDefined();
dnd_component_factory_1.triggerEvent(dragElem, 'dragstart', 'MouseEvent');
componentFixture.detectChanges();
expect(dragdropService.dragData).toBeDefined();
dnd_component_factory_1.triggerEvent(dragElem, 'dragend', 'MouseEvent');
componentFixture.detectChanges();
expect(dragdropService.dragData).toBeNull();
done();
});
it('Drag events should add/remove the expected classes to the target element', function (done) {
var dragElem = componentFixture.elementRef.nativeElement.querySelector('#dragId');
expect(dragElem.classList.contains(config.onDragStartClass)).toEqual(false);
dnd_component_factory_1.triggerEvent(dragElem, 'dragstart', 'MouseEvent');
componentFixture.detectChanges();
expect(dragElem.classList.contains(config.onDragStartClass)).toEqual(true);
dnd_component_factory_1.triggerEvent(dragElem, 'dragend', 'MouseEvent');
componentFixture.detectChanges();
expect(dragElem.classList.contains(config.onDragStartClass)).toEqual(false);
done();
});
it('Drag start event should not be activated if drag is not enabled', function (done) {
container.dragEnabled = false;
componentFixture.detectChanges();
var dragElem = componentFixture.elementRef.nativeElement.querySelector('#dragId');
expect(dragdropService.dragData).not.toBeDefined();
expect(dragElem.classList.contains(config.onDragStartClass)).toEqual(false);
dnd_component_factory_1.triggerEvent(dragElem, 'dragstart', 'MouseEvent');
componentFixture.detectChanges();
expect(dragdropService.dragData).not.toBeDefined();
expect(dragElem.classList.contains(config.onDragStartClass)).toEqual(false);
done();
});
it('Drop events should add/remove the expected classes to the target element', function (done) {
var dragElem = componentFixture.elementRef.nativeElement.querySelector('#dragId');
var dropElem = componentFixture.elementRef.nativeElement.querySelector('#dropId');
expect(dropElem.classList.contains(config.onDragEnterClass)).toEqual(false);
expect(dropElem.classList.contains(config.onDragOverClass)).toEqual(false);
// The drop events should not work before a drag is started on an element with the correct drop-zone
dnd_component_factory_1.triggerEvent(dropElem, 'dragenter', 'MouseEvent');
componentFixture.detectChanges();
expect(dropElem.classList.contains(config.onDragEnterClass)).toEqual(false);
dnd_component_factory_1.triggerEvent(dragElem, 'dragstart', 'MouseEvent');
dnd_component_factory_1.triggerEvent(dropElem, 'dragenter', 'MouseEvent');
componentFixture.detectChanges();
expect(dropElem.classList.contains(config.onDragEnterClass)).toEqual(true);
expect(dropElem.classList.contains(config.onDragOverClass)).toEqual(false);
dnd_component_factory_1.triggerEvent(dropElem, 'dragover', 'MouseEvent');
componentFixture.detectChanges();
expect(dropElem.classList.contains(config.onDragEnterClass)).toEqual(true);
expect(dropElem.classList.contains(config.onDragOverClass)).toEqual(true);
dnd_component_factory_1.triggerEvent(dropElem, 'dragleave', 'MouseEvent');
componentFixture.detectChanges();
expect(dropElem.classList.contains(config.onDragEnterClass)).toEqual(false);
expect(dropElem.classList.contains(config.onDragOverClass)).toEqual(false);
dnd_component_factory_1.triggerEvent(dropElem, 'dragover', 'MouseEvent');
dnd_component_factory_1.triggerEvent(dropElem, 'dragenter', 'MouseEvent');
dnd_component_factory_1.triggerEvent(dropElem, 'drop', 'MouseEvent');
componentFixture.detectChanges();
expect(dropElem.classList.contains(config.onDragEnterClass)).toEqual(false);
expect(dropElem.classList.contains(config.onDragOverClass)).toEqual(false);
done();
});
it('Drop event should activate the onDropSuccess and onDragSuccess callbacks', function (done) {
var dragElem = componentFixture.elementRef.nativeElement.querySelector('#dragId');
var dropElem = componentFixture.elementRef.nativeElement.querySelector('#dropId');
var dragCount = 0, dropCount = 0;
container.drag.subscribe(function ($event) {
dragCount++;
}, function (error) { }, function () {
// Here is a function called when stream is complete
expect(dragCount).toBe(0);
});
it('It should add the "draggable" attribute', function (done) {
var dragElem = componentFixture.elementRef.nativeElement.querySelector('#dragId');
expect(dragElem).toBeDefined();
expect(dragElem.attributes['draggable']).toBeTruthy();
done();
container.drop.subscribe(function ($event) {
dropCount++;
}, function (error) { }, function () {
// Here is a function called when stream is complete
expect(dropCount).toBe(0);
});
it('Drag events should add/remove the draggable data to/from the DragDropService', function (done) {
var dragElem = componentFixture.elementRef.nativeElement.querySelector('#dragId');
expect(dragdropService.dragData).not.toBeDefined();
dnd_component_factory_1.triggerEvent(dragElem, 'dragstart', 'MouseEvent');
componentFixture.detectChanges();
expect(dragdropService.dragData).toBeDefined();
dnd_component_factory_1.triggerEvent(dragElem, 'dragend', 'MouseEvent');
componentFixture.detectChanges();
expect(dragdropService.dragData).toBeNull();
done();
dnd_component_factory_1.triggerEvent(dragElem, 'dragstart', 'MouseEvent');
dnd_component_factory_1.triggerEvent(dragElem, 'dragend', 'MouseEvent');
dnd_component_factory_1.triggerEvent(dragElem, 'dragstart', 'MouseEvent');
dnd_component_factory_1.triggerEvent(dropElem, 'drop', 'MouseEvent');
componentFixture.detectChanges();
done();
});
it('The onDropSuccess callback should receive the dragged data as paramenter', function (done) {
var dragData = { id: 1, name: 'Hello' };
container.dragData = dragData;
componentFixture.detectChanges();
var dragElem = componentFixture.elementRef.nativeElement.querySelector('#dragId');
var dropElem = componentFixture.elementRef.nativeElement.querySelector('#dropId');
container.drag.subscribe(function ($event) {
expect($event.dragData).toBe(dragData);
});
it('Drag events should add/remove the expected classes to the target element', function (done) {
var dragElem = componentFixture.elementRef.nativeElement.querySelector('#dragId');
expect(dragElem.classList.contains(config.onDragStartClass)).toEqual(false);
dnd_component_factory_1.triggerEvent(dragElem, 'dragstart', 'MouseEvent');
componentFixture.detectChanges();
expect(dragElem.classList.contains(config.onDragStartClass)).toEqual(true);
dnd_component_factory_1.triggerEvent(dragElem, 'dragend', 'MouseEvent');
componentFixture.detectChanges();
expect(dragElem.classList.contains(config.onDragStartClass)).toEqual(false);
done();
container.drop.subscribe(function ($event) {
expect($event.dragData).toBe(dragData);
});
it('Drag start event should not be activated if drag is not enabled', function (done) {
container.dragEnabled = false;
componentFixture.detectChanges();
var dragElem = componentFixture.elementRef.nativeElement.querySelector('#dragId');
expect(dragdropService.dragData).not.toBeDefined();
expect(dragElem.classList.contains(config.onDragStartClass)).toEqual(false);
dnd_component_factory_1.triggerEvent(dragElem, 'dragstart', 'MouseEvent');
componentFixture.detectChanges();
expect(dragdropService.dragData).not.toBeDefined();
expect(dragElem.classList.contains(config.onDragStartClass)).toEqual(false);
done();
});
it('Drop events should add/remove the expected classes to the target element', function (done) {
var dragElem = componentFixture.elementRef.nativeElement.querySelector('#dragId');
var dropElem = componentFixture.elementRef.nativeElement.querySelector('#dropId');
expect(dropElem.classList.contains(config.onDragEnterClass)).toEqual(false);
expect(dropElem.classList.contains(config.onDragOverClass)).toEqual(false);
// The drop events should not work before a drag is started on an element with the correct drop-zone
dnd_component_factory_1.triggerEvent(dropElem, 'dragenter', 'MouseEvent');
componentFixture.detectChanges();
expect(dropElem.classList.contains(config.onDragEnterClass)).toEqual(false);
dnd_component_factory_1.triggerEvent(dragElem, 'dragstart', 'MouseEvent');
dnd_component_factory_1.triggerEvent(dropElem, 'dragenter', 'MouseEvent');
componentFixture.detectChanges();
expect(dropElem.classList.contains(config.onDragEnterClass)).toEqual(true);
expect(dropElem.classList.contains(config.onDragOverClass)).toEqual(false);
dnd_component_factory_1.triggerEvent(dropElem, 'dragover', 'MouseEvent');
componentFixture.detectChanges();
expect(dropElem.classList.contains(config.onDragEnterClass)).toEqual(true);
expect(dropElem.classList.contains(config.onDragOverClass)).toEqual(true);
dnd_component_factory_1.triggerEvent(dropElem, 'dragleave', 'MouseEvent');
componentFixture.detectChanges();
expect(dropElem.classList.contains(config.onDragEnterClass)).toEqual(false);
expect(dropElem.classList.contains(config.onDragOverClass)).toEqual(false);
dnd_component_factory_1.triggerEvent(dropElem, 'dragover', 'MouseEvent');
dnd_component_factory_1.triggerEvent(dropElem, 'dragenter', 'MouseEvent');
dnd_component_factory_1.triggerEvent(dropElem, 'drop', 'MouseEvent');
componentFixture.detectChanges();
expect(dropElem.classList.contains(config.onDragEnterClass)).toEqual(false);
expect(dropElem.classList.contains(config.onDragOverClass)).toEqual(false);
done();
});
it('Drop event should activate the onDropSuccess and onDragSuccess callbacks', function (done) {
var dragElem = componentFixture.elementRef.nativeElement.querySelector('#dragId');
var dropElem = componentFixture.elementRef.nativeElement.querySelector('#dropId');
var dragCount = 0, dropCount = 0;
container.drag.subscribe(function ($event) {
dragCount++;
}, function (error) { }, function () {
// Here is a function called when stream is complete
expect(dragCount).toBe(0);
});
container.drop.subscribe(function ($event) {
dropCount++;
}, function (error) { }, function () {
// Here is a function called when stream is complete
expect(dropCount).toBe(0);
});
dnd_component_factory_1.triggerEvent(dragElem, 'dragstart', 'MouseEvent');
dnd_component_factory_1.triggerEvent(dragElem, 'dragend', 'MouseEvent');
dnd_component_factory_1.triggerEvent(dragElem, 'dragstart', 'MouseEvent');
dnd_component_factory_1.triggerEvent(dropElem, 'drop', 'MouseEvent');
componentFixture.detectChanges();
done();
});
it('The onDropSuccess callback should receive the dragged data as paramenter', function (done) {
var dragData = { id: 1, name: 'Hello' };
container.dragData = dragData;
componentFixture.detectChanges();
var dragElem = componentFixture.elementRef.nativeElement.querySelector('#dragId');
var dropElem = componentFixture.elementRef.nativeElement.querySelector('#dropId');
container.drag.subscribe(function ($event) {
expect($event.dragData).toBe(dragData);
});
container.drop.subscribe(function ($event) {
expect($event.dragData).toBe(dragData);
});
dnd_component_factory_1.triggerEvent(dragElem, 'dragstart', 'MouseEvent');
dnd_component_factory_1.triggerEvent(dropElem, 'drop', 'MouseEvent');
componentFixture.detectChanges();
done();
});
dnd_component_factory_1.triggerEvent(dragElem, 'dragstart', 'MouseEvent');
dnd_component_factory_1.triggerEvent(dropElem, 'drop', 'MouseEvent');
componentFixture.detectChanges();
done();
});
}
exports.main = main;
});
//# sourceMappingURL=dnd.with.draggable.data.spec.js.map

204

tests/dnd.without.draggable.data.spec.js
"use strict";
var testing_1 = require('@angular/core/testing');
var testing_2 = require('@angular/platform-browser-dynamic/testing');
var dnd_config_1 = require('../src/dnd.config');
var draggable_component_1 = require('../src/draggable.component');
var droppable_component_1 = require('../src/droppable.component');
var dnd_service_1 = require('../src/dnd.service');
var dnd_component_factory_1 = require('./dnd.component.factory');
testing_1.TestBed.resetTestEnvironment();
testing_1.TestBed.initTestEnvironment(testing_2.BrowserDynamicTestingModule, testing_2.platformBrowserDynamicTesting());
function main() {
describe('Drag and Drop without draggable data', function () {
var componentFixture;
var dragdropService;
var config;
var container;
beforeEach(function () {
testing_1.TestBed.configureTestingModule({
declarations: [dnd_component_factory_1.Container],
providers: [dnd_config_1.DragDropConfig, dnd_service_1.DragDropService]
});
testing_1.TestBed.compileComponents();
describe('Drag and Drop without draggable data', function () {
var componentFixture;
var dragdropService;
var config;
var container;
beforeEach(function () {
testing_1.TestBed.configureTestingModule({
declarations: [draggable_component_1.DraggableComponent, droppable_component_1.DroppableComponent, dnd_component_factory_1.Container],
providers: [dnd_config_1.DragDropConfig, dnd_service_1.DragDropService]
});
beforeEach(testing_1.inject([dnd_config_1.DragDropConfig, dnd_service_1.DragDropService], function (c, dd) {
dragdropService = dd;
config = c;
componentFixture = testing_1.TestBed.createComponent(dnd_component_factory_1.Container);
componentFixture.detectChanges();
container = componentFixture.componentInstance;
}));
it('should be defined', function () {
expect(componentFixture).toBeDefined();
testing_1.TestBed.compileComponents();
});
beforeEach(testing_1.inject([dnd_config_1.DragDropConfig, dnd_service_1.DragDropService], function (c, dd) {
dragdropService = dd;
config = c;
componentFixture = testing_1.TestBed.createComponent(dnd_component_factory_1.Container);
componentFixture.detectChanges();
container = componentFixture.componentInstance;
}));
it('should be defined', function () {
expect(componentFixture).toBeDefined();
});
it('Drop events should not be activated on the wrong drop-zone', function (done) {
var dragElemOne = componentFixture.elementRef.nativeElement.querySelector('#dragIdOne');
var dropElemTwo = componentFixture.elementRef.nativeElement.querySelector('#dropIdTwo');
dnd_component_factory_1.triggerEvent(dragElemOne, 'dragstart', 'MouseEvent');
dnd_component_factory_1.triggerEvent(dropElemTwo, 'dragenter', 'MouseEvent');
componentFixture.detectChanges();
expect(dropElemTwo.classList.contains(config.onDragEnterClass)).toEqual(false);
dnd_component_factory_1.triggerEvent(dropElemTwo, 'dragover', 'MouseEvent');
componentFixture.detectChanges();
expect(dropElemTwo.classList.contains(config.onDragOverClass)).toEqual(false);
var dragCount = 0, dropCount = 0;
container.dragOne.subscribe(function ($event) {
dragCount++;
}, function (error) { }, function () {
// Here is a function called when stream is complete
expect(dragCount).toBe(0);
});
it('Drop events should not be activated on the wrong drop-zone', function (done) {
var dragElemOne = componentFixture.elementRef.nativeElement.querySelector('#dragIdOne');
var dropElemTwo = componentFixture.elementRef.nativeElement.querySelector('#dropIdTwo');
dnd_component_factory_1.triggerEvent(dragElemOne, 'dragstart', 'MouseEvent');
dnd_component_factory_1.triggerEvent(dropElemTwo, 'dragenter', 'MouseEvent');
componentFixture.detectChanges();
expect(dropElemTwo.classList.contains(config.onDragEnterClass)).toEqual(false);
dnd_component_factory_1.triggerEvent(dropElemTwo, 'dragover', 'MouseEvent');
componentFixture.detectChanges();
expect(dropElemTwo.classList.contains(config.onDragOverClass)).toEqual(false);
var dragCount = 0, dropCount = 0;
container.dragOne.subscribe(function ($event) {
dragCount++;
}, function (error) { }, function () {
// Here is a function called when stream is complete
expect(dragCount).toBe(0);
});
container.dropTwo.subscribe(function ($event) {
dropCount++;
}, function (error) { }, function () {
// Here is a function called when stream is complete
expect(dropCount).toBe(0);
});
dnd_component_factory_1.triggerEvent(dropElemTwo, 'drop', 'MouseEvent');
componentFixture.detectChanges();
done();
container.dropTwo.subscribe(function ($event) {
dropCount++;
}, function (error) { }, function () {
// Here is a function called when stream is complete
expect(dropCount).toBe(0);
});
it('Drop events should be activated on the same drop-zone', function (done) {
var dragElemOne = componentFixture.elementRef.nativeElement.querySelector('#dragIdOne');
var dropElemOne = componentFixture.elementRef.nativeElement.querySelector('#dropIdOne');
dnd_component_factory_1.triggerEvent(dragElemOne, 'dragstart', 'MouseEvent');
dnd_component_factory_1.triggerEvent(dropElemOne, 'dragenter', 'MouseEvent');
componentFixture.detectChanges();
expect(dropElemOne.classList.contains(config.onDragEnterClass)).toEqual(true);
dnd_component_factory_1.triggerEvent(dropElemOne, 'dragover', 'MouseEvent');
componentFixture.detectChanges();
expect(dropElemOne.classList.contains(config.onDragOverClass)).toEqual(true);
var dragCount = 0, dropCount = 0;
container.dragOne.subscribe(function ($event) {
dragCount++;
}, function (error) { }, function () {
// Here is a function called when stream is complete
expect(dragCount).toBe(1);
});
container.dropOne.subscribe(function ($event) {
dropCount++;
}, function (error) { }, function () {
// Here is a function called when stream is complete
expect(dropCount).toBe(1);
});
dnd_component_factory_1.triggerEvent(dropElemOne, 'drop', 'MouseEvent');
componentFixture.detectChanges();
done();
dnd_component_factory_1.triggerEvent(dropElemTwo, 'drop', 'MouseEvent');
componentFixture.detectChanges();
done();
});
it('Drop events should be activated on the same drop-zone', function (done) {
var dragElemOne = componentFixture.elementRef.nativeElement.querySelector('#dragIdOne');
var dropElemOne = componentFixture.elementRef.nativeElement.querySelector('#dropIdOne');
dnd_component_factory_1.triggerEvent(dragElemOne, 'dragstart', 'MouseEvent');
dnd_component_factory_1.triggerEvent(dropElemOne, 'dragenter', 'MouseEvent');
componentFixture.detectChanges();
expect(dropElemOne.classList.contains(config.onDragEnterClass)).toEqual(true);
dnd_component_factory_1.triggerEvent(dropElemOne, 'dragover', 'MouseEvent');
componentFixture.detectChanges();
expect(dropElemOne.classList.contains(config.onDragOverClass)).toEqual(true);
var dragCount = 0, dropCount = 0;
container.dragOne.subscribe(function ($event) {
dragCount++;
}, function (error) { }, function () {
// Here is a function called when stream is complete
expect(dragCount).toBe(1);
});
it('Drop events on multiple drop-zone', function (done) {
var dragElemOneTwo = componentFixture.elementRef.nativeElement.querySelector('#dragIdOneTwo');
var dropElemOneTwo = componentFixture.elementRef.nativeElement.querySelector('#dropIdOneTwo');
dnd_component_factory_1.triggerEvent(dragElemOneTwo, 'dragstart', 'MouseEvent');
dnd_component_factory_1.triggerEvent(dropElemOneTwo, 'dragenter', 'MouseEvent');
componentFixture.detectChanges();
expect(dropElemOneTwo.classList.contains(config.onDragEnterClass)).toEqual(true);
dnd_component_factory_1.triggerEvent(dropElemOneTwo, 'dragover', 'MouseEvent');
componentFixture.detectChanges();
expect(dropElemOneTwo.classList.contains(config.onDragOverClass)).toEqual(true);
var dragCount = 0, dropCount = 0;
container.dragOne.subscribe(function ($event) {
dragCount++;
}, function (error) { }, function () {
// Here is a function called when stream is complete
expect(dragCount).toBe(1);
});
container.dropOne.subscribe(function ($event) {
dropCount++;
}, function (error) { }, function () {
// Here is a function called when stream is complete
expect(dropCount).toBe(1);
});
dnd_component_factory_1.triggerEvent(dropElemOneTwo, 'drop', 'MouseEvent');
componentFixture.detectChanges();
done();
container.dropOne.subscribe(function ($event) {
dropCount++;
}, function (error) { }, function () {
// Here is a function called when stream is complete
expect(dropCount).toBe(1);
});
dnd_component_factory_1.triggerEvent(dropElemOne, 'drop', 'MouseEvent');
componentFixture.detectChanges();
done();
});
}
exports.main = main;
it('Drop events on multiple drop-zone', function (done) {
var dragElemOneTwo = componentFixture.elementRef.nativeElement.querySelector('#dragIdOneTwo');
var dropElemOneTwo = componentFixture.elementRef.nativeElement.querySelector('#dropIdOneTwo');
dnd_component_factory_1.triggerEvent(dragElemOneTwo, 'dragstart', 'MouseEvent');
dnd_component_factory_1.triggerEvent(dropElemOneTwo, 'dragenter', 'MouseEvent');
componentFixture.detectChanges();
expect(dropElemOneTwo.classList.contains(config.onDragEnterClass)).toEqual(true);
dnd_component_factory_1.triggerEvent(dropElemOneTwo, 'dragover', 'MouseEvent');
componentFixture.detectChanges();
expect(dropElemOneTwo.classList.contains(config.onDragOverClass)).toEqual(true);
var dragCount = 0, dropCount = 0;
container.dragOne.subscribe(function ($event) {
dragCount++;
}, function (error) { }, function () {
// Here is a function called when stream is complete
expect(dragCount).toBe(1);
});
container.dropOne.subscribe(function ($event) {
dropCount++;
}, function (error) { }, function () {
// Here is a function called when stream is complete
expect(dropCount).toBe(1);
});
dnd_component_factory_1.triggerEvent(dropElemOneTwo, 'drop', 'MouseEvent');
componentFixture.detectChanges();
done();
});
});
//# sourceMappingURL=dnd.without.draggable.data.spec.js.map
tests/dnd.sortable.spec.d.ts→tests/dnd.sortable.spec.d.ts
tests/dnd.with.draggable.data.spec.d.ts→tests/dnd.with.draggable.data.spec.d.ts
tests/dnd.without.draggable.data.spec.d.ts→tests/dnd.without.draggable.data.spec.d.ts
.npmignore

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc